/* ===== valizetiketi.com - DemFabrika tasarım sistemi (token'lı, dark-mode-ready) ===== */
:root{
  --navy-950:#0D1226; --navy-900:#141C36; --navy-800:#1A2548; --navy-700:#233261;
  --navy-600:#30427E; --navy-500:#4359A3; --navy-400:#697DBF; --navy-300:#95A3D0;
  --navy-200:#C1C8E2; --navy-100:#DDE1EE; --navy-50:#F2F3F8;
  --ember-700:#B25910; --ember-600:#DA6B10; --ember-500:#F08025; --ember-400:#F6984C; --ember-200:#FDD2B0; --ember-50:#FFF4EB;
  /* anlamsal jetonlar — AÇIK */
  --surface-base:#FFFFFF; --surface-raised:#F6F7F9; --surface-inverse:#1A2548;
  --text-primary:#222F5B; --text-secondary:#4B5563; --text-muted:#6B7280;
  --text-on-inverse:#F2F3F8; --text-on-inverse-soft:#C1C8E2;
  --action:#F08025; --action-text:#B25910;          /* açık zeminde turuncu YAZI: ember-700 (AA) */
  --action-text-on-inverse:#F6984C;                 /* koyu zeminde turuncu yazı: ember-400 */
  --border:#ECEBE6; --border-strong:#73798C; --focus-ring:#F08025;
  --cat-kolluk:#397293;                             /* Kolluk & Koruyucu aksanı (kılavuz §5) */
  /* koyu lacivert dolgu (buton/ikon plakası) — koyu temada bir kademe AÇILIR ki zeminden ayrışsın */
  --fill-navy:#222F5B; --fill-navy-hover:#1A2548;
  /* ürün fotoğrafı plakası: fotoğrafların pişmiş beyaz zemini var → plaka HER İKİ temada da beyaz;
     koyu temada parlamayı kırmak için .imgwrap.photo tümüyle hafifçe karartılır (aşağıda) */
  --photo-plate:#FFFFFF; --surface-card:#FFFFFF;
  /* altbilgi sahnesi — görselden ölçüldü (_footer-gorsel.mjs yazdırıyor); temaya göre DÖNMEZ */
  --surface-footer:#010918; --sahne-gok:#000612;
  --chip-bg:rgba(34,47,91,.07); --chip-border:rgba(34,47,91,.14);
  --shadow-sm:0 1px 2px rgba(34,47,91,.06),0 2px 6px rgba(34,47,91,.05);
  --shadow:0 2px 6px rgba(34,47,91,.06),0 10px 28px rgba(34,47,91,.10);
  --shadow-lg:0 4px 12px rgba(34,47,91,.08),0 24px 56px rgba(34,47,91,.16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-base:#0D1226; --surface-raised:#141C36; --surface-inverse:#1A2548;
    --text-primary:#F2F3F8; --text-secondary:#C1C8E2; --text-muted:#95A3D0;
    --action-text:#F6984C; --border:#233261; --border-strong:#697DBF; --focus-ring:#F6984C;
    --cat-kolluk:#6FA5C6;
    --fill-navy:#30427E; --fill-navy-hover:#4359A3; --surface-card:#1B2545;
    --chip-bg:rgba(255,255,255,.07); --chip-border:rgba(255,255,255,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.34);
    --shadow:0 2px 6px rgba(0,0,0,.38),0 10px 28px rgba(0,0,0,.44);
    --shadow-lg:0 4px 12px rgba(0,0,0,.44),0 24px 56px rgba(0,0,0,.50);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --surface-base:#0D1226; --surface-raised:#141C36; --surface-inverse:#1A2548;
  --text-primary:#F2F3F8; --text-secondary:#C1C8E2; --text-muted:#95A3D0;
  --action-text:#F6984C; --border:#233261; --border-strong:#697DBF; --focus-ring:#F6984C;
  --cat-kolluk:#6FA5C6;
  --fill-navy:#30427E; --fill-navy-hover:#4359A3; --surface-card:#1B2545;
    --chip-bg:rgba(255,255,255,.07); --chip-border:rgba(255,255,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.34);
  --shadow:0 2px 6px rgba(0,0,0,.38),0 10px 28px rgba(0,0,0,.44);
  --shadow-lg:0 4px 12px rgba(0,0,0,.44),0 24px 56px rgba(0,0,0,.50);
  color-scheme: dark;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Montserrat',sans-serif;color:var(--text-primary);background:var(--surface-base);overflow-x:hidden;}
a{color:inherit;}
h1,h2,h3,h4{color:var(--text-primary);}
::selection{background:#F08025;color:#141C36;}   /* turuncu zemin → lacivert yazı (kılavuz) */

.wrap{max-width:1200px;margin:0 auto;}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px;}
/* tema takip eden (açık/koyu dönen) yüzeylerde: açıkta ember-700 (AA), koyuda ember-400 */
.tag-orange{background:rgba(240,128,37,.13);border:1px solid rgba(240,128,37,.30);color:var(--action-text);}
/* SABİT koyu yüzeylerde (hero/CTA gradient) duran rozet — her iki temada ember-400 */
.tag-orange.on-dark{color:var(--action-text-on-inverse);}
/* yarı saydam → hangi yüzeyde durursa dursun (base/raised/card) bir kademe ayrışır */
.tag-navy{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text-primary);}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;padding:14px 26px;border-radius:100px;text-decoration:none;cursor:pointer;border:none;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .25s ease;}
.btn-orange{background:#F08025;color:#fff;box-shadow:0 8px 22px rgba(240,128,37,.32),0 2px 6px rgba(240,128,37,.18);}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(240,128,37,.4);}
.btn-orange:active{transform:translateY(0);}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);}
.btn-ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);}
.btn-navy{background:var(--fill-navy);color:#fff;box-shadow:0 8px 22px rgba(34,47,91,.28);}
.btn-navy:hover{transform:translateY(-2px);background:var(--fill-navy-hover);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(240,128,37,.4);}

/* nav */
.navbar{transition:background .3s ease,box-shadow .3s ease;}
.navbar.scrolled{background:rgba(26,37,72,.96)!important;backdrop-filter:blur(14px);box-shadow:0 2px 20px rgba(0,0,0,.22);}
.nav-link{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s ease;}
.nav-link:hover{color:#F08025;}

/* mobil menü grup başlığı */
.mobile-menu .mm-head{padding:14px 0 4px;font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,128,37,.85);border-top:1px solid rgba(200,235,245,.10);margin-top:8px;}
.mobile-menu .mm-head:first-child{border-top:none;margin-top:0;padding-top:0;}

/* ===== Nav dropdown (74 sayfa, 8 nav linki → keşif zordu) =====
   Üst seviye 4 grup + Blog/Hakkımızda/İletişim. Hover VE klavye (focus-within) ile açılır. */
.nav-drop{position:relative;}
/* NOT: burada `font:inherit` KULLANMA — kısayol olduğu için .nav-link'in font-size'ını ezer,
   body'den 16px miras alınır ve responsive nav media query'leri sessizce etkisiz kalır. */
/* dil değiştirici (TR↔EN) — Teklif Al butonunun solunda, ondan sessiz kalsın diye ghost */
.lang-switch{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:8px 11px;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.62);text-decoration:none;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;transition:color .18s ease,border-color .18s ease,transform .18s ease;
}
.lang-switch:hover{color:#fff;border-color:rgba(255,255,255,.42);transform:translateY(-1px);}
.lang-switch:focus-visible{outline:2px solid #F08025;outline-offset:2px;color:#fff;}
.lang-switch:active{transform:translateY(0) scale(.96);}
@media(max-width:860px){.lang-switch{display:none;}}   /* mobilde menü içindeki "Language" satırı devralır */

.nav-drop>.nav-link{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.nav-drop>.nav-link::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;opacity:.7;}
.nav-drop:hover>.nav-link::after,.nav-drop:focus-within>.nav-link::after{transform:rotate(225deg) translate(-2px,-2px);}
.nav-panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:230px;padding:10px;margin-top:14px;
  background:rgba(26,37,72,.98);backdrop-filter:blur(14px);
  border:1px solid rgba(200,235,245,.12);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.38),0 4px 12px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
  z-index:60;
}
/* hover köprüsü: nav link ile panel arasındaki 14px boşlukta imleç kaybolmasın */
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px;}
.nav-drop:hover>.nav-panel,.nav-drop:focus-within>.nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-panel a{
  display:block;padding:9px 12px;border-radius:8px;
  font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.78);text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.nav-panel a:hover,.nav-panel a:focus-visible{background:rgba(240,128,37,.14);color:#F08025;}
/* grup başlığı turuncu — mobil .mm-head ve demfabrika _shared.mjs'teki .mm-h ile aynı */
.nav-panel .np-head{
  padding:8px 12px 5px;font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#F08025;
}
.nav-panel .np-sep{height:1px;background:rgba(200,235,245,.10);margin:6px 8px;}
/* iki sütunlu geniş panel (spor + diğer üretim) */
.nav-panel.wide{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px;}
.nav-panel.wide .np-head{grid-column:1/-1;}
.nav-panel.wide .np-sep{grid-column:1/-1;}
.brand-lockup{display:inline-flex;flex-direction:column;align-items:center;gap:0;line-height:1;}
.brand-dom{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;color:rgba(200,235,245,.6);white-space:nowrap;margin-top:-4px;transform:translateX(13px);}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);}
.reveal.on{opacity:1;transform:translateY(0);}

/* ===== kademeli beliriş — ızgara çocukları sırayla süzülür =====
   ⚠️ TRANSITION İLE YAPILAMIYOR (ölçüldü, `_animasyon-olc.mjs`):
   kartların kendi `transition` KISAYOLU (.prod-card / .info-card / .tag-int) bu kuralla
   AYNI ÖZGÜLLÜKTE ve dosyada DAHA SONRA geldiği için kazanıyordu; `opacity` geçiş
   listesinden düşüyor, kart sönümlenmeden "pat" diye beliriyordu — sadece kayıyordu.
   ANIMATION ayrı bir özellik olduğu için çakışma yok.
   ⚠️ `transform` DEĞİL bağımsız `translate`: hover'daki transform:translateY(-6px) ile
   çakışmasın, ikisi birleşsin.
   ⚠️ Gecikme `animation-delay` (--rd) ile: animasyon bitince etkisi kalmaz. Eskiden JS
   satır içi `transition-delay` yazıp TEMİZLEMİYORDU → beliriş bittikten sonra da kartta
   duruyor, son kartın hover'ı 0,6 sn'ye kadar geç tepki veriyordu. */
@keyframes revealUp{from{opacity:0;translate:0 24px;}to{opacity:1;translate:0 0;}}
.reveal-stagger>*{opacity:0;}
.reveal-stagger.on>*{animation:revealUp .6s cubic-bezier(.16,1,.3,1) var(--rd,0ms) both;}

/* hero giriş animasyonu - sayfa açılışında sıralı süzülme */
@keyframes heroUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
.hero-anim{opacity:0;animation:heroUp .85s cubic-bezier(.16,1,.3,1) both;}
.hero-anim.d1{animation-delay:.06s;}
.hero-anim.d2{animation-delay:.16s;}
.hero-anim.d3{animation-delay:.28s;}
.hero-anim.d4{animation-delay:.42s;}

/* hero görsel/video - yavaş idle süzülme (derinlik hissi) */
@keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
.hero-float{animation:heroFloat 6.5s ease-in-out infinite;}

/* ── HOVER FEEDBACK ── yalnız transform/opacity/renk; spring easing */
/* bilgi & özellik kartları - hafif kalkış + kenar/gölge vurgusu */
.info-card{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease,background .32s ease;}
.info-card:hover{transform:translateY(-4px);}
.info-card.light:hover{box-shadow:0 16px 38px rgba(34,47,91,.14),0 4px 10px rgba(34,47,91,.06);}
.info-card.dark:hover{background:rgba(255,255,255,.10);border-color:rgba(240,128,37,.42)!important;box-shadow:0 14px 34px rgba(0,0,0,.28);}
/* koyu kartın içindeki başlığı hover'da parlat */
.info-card.dark:hover .ic-title{color:#F08025;}

/* interaktif etiket (kimler için) - kalkış + turuncuya dönüş */
.tag-int{transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s ease,border-color .22s ease,color .22s ease;cursor:default;}
.tag-int:hover{transform:translateY(-2px);background:rgba(240,128,37,.13);border-color:rgba(240,128,37,.35);color:var(--action-text);}

/* FAQ soru hover - renk + ikon vurgusu */
.faq-q{transition:color .2s ease;}
.faq-q:hover{color:var(--action-text);}
.faq-q .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s ease;}
.faq-q:hover .ic{background:rgba(240,128,37,.22);}

/* footer link hover - renk + kayma */
.foot-link{transition:color .2s ease,transform .2s cubic-bezier(.16,1,.3,1);}
.foot-link:hover{color:#F08025!important;transform:translateX(3px);}

/* güven şeridi öğesi hover - kalkış + ikon kutusu vurgusu */
.trust-row>div{transition:transform .28s cubic-bezier(.16,1,.3,1);}
.trust-row>div:hover{transform:translateY(-3px);}
.trust-row>div>span:first-child{transition:background .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);}
.trust-row>div:hover>span:first-child{background:rgba(240,128,37,.14);transform:scale(1.08);}

/* erişilebilirlik - hareket azaltma tercihi */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  /* kademeli beliriş artık animation + translate kullanıyor → ikisini de sıfırla,
     yoksa opacity:1 verilse bile animasyon 0'dan başlatıp kartı gizleyebilir */
  .reveal,.reveal-stagger>*,.hero-anim{opacity:1!important;transform:none!important;translate:none!important;animation:none!important;}
}

.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");}
.gridlines::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(200,235,245,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,235,245,.05) 1px,transparent 1px);background-size:54px 54px;}

/* ürün kartı */
.prod-card{display:block;text-decoration:none;border-radius:18px;overflow:hidden;background:var(--surface-card);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong);}
.prod-card .imgwrap{position:relative;height:220px;overflow:hidden;background:var(--surface-raised);}
.prod-card .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.prod-card:hover .imgwrap img{transform:scale(1.06);}
.prod-card .imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,37,72,.28),transparent 55%);}

/* gerçek ürün fotoğrafı: kırpma yok (contain) + beyaz plaka.
   Fotoğrafların zemini pişmiş beyaz → plaka token'la KOYUYA DÖNDÜRÜLEMEZ (dikiş izi olur).
   Çözüm: plaka her iki temada beyaz, koyu temada TÜM sarmalayıcı hafifçe kısılır → parlama gider,
   fotoğrafın beyazı ile plaka birebir aynı kalır. */
.pfit{object-fit:contain!important;background:var(--photo-plate);}
.imgwrap.photo{background:var(--photo-plate);transition:filter .3s ease;}
.imgwrap.photo::after{display:none;}
:root[data-theme="dark"] .imgwrap.photo{filter:brightness(.88) saturate(.96);}
:root[data-theme="dark"] .prod-card:hover .imgwrap.photo{filter:brightness(.96) saturate(1);}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .imgwrap.photo{filter:brightness(.88) saturate(.96);}
  :root:not([data-theme="light"]) .prod-card:hover .imgwrap.photo{filter:brightness(.96) saturate(1);}
}

.stat-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:46px;line-height:1;color:#fff;}
/* Özellik kartı — ÖNCE yalnız dolgu + köşe yarıçapıydı, yüzeyi yoktu; bu yüzden
   "Neden DemFabrika" bölümünde kart gibi değil serbest metin bloğu gibi duruyordu
   (özellikle koyu temada). Sitedeki diğer kartlarla aynı yüzey diline getirildi. */
.feat-card{padding:26px 24px;border-radius:16px;background:var(--surface-card);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);}
/* Tıklanabilir olanı (iletişim kartları) üç durumu da taşır - MARKA-KILAVUZU §7. */
a.feat-card{display:block;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;}
a.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-strong);}
a.feat-card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
a.feat-card:active{transform:translateY(-1px);}

/* spec satırı */
.spec-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);}
.spec-row:last-child{border-bottom:none;}
.spec-ic{width:38px;height:38px;border-radius:10px;background:var(--fill-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.check-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.check-dot{width:22px;height:22px;border-radius:50%;background:#F08025;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}

/* breadcrumb */
.breadcrumb a{font-family:'Montserrat',sans-serif;font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;}
.breadcrumb a:hover{color:rgba(255,255,255,.85);}
.breadcrumb span{font-family:'Montserrat',sans-serif;font-size:12px;color:rgba(255,255,255,.35);margin:0 8px;}

/* ürün bulucu */
#bulucu .fcats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px;}
#bulucu .fcat{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-primary);background:var(--surface-raised);border:1.5px solid var(--border);border-radius:100px;padding:11px 19px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,color .2s,box-shadow .2s;}
#bulucu .fcat:hover{transform:translateY(-2px);border-color:var(--action);color:var(--action-text);}
#bulucu .fcat:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(240,128,37,.32);}
#bulucu .fcat[aria-selected="true"]{background:var(--fill-navy);border-color:var(--fill-navy);color:#fff;}
#bulucu .fpanel{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:50px;}
#bulucu .fgroup{display:none;}
#bulucu .fgroup.active{display:contents;}
#bulucu .fchip{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-primary);background:var(--surface-card);border:1.5px solid var(--border);border-radius:13px;padding:13px 19px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s;}
#bulucu .fchip i{font-style:normal;color:var(--action-text);font-weight:700;transition:transform .22s;}
#bulucu .fchip:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow);}
#bulucu .fchip:hover i{transform:translateX(4px);}
#bulucu .fchip-cta{background:var(--fill-navy);color:#fff;border-color:var(--fill-navy);}
#bulucu .fchip-cta:hover{background:var(--fill-navy-hover);}
#bulucu .fchip-cta i{color:var(--action-text-on-inverse);}   /* koyu çipte turuncu ok: ember-400 */

/* SSS */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;color:var(--text-primary);}
.faq-q .ic{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(240,128,37,.12);color:var(--action-text);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .3s ease;}
.faq-item.open .faq-q .ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 0 22px;font-size:14px;line-height:1.75;color:var(--text-muted);max-width:760px;}

.wa-sticky{position:fixed;bottom:28px;right:28px;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,211,102,.45);transition:transform .22s cubic-bezier(.16,1,.3,1);}
.wa-sticky:hover{transform:scale(1.1) translateY(-2px);}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
/* NOT: navbar HER İKİ temada da lacivert → çubuklar SABİT beyaz kalmalı (token'a bağlama!) */
.hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s;}
.mobile-menu{display:none;flex-direction:column;gap:4px;position:fixed;top:72px;left:12px;right:12px;background:rgba(26,37,72,.98);backdrop-filter:blur(12px);border-radius:16px;padding:16px;z-index:49;box-shadow:0 18px 50px rgba(0,0,0,.4);}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:'Montserrat',sans-serif;font-size:15px;color:#fff;text-decoration:none;padding:11px 12px;border-radius:10px;}
.mobile-menu a:hover{background:rgba(255,255,255,.08);}

/* ===== Orbit (teknik özellikler) ===== */
.orbit-desktop{display:block;}
.orbit-mobile{display:none;}
.orbit-node{will-change:transform,opacity,filter;}
.orb-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;}
.orb-badge{width:54px;height:54px;border-radius:50%;background:var(--surface-card);border:1.5px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:background .25s ease,color .25s ease,box-shadow .25s ease,border-color .25s ease,transform .25s ease;}
.orb-badge svg{width:23px;height:23px;}
.orb-label{font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--text-primary);white-space:nowrap;background:var(--surface-raised);padding:2px 9px;border-radius:20px;}
.orb-wrap:hover .orb-badge{border-color:rgba(240,128,37,.55);box-shadow:var(--shadow-lg);transform:scale(1.06);}
.orb-wrap.is-active .orb-badge{background:#F08025;color:#141C36;border-color:#F08025;box-shadow:0 12px 30px rgba(240,128,37,.42);}
.orb-glow{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(200,235,245,.5) 0%,rgba(240,128,37,.06) 45%,transparent 70%);}
.orb-pulse{position:absolute;border-radius:50%;border:1.5px solid rgba(240,128,37,.22);transform:translate(-50%,-50%);animation:orbPulse 3.4s ease-out infinite;pointer-events:none;}
.orb-pulse.p2{animation-delay:1.7s;}
@keyframes orbPulse{0%{width:340px;height:340px;opacity:.55;}100%{width:630px;height:630px;opacity:0;}}
.orb-detail{position:absolute;top:50%;width:300px;transform:translateY(-50%) translateX(26px);background:var(--surface-card);border-radius:20px;padding:30px 28px;border:1px solid var(--border);border-left:4px solid #F08025;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1);z-index:70;}
.orb-detail.show{opacity:1;transform:translateY(-50%) translateX(0);}
#orbit-core{position:absolute;inset:0;transition:transform .55s cubic-bezier(.16,1,.3,1);}
#orbit-stage.active #orbit-core{transform:translateX(-180px);}
.orbit-center-img{filter:drop-shadow(0 26px 50px rgba(34,47,91,0.24)) drop-shadow(0 6px 16px rgba(34,47,91,0.12));}
.onode{background:var(--surface-card);border-radius:12px;padding:13px 15px 13px 17px;box-shadow:var(--shadow-sm);border:1.5px solid var(--border);border-top:3px solid #F08025;display:flex;flex-direction:column;gap:4px;}
.onode-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.05em;color:var(--text-primary);}
.onode-desc{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:400;line-height:1.5;color:var(--text-muted);}

/* referans kartı (tamamlanan siparişler) */
.ref-card{border-radius:16px;overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;}
.ref-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
/* refsections (flex) kart genişliği */
.refcards-flex>div{width:300px;max-width:100%;}
/* referans kartı fotoğraf sahnesi + thumbnail'ler: plaka beyaz kalır (fotoğrafın zemini beyaz),
   koyu temada .imgwrap.photo ile aynı şekilde kısılır → parlama gider, dikiş izi olmaz */
   .photo-frame = beyaz zeminli serbest fotoğraf/kolaj (ör. üretim departmanları) için aynı davranış. */
.rc-stage,.ref-thumb,.photo-frame{transition:filter .3s ease;}
:root[data-theme="dark"] .rc-stage,
:root[data-theme="dark"] .ref-thumb,
:root[data-theme="dark"] .photo-frame{filter:brightness(.88) saturate(.96);}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rc-stage,
  :root:not([data-theme="light"]) .ref-thumb,
  :root:not([data-theme="light"]) .photo-frame{filter:brightness(.88) saturate(.96);}
}

/* 920-1240px: masaüstü nav görünür ama sığmıyordu → 2 satıra taşıyordu.
   (Paylaşılan sistemde mevcut bir kusur; atkiimalati'de de aynı davranış var.)
   Hamburger 920'de devreye girene kadar nav'ı kademeli sıkıştır. */
@media(max-width:1240px){
  .nav-links-desktop{gap:13px!important;}
  .nav-link{font-size:12.5px;}
}
@media(max-width:1080px){
  .nav-links-desktop{gap:10px!important;}
  .nav-link{font-size:11.5px;}
}
@media(max-width:990px){   /* hamburger'in devreye girdiği 920'ye kadar son kademe */
  .nav-links-desktop{gap:8px!important;}
  .nav-link{font-size:10.5px;}
}

@media(max-width:920px){
  .nav-links-desktop{display:none!important;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr!important;}
  .prod-grid{grid-template-columns:1fr 1fr!important;}
  .stats-grid{grid-template-columns:1fr 1fr!important;}
  .feat-grid{grid-template-columns:1fr!important;}
  .two-col{grid-template-columns:1fr!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;}
  .orbit-desktop{display:none!important;}
  .orbit-mobile{display:grid!important;}
}
@media(max-width:560px){
  .prod-grid{grid-template-columns:1fr!important;}
  .hero-collage{grid-template-columns:1fr 1fr!important;}
  .footer-grid{grid-template-columns:1fr!important;}
}

/* güven şeridi: geniş ekranda tek satır, dar ekranda 2 sütun */
@media(max-width:780px){
  .trust-row{justify-content:flex-start!important;gap:16px 20px!important;}
  .trust-row>div{width:calc(50% - 10px);}
}
@media(max-width:400px){
  .trust-row>div{width:100%;}
}

/* ===== Hero animated boxes — hover ile renklenen + logomark grid ===== */
.hero-boxes {
      position:absolute; inset:0; z-index:0; overflow:hidden;
      -webkit-mask-image:radial-gradient(ellipse 82% 72% at 52% 42%, #000 0%, #000 30%, transparent 78%);
              mask-image:radial-gradient(ellipse 82% 72% at 52% 42%, #000 0%, #000 30%, transparent 78%);
    }
    .hero-boxes-inner {
      position:absolute; left:25%; top:-25%; width:100%; height:100%; display:flex;
      transform:translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(.675);
      transform-origin:50% 50%;
    }
    /* kimler section: çok daha geniş görünür/hover alanı + kartlar hover'ı engellesin */
    #kimlerBoxes {
      -webkit-mask-image:radial-gradient(ellipse 86% 104% at 50% 48%, #000 0%, #000 66%, transparent 100%);
              mask-image:radial-gradient(ellipse 86% 104% at 50% 48%, #000 0%, #000 66%, transparent 100%);
    }
    .kimler-grid > div { pointer-events:auto; }
    .hb-col  { flex:0 0 64px; width:64px; border-left:1px solid rgba(200,235,245,.08); }
    .hb-cell {
      position:relative; width:64px; height:32px; background-color:transparent;
      border-right:1px solid rgba(200,235,245,.08);
      border-top:1px solid rgba(200,235,245,.08);
    }
    .hb-col:nth-child(2n+1) .hb-cell:nth-child(2n+1)::after {
      content:'+'; position:absolute; top:-10px; left:-7px;
      font:300 13px/1 'Montserrat',sans-serif; color:rgba(200,235,245,.12); pointer-events:none;
    }
    /* hover'da beyaz logomark (tek paylaşılan inline SVG, sadece opacity geçişi) */
    .hb-cell::before {
      content:''; position:absolute; inset:3px; pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 250 94 98'%3E%3Cpath fill='%23fff' d='M145.3,252.5l-42.4,43.1c-1.3,1.3-1.3,3.3,0,4.6l42.5,42.5c2.1,2.1,5.6.6,5.6-2.3v-23.8c0-.8-.3-1.6-.9-2.2l-13.6-14.4c-1.2-1.3-1.2-3.2,0-4.5l13.3-14.4c.6-.6.9-1.4.9-2.2l.2-24.1c0-2.9-3.5-4.4-5.6-2.3h0Z'/%3E%3Cpath fill='%23fff' d='M162.1,275.5v44.4c0,2.9,3.6,4.4,5.6,2.3l21.9-22.4c1.3-1.3,1.2-3.3,0-4.6l-21.9-22c-2.1-2.1-5.6-.6-5.6,2.3h0Z'/%3E%3C/svg%3E") center/auto 76% no-repeat;
      transform:matrix(1,-0.2493,1.1106,0.7231,0,0);
      opacity:0; transition:opacity 1.8s ease;
    }
    .hb-cell.lit::before { opacity:.95; transition:opacity 0s; }

/* hero-boxes hover'ı tüm hero'da çalışsın: içerik tıklamayı geçirsin, etkileşimli öğeler aktif kalsın */
#hero a, #hero button, #hero video, .hb-section a, .hb-section button { pointer-events:auto; }
.grp-link{transition:color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.16,1,.3,1);}
.grp-link:hover{color:#F08025!important;border-color:rgba(240,128,37,.42)!important;transform:translateY(-2px);}

/* ── Kolluk & Koruyucu kategori aksanı #397293 (MARKA-KILAVUZU §5) ──
   Yalnız 3 yer: ince üst şerit, kategori rozeti, aktif menü çizgisi. Buton/link TURUNCU kalır. */
.cat-strip{position:fixed;top:0;left:0;right:0;height:3px;background:#397293;z-index:60;}
/* Kategori rozeti — ürün hero'sunda grup adını gösterir (nav gruplarıyla aynı).
   ⚠️ Hero HER İKİ temada da koyu lacivert gradient → kılavuzun #397293'ü orada
   okunmuyor (2,1:1). Bu yüzden rozet SABİT olarak aynı rengin açık tonunu (#6FA5C6,
   koyu tema jetonuyla aynı değer) kullanır; kılavuzun kategori aksanı korunur. */
.cat-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px;color:#6FA5C6;background:rgba(111,165,198,.13);border:1px solid rgba(111,165,198,.34);white-space:nowrap;}
.cat-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#6FA5C6;flex-shrink:0;}

/* ===== BÖLÜM ARKA PLAN DOKULARI (deneme — 3 yöntem yan yana) =====
   Yalnız GERÇEKTEN ÇIPLAK bölümlere: kart/görsel taşıyan bölümlere eklenirse kalabalık olur.
   Ölçüm: ana sayfada çıplak olanlar "kimler alıyor" (sadece çipler) ve SSS.

   ⚠️ RENK maske ile geliyor, background-image ile DEĞİL. Sebep: data-URI SVG currentColor
   miras alamaz; maske kullanınca renk `background-color`dan gelir, yani tema jetonuna
   bağlanır ve TEK DOSYA İKİ TEMA yeter. (Raster yıkama bunu yapamaz - ayrı dosya ister.)
   ⚠️ Opaklık tema başına AYRI: aynı değer beyaz üstünde soluk, koyu üstünde pus yapıyor. */
.bg-doku{position:relative;isolation:isolate;}
.bg-doku>*{position:relative;z-index:1;}
.bg-doku::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-color:var(--text-primary);
  opacity:1;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}

/* 1) ÖRGÜ İLMEK — ürünün kendi yapısı.
   ⚠️ 1. DENEME YANLIŞTI: aşağı doğru kavisli, üst üste binen U'lar çizmiştim; kiremit gibi
   dizilip BALIK PULU olarak okundu. Jarse ilmek aslında AŞAĞI BAKAN V'lerin kaydırılmış
   sıralarıdır - V'ler birbirinin içine girmez, yan yana dizilir. */
.doku-orgu::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 32 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'%3E%3Cpath d='M0,1 C3,6 5,9 8,11 C11,9 13,6 16,1'/%3E%3Cpath d='M16,1 C19,6 21,9 24,11 C27,9 29,6 32,1'/%3E%3Cpath d='M-8,11 C-5,16 -3,19 0,21 C3,19 5,16 8,11'/%3E%3Cpath d='M8,11 C11,16 13,19 16,21 C19,19 21,16 24,11'/%3E%3Cpath d='M24,11 C27,16 29,19 32,21 C35,19 37,16 40,11'/%3E%3C/g%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 32 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'%3E%3Cpath d='M0,1 C3,6 5,9 8,11 C11,9 13,6 16,1'/%3E%3Cpath d='M16,1 C19,6 21,9 24,11 C27,9 29,6 32,1'/%3E%3Cpath d='M-8,11 C-5,16 -3,19 0,21 C3,19 5,16 8,11'/%3E%3Cpath d='M8,11 C11,16 13,19 16,21 C19,19 21,16 24,11'/%3E%3Cpath d='M24,11 C27,16 29,19 32,21 C35,19 37,16 40,11'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:30px 19px;mask-size:30px 19px;
  opacity:var(--doku-orgu-op);
}

/* 2) AMBLEM FİLİGRANI — hero-boxes hover'ındaki amblemin aynısı, dev boyutta ve taşarak.
   Marka dilinde zaten var, yeni bir görsel dil açmıyor. */
.doku-amblem::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 250 94 98'%3E%3Cpath fill='%23000' d='M145.3,252.5l-42.4,43.1c-1.3,1.3-1.3,3.3,0,4.6l42.5,42.5c2.1,2.1,5.6.6,5.6-2.3v-23.8c0-.8-.3-1.6-.9-2.2l-13.6-14.4c-1.2-1.3-1.2-3.2,0-4.5l13.3-14.4c.6-.6.9-1.4.9-2.2l.2-24.1c0-2.9-3.5-4.4-5.6-2.3h0Z'/%3E%3Cpath fill='%23000' d='M162.1,275.5v44.4c0,2.9,3.6,4.4,5.6,2.3l21.9-22.4c1.3-1.3,1.2-3.3,0-4.6l-21.9-22c-2.1-2.1-5.6-.6-5.6,2.3h0Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 250 94 98'%3E%3Cpath fill='%23000' d='M145.3,252.5l-42.4,43.1c-1.3,1.3-1.3,3.3,0,4.6l42.5,42.5c2.1,2.1,5.6.6,5.6-2.3v-23.8c0-.8-.3-1.6-.9-2.2l-13.6-14.4c-1.2-1.3-1.2-3.2,0-4.5l13.3-14.4c.6-.6.9-1.4.9-2.2l.2-24.1c0-2.9-3.5-4.4-5.6-2.3h0Z'/%3E%3Cpath fill='%23000' d='M162.1,275.5v44.4c0,2.9,3.6,4.4,5.6,2.3l21.9-22.4c1.3-1.3,1.2-3.3,0-4.6l-21.9-22c-2.1-2.1-5.6-.6-5.6,2.3h0Z'/%3E%3C/svg%3E");
  /* ⚠️ 1. DENEME ÇOK BÜYÜKTÜ: %150 boyda, ortada, sağdan taşarak → amblem olarak
     okunmuyor, rastgele dev bir kama gibi duruyordu ve SSS metninin İÇİNDEN geçiyordu.
     Düzeltme: küçült, KÖŞEYE it, metin sütununun dışında kalsın. */
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:auto 62%;mask-size:auto 62%;
  -webkit-mask-position:right -4% bottom -10%;mask-position:right -4% bottom -10%;
  opacity:var(--doku-amblem-op);
}


/* Opaklık YÖNTEM BAŞINA ayrı — tek değer üçüne birden uymuyor:
   · desen (örgü) tüm alanı kapladığı için en düşük değeri ister
   · tek büyük amblem seyrek olduğu için biraz daha yüksek taşır
   · raster yıkama beyaz üstünde %5'te GÖRÜNMÜYORDU → açık temada belirgin şekilde yüksek
   Ayrıca koyu tema açık temayla aynı değeri kaldırmıyor (ölçülerek ayarlandı). */
:root{ --doku-orgu-op:.042; --doku-amblem-op:.05; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --doku-orgu-op:.055; --doku-amblem-op:.06; }
}
:root[data-theme="dark"]{ --doku-orgu-op:.055; --doku-amblem-op:.06; }

/* ── departman kartları (hakkimizda, 10 adet) ──
   10 = 5×2 · 2×5 · 1×10 → kırılımlar bunlara oturursa satır sonu hiç tırtıklı kalmaz.
   Aradaki 3 sütunda son satırda 1 kart kalırdı; o yüzden 5 → 2 → 1. */
.dept-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:1080px){.dept-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:480px){.dept-grid{grid-template-columns:1fr;}}

/* ===== "Bir DemFabrika üretimidir" bandı (sahnenin hemen üstü) =====
   Zemini --sahne-gok: kapanış CTA'sı buraya kararıyor, bant da sahneye akıyor.
   HER ZAMAN sahnenin üstünde/koyu bağlamda durur → tek (koyu) renk seti yeterli,
   tema jetonlarına bağlanmaz. Kart zemini lacivert ile sahne göğünün karışımı. */
.maker-son{background:var(--sahne-gok);padding:64px 24px 72px;}
.maker{
  display:grid;gap:26px;align-items:center;
  background:color-mix(in srgb,var(--surface-inverse) 62%,var(--sahne-gok));
  border:1px solid rgba(242,243,248,.12);border-radius:18px;padding:34px 30px;
}
@media(min-width:860px){.maker{grid-template-columns:1.55fr 1fr;gap:44px;}}
.maker-logo{height:32px;width:auto;display:block;filter:brightness(0) invert(1);}
.maker-mark .line{
  display:block;margin-top:16px;
  font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  color:var(--action-text-on-inverse);
}
.maker-mark p{margin-top:11px;font-size:14.5px;line-height:1.75;color:var(--text-on-inverse-soft);max-width:62ch;}
.maker-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;}
.maker-links a{
  display:inline-flex;align-items:center;min-height:26px;
  font-size:13.5px;font-weight:600;color:var(--action-text-on-inverse);
  text-decoration:none;transition:color .2s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.maker-links a:hover{text-decoration:underline;transform:translateY(-1px);}
.maker-links a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px;}
.maker-facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  border-top:1px solid rgba(242,243,248,.14);padding-top:20px;
}
@media(min-width:860px){
  .maker-facts{border-top:0;border-left:1px solid rgba(242,243,248,.14);padding-top:0;padding-left:34px;}
}
.maker-facts .n{
  font-family:'Oswald',sans-serif;font-size:clamp(24px,2.8vw,32px);font-weight:600;
  line-height:1.15;color:var(--text-on-inverse);
}
.maker-facts .l{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-on-inverse-soft);line-height:1.5;margin-top:3px;}

/* ===== ALTBİLGİ ÜSTÜ SAHNE — toptanbandana/satenuykubandi ile birebir =====
   Alacakaranlık İstanbul silueti (köprü + camii + ışıkları yanan DemFabrika fabrikası) +
   AYRI KATMANDA DemFabrika kamyonu. Kamyon arka plana GÖMÜLMÜYOR; sayfa sonuna
   kaydırıldıkça fabrikaya doğru ilerliyor. Kaynak PNG'ler ve konum değerleri kardeş
   sitelerle aynı (grup varlığı): `_ham-sahne/` + `_arac-kes.mjs` + `_footer-gorsel.mjs`.

   İki yüzey birbirine akmalı, yoksa ek yerinde yatay çizgi görünür:
     kapanış CTA → aşağı doğru --sahne-gok'e kararır
     sahne bandı → görselin kendisi
     altbilgi    → --surface-footer = görselin en alt satırı
   ⚠️ `background` KISAYOLU KULLANMA: kısayol background-color'ı transparent'a çeker;
   gradyan boyanmadığı durumda açık yazılar beyaz zeminde kalıyor. */
.footer-sahne{
  position:relative; background:var(--sahne-gok);
  line-height:0;                 /* satır içi görselin altında boşluk kalmasın */
  margin-bottom:-1px;            /* alt piksel yuvarlaması ek yerinde çizgi bırakmasın */
}
.footer-sahne picture,
.footer-sahne>picture img{display:block; width:100%;}
/* GÖRSEL ASLA KIRPILMAZ: doğal oranında, tam genişlikte. Sabit yükseklik + cover
   verilirse kısa-geniş pencerelerde (1600x800, 2560x1080...) tam bacaların olduğu
   yerden dikey kesiyor. Doğal oran korununca kırpma matematiksel olarak imkânsız. */
.footer-sahne>picture img{height:auto;}

/* Araç ayrı katman; konum ve yol _footer-sahne.json'daki yüzdelerden geliyor.
   --sahne-*-sol : sayfa sonundaki DURUŞ noktası (solda)
   --sahne-*-yol : oradan başlangıca (fabrikanın yanına) kadar olan yol.
                   translateX yüzdesi öğenin KENDİ genişliğine göre olduğu için
                   üretici, bant yüzdesini araç genişliğine bölerek veriyor. */
.footer-arac{
  position:absolute; display:block;
  left:var(--sahne-d-sol); top:var(--sahne-d-ust); width:var(--sahne-d-en);
  height:auto;
  /* Kaynak beyaz stüdyo render'ı; bu koyu monokrom sahnede olduğu gibi bırakılınca
     yapıştırılmış gibi parlıyor. Hafif kısma sahneye oturtuyor. */
  filter:brightness(.66) saturate(.8) contrast(1.06);
  transform:translateX(var(--sahne-d-yol));
  opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1), filter .25s ease;
}
.footer-arac img{display:block; width:100%; height:auto;}
/* Tıklanabilir olduğunun TEK ipucu hover/odak — dekoratif bir çizim tıklanabilir
   görünmüyor. ⚠️ transform KULLANILAMAZ: kaydırma animasyonu translateX'i sürüyor,
   hover transform'u onu ezip aracı yerinden oynatır. Bu yüzden ipucu filter üzerinden. */
.footer-arac:hover{filter:brightness(.95) saturate(1) contrast(1.06) drop-shadow(0 0 14px rgba(240,128,37,.42));}
.footer-arac:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:5px; border-radius:4px;
  filter:brightness(.95) saturate(1) contrast(1.06);
}
@media (min-width:768px){
  .footer-arac{
    left:var(--sahne-g-sol); top:var(--sahne-g-ust); width:var(--sahne-g-en);
    transform:translateX(var(--sahne-g-yol));
  }
}
.footer-sahne.on .footer-arac{opacity:1;}   /* kolluk.tr'de reveal sınıfı `.on` */

/* KAYDIRMAYA BAĞLI HAREKET — tarayıcının kendi zaman çizelgesiyle, JS'SİZ.
   Scroll dinleyicisi eklenmiyor (site kuralı: yalnız IntersectionObserver).
   KURAL: bitiş yüzdesi KÜÇÜLDÜKÇE araç daha erken varır (daha fazla ekranda tamamlanır),
   BÜYÜDÜKÇE yolu yarıda bırakma riski artar. Değer GÖZ KARARI DEĞİL, `_arac-olc.mjs`
   ile ölçülür: sayfa dibinde sahnenin cover ilerlemesi her ekranda bitiş yüzdesinden
   BÜYÜK olmalı. kolluk.tr ölçümü (DemFabrika bandı eklendikten SONRA):
   390x844 %149 · 1440x900 %57,7 · 1600x1000 %53,5 · 1920x1080 %51,5 ·
   1920x1200 %47,1 · 2560x1440 %42,7 → en küçük %42,7 olduğu için bitiş %40.
   ⚠️ Kardeş sitelerdeki %45 kolluk.tr'de 2560x1440'ta yolu yarıda bırakıyordu;
   sayfa yüksekliği farklı, değer SİTEYE ÖZGÜ — kopyalama, yeniden ölç. */
@keyframes arac-yolda{
  from{transform:translateX(var(--yol));}
  to{transform:translateX(0);}
}
@supports (animation-timeline: view()){
  .footer-arac{
    /* Opaklık reveal'a BAĞLANMAZ: gözlemci %12 görünürlükte tetikleniyor, sahne ilk
       göründüğünde araç henüz saydam kalıyordu. Konumu animasyon yönetiyor. */
    opacity:1; transition:none;
    --yol:var(--sahne-d-yol);
    animation:arac-yolda linear both;
    animation-timeline:view();
    /* Menzil sonu ÖLÇÜLDÜ (_arac-olc.mjs): en dar durum uzun ekranlarda EN ana sayfası
       (2560x1440'ta cover %28,2) ve TR ana sayfası (%27,7). Sayfa uzadıkça bu oran
       düşer; %25 hepsinin altında pay bırakıyor. Sayfa boyu değişirse YENİDEN ÖLÇ. */
    animation-range:cover 0% cover 25%;
  }
  @media (min-width:768px){ .footer-arac{--yol:var(--sahne-g-yol);} }
}
/* Sahnenin kendisi kaymasın, yalnız araç hareket etsin. */
.footer-sahne.reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .footer-arac{transform:none; opacity:1; transition:none; animation:none;}
}

/* ── blog kategori çipleri ──
   Sabit hex'ler koyu temada kayboluyordu (Bilgi #2D3F7A lacivert, Sektör #0E7C86 koyu turkuaz).
   Açık tema: beyaz üstünde AA. Koyu tema: aynı rengin açık tonu. `.on-dark` = HER ZAMAN koyu
   yüzeyde (blog hero gradienti) → tema ne olursa olsun açık ton. */
.catc{border-style:solid;border-width:1px;}
.catc-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;}
.catc-bilgi {color:#2D3F7A;background:rgba(45,63,122,.10);border-color:rgba(45,63,122,.26);}
.catc-rehber{color:#B25910;background:rgba(240,128,37,.12);border-color:rgba(240,128,37,.30);}
.catc-sektor{color:#0E7C86;background:rgba(14,124,134,.11);border-color:rgba(14,124,134,.28);}
.catc.on-dark.catc-bilgi ,:root[data-theme="dark"] .catc-bilgi {color:#93A7E0;background:rgba(147,167,224,.14);border-color:rgba(147,167,224,.32);}
.catc.on-dark.catc-rehber,:root[data-theme="dark"] .catc-rehber{color:#F6984C;background:rgba(246,152,76,.14);border-color:rgba(246,152,76,.32);}
.catc.on-dark.catc-sektor,:root[data-theme="dark"] .catc-sektor{color:#5CCBD6;background:rgba(92,203,214,.14);border-color:rgba(92,203,214,.32);}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .catc-bilgi {color:#93A7E0;background:rgba(147,167,224,.14);border-color:rgba(147,167,224,.32);}
  :root:not([data-theme="light"]) .catc-rehber{color:#F6984C;background:rgba(246,152,76,.14);border-color:rgba(246,152,76,.32);}
  :root:not([data-theme="light"]) .catc-sektor{color:#5CCBD6;background:rgba(92,203,214,.14);border-color:rgba(92,203,214,.32);}
}

/* ── tema düğmesi (karanlık/aydınlık) ── */
.theme-toggle{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);transition:border-color .2s ease,color .2s ease,transform .2s cubic-bezier(.16,1,.3,1);flex-shrink:0;}
.theme-toggle:hover{border-color:rgba(240,128,37,.5);color:#F08025;transform:translateY(-1px);}
.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(240,128,37,.4);}
.theme-toggle .th-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .th-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .th-sun{display:inline;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .th-moon{display:none;}:root:not([data-theme="light"]) .theme-toggle .th-sun{display:inline;}}

/* ═══════════ valizetiketi.com yerel katman ═══════════
   MARKA-KILAVUZU §5'te valiz etiketi için tanımlı bir KATEGORİ AKSANI yok. Kılavuz
   "gökkuşağı etkisi markayı zayıflatır" diyor; yeni bir kategori rengi uydurmak yerine
   rozet nötr (navy-200 tonu) bırakıldı ve üst şerit (.cat-strip) hiç basılmıyor. */
.cat-badge{color:var(--text-on-inverse-soft);background:rgba(193,200,226,.12);border-color:rgba(193,200,226,.30);}
.cat-badge::before{background:var(--text-on-inverse-soft);}

/* NOT: dikiş dokusu (.doku-dikis) kaldırıldı - marka sahibi beğenmedi ve
   kardeş sitelerde kullanılmayan yeni bir görsel dil açıyordu (29 Ağu 2026). */

/* Renk kartelası kutucukları (valiz-etiketi-renkleri) — gerçek renk örneği değil,
   "her suni deri renginde üretilir" ifadesinin görsel karşılığı. */
.renk-kart{display:flex;flex-direction:column;gap:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-card);box-shadow:var(--shadow-sm);}
.renk-ornek{height:88px;display:block;}
.renk-ad{padding:11px 12px 13px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--text-primary);}
.renk-ad small{display:block;font-weight:400;font-size:11px;color:var(--text-muted);margin-top:2px;letter-spacing:.02em;}
/* Ürün Bulucu aktif çip — .tag-int zaten hover/focus taşıyor, .on seçili halidir. */
.bulucu-btn{font-family:'Montserrat',sans-serif;}
.bulucu-btn.on{background:var(--action);color:#141C36;border-color:transparent;}
/* Çip olarak kullanılan bağlantılarda altçizgi olmaz — rozet gibi durmalı. */
a.tag,a.tag:hover{text-decoration:none;}
/* Mobilde nav'daki "Teklif Al" iki satıra kırılıyordu (logo + tema + buton + hamburger
   390px'e sığmıyor). Tek satırda kalsın, dar ekranda küçülsün. */
.navbar .btn-orange{white-space:nowrap;}
@media(max-width:430px){
  .navbar .btn-orange{font-size:10px!important;padding:9px 13px!important;}
  .brand-lockup img{height:40px!important;}
}
/* MARKA-KILAVUZU §3 "paragraf en fazla 68 karakter" — SSS cevabı 760px genişlikte
   107 karaktere çıkıyordu. ch birimi punto ile ölçeklenir, sabit px ölçeklenmez. */
.faq-a p{max-width:52ch;}

/* Beyaz stüdyo zeminli ürün karesi (renk ızgarası, ana sayfa renk bloğu).
   ⚠️ Plaka HER İKİ temada da BEYAZ kalır: fotoğrafın kendi zemini beyaz, plakayı
   token'la koyuya döndürürsek arada dikiş izi oluşur. Koyu temada tüm plaka hafifçe
   kısılıyor → parlama gider, fotoğraf ile plaka birebir aynı kalır.
   (Aynı çözüm kolluk.tr'de .imgwrap.photo için kullanılıyor.) */
.urun-plaka{background:var(--photo-plate);border-radius:12px;overflow:hidden;transition:filter .3s ease;}
:root[data-theme="dark"] .urun-plaka{filter:brightness(.9) saturate(.97);}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .urun-plaka{filter:brightness(.9) saturate(.97);}
}

/* Yöntem kartları (ana sayfa "Baskı mı, kabartma mı?") artık bağlantı: altta ayrı
   buton yok, kartın kendisi tıklanıyor. Hover .info-card.dark'tan geliyor; bağlantı
   olduğu için focus-visible ve active da zorunlu (MARKA-KILAVUZU §7). */
a.info-card{cursor:pointer;}
a.info-card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;}
a.info-card:active{transform:translateY(-1px);}
a.info-card .ic-git{transition:transform .22s cubic-bezier(.16,1,.3,1);display:inline-block;}
a.info-card:hover .ic-git{transform:translateX(4px);}