/* ==========================================================================
   Schanall — kurumsal site
   Tasarım dili: TEMA A "SANAYİ" (müşteri onayı 30.07.2026)
   Sert geometri, ince çizgi ızgarası, teknik tablo, yoğun katalog.
   Marka: lacivert #03397C (logo) + 666 turuncusu #F5821F (işlevsel vurgu)
   ========================================================================== */

:root{
  --navy:#03397C;
  --navy-900:#022550;
  --navy-800:#032F66;
  --ink:#0A1526;
  --steel:#5B6B84;
  --line:#D7DEE9;
  --line-dark:#1E3355;
  --panel:#F2F5F9;
  --white:#fff;
  --accent:#F5821F;
  --accent-hi:#FF9330;
  /*
   * Açık zeminde KÜÇÜK METİN için turuncunun okunur tonu.
   *
   * Marka turuncusu #F5821F beyaz üstünde 2.59:1 veriyor; WCAG küçük metin için
   * 4.5:1 istiyor. Kategori ve ürün aile kodları (01, 666, 888) bu turuncuyla
   * 12 px basılıyordu ve 86 sayfada okunaksızdı — üstelik bu kodlar bu işte
   * dekor değil, müşterinin ürünü adlandırma biçimi (16.08.2026 denetimi).
   *
   * Marka rengi DEĞİŞMİYOR: dolgu, düğme ve koyu zemin kullanımları #F5821F
   * olarak kalıyor. Yalnız açık zeminde küçük punto metin bu koyu tona geçiyor —
   * aynı hue; beyazda 5.42:1, panel grisinde 4.96:1.
   */
  --accent-metin:#A85200;
  --lime:#8CC63F;
  --shell:min(1280px,100% - 3rem);
  --pad-section:5.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 16px/1.6 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'ss01','cv05';
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
/* <picture> yerleşimde saydam kalsın; ölçü kuralları doğrudan <img>'e uygulansın */
picture{display:contents}
/* hidden özniteliği, display kuralı olan öğelerde de geçerli olsun (sekme panelleri) */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Archivo','Inter',system-ui,sans-serif;font-weight:800;line-height:1.06;letter-spacing:-.02em;margin:0}
p{margin:0}
.shell{width:var(--shell);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font:700 12px/1 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-metin);margin:0}
/*
 * Aynı sınıf iki zeminde: açık sayfa başlıklarında ve KOYU hero'da. Tek renk
 * ikisine birden yetmiyor — açık zemin için koyulaştırılan ton lacivert üstünde
 * 2.8:1'e düşüyordu. Koyu zeminde marka turuncusunun kendisi zaten 5.85:1.
 */
.hero .eyebrow,.hero-body .eyebrow{color:var(--accent)}
.eyebrow--steel{color:var(--steel)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#1A1000;padding:.75rem 1.25rem;z-index:100;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- üst fayda çubuğu ---------- */
.util{background:var(--ink);color:#9FB2CC;font-size:13px}
.util .shell{display:flex;gap:1.5rem;align-items:center;min-height:38px;flex-wrap:wrap}
.util a{display:inline-flex;gap:.45rem;align-items:center;transition:color .15s}
.util a:hover{color:#fff}
.util .sep{margin-left:auto;display:flex;gap:.85rem;align-items:center}
.lang{display:flex;border:1px solid #24374F}
.lang a{padding:.3rem .6rem;font:600 12px/1 'Inter',sans-serif;color:#9FB2CC}
.lang a[aria-current]{background:var(--accent);color:#1A1000}

/* ---------- başlık ---------- */
.hdr{background:var(--navy);border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:40}
.hdr .shell{display:flex;align-items:center;gap:2rem;min-height:76px;position:relative}
/* Müşteri talebi 31.07.2026: "üst köşedeki Schanall yazısı biraz daha büyük olabilir".
   Dar ekranda hamburger menüyle çakışmaması için orada 34 px'te kalır. */
.hdr-logo img{height:41px;width:auto}
@media (max-width:420px){.hdr-logo img{height:34px}}
.nav{display:flex;gap:.25rem;margin-left:auto}
.nav a{
  font:600 13px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#CBD8EC;padding:1rem .95rem;border-bottom:3px solid transparent;margin-bottom:-3px;transition:color .15s,border-color .15s;
}
.nav a:hover{color:#fff;border-color:var(--accent)}
.nav a[aria-current="page"]{color:#fff;border-color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:700 13px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:.95rem 1.4rem;border:2px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn--accent{background:var(--accent);color:#1A1000}
.btn--accent:hover{background:var(--accent-hi)}
.btn--ghost{border-color:#4E6C9C;color:#fff}
.btn--ghost:hover{border-color:#fff;background:#ffffff14}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-900)}
.btn--line{border-color:var(--navy);color:var(--navy)}
.btn--line:hover{background:var(--navy);color:#fff}
.hdr-cta{padding:.7rem 1.1rem}

.burger{display:none;margin-left:auto;background:none;border:1px solid #4E6C9C;padding:.6rem .65rem;cursor:pointer;border-radius:2px}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   HERO — video (müşteri talebi: girişte görsel; polisaj videosu ile karşılandı)
   ========================================================================== */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* lacivert marka perdesi: soldan opak → sağda görüntü açılır */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,rgba(2,37,80,.96) 0%,rgba(3,57,124,.90) 26%,rgba(3,57,124,.55) 52%,rgba(2,37,80,.30) 74%,rgba(2,37,80,.62) 100%),
    linear-gradient(to top,rgba(2,37,80,.85) 0%,rgba(2,37,80,0) 38%);
}
/* teknik ızgara dokusu (Tema A imzası) */
.hero::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.30;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:64px 64px;
}
.hero .shell{position:relative;z-index:3}
.hero-body{
  display:grid;align-content:center;
  /* başlık çubuğu + kod şeridi hesaba katıldı: kod şeridi ilk ekranda görünür kalır */
  min-height:clamp(460px,70vh,700px);
  padding:4rem 0 2rem;max-width:44rem;
}
.hero h1{font-size:clamp(2.3rem,4.6vw,4rem);text-transform:uppercase;color:#fff;margin-top:1.25rem;text-shadow:0 2px 24px rgba(2,20,45,.45)}
.hero h1 .hl{color:var(--accent)}
.hero-lead{color:#D2DFF2;font-size:clamp(1rem,1.15vw,1.1rem);max-width:44ch;margin:1.5rem 0 2.25rem;text-shadow:0 1px 12px rgba(2,20,45,.5)}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap}

/* ürün kodu şeridi — hero'nun alt kenarına oturur (alt marka logoları 04.08.2026) */
.hero-codes{
  position:relative;z-index:3;border-top:1px solid #ffffff24;
  display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:start;
}
.hero-codes a{padding:1.15rem 1.5rem 1.25rem 0;display:block;border-right:1px solid #ffffff14;transition:background .15s}
.hero-codes a:hover{background:#ffffff10}
.hero-codes a:first-child{padding-left:0}
.hero-codes b{display:block;font:800 1.85rem/1 'Archivo',sans-serif;color:#fff;letter-spacing:.01em}
.hero-codes .hero-code-logo{
  display:block;height:2.15rem;width:auto;max-width:min(100%,11rem);
  object-fit:contain;object-position:left center;
}
.hero-codes small{color:#A9C0DE;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:.45rem}
.hero-scroll{
  justify-self:end;padding:1rem 0 1rem 1.5rem;color:#A9C0DE;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;display:flex;align-items:center;gap:.6rem;
}
.hero-scroll::after{content:'';width:1px;height:26px;background:linear-gradient(to bottom,#ffffff00,var(--accent));animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-scroll::after{animation:none}}

/* ---------- kanıt şeridi ---------- */
.proof{border-bottom:1px solid var(--line);background:var(--panel)}
.proof .shell{display:grid;grid-template-columns:repeat(4,1fr)}
.proof div{padding:1.75rem 1.5rem;border-left:1px solid var(--line)}
.proof div:first-child{border-left:0;padding-left:0}
.proof b{display:block;font:800 1.75rem/1 'Archivo',sans-serif;color:var(--navy)}
.proof b.sm{font-size:1.3rem}
.proof span{font-size:13px;color:var(--steel);display:block;margin-top:.4rem}

/* ---------- bölüm çerçevesi ---------- */
section{padding:var(--pad-section) 0}
section.tight{padding:3.5rem 0}
.sec-head{display:flex;align-items:flex-end;gap:2rem;border-bottom:2px solid var(--ink);padding-bottom:1.25rem;margin-bottom:2.75rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);text-transform:uppercase;flex:1;min-width:min(100%,18ch)}
.sec-head p{color:var(--steel);max-width:44ch;font-size:.95rem}
.sec-head .btn{flex:none}
.sec--panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink .sec-head{border-color:#ffffff2e}
.sec--ink .sec-head p{color:#9FB2CC}

/* ---------- kategori ızgarası ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cat{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;transition:background .15s;
}
.cat:hover{background:var(--panel)}
.cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel)}
.cat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cat:hover .cat-media img{transform:scale(1.04)}
.cat-media--empty{display:grid;place-items:center;background:var(--navy);color:#ffffff2e;font:800 3.5rem/1 'Archivo',sans-serif}
.cat-body{padding:1.5rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.cat i{display:block;font:800 12px/1 'Archivo',sans-serif;letter-spacing:.14em;color:var(--accent-metin);font-style:normal}
.cat h3{font-size:1.15rem;margin:.85rem 0 .6rem;letter-spacing:-.01em}
.cat p{font-size:.875rem;color:var(--steel);line-height:1.55}
.cat .more{margin-top:auto;padding-top:1.1rem;font:600 12px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.cat .more::after{content:' →'}

/* ---------- ürün ailesi + teknik tablo ---------- */
.fam-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:2rem;flex-wrap:wrap}
.tabs button{
  background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;
  font:800 1rem/1 'Archivo',sans-serif;letter-spacing:.04em;color:var(--steel);padding:.9rem 1.25rem .8rem;
}
.tabs button[aria-selected="true"]{color:var(--navy);border-color:var(--accent)}
.fam-panel h3{font-size:1.5rem;margin-bottom:.35rem}
.fam-panel > p{color:var(--steel);margin:0 0 1.5rem;font-size:.925rem}
.spec{width:100%;border-collapse:collapse;font-size:.9rem}
.spec th,.spec td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:42%;color:var(--steel);font-weight:500}
.spec td{font-weight:600;font-variant-numeric:tabular-nums}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.swatches i{width:26px;height:26px;border:1px solid #00000020;display:block}
.sw-white{background:#F2F2F0}.sw-orange{background:#F0A020}.sw-yellow{background:#F5D021}
.sw-red{background:#F4611A}.sw-blue{background:#2E8BD8}.sw-green{background:#4CAF3E}
.fam-media{border:1px solid var(--line);background:#fff;padding:1.25rem}
.fam-media .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff}
.fam-media .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.note{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.5rem;padding:1rem 1.15rem;background:var(--panel);border-left:3px solid var(--accent);font-size:.875rem;color:var(--steel)}
.sec--panel .note{background:#fff}

/* ---------- üretim adımları ---------- */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.media-frame{position:relative;overflow:hidden;background:var(--navy-900)}
.media-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:1086/550}
.media-frame--16x9{aspect-ratio:16/9}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:800 .95rem/1.4 'Archivo',sans-serif;color:var(--accent-metin)}
.steps b{display:block;margin-bottom:.3rem;font-size:1.02rem}
.steps span{color:var(--steel);font-size:.9rem}

/* ---------- sertifikalar ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.certs div{background:#fff;padding:2rem 1.75rem}
.certs b{display:block;font:800 1.3rem/1 'Archivo',sans-serif;color:var(--navy)}
.certs span{display:block;margin-top:.55rem;font-size:.875rem;color:var(--steel)}
/* İletişim — adres altı gri marka kutusu (görüş #14) */
.contact-brand{
  margin-top:1.25rem;padding:2rem 1.5rem;background:var(--panel);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.contact-brand img{height:44px;width:auto;max-width:min(100%,220px);object-fit:contain}

/* ---------- teklif bandı / form ---------- */
.quote{background:var(--ink);color:#fff}
.quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem}
.quote h2{font-size:clamp(1.9rem,3.4vw,2.7rem);text-transform:uppercase;margin-top:1rem}
.quote-grid > div > p{color:#9FB2CC;margin:1.25rem 0 0;font-size:.975rem}
.chan{margin-top:2rem;border-top:1px solid var(--line-dark)}
.chan a{display:flex;gap:.75rem;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-weight:600;transition:color .15s}
.chan a:hover{color:var(--accent)}
.chan small{color:#8AA2C4;display:block;font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:block;font:600 12px/1 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9FB2CC;margin-bottom:.5rem}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{
  width:100%;background:#12203A;border:1px solid #24374F;color:#fff;border-radius:2px;
  padding:.85rem .9rem;font:400 15px 'Inter',sans-serif;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:120px;resize:vertical}
.form .hint{grid-column:1/-1;font-size:12px;color:#7E93B3}
.form .hp{position:absolute;left:-9999px}
.form .btn{width:100%}
.flash{grid-column:1/-1;padding:.9rem 1.1rem;font-size:.9rem;border-left:3px solid}
.flash--ok{background:#0F2E1C;border-color:#4CAF3E;color:#CFEBD5}
.flash--err{background:#361417;border-color:#E4574C;color:#F6D2CE}

/* ---------- katalog / kategori / ürün ---------- */
.crumbs{background:var(--panel);border-bottom:1px solid var(--line);font-size:13px;color:var(--steel)}
.crumbs .shell{display:flex;gap:.5rem;flex-wrap:wrap;padding:.9rem 0}
.crumbs a:hover{color:var(--navy)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}
.page-head{background:var(--navy);color:#fff;padding:3.25rem 0 3rem;border-bottom:3px solid var(--accent);position:relative;overflow:hidden}
.page-head::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:64px 64px;
}
.page-head .shell{position:relative;z-index:1}
.page-head h1{font-size:clamp(2rem,3.6vw,3rem);text-transform:uppercase;margin-top:1rem;max-width:22ch}
.page-head p{color:#BACAE4;margin-top:1.25rem;max-width:60ch;font-size:1.02rem}

.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.prod{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}
.prod:hover{border-color:#B9C6D8}
.prod:hover{box-shadow:0 14px 34px -22px rgba(3,57,124,.65)}
.prod-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.prod-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1.25rem;transition:transform .35s}
.prod:hover .prod-media img{transform:scale(1.03)}
.prod-media--empty{background:var(--panel);color:#B9C6D8;font:800 2.5rem/1 'Archivo',sans-serif}
.prod-body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.prod-code{font:800 11px/1 'Archivo',sans-serif;letter-spacing:.14em;color:var(--accent-metin)}
.prod h3{font-size:1.05rem;margin:.7rem 0 .5rem}
.prod p{font-size:.85rem;color:var(--steel);line-height:1.55}
.prod .more{margin-top:auto;padding-top:1rem;font:600 12px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.prod .more::after{content:' →'}

.detail{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.detail-media{border:1px solid var(--line);padding:1.5rem;background:#fff}
.detail-media .frame{position:relative;aspect-ratio:1/1;overflow:hidden}
.detail-media .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.detail h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:.75rem 0 1rem}
.detail .lead{color:var(--steel);font-size:1.02rem;margin-bottom:2rem}
.detail .body p{margin-bottom:1rem;color:var(--steel);font-size:.95rem}
.detail-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}

.cat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cat-strip a{background:#fff;border:1px solid var(--line);padding:1.15rem 1.25rem;font-size:.9rem;font-weight:600;transition:background .15s;display:flex;align-items:center;gap:.6rem}
.cat-strip a:hover{background:var(--panel);color:var(--navy)}
.cat-strip i{font-style:normal;font:800 11px/1 'Archivo',sans-serif;color:var(--accent-metin);letter-spacing:.1em}

/* ---------- metin sayfaları ---------- */
.prose{max-width:70ch}
.prose h2{font-size:1.4rem;margin:2.5rem 0 .9rem;text-transform:none}
.prose h3{font-size:1.1rem;margin:1.75rem 0 .6rem}
.prose p,.prose li{color:var(--steel);font-size:.95rem;margin-bottom:.9rem}
.prose ul{padding-left:1.1rem}
.prose strong{color:var(--ink)}

/* ---------- eksik bilgi rozeti (yalnız önizlemede) ---------- */
.todo{
  margin:1rem 0;padding:.85rem 1rem;font-size:.85rem;color:#7A4A00;
  background:#FFF6EA;border:1px dashed var(--accent);border-radius:2px;
}
.todo b{color:#8A4B00}
.prevbadge{
  position:fixed;left:0;bottom:0;z-index:60;background:var(--accent);color:#1A1000;
  font:700 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .8rem;
}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:#9FB2CC;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding:4rem 0 3rem}
.foot-grid img{height:30px;width:auto;margin-bottom:1.25rem}
.foot-grid h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem;font-family:'Inter',sans-serif;font-weight:600}
.foot-grid > div > p{max-width:34ch}
.foot-grid a{display:block;padding:.32rem 0;transition:color .15s}
.foot-grid a:hover{color:#fff}
.foot-iso{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.foot-iso span{border:1px solid var(--line-dark);padding:.35rem .6rem;font-size:11px;letter-spacing:.06em;color:#8AA2C4}
.foot-btm{border-top:1px solid var(--line-dark);padding:1.5rem 0;display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem}
.foot-credit{margin-left:auto}

/* ==========================================================================
   duyarlı
   ========================================================================== */
@media(max-width:1000px){
  :root{--shell:min(1280px,100% - 2rem);--pad-section:4rem}
  .hero-body{min-height:clamp(480px,72vh,700px);max-width:none}
  .hero::before{background:
    linear-gradient(180deg,rgba(2,37,80,.72) 0%,rgba(3,57,124,.62) 45%,rgba(2,37,80,.90) 100%)}
  .proof .shell{grid-template-columns:1fr 1fr}
  .proof div:nth-child(3){border-left:0;padding-left:0}
  .cats{grid-template-columns:1fr 1fr}
  .fam-grid,.prod-grid,.quote-grid,.detail{grid-template-columns:1fr;gap:2.5rem}
  .certs{grid-template-columns:1fr}
  .prods{grid-template-columns:repeat(2,1fr)}
  .cat-strip{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  :root{--pad-section:3.25rem}
  .util .shell{gap:.9rem;font-size:12px}
  .util-claim{display:none}
  .nav{display:none}
  .nav.open{
    display:flex;position:absolute;top:100%;left:-1rem;right:-1rem;background:var(--navy-900);
    flex-direction:column;padding:.5rem 1rem 1rem;border-bottom:3px solid var(--accent);
  }
  .nav.open a{border-bottom:1px solid var(--line-dark);margin:0;padding:1rem .25rem}
  .hdr-cta{display:none}
  .burger{display:block}
  .hero-media img,.hero-media video{object-position:66% 50%}
  .hero-body{padding:3rem 0 1.5rem}
  .hero-cta .btn{flex:1 1 100%}
  .hero-codes{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .hero-codes a{padding:1rem .5rem 1rem 0}
  .hero-codes b{font-size:1.4rem}
  .hero-codes .hero-code-logo{height:1.65rem;max-width:100%}
  .hero-codes small{font-size:10px}
  .hero-scroll{display:none}
  .proof .shell{grid-template-columns:1fr}
  .proof div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-block:1.25rem}
  .proof div:first-child{border-top:0}
  .cats,.prods{grid-template-columns:1fr}
  .cat-strip{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .sec-head{gap:1rem}
}

/* ---------- sertifika bloğu aralığı ---------- */
.certs-wrap{margin-top:4rem}
.certs-label{margin-bottom:1.25rem}
@media(max-width:680px){.certs-wrap{margin-top:2.5rem}}

/* ---------- katalog dizini (tüm ürünler) ---------- */
.index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 2.5rem}
.index-col h3{font-size:.95rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink);margin-bottom:.9rem}
.index-col h3 i{font-style:normal;color:var(--accent-metin);letter-spacing:.1em;font-size:.8rem}
.index-col h3 a:hover{color:var(--navy)}
.index-col ul{list-style:none;margin:0;padding:0}
.index-col li{border-bottom:1px solid var(--line)}
.index-col li a{display:block;padding:.6rem 0;font-size:.875rem;color:var(--steel);transition:color .15s}
.index-col li a:hover{color:var(--navy)}
.index-col li b{color:var(--accent-metin);font:800 11px/1 'Archivo',sans-serif;letter-spacing:.08em}
.index-empty{font-size:.85rem;color:var(--steel);font-style:italic}
@media(max-width:1000px){.index-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.index-grid{grid-template-columns:1fr;gap:1.75rem}}
.foot-btm a:hover{color:#fff}

/* ==========================================================================
   SAYFA GÖRÜŞÜ — yalnız önizlemede; müşteri hangi sekmedeyse oraya yazar
   ========================================================================== */
.fb{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;font-size:15px;max-width:calc(100% - 2.5rem)}
.fb-toggle{
  display:flex;align-items:center;gap:.6rem;margin-left:auto;cursor:pointer;
  background:var(--accent);color:#1A1000;border:0;border-radius:999px;
  padding:.85rem 1.35rem;font:700 13px/1 'Inter',sans-serif;letter-spacing:.04em;
  box-shadow:0 12px 28px -12px rgba(2,20,45,.55);transition:background .15s,transform .15s;
}
.fb-toggle:hover{background:var(--accent-hi);transform:translateY(-1px)}
.fb-toggle-ic{font-size:15px}
.fb-count{background:#1A1000;color:var(--accent);border-radius:999px;padding:.15rem .5rem;font-size:11px}
.fb-panel{
  width:min(420px,calc(100vw - 2.5rem));background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--accent);box-shadow:0 24px 60px -20px rgba(2,20,45,.45);
  padding:1.25rem 1.35rem 1.4rem;margin-bottom:.75rem;max-height:min(78vh,640px);overflow-y:auto;
}
.fb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.fb-head strong{display:block;font:800 1.05rem/1.2 'Archivo',sans-serif}
.fb-head small{display:block;margin-top:.35rem;color:var(--steel);font-size:.8rem}
.fb-head small b{color:var(--navy)}
.fb-close{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--steel);cursor:pointer;padding:0 .2rem}
.fb-close:hover{color:var(--ink)}
.fb-panel label{display:block;font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin:.9rem 0 .4rem}
.fb-panel textarea,.fb-panel input{
  width:100%;border:1px solid var(--line);border-radius:2px;padding:.75rem .85rem;
  font:400 15px/1.5 'Inter',sans-serif;color:var(--ink);background:#fff;
}
.fb-panel textarea{min-height:120px;resize:vertical}
.fb-panel textarea:focus,.fb-panel input:focus{outline:none;border-color:var(--accent)}
.fb-panel .btn{width:100%;margin-top:1rem}
.fb-note{margin-top:.85rem;font-size:.78rem;color:var(--steel);line-height:1.5}
.fb-hp{position:absolute;left:-9999px}
.fb-ok{background:#EAF6EC;border-left:3px solid #4CAF3E;padding:.8rem .95rem;font-size:.875rem;color:#1E5B2A}
.fb-err{background:#FDECEA;border-left:3px solid #E4574C;padding:.8rem .95rem;font-size:.875rem;color:#8B1A10}
.fb-mine{margin-top:1rem;background:var(--panel);padding:.85rem .95rem;border-left:3px solid var(--navy)}
.fb-mine > span{display:block;font:600 11px/1 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:.55rem}
.fb-mine ul{margin:0;padding-left:1.1rem}
.fb-mine li{font-size:.85rem;color:var(--ink);margin-bottom:.35rem}
@media(max-width:680px){
  .fb{right:.75rem;bottom:.75rem;left:.75rem}
  .fb-toggle{width:100%;justify-content:center}
  .fb-panel{width:100%}
  .prevbadge{bottom:auto;top:0}
}

/* Fiyat gösterimi — yalnız panelden açıldığında basılır (fiyat_gorunur).
   Tema A dili: turuncu vurgu, ağır rakam, altında küçük gri not. */
.fiyat{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:1.25rem 0 0}
.fiyat-tutar{font:800 1.6rem/1 'Archivo',system-ui,sans-serif;color:var(--navy);letter-spacing:-.02em}
.fiyat-not{font-size:.8rem;color:#5B6B84}
.prod-fiyat{display:block;margin-top:.4rem;font:700 1rem/1 'Archivo',system-ui,sans-serif;color:var(--navy)}

/* ==========================================================================
   GÖRSEL KUTUSU + METİN GÜVENLİK AĞI
   ==========================================================================
   Tasarımın müşteri içeriğine karşı dayanıklılığı iki şeyden gelir: görselin
   kutusunun sabit olması ve metnin taşamaması. Aşağıdakiler o iki güvencenin
   CSS tarafıdır; PHP tarafı lib/medya-slotlari.php (oran) ve şemadaki karakter
   sınırlarıdır. İkisi birlikte çalışır — biri olmadan diğeri yetmez.
   ========================================================================== */

/* resim(['kutu'=>true]) kendi oran kutusunu getirir. Mevcut .cat-media /
   .prod-media / .media-frame sarmalayıcıları zaten kutu olduğu için orada
   kullanılmaz; bu sınıf yeni yerleşimler ve panel önizlemesi içindir. */
.resim-kutu{
  position:relative;display:block;overflow:hidden;
  background:var(--panel) no-repeat center/cover;
}
.resim-kutu>picture,.resim-kutu>picture>img{
  position:absolute;inset:0;width:100%;height:100%;
}
.resim-kutu>picture>img{object-fit:cover}

/* Görsel yoksa: aynı ölçüde sessiz bir alan. Boş kalan yer çökmez, bu yüzden
   altındaki hiçbir şey yukarı zıplamaz (layout kayması yok). */
.resim-bos{
  display:block;width:100%;background:var(--panel);
  background-image:linear-gradient(135deg,#00000008 25%,transparent 25%,transparent 50%,#00000008 50%,#00000008 75%,transparent 75%);
  background-size:14px 14px;
}

/* Giriş başlığı: sınırı sunucu koyar (şemada 60 karakter), ama sınır bir gün
   gevşetilse bile tasarım kırılmasın. balance satırları dengeler, satır kısıtı
   dördüncü satırdan sonrasını keser, anywhere ise boşluksuz uzun bir dizinin
   yatay taşmasını engeller. */
.hero h1{
  text-wrap:balance;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}
.hero-lead{
  text-wrap:pretty;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.sec-head h2,.page-head h1,.detail h1,.quote h2{text-wrap:balance;overflow-wrap:anywhere}
.cat-body h2,.cat-body h3,.prod-body h3{
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cat-body p,.prod-body p{
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* Kanıt şeridi hücreleri: uzun bir üst satır şeridi kırmasın. */
.proof b.sm{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ==========================================================================
   YÜZEN WHATSAPP DÜĞMESİ — her sayfada sağ altta
   --------------------------------------------------------------------------
   Katman düzeni (bu sırayı bozmayın):
     40  yapışkan başlık   ·  55  bu düğme  ·  60  önizleme rozeti
     70  görüş defteri (yalnız önizlemede)
   Düğme başlığın üstünde durmalı (sayfa kaydırılınca başlığın altında
   kaybolmasın), ama önizleme araçlarının altında kalmalı — o araçlar
   müşteriyle konuşma kanalı, düğme onları örtmemeli.

   Marka rengi #25D366 WhatsApp'ın kendi yeşili; site paletinden gelmiyor ve
   gelmemeli: ziyaretçi bu düğmeyi renginden tanıyor, "Tema A" ye boyamak
   tanınırlığı bozar. Beyaz ikon bu yeşilde 2.5:1 — ikon METİN değil, dekoratif
   glif; okunur ad aria-label'da ve baloncukta, ikisi de tam kontrastlı.
   ========================================================================== */
.wa-float{
  position:fixed;z-index:55;
  right:1.25rem;
  bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:.6rem;
  width:56px;height:56px;border-radius:999px;      /* 56px: dokunma hedefi 44px alt sınırının üstünde */
  justify-content:center;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(2,20,45,.45), 0 2px 6px rgba(2,20,45,.18);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.wa-float:hover,.wa-float:focus-visible{background:#1FBE59;box-shadow:0 16px 34px -10px rgba(2,20,45,.5), 0 2px 8px rgba(2,20,45,.2)}
.wa-float:hover{transform:translateY(-2px)}
/* Odak halkası: yeşil zeminde yeşil halka görünmez — beyaz iç + koyu dış halka
   hem açık hem koyu zeminde ayırt edilir. */
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 3px var(--navy), 0 16px 34px -10px rgba(2,20,45,.5)}
.wa-float-ic{display:block;flex:none}

/* Ad baloncuğu: fare üstüne gelince ya da klavye odağı gelince açılır.
   Düğmenin kendisi hep 56px kalır; baloncuk dışarı doğru, konumu bozmadan
   büyür (soldan sağa değil, sağdan sola). */
.wa-float-tip{
  position:absolute;right:calc(100% + .6rem);
  white-space:nowrap;
  background:var(--navy);color:#fff;
  font:600 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;
  padding:.6rem .85rem;border-radius:2px;
  box-shadow:0 8px 20px -8px rgba(2,20,45,.45);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.wa-float:hover .wa-float-tip,
.wa-float:focus-visible .wa-float-tip{opacity:1;transform:translateX(0)}

/* Önizlemede görüş defteri düğmesi de sağ altta duruyor (.fb, z-index 70).
   İkisi üst üste binmesin diye önizlemede WhatsApp düğmesi bir kat yukarı
   çıkar. Kanca `body.onizleme` — sunucu hangi kipte olduğunu zaten biliyor,
   sınıfı layout basıyor. CSS'in :has() ile .fb'yi araması da işe yarardı ama
   :has() desteklemeyen bir tarayıcıda kural sessizce düşer ve iki düğme üst
   üste binerdi. Canlıda .onizleme hiç basılmaz, kural devreye girmez. */
body.onizleme .wa-float{bottom:calc(6rem + env(safe-area-inset-bottom,0px))}

@media(max-width:680px){
  .wa-float{right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
  /* Dar ekranda baloncuk ekranın dışına taşardı; ad yalnız aria-label'da kalır. */
  .wa-float-tip{display:none}
  /* Mobilde görüş defteri tam genişlik şerit oluyor — düğme onun üstüne çıkar. */
  body.onizleme .wa-float{bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float-tip{transition:none}
  .wa-float:hover{transform:none}
}

@media print{ .wa-float{display:none} }