:root{
    --bg:#FAF9F7; --surface:#FFFFFF; --surface-2:#F1F2F4; --line:#E4E5E8;
    --text:#23201E; --text-soft:#5E5852; --text-mute:#8C867F;

    /* Marka renkleri — tema değişse de sabit kalır */
    --brown:#3B1513; --brown-2:#571F1A; --brown-deep:#2A0F0D;
    --gold:#E2A72C; --gold-hi:#F6CB5A; --gold-deep:#B9861F;
    --steel:#2B2E31; --on-brown:#F6EFE6; --on-brown-soft:#D8C6B4;
    --wa:#25D366; --wa-dark:#1FB457;

    --r:14px; --r-sm:9px; --r-lg:22px;
    --maxw:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --shadow:0 1px 2px rgba(20,15,12,.04), 0 10px 30px rgba(20,15,12,.06);
    --shadow-lg:0 20px 60px rgba(20,15,12,.14);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#15110E; --surface:#1E1915; --surface-2:#241E19; --line:#352C25;
      --text:#F3EEE8; --text-soft:#CBBFB2; --text-mute:#9A8E82;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
      --shadow-lg:0 24px 64px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#15110E; --surface:#1E1915; --surface-2:#241E19; --line:#352C25;
    --text:#F3EEE8; --text-soft:#CBBFB2; --text-mute:#9A8E82;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
    --shadow-lg:0 24px 64px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  h1,h2,h3,h4{font-family:"Archivo",sans-serif; line-height:1.12; margin:0; letter-spacing:-.02em}
  .ic{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:"Archivo"; font-weight:700;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep)}
  .eyebrow::before{content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); border-radius:2px}
  .lead{color:var(--text-soft); font-size:1.06rem}

  /* ---------- Açılış animasyonu (intro) ---------- */
  html.intro-lock{overflow:hidden}
  .intro{position:fixed; inset:0; z-index:200; display:none; place-items:center; overflow:hidden;
    background:radial-gradient(60% 60% at 50% 38%, rgba(226,167,44,.18), transparent 62%), linear-gradient(160deg,#3B1513 0%, #2A0F0D 100%)}
  .intro.play{display:grid; animation:introOut .65s var(--ease) 1.95s forwards}
  .intro-inner{display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px}
  .intro-emblem{position:relative; width:132px; height:132px; display:grid; place-items:center; animation:embIn .85s var(--ease) both}
  .intro-mark{width:96px; height:96px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
  .intro-ring{position:absolute; inset:0; width:132px; height:132px; transform:rotate(-90deg)}
  .intro-ring circle{fill:none; stroke:var(--gold-hi); stroke-width:2.4; stroke-linecap:round; opacity:.9;
    stroke-dasharray:352; stroke-dashoffset:352; animation:ringDraw 1.25s var(--ease) .25s forwards}
  .intro-word{font-family:"Archivo"; font-weight:900; font-size:2.5rem; letter-spacing:.14em; color:var(--on-brown);
    margin-top:24px; opacity:0; animation:introUp .7s var(--ease) .5s forwards}
  .intro-sub{font-family:"Archivo"; font-weight:600; font-size:.68rem; letter-spacing:.3em; color:var(--gold-hi);
    margin-top:9px; opacity:0; animation:introUp .7s var(--ease) .72s forwards}
  .intro-line{display:block; width:0; height:2px; border-radius:2px; margin-top:16px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:introLine .8s var(--ease) .9s forwards}
  @keyframes embIn{from{opacity:0; transform:scale(.55)} to{opacity:1; transform:scale(1)}}
  @keyframes ringDraw{to{stroke-dashoffset:0}}
  @keyframes introUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
  @keyframes introLine{from{width:0} to{width:190px}}
  @keyframes introOut{to{opacity:0; visibility:hidden; transform:scale(1.05)}}
  @media (prefers-reduced-motion:reduce){ .intro{display:none} }

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:9px; font-family:"Archivo"; font-weight:700; font-size:.95rem;
    padding:13px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.25s var(--ease); white-space:nowrap}
  .btn .ic{width:19px;height:19px}
  .btn-wa{background:var(--wa); color:#08320f}
  .btn-wa:hover{background:var(--wa-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,211,102,.32)}
  .btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#3a2a06; box-shadow:0 8px 22px rgba(226,167,44,.28)}
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(226,167,44,.4)}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px)}
  .btn-light{background:var(--on-brown); color:var(--brown)}
  .btn-light:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.25)}
  .btn-outline-light{background:transparent; color:var(--on-brown); border-color:rgba(246,239,230,.32)}
  .btn-outline-light:hover{border-color:var(--gold); color:var(--gold-hi)}

  /* ---------- Emblem ---------- */
  .emblem{display:inline-flex}
  .emblem svg{width:100%; height:100%; display:block}

  /* ---------- Header ---------- */
  header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 82%, transparent);
    backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:.3s var(--ease)}
  header.site.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 20px rgba(20,15,12,.06)}
  .hdr{display:flex; align-items:center; gap:18px; height:70px}
  .brand{display:flex; align-items:center; gap:12px; flex:none; margin-right:auto}
  .brand .emblem{width:42px; height:42px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
  .brand .name{font-family:"Archivo"; font-weight:800; font-size:1.16rem; letter-spacing:.02em; display:block; line-height:1}
  .brand .sub{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-mute); font-weight:600}
  nav.main{display:flex; gap:4px}
  .nav-link{position:relative; font-family:"Archivo"; font-weight:600; font-size:.93rem; color:var(--text-soft);
    padding:9px 14px; border-radius:9px; transition:.2s}
  .nav-link::after{content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:var(--gold);
    transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); border-radius:2px}
  .nav-link:hover{color:var(--text)}
  .nav-link:hover::after{transform:scaleX(1)}
  .nav-link.current{color:var(--text)}
  .nav-link.current::after{transform:scaleX(1)}
  .hdr-side{display:flex; align-items:center; gap:12px}
  .hdr-phone{display:inline-flex; align-items:center; gap:8px; font-family:"Archivo"; font-weight:700; font-size:.92rem; color:var(--text); padding:6px 4px}
  .hdr-phone .ic{width:18px;height:18px; color:var(--gold-deep)}
  .burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:var(--surface);
    align-items:center; justify-content:center; cursor:pointer; color:var(--text)}

  /* Mobile menu */
  .mobile-menu{position:fixed; inset:70px 0 auto 0; z-index:55; background:var(--surface); border-bottom:1px solid var(--line);
    padding:14px 22px 22px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease); box-shadow:var(--shadow-lg)}
  body.menu-open .mobile-menu{transform:none; opacity:1; pointer-events:auto}
  .mobile-menu a.m-link{display:flex; align-items:center; justify-content:space-between; font-family:"Archivo"; font-weight:700; font-size:1.05rem;
    padding:14px 6px; border-bottom:1px solid var(--line); color:var(--text)}
  .mobile-menu a.m-link .ic{width:18px;height:18px;color:var(--text-mute)}
  .mobile-menu .m-cta{display:flex; gap:10px; margin-top:16px}
  .mobile-menu .m-cta .btn{flex:1; justify-content:center}

  /* ---------- Pages ---------- */
  .page{display:none}
  .page.active{display:block; animation:pageIn .5s var(--ease)}
  @keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  section{padding:76px 0}
  .sec-head{max-width:640px; margin-bottom:34px}
  .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; margin:12px 0 12px}
  .sec-head.center{margin-left:auto; margin-right:auto; text-align:center}

  /* Page banner (secondary pages) */
  .pbanner{position:relative; background:
      radial-gradient(120% 140% at 85% -20%, rgba(226,167,44,.14), transparent 55%),
      linear-gradient(160deg,var(--brown) 0%, var(--brown-deep) 100%);
    color:var(--on-brown); padding:64px 0 60px; overflow:hidden; border-bottom:3px solid var(--gold)}
  .pbanner .emblem{position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:280px; height:280px; opacity:.12}
  .pbanner h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:900; margin:12px 0 10px}
  .pbanner p{max-width:560px; color:var(--on-brown-soft); font-size:1.06rem; margin:0}
  .pbanner .eyebrow{color:var(--gold-hi)}
  .pbanner .eyebrow::before{background:linear-gradient(90deg,var(--gold-hi),transparent)}
  .crumbs{display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--on-brown-soft); margin-bottom:6px; font-weight:600}
  .crumbs a:hover{color:var(--gold-hi)}

  /* ---------- HERO (home) ---------- */
  .hero{position:relative; padding:60px 0 70px; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:0;
    background:radial-gradient(70% 90% at 88% 8%, rgba(226,167,44,.10), transparent 60%); pointer-events:none}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:900; margin:16px 0 18px}
  .hero h1 em{font-style:normal; color:var(--gold-deep)}
  .hero .lead{max-width:520px; margin-bottom:26px}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
  .hero-chips{display:flex; flex-wrap:wrap; gap:8px 18px}
  .hero-chips span{display:inline-flex; align-items:center; gap:7px; font-size:.9rem; color:var(--text-soft); font-weight:600}
  .hero-chips .ic{width:17px;height:17px; color:var(--wa-dark)}

  /* Showroom panel */
  .showroom{position:relative; border-radius:var(--r-lg); padding:30px; color:var(--on-brown);
    background:linear-gradient(155deg,var(--brown-2) 0%, var(--brown) 45%, var(--brown-deep) 100%);
    box-shadow:var(--shadow-lg); overflow:hidden; isolation:isolate; animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
  .showroom::after{content:""; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); transform:rotate(18deg);
    animation:sweep 5.5s ease-in-out infinite}
  @keyframes sweep{0%{left:-40%} 55%,100%{left:130%}}
  .showroom .sh-top{display:flex; align-items:center; gap:16px; margin-bottom:22px}
  .showroom .sh-emb{width:66px; height:66px; flex:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
  .showroom .sh-top b{font-family:"Archivo"; font-weight:800; font-size:1.15rem; display:block; letter-spacing:.03em}
  .showroom .sh-top span{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-brown-soft)}
  .sh-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .sh-cell{position:relative; border-radius:13px; overflow:hidden; min-height:90px;
    border:1px solid rgba(246,239,230,.14); background-size:cover; background-position:center;
    display:flex; align-items:flex-end; transition:.25s var(--ease)}
  .sh-cell::after{content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(18,9,7,.9) 0%, rgba(18,9,7,.25) 55%, rgba(18,9,7,.04) 100%)}
  .sh-cell:hover{transform:translateY(-3px); border-color:rgba(226,167,44,.5)}
  .sh-cell small{position:relative; z-index:1; display:block; width:100%; padding:9px 8px;
    font-family:"Archivo"; font-weight:700; font-size:.76rem; color:#fff; text-align:center}
  .gtile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .gtile .gcap{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:10px;
    font-family:"Archivo"; font-weight:700; font-size:.85rem; color:#fff; text-align:center;
    background:linear-gradient(to top, rgba(18,9,7,.88), transparent)}
  .sh-foot{display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px;
    border-top:1px solid rgba(246,239,230,.14); font-size:.82rem; color:var(--on-brown-soft)}
  .sh-foot .ic{width:16px;height:16px; color:var(--gold-hi)}

  /* ---------- Brand value strip ---------- */
  .valueband{background:linear-gradient(135deg,var(--brown) 0%, var(--brown-deep) 100%); color:var(--on-brown); padding:0}
  .valueband .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
  .vitem{padding:34px 24px; display:flex; align-items:center; gap:14px; border-right:1px solid rgba(246,239,230,.12)}
  .vitem:last-child{border-right:none}
  .vitem .vic{width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
    background:rgba(226,167,44,.16); color:var(--gold-hi)}
  .vitem .vic .ic{width:24px;height:24px}
  .vitem b{font-family:"Archivo"; font-weight:700; font-size:1rem; display:block}
  .vitem small{color:var(--on-brown-soft); font-size:.82rem}

  /* ---------- Category cards ---------- */
  .cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
  .catc{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:24px 20px 22px; transition:.28s var(--ease); overflow:hidden}
  .catc::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%;
    background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
  .catc:hover{border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-4px)}
  .catc:hover::before{transform:scaleX(1)}
  .catc .plate{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
    background:linear-gradient(160deg, color-mix(in srgb,var(--gold) 20%, var(--surface)), var(--surface-2)); color:var(--brown)}
  :root[data-theme="dark"] .catc .plate, :root:not([data-theme="light"]) .catc .plate{color:var(--gold-hi)}
  @media (prefers-color-scheme: dark){.catc .plate{color:var(--gold-hi)}}
  .catc .plate .ic{width:28px;height:28px; stroke-width:1.6}
  .catc h3{font-size:1.06rem; font-weight:700; margin-bottom:6px}
  .catc p{font-size:.86rem; color:var(--text-soft); margin:0 0 12px; min-height:38px}
  .catc .more{display:inline-flex; align-items:center; gap:6px; font-family:"Archivo"; font-weight:700; font-size:.82rem; color:var(--gold-deep)}
  .catc .more .ic{width:15px;height:15px; transition:transform .25s}
  .catc:hover .more .ic{transform:translateX(4px)}

  /* ---------- Product cards ---------- */
  .filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px}
  .filter-tab{font-family:"Archivo"; font-weight:600; font-size:.88rem; padding:9px 16px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:.22s var(--ease)}
  .filter-tab:hover{border-color:var(--gold); color:var(--text)}
  .filter-tab.active{background:var(--brown); border-color:var(--brown); color:var(--on-brown)}
  .prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .product{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden; transition:.28s var(--ease)}
  .product:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:transparent}
  .product .pimg{position:relative; aspect-ratio:4/3; display:grid; place-items:center;
    background:
      radial-gradient(90% 90% at 50% 12%, rgba(226,167,44,.16), transparent 60%),
      linear-gradient(160deg,var(--surface-2), var(--surface));
    border-bottom:1px solid var(--line); overflow:hidden}
  .product .pimg .ic{width:60px;height:60px; color:var(--brown); stroke-width:1.4; transition:transform .4s var(--ease)}
  :root[data-theme="dark"] .product .pimg .ic, :root:not([data-theme="light"]) .product .pimg .ic{color:var(--gold-hi)}
  @media (prefers-color-scheme: dark){.product .pimg .ic{color:var(--gold-hi)}}
  .product:hover .pimg .ic{transform:scale(1.12) rotate(-2deg)}
  .pimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
  .product:hover .pimg img{transform:scale(1.06)}
  .product .chip{z-index:2}
  .burger .ic-shut{display:none}
  body.menu-open .burger .ic-open{display:none}
  body.menu-open .burger .ic-shut{display:block}
  :root[data-theme="light"] .catc .plate,
  :root[data-theme="light"] .gtile .ic,
  :root[data-theme="light"] .ba-after .ba-ph .ic{color:var(--brown)}
  .product .chip{position:absolute; top:10px; left:10px; font-family:"Archivo"; font-weight:700; font-size:.66rem;
    letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px;
    background:color-mix(in srgb,var(--brown) 90%, transparent); color:var(--on-brown)}
  .product .pbody{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1}
  .product h3{font-size:1.02rem; font-weight:700; margin-bottom:6px}
  .product p{font-size:.85rem; color:var(--text-soft); margin:0 0 14px; flex:1}
  .product .pwa{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Archivo"; font-weight:700;
    font-size:.84rem; padding:10px 14px; border-radius:10px; background:var(--surface-2); color:var(--text); transition:.22s var(--ease); border:1px solid transparent}
  .product .pwa .ic{width:17px;height:17px; color:var(--wa-dark)}
  .product .pwa:hover{background:var(--wa); color:#08320f}
  .product .pwa:hover .ic{color:#08320f}

  .note-card{margin-top:24px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r);
    padding:22px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
  .note-card .ic{width:30px;height:30px; color:var(--gold-deep)}
  .note-card b{font-family:"Archivo"; font-size:1.04rem}
  .note-card p{margin:2px 0 0; color:var(--text-soft); font-size:.9rem}
  .note-card .btn{margin-left:auto}

  /* ---------- Feature cards (why us) ---------- */
  .whyband{background:
      radial-gradient(90% 120% at 10% 0%, rgba(226,167,44,.12), transparent 55%),
      linear-gradient(160deg,var(--brown) 0%, var(--brown-deep) 100%); color:var(--on-brown); position:relative; overflow:hidden}
  .whyband .emblem{position:absolute; left:-70px; bottom:-70px; width:300px; height:300px; opacity:.10}
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .feat{background:rgba(255,255,255,.05); border:1px solid rgba(246,239,230,.14); border-radius:var(--r); padding:24px 22px; transition:.26s var(--ease)}
  .feat:hover{background:rgba(226,167,44,.1); border-color:rgba(226,167,44,.34); transform:translateY(-4px)}
  .feat .fic{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
    background:rgba(226,167,44,.16); color:var(--gold-hi)}
  .feat .fic .ic{width:25px;height:25px}
  .feat h3{font-size:1.06rem; font-weight:700; margin-bottom:7px}
  .feat p{margin:0; color:var(--on-brown-soft); font-size:.9rem}

  /* ---------- About ---------- */
  .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
  .about-txt p{color:var(--text-soft); margin:0 0 16px}
  .checklist{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px}
  .checklist li{display:flex; gap:12px; align-items:flex-start; font-weight:500}
  .checklist li .ic{width:22px;height:22px; color:var(--wa-dark); flex:none; margin-top:2px}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px; text-align:left; transition:.25s var(--ease)}
  .stat:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow)}
  .stat .ic{width:26px;height:26px; color:var(--gold-deep); margin-bottom:12px}
  .stat b{font-family:"Archivo"; font-weight:800; font-size:1.12rem; display:block; line-height:1.15}
  .stat small{color:var(--text-mute); font-size:.82rem; font-weight:600; letter-spacing:.02em}

  /* Process steps */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:6px}
  .step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 20px 22px}
  .step .num{font-family:"Archivo"; font-weight:900; font-size:2.4rem; line-height:1; color:transparent;
    -webkit-text-stroke:1.5px var(--gold-deep); opacity:.5; margin-bottom:10px}
  .step h3{font-size:1.02rem; font-weight:700; margin-bottom:6px}
  .step p{margin:0; color:var(--text-soft); font-size:.86rem}

  /* ---------- Gallery ---------- */
  .video-slot{position:relative; border-radius:var(--r-lg); overflow:hidden; margin-bottom:22px;
    background:linear-gradient(150deg,var(--brown-2),var(--brown-deep)); color:var(--on-brown); aspect-ratio:16/7;
    display:grid; place-items:center; border:1px solid rgba(246,239,230,.14)}
  .video-slot .emblem{position:absolute; right:-30px; bottom:-40px; width:220px; height:220px; opacity:.1}
  .play{width:76px; height:76px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px;
    background:rgba(246,239,230,.14); border:2px solid var(--gold-hi); transition:.25s var(--ease)}
  .video-slot:hover .play{background:var(--gold); transform:scale(1.05)}
  .play .ic{width:30px;height:30px; color:var(--gold-hi); fill:var(--gold-hi); stroke:none; margin-left:4px}
  .video-slot:hover .play .ic{color:#3a2a06; fill:#3a2a06}
  .video-slot .vtext{text-align:center; position:relative; z-index:1}
  .video-slot .vtext b{font-family:"Archivo"; font-weight:800; font-size:1.1rem; display:block}
  .video-slot .vtext small{color:var(--on-brown-soft); letter-spacing:.06em}
  .video-wrap{border-radius:var(--r-lg); border:1px solid rgba(246,239,230,.14); padding:22px; display:flex; justify-content:center;
    background:radial-gradient(70% 70% at 50% 28%, rgba(226,167,44,.14), transparent 60%), linear-gradient(150deg,var(--brown-2),var(--brown-deep))}
  .video-el{width:100%; max-width:360px; aspect-ratio:478/850; height:auto; display:block; border-radius:16px; background:#000; box-shadow:var(--shadow-lg)}
  .video-wide{width:100%; aspect-ratio:16/9; height:auto; display:block; border-radius:var(--r-lg); background:#000; box-shadow:var(--shadow-lg); border:1px solid rgba(246,239,230,.14); object-fit:cover}

  .gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  .gtile{position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
    background:
      radial-gradient(90% 90% at 50% 20%, rgba(226,167,44,.14), transparent 60%),
      linear-gradient(160deg,var(--surface-2),var(--surface));
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; text-align:center; transition:.26s var(--ease)}
  .gtile:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold)}
  .gtile .ic{width:38px;height:38px; color:var(--brown); stroke-width:1.4; margin-bottom:10px}
  :root[data-theme="dark"] .gtile .ic, :root:not([data-theme="light"]) .gtile .ic{color:var(--gold-hi)}
  @media (prefers-color-scheme: dark){.gtile .ic{color:var(--gold-hi)}}
  .gtile b{font-family:"Archivo"; font-weight:700; font-size:.9rem; color:var(--text)}
  .gtile .tag{position:absolute; top:10px; right:10px; font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    background:color-mix(in srgb,var(--gold) 22%, var(--surface)); color:var(--gold-deep); padding:4px 8px; border-radius:999px}

  /* ---------- Gallery sub-sections + Before/After ---------- */
  .gsub{margin:46px 0 22px}
  .gsub .eyebrow{margin-bottom:8px}
  .gsub h2{font-size:clamp(1.4rem,2.8vw,1.9rem); font-weight:800; margin:8px 0 8px}
  .gsub p{color:var(--text-soft); margin:0; max-width:640px; font-size:.96rem}
  .ba-grid{display:grid; grid-template-columns:1fr; gap:18px}
  .ba{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--shadow); user-select:none; touch-action:pan-y; --pos:50%}
  .ba-layer{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden}
  .ba-layer img{width:100%; height:100%; object-fit:cover; display:block}
  .ba-after{background:radial-gradient(90% 90% at 50% 15%, rgba(226,167,44,.18), transparent 60%), linear-gradient(160deg,var(--surface-2),var(--surface))}
  .ba-before{background:linear-gradient(160deg,#2f2b28,#201c1a); clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
  .ba-ph{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:16px}
  .ba-ph .ic{width:44px;height:44px; stroke-width:1.4}
  .ba-after .ba-ph .ic{color:var(--brown)}
  :root[data-theme="dark"] .ba-after .ba-ph .ic, :root:not([data-theme="light"]) .ba-after .ba-ph .ic{color:var(--gold-hi)}
  @media (prefers-color-scheme: dark){.ba-after .ba-ph .ic{color:var(--gold-hi)}}
  .ba-ph b{font-family:"Archivo"; font-weight:700; font-size:.92rem; color:var(--text)}
  .ba-before .ba-ph .ic{color:#c9c0b6}
  .ba-ph .ba-before-txt{color:#d8d0c6}
  .ba-tag{position:absolute; top:12px; font-family:"Archivo"; font-weight:800; font-size:.66rem; letter-spacing:.12em;
    padding:5px 10px; border-radius:999px; z-index:3; pointer-events:none}
  .ba-tag-before{left:12px; background:rgba(0,0,0,.55); color:#fff}
  .ba-tag-after{right:12px; background:var(--gold); color:#3a2a06}
  .ba-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--gold);
    transform:translateX(-1px); z-index:4; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.18)}
  .ba-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%;
    background:var(--gold); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .ba-grip .ic{width:22px;height:22px; color:#3a2a06; stroke-width:2.4}
  .ba-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5}
  @media (max-width:760px){ .ba-grid{grid-template-columns:1fr} }

  /* Kuruluş rozeti (showroom paneli) */
  .est{display:inline-flex; flex-direction:column; align-items:center; line-height:1; flex:none;
    font-family:"Archivo"; font-weight:800; font-size:.56rem; letter-spacing:.16em; color:var(--gold-hi);
    border:1px solid rgba(226,167,44,.5); border-radius:11px; padding:7px 10px; background:rgba(226,167,44,.1)}
  .est b{font-size:1.05rem; letter-spacing:.02em; margin-top:3px; color:var(--on-brown)}

  /* ---------- Contact ---------- */
  .contactband{background:
      radial-gradient(90% 120% at 88% 0%, rgba(226,167,44,.12), transparent 55%),
      linear-gradient(160deg,var(--brown) 0%, var(--brown-deep) 100%); color:var(--on-brown)}
  .contact-grid{display:grid; grid-template-columns:1fr .85fr; gap:34px; align-items:stretch}
  .cinfo{display:grid; gap:14px}
  .crow{display:flex; gap:15px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(246,239,230,.14);
    border-radius:var(--r); padding:18px 20px; transition:.25s var(--ease)}
  .crow:hover{border-color:rgba(226,167,44,.34); background:rgba(226,167,44,.08)}
  .crow .cic{width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center;
    background:rgba(226,167,44,.16); color:var(--gold-hi)}
  .crow .cic .ic{width:23px;height:23px}
  .crow .ctxt small{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-brown-soft); margin-bottom:3px; font-weight:700}
  .crow .ctxt b, .crow .ctxt a{font-family:"Archivo"; font-weight:700; font-size:1.02rem; color:var(--on-brown); line-height:1.35}
  .crow .ctxt a:hover{color:var(--gold-hi)}
  .cta-card{background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03)); border:1px solid rgba(246,239,230,.18);
    border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; justify-content:center; text-align:center}
  .cta-card .emblem{width:64px;height:64px; margin:0 auto 16px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
  .cta-card h3{font-family:"Archivo"; font-weight:800; font-size:1.5rem; margin-bottom:10px}
  .cta-card p{color:var(--on-brown-soft); margin:0 0 22px; font-size:.95rem}
  .cta-card .btn{width:100%; justify-content:center; margin-bottom:10px}
  .cta-card .btn:last-child{margin-bottom:0}

  /* ---------- CTA strip ---------- */
  .ctastrip{background:linear-gradient(120deg,var(--brown-2),var(--brown-deep)); color:var(--on-brown); border-radius:var(--r-lg);
    padding:44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; position:relative; overflow:hidden}
  .ctastrip .emblem{position:absolute; right:20px; top:50%; transform:translateY(-50%); width:180px;height:180px; opacity:.12}
  .ctastrip h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; max-width:560px; position:relative}
  .ctastrip p{color:var(--on-brown-soft); margin:8px 0 0; position:relative}
  .ctastrip .btn{position:relative}

  /* ---------- Footer ---------- */
  footer.site{background:var(--brown-deep); color:var(--on-brown); padding:56px 0 26px; margin-top:0}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; padding-bottom:32px; border-bottom:1px solid rgba(246,239,230,.14)}
  .foot-brand .emblem{width:46px;height:46px; margin-bottom:14px}
  .foot-brand .name{font-family:"Archivo"; font-weight:800; font-size:1.2rem; display:block}
  .foot-brand p{color:var(--on-brown-soft); font-size:.88rem; margin:10px 0 0; max-width:280px}
  .fcol h4{font-family:"Archivo"; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:16px}
  .fcol a, .fcol .fline{display:flex; align-items:flex-start; gap:9px; color:var(--on-brown-soft); font-size:.9rem; padding:6px 0; transition:.2s}
  .fcol a:hover{color:var(--gold-hi)}
  .fcol .ic{width:17px;height:17px; flex:none; margin-top:2px; color:var(--gold-hi)}
  .foot-bottom{display:flex; align-items:center; justify-content:space-between; padding-top:22px; gap:14px; flex-wrap:wrap;
    font-size:.82rem; color:var(--on-brown-soft)}
  .foot-bottom .socials{display:flex; gap:10px}
  .foot-bottom .socials a{width:38px;height:38px; border-radius:10px; display:grid; place-items:center;
    background:rgba(246,239,230,.08); border:1px solid rgba(246,239,230,.14); color:var(--on-brown); transition:.22s}
  .foot-bottom .socials a:hover{background:var(--gold); color:#3a2a06; border-color:transparent}
  .foot-credit{margin-top:18px; padding-top:16px; border-top:1px solid rgba(246,239,230,.1); text-align:center; font-size:.8rem; color:var(--on-brown-soft)}
  .foot-credit a{color:var(--gold-hi); font-weight:600}
  .foot-credit a:hover{text-decoration:underline}

  /* ---------- Floating WA ---------- */
  .fab{position:fixed; right:20px; bottom:20px; z-index:70; width:60px; height:60px; border-radius:50%;
    background:var(--wa); display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.42); transition:.25s var(--ease)}
  .fab:hover{transform:scale(1.08) translateY(-2px)}
  .fab .ic{width:30px;height:30px; color:#fff; fill:#fff; stroke:none}
  .fab::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.7); opacity:0}}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}

  /* ---------- Responsive ---------- */
  /* Tablet/dar ekran: üst menüyü hamburger'e çevir (yatay taşmayı önler) */
  @media (max-width:960px){
    nav.main, .hdr-phone{display:none}
    .burger{display:flex}
  }

  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .showroom{max-width:520px}
    .cat-grid{grid-template-columns:repeat(3,1fr)}
    .prod-grid{grid-template-columns:repeat(3,1fr)}
    .why-grid{grid-template-columns:repeat(2,1fr)}
    .gal-grid{grid-template-columns:repeat(3,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  }
  @media (max-width:760px){
    nav.main, .hdr-phone{display:none}
    .burger{display:flex}
    .valueband .wrap{grid-template-columns:1fr 1fr}
    .vitem:nth-child(2){border-right:none}
    .vitem{border-bottom:1px solid rgba(246,239,230,.12)}
    .about-grid{grid-template-columns:1fr; gap:32px}
    .contact-grid{grid-template-columns:1fr}
    .cat-grid{grid-template-columns:1fr 1fr}
    .prod-grid{grid-template-columns:1fr 1fr}
    .ctastrip{padding:32px 26px}
    .ctastrip .emblem{opacity:.08}
    section{padding:56px 0}
    .pbanner .emblem{opacity:.08; width:200px;height:200px}
  }
  @media (max-width:480px){
    .cat-grid, .prod-grid, .gal-grid, .why-grid, .steps, .stat-grid{grid-template-columns:1fr}
    .valueband .wrap{grid-template-columns:1fr}
    .vitem{border-right:none}
    .foot-grid{grid-template-columns:1fr}
    .hero-cta .btn{flex:1; justify-content:center}
    .note-card .btn{margin-left:0; width:100%; justify-content:center}
  }
  /* Öncesi/sonrası — etkileşim ipuçları */
  .ba{cursor:ew-resize}
  .ba:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

  /* Ek mobil ince ayarlar (her şey mobil uyumlu) */
  @media (max-width:560px){
    .hdr .btn-wa{display:none}
    .brand .sub{display:none}
    .hero{padding:44px 0 54px}
    .pbanner{padding:48px 0 44px}
    .sh-top b{font-size:1.05rem}
    .ctastrip h2{font-size:1.4rem}
    .cta-card{padding:26px 22px}
    .video-slot .play{width:60px;height:60px}
    .fab{width:54px;height:54px; right:16px; bottom:16px}
  }
  @media (max-width:380px){
    .wrap{padding:0 16px}
    .sh-cell{padding:13px 8px}
    .sh-cell small{font-size:.7rem}
    .btn{padding:12px 15px; font-size:.9rem}
    .brand .name{font-size:1.05rem}
    .pbanner h1{font-size:1.7rem}
  }

  /* Mobilde kategori ve öne çıkan ürünler: yatay kaydırmalı (yan yana) */
  @media (max-width:760px){
    .cat-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 2px 12px}
    .cat-grid > .catc{flex:0 0 76%; scroll-snap-align:start}
    #featuredGrid{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 2px 12px}
    #featuredGrid > .product{flex:0 0 82%; scroll-snap-align:start}
    #galleryGrid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 2px 12px}
    #galleryGrid > .gtile{flex:0 0 80%; scroll-snap-align:start; aspect-ratio:4/3}
    #galleryGrid::-webkit-scrollbar{height:6px}
    #galleryGrid::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
    .cat-grid::-webkit-scrollbar, #featuredGrid::-webkit-scrollbar{height:6px}
    .cat-grid::-webkit-scrollbar-thumb, #featuredGrid::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
  }
  @media (max-width:560px){
    .hdr{height:64px}
    .brand .emblem{width:38px; height:38px}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition-duration:.01ms !important}
    .reveal{opacity:1; transform:none}
  }