@charset "UTF-8";

/* ============================================================
   KN Advanced Composites — kurumsal internet sitesi
   Tipografi, renkler ve izgara duzeni KN urun katalogundan
   (KN_Catalog_v30) alinmistir. Marka renkleri Pantone 276 C ve
   287 C, yazi tipi Poppins.

   Bolumler
     01  yazi tipleri
     02  degiskenler
     03  temel oge stilleri
     04  yerlesim yardimcilari
     05  ust bant (header) ve gezinme
     06  banner (hero)
     07  bolum basliklari ve metin bloklari
     08  kartlar, sutunlar, sayilar
     09  urun ozellik tablosu
     10  gorsel bantlar
     11  iletisim ve form
     12  alt bant (footer)
     13  cerez onayi
     14  yasal metin sayfalari
     15  hareket, erisilebilirlik, yazdirma
   ============================================================ */

/* 01 ── yazi tipleri ────────────────────────────────────────── */

@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/poppins-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 02 ── degiskenler ────────────────────────────────────────── */

:root{
  /* marka renkleri — KN Kurumsal Kimlik Rehberi */
  --ink:#382F46;              /* Pantone 276 C */
  --blue:#004B93;             /* Pantone 287 C */

  --ink-90:#463c56;
  --ink-60:#7b7288;
  --ink-40:#a8a2b2;
  --rule:#d5d1dc;
  --rule-soft:#e7e4ec;
  --paper:#ffffff;
  --mist:#f4f3f7;
  --mist-2:#eceaf1;

  /* koyu zeminde kullanilan tonlar */
  --on-dark:#ded9e6;
  --on-dark-mute:#b8b0c4;
  --on-dark-accent:#9fb6d8;
  --on-dark-accent-2:#7f9fd0;
  --dark-rule:rgba(255,255,255,.18);

  --focus:#2f80ed;

  --shell:1240px;
  --gutter:clamp(20px, 5vw, 56px);
  --section-y:clamp(64px, 8vw, 112px);
  --header-h:76px;
  /* Ust bant ve alt banttaki logo ayni genislikte. */
  --logo-w:168px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 03 ── temel oge stilleri ─────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-90);
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  font-weight:300;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  overflow-wrap:break-word;
}

body.is-locked{overflow:hidden}

h1,h2,h3,h4,h5{
  margin:0;
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

img,svg,iframe{max-width:100%;display:block}
img{height:auto}

ul,ol{margin:0;padding:0}
li{list-style:none}

hr{border:0;border-top:1px solid var(--rule);margin:0}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--blue);color:#fff}

/* 04 ── yerlesim yardimcilari ──────────────────────────────── */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(44px,5.5vw,72px)}
/* Alt bandin hemen ustundeki koyu eylem bandi: iki koyu blok arka arkaya
   geldigi icin daha alcak tutuluyor. */
.section--cta{padding-block:clamp(36px,4vw,54px)}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink);color:var(--on-dark)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:200;
  padding:12px 20px;
  background:var(--ink);
  color:#fff;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* katalogdaki gibi iki sutunlu bolum */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4.5vw,72px);
}
.split--wide-right{grid-template-columns:1fr 1.15fr}

/* Sol sutunda yalnizca bolum basligi varken kullanilir: baslik dar bir
   etiket sutununda kalir, metin genis olur, arada bosluk olusmaz. */
.split--label{grid-template-columns:minmax(170px,230px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px)}
/* Etiket kutusu satir boyunca uzamasin: uzarsa sec-title alt cizgisi
   kutunun dibine, metnin ortalarina denk gelen bir yere duser. */
.split--label > *{align-self:start}
.split--label .sec-title{margin-bottom:0}

@media (max-width:900px){
  .split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;gap:40px}
  .split--label{grid-template-columns:1fr;gap:20px}
  .split--label .sec-title{margin-bottom:4px}
}

.stack-lg > * + *{margin-top:clamp(40px,5vw,64px)}

/* 05 ── ust bant ve gezinme ────────────────────────────────── */

.header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--header-h);
}

.header__logo{display:flex;align-items:center;flex:0 0 auto}
.header__logo img{width:var(--logo-w)}

/* Dar ekranda yalnizca ust banttaki logo kuculur; orada menu dugmesiyle
   ayni satiri paylasiyor. Alt bantta sutun tek basina oldugu icin gerek yok. */
@media (max-width:400px){
  .header__logo img{width:138px}
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}

.nav__link{
  position:relative;
  padding:6px 0;
  color:var(--ink);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--blue)}

.nav__lang{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:8px;
  padding:7px 13px;
  border:1px solid var(--rule);
  color:var(--ink-60);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.nav__lang:hover{border-color:var(--blue);color:var(--blue)}

.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--rule);
  background:none;
  color:var(--ink);
  cursor:pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after{
  display:block;
  width:18px;
  height:1.5px;
  background:currentColor;
  transition:transform .26s var(--ease),opacity .18s var(--ease);
}
.nav__toggle span{margin:0 auto;position:relative}
.nav__toggle span::before,
.nav__toggle span::after{content:"";position:absolute;left:0}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}

.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:920px){
  .nav__toggle{display:block}

  .nav{
    position:fixed;
    inset:var(--header-h) 0 0;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:12px var(--gutter) 48px;
    background:var(--ink);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}

  .nav__link{
    padding:20px 0;
    border-bottom:1px solid var(--dark-rule);
    color:#fff;
    font-size:1rem;
    letter-spacing:.08em;
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--on-dark-accent)}

  .nav__lang{
    align-self:flex-start;
    margin:28px 0 0;
    border-color:var(--dark-rule);
    color:var(--on-dark-accent);
  }
  .nav__lang:hover{border-color:var(--on-dark-accent);color:#fff}
}

/* 06 ── banner (hero) ──────────────────────────────────────── */

.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(520px,84vh,860px);
  padding-block:clamp(72px,10vh,120px);
  background:var(--ink);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

.hero__media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero__media img,
.hero__media video{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Video, poster gorselinin uzerine oturur. Yuklenemezse poster kalir. */
.hero__media video{position:absolute;inset:0}

.hero__veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(94deg,rgba(24,19,34,.93) 0%,rgba(24,19,34,.74) 42%,rgba(24,19,34,.30) 78%,rgba(24,19,34,.18) 100%),
    linear-gradient(0deg,rgba(24,19,34,.66) 0%,rgba(24,19,34,0) 48%);
}

.hero__copy{max-width:44rem}

.kicker{
  margin:0 0 clamp(20px,2.4vw,30px);
  color:var(--on-dark-accent);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  line-height:1.5;
}

.hero h1{
  font-size:clamp(2.35rem,5.4vw,4.3rem);
  line-height:1.04;
  letter-spacing:-.028em;
  color:#fff;
}
.hero h1 span{display:block;color:var(--on-dark-accent-2)}

.hero__rule{
  width:64px;
  height:3px;
  margin:clamp(22px,2.6vw,32px) 0 clamp(20px,2.4vw,28px);
  background:var(--blue);
}

.hero__lede{
  max-width:38rem;
  color:var(--on-dark);
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);
  line-height:1.62;
  text-align:justify;
  hyphens:auto;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(30px,3.4vw,42px);
}

/* ic sayfalarin daha alcak banneri */
.hero--page{
  min-height:clamp(360px,52vh,520px);
  align-items:center;
  padding-block:clamp(64px,8vh,96px);
}
.hero--page h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.hero--page .hero__veil{
  background:
    linear-gradient(96deg,rgba(28,22,40,.94) 0%,rgba(28,22,40,.78) 52%,rgba(28,22,40,.34) 100%);
}

@media (max-width:640px){
  .hero__lede{text-align:left;hyphens:none}
}

/* dugmeler */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 30px;
  border:1px solid transparent;
  font-family:inherit;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.btn__arrow{
  width:18px;
  height:1.5px;
  background:currentColor;
  flex:0 0 auto;
  transition:width .24s var(--ease);
}
.btn:hover .btn__arrow{width:26px}

.btn--primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--primary:hover{background:#003b74;border-color:#003b74}

.btn--ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

.btn--sm{padding:12px 22px;font-size:.75rem}

.btn--outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* 07 ── bolum basliklari ve metin bloklari ─────────────────── */

.sec-title{
  margin:0 0 22px;
  padding-bottom:9px;
  border-bottom:1px solid var(--rule);
  color:var(--blue);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
}
.section--ink .sec-title{
  border-bottom-color:var(--dark-rule);
  color:var(--on-dark-accent);
}

.heading{
  font-size:clamp(1.75rem,3.1vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.022em;
}
.heading--sm{font-size:clamp(1.4rem,2.2vw,1.9rem)}

.lede{
  max-width:44rem;
  margin-top:20px;
  color:var(--ink-60);
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);
  line-height:1.6;
}
.section--ink .lede{color:var(--on-dark)}

.prose > p{
  color:var(--ink-90);
  text-align:justify;
  hyphens:auto;
}
.prose > p + p{margin-top:1.05em}
.section--ink .prose > p{color:var(--on-dark)}

@media (max-width:640px){
  .prose > p{text-align:left;hyphens:none}
}

/* katalogdaki madde isareti: kisa mavi cizgi */
.apps{margin-top:4px}
.apps li{
  position:relative;
  padding:0 0 12px 26px;
  color:var(--ink-90);
  font-weight:400;
  line-height:1.45;
}
.apps li:last-child{padding-bottom:0}
.apps li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:14px;
  height:2px;
  background:var(--blue);
}
.section--ink .apps li{color:var(--on-dark)}
.section--ink .apps li::before{background:var(--on-dark-accent)}

/* 08 ── kartlar, sutunlar, sayilar ─────────────────────────── */

/* ust cizgili sutun listesi (katalogdaki pillars / steps) */
.rule-grid{
  display:grid;
  gap:clamp(26px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.rule-grid--3{grid-template-columns:repeat(3,1fr)}
.rule-grid--4{grid-template-columns:repeat(4,1fr)}

@media (max-width:980px){
  .rule-grid--3,.rule-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .rule-grid,.rule-grid--3,.rule-grid--4{grid-template-columns:1fr}
}

/* Cizgi yok: bolum basliginin altindaki tek cizgi yeterli. Sutunlar
   birbirinden bosluk ve baslik agirligiyla ayriliyor. */
.rule-item h3{
  margin-bottom:9px;
  color:var(--ink);
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.3;
}
.rule-item p{
  color:var(--ink-60);
  font-size:.9375rem;
  line-height:1.55;
}
/* Az sayida maddenin genis alanda kaybolmamasi icin biraz daha iri. */
.rule-grid--roomy{gap:clamp(30px,3.6vw,56px)}
.rule-grid--roomy .rule-item h3{font-size:1.125rem;margin-bottom:11px}
.rule-grid--roomy .rule-item p{font-size:.96875rem;line-height:1.6}

.section--ink .rule-item h3{color:#fff}
.section--ink .rule-item p{color:var(--on-dark-mute)}

/* urun kartlari */
.product-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3.4vw,48px);
}
@media (max-width:860px){
  .product-cards{grid-template-columns:1fr}
}

.product-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--rule);
}
.section--mist .product-card{border-color:var(--rule-soft)}

.product-card__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--mist-2);
}
.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.product-card:hover .product-card__media img{transform:scale(1.04)}

.product-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:clamp(24px,2.6vw,34px);
}
.product-card__code{
  margin-bottom:12px;
  color:var(--blue);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.product-card__body h3{
  margin-bottom:12px;
  font-size:clamp(1.25rem,1.9vw,1.55rem);
}
.product-card__body > p{
  color:var(--ink-60);
  font-size:.9375rem;
  line-height:1.6;
}
.product-card__list{
  margin:20px 0 26px;
  padding-top:18px;
  border-top:1px solid var(--rule-soft);
}
.product-card__list li{
  position:relative;
  padding:0 0 9px 20px;
  color:var(--ink-90);
  font-size:.875rem;
  line-height:1.45;
}
.product-card__list li:last-child{padding-bottom:0}
.product-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:10px;
  height:1.5px;
  background:var(--blue);
}
.product-card__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  color:var(--ink);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.product-card__link .btn__arrow{background:var(--blue)}
.product-card__link:hover{color:var(--blue)}
.product-card__link:hover .btn__arrow{width:26px}

/* etiket + deger satirlari (katalogdaki supply/dl.facts) */
/* Bes maddelik dizilim, katalogdaki supply izgarasiyla ayni:
   ustte uc, altta iki tane ortalanmis. Bosta kalan tek sutun olmuyor. */
.facts{
  display:grid;
  gap:clamp(26px,3vw,40px) clamp(24px,2.6vw,34px);
  grid-template-columns:repeat(6,1fr);
}
.facts > div{grid-column:span 2}
.facts > div:nth-child(4){grid-column:2 / span 2}
.facts > div:nth-child(5){grid-column:4 / span 2}

@media (max-width:900px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts > div,
  .facts > div:nth-child(4),
  .facts > div:nth-child(5){grid-column:auto}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
}
/* Cizgi yok: bolum basliginin altindaki tek cizgi yeterli. */
.facts dt{
  margin-bottom:9px;
  color:var(--ink);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.4;
}
.facts dd{
  margin:0;
  color:var(--ink-60);
  font-size:.9375rem;
  line-height:1.55;
  text-align:justify;
  hyphens:auto;
}
@media (max-width:640px){
  .facts dd{text-align:left;hyphens:none}
}

/* 12 numarali geri bildirim: yasal uyari ayri bir bolum olarak cok yer
   kapliyordu. Artik ince bir cizginin altinda, acilir kapanir kucuk bir blok. */
.legal-note{
  margin-top:clamp(34px,4vw,52px);
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.legal-note > summary{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink-60);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.legal-note > summary::-webkit-details-marker{display:none}
.legal-note > summary::after{
  content:"";
  width:8px;height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s var(--ease);
}
.legal-note[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.legal-note > summary:hover{color:var(--blue)}
.legal-note__body{padding-top:14px}
.legal-note__body p{
  color:var(--ink-40);
  font-size:.8125rem;
  line-height:1.6;
  text-align:justify;
  hyphens:auto;
}
.legal-note__body p + p{margin-top:.9em}
@media (max-width:640px){
  .legal-note__body p{text-align:left;hyphens:none}
}

/* Bolum basliginin hemen altindaki tek satirlik aciklama. Once .lede
   kullaniliyordu ve alttaki maddelerden daha one cikiyordu. */
.section-note{
  margin:-6px 0 clamp(26px,3vw,38px);
  color:var(--ink-60);
  font-size:.9375rem;
  line-height:1.55;
}

/* eylem bandi */
.cta-band{
  display:grid;
  grid-template-columns:1.4fr auto;
  align-items:end;
  gap:clamp(28px,4vw,64px);
}
@media (max-width:820px){
  .cta-band{grid-template-columns:1fr;align-items:start}
}
.cta-band__text{max-width:40rem;margin-top:18px;color:var(--on-dark);line-height:1.6}

/* 09 ── urun ozellik tablosu ───────────────────────────────── */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.spec{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  border:1px solid var(--ink-40);
  font-variant-numeric:tabular-nums;
}
table.spec caption{
  padding-bottom:12px;
  color:var(--ink-60);
  font-size:.8125rem;
  text-align:left;
}
table.spec th{
  padding:14px 12px;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:.75rem;
  font-weight:500;
  line-height:1.35;
  text-align:center;
}
table.spec thead th:first-child{border-left-color:var(--ink)}
table.spec thead th:last-child{border-right-color:var(--ink)}
table.spec th:first-child{text-align:left;padding-left:18px}
table.spec td{
  padding:12px;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink-90);
  font-size:.9375rem;
  text-align:center;
  vertical-align:middle;
}
table.spec td:first-child{
  padding-left:18px;
  color:var(--ink);
  font-weight:600;
  text-align:left;
  white-space:nowrap;
}
table.spec tbody tr:nth-child(even) td{background:var(--mist)}

.note{
  margin-top:14px;
  color:var(--ink-60);
  font-size:.875rem;
  line-height:1.55;
  text-align:justify;
  hyphens:auto;
}
@media (max-width:640px){
  .note{text-align:left;hyphens:none}
}

/* dar ekranda tabloyu satir kartlarina cevir */
@media (max-width:600px){
  .table-wrap{overflow-x:visible}
  table.spec{min-width:0;border:0}
  table.spec thead{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;border:0;
  }
  table.spec tr{
    display:block;
    margin-bottom:14px;
    border:1px solid var(--rule);
  }
  table.spec td,
  table.spec tbody tr:nth-child(even) td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    padding:11px 16px;
    border:0;
    border-bottom:1px solid var(--rule-soft);
    background:var(--paper);
    text-align:right;
  }
  table.spec tr td:last-child{border-bottom:0}
  table.spec td::before{
    content:attr(data-label);
    color:var(--ink-60);
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.06em;
    text-align:left;
  }
  table.spec td:first-child{
    padding-left:16px;
    background:var(--mist);
    border-bottom:1px solid var(--rule);
  }
}

/* 10 ── gorsel bantlar ─────────────────────────────────────── */

/* Bant gorselleri arka plan degil <img loading="lazy"> ile geliyor:
   boylece tarayici ekrana yaklasana kadar indirmiyor. */
.band{
  position:relative;
  height:clamp(180px,26vw,320px);
  overflow:hidden;
  background:var(--mist-2);
}
.band > img{width:100%;height:100%;object-fit:cover}

/* Basligini uzerinde tasiyan bant. Yukseklik icerikten geliyor: bant
   artik bos bir gorsel serit degil, bolumun giris blogu. */
.band--titled{
  display:flex;
  align-items:center;
  height:auto;
  min-height:clamp(148px,17vw,216px);
  padding-block:clamp(28px,3.6vw,46px);
  overflow:hidden;
  background-color:var(--ink);
}
/* Perde soldan saga aciliyor: yazinin arkasi koyu kaliyor, bandin
   sag tarafinda gorselin dokusu goruluyor. */
.band--titled::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(38,31,50,.93) 0%,
    rgba(38,31,50,.86) 34%,
    rgba(38,31,50,.62) 100%);
}
.band--titled .band__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.band--label{min-height:clamp(112px,12vw,158px)}
.band__inner{position:relative;z-index:1;width:100%}
/* Etiketin alt cizgisi bandin aydinlik tarafina kadar uzanmasin. */
.band__text{max-width:44rem}

/* Bandin uzerindeki etiket bolumun basligi oldugu icin bant ile bolum
   arasi normal bolum bosluguna gore daha dar. */
.band--titled + .section{padding-top:clamp(34px,4vw,54px)}

/* Fotografli bandin uzerinde etiket beyaz: mavi ton, arkasindaki
   gorselin aydinlik bolgelerinde yeterince ayrismiyordu.
   Banner (hero) etiketi de ayni sebeple beyaz — bkz. .kicker. */
.band--titled .sec-title{
  margin-bottom:0;
  border-bottom-color:var(--dark-rule);
  color:#fff;
}
.band--titled h2{color:#fff;margin-top:16px}
.band__note{
  max-width:52rem;
  margin:14px 0 0;
  color:var(--on-dark);
  font-size:.9375rem;
  line-height:1.6;
}

/* ISO bandi: solda baslik ve aciklama, sagda rozetler. */
.band--iso .band__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(32px,5vw,80px);
}
.band--iso .band__badges{
  display:flex;
  align-items:center;
  gap:clamp(22px,3.2vw,50px);
}
.band--iso .band__badges img{
  height:clamp(84px,9.5vw,132px);
  width:auto;
}
@media (max-width:860px){
  .band--iso .band__inner{grid-template-columns:1fr;gap:26px}
  .band--iso .band__badges{justify-content:flex-start}
}

/* ISO bandi ile alttaki koyu eylem bandi arasinda beyaz bir nefes: ust uste
   gelen uc koyu blok (bant + eylem bandi + alt bant) sayfanin dibini
   gereginden agir gosteriyordu. Bosluk govde zemininden gelir. */
.band--iso + .section--cta{margin-top:clamp(44px,5vw,76px)}

/* metin + gorsel ikilisi */
/* Baslik gorselin ustuyle hizali: ortalandiginda basligin altinda ve
   ustunde gereksiz bosluk kaliyordu. */
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4.5vw,72px);
  align-items:start;
}
.feature--flip .feature__media{order:-1}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature--flip .feature__media{order:0}
}
.feature__media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--mist-2);
}
.feature__media img{width:100%;height:100%;object-fit:cover}

/* 11 ── iletisim ve form ───────────────────────────────────── */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
}
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr}
}

.contact-list{display:grid;gap:26px}
.contact-list dt{
  margin-bottom:7px;
  color:var(--blue);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.contact-list dd{margin:0;color:var(--ink-90);line-height:1.6}
.contact-list dd .line{display:block}
/* "No: 1/A" gibi kisa parcalar egik cizgiden bolunmesin. */
.contact-list dd .line,
.footer__col p{overflow-wrap:normal;word-break:normal}
.contact-list dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact-list dd a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* Harita duragan bir gorseldir ve kendi sunucumuzdan gelir; calisma
   aninda hicbir ucuncu tarafa istek gitmez. Tiklayinca Google Haritalar
   yeni sekmede acilir. */
.map{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--mist-2);
  border:1px solid var(--rule);
  transition:border-color .22s var(--ease);
}
.map img{width:100%;height:100%;object-fit:cover}
a.map:hover{border-color:var(--blue)}
a.map:hover .map__open{background:var(--blue);color:#fff}

.map__open{
  position:absolute;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}

/* Harita verisi kaynak gosterimi (ODbL geregi zorunlu): ayri bir alt
   yazi satiri yerine harita kutusunun sol alt kosesinde, harita
   uygulamalarindaki gibi kucuk ve silik. */
/* Gomulu Google haritasi. Sayfa acilisinda yuklenmez: once asagidaki
   onay kutusu gorunur, ziyaretci dugmeye basinca iframe yerlestirilir.
   Boylece Google'a istek ancak acik bir tercihle gider. */
.map--embed{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--mist);
  cursor:default;
}
.map--embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.map__ask{
  max-width:34rem;
  padding:clamp(20px,3vw,32px);
  text-align:center;
}
.map__pin{
  width:30px;
  height:30px;
  margin:0 auto 12px;
  fill:var(--ink-40);
}
.map__ask-title{
  margin:0 0 8px;
  color:var(--ink);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.35;
}
.map__ask-text{
  margin:0 0 18px;
  color:var(--ink-60);
  font-size:.8125rem;
  line-height:1.55;
}
.map__ask-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  color:var(--blue);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
}
.map__ask-link:hover{text-decoration:underline;text-underline-offset:.3em}
@media (max-width:520px){
  .map__ask-text{display:none}
}

.map__credit{
  position:absolute;
  left:6px;
  bottom:4px;
  max-width:60%;
  color:#8d8799;
  font-size:.5rem;
  letter-spacing:.01em;
  line-height:1.4;
  opacity:.62;
}

.form{display:grid;gap:22px}

.field{display:flex;flex-direction:column;gap:8px}

.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr}
}

.field label{
  color:var(--ink);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.field label .req{color:var(--blue)}

.field input,
.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:170px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--ink-40)}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,75,147,.13);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#b3261e}

.field__error{color:#b3261e;font-size:.8125rem;line-height:1.4}
.field__error:empty{display:none}

/* bot tuzagi: ekranda gorunmez, ekran okuyucudan da gizli */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding-top:4px;
}
.consent input{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-top:3px;
  accent-color:var(--blue);
}
.consent label{
  color:var(--ink-60);
  font-size:.875rem;
  font-weight:300;
  letter-spacing:0;
  line-height:1.55;
  text-transform:none;
}

.form__hint{color:var(--ink-40);font-size:.8125rem}

.alert{
  padding:20px 24px;
  border-left:3px solid var(--blue);
  background:var(--mist);
}
.alert h3{margin-bottom:7px;font-size:1.0625rem}
.alert p{color:var(--ink-60);font-size:.9375rem;line-height:1.55}
.alert--error{border-left-color:#b3261e;background:#fdf2f1}
.alert--error h3{color:#8c1d18}

/* 12 ── alt bant (footer) ──────────────────────────────────── */

.footer{background:var(--ink);color:var(--on-dark)}

/* Alt bant uc seritten olusur:
     1  marka / adres / iletisim / sosyal    (ust satir, etiketsiz)
     2  sayfa ve yasal baglantilar           (tek yatay serit)
     3  telif ve uyari                       (kucuk yazi)
   Once bes sutunlu ve bes buyuk harfli etiketli bir izgara vardi; etiket
   duvari sikisik duruyor, sutunlarin altlari da duzensiz bitiyordu. */
.footer__top{
  display:grid;
  grid-template-columns:var(--logo-w) minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:clamp(28px,4vw,72px);
  align-items:center;
  padding-block:clamp(26px,3vw,36px) 22px;
}
@media (max-width:980px){
  .footer__top{grid-template-columns:var(--logo-w) minmax(0,1fr);
    align-items:start;gap:26px 40px;row-gap:24px}
  .footer__aside{grid-column:1}
}
@media (max-width:560px){
  .footer__top{grid-template-columns:1fr;gap:20px}
}

/* Logo ust banttakiyle ayni genislikte (--logo-w) ve ana sayfaya baglanir. */
.footer__brand-link{display:block;width:var(--logo-w)}
.footer__brand-link:hover{opacity:.85}
.footer__brand img{width:100%;margin-bottom:10px;display:block}
/* Logonun altindaki satir logodan uzun olmasin ve bolunmesin. Logo 220'den
   168 px'e inince yazi da kuculdu; olculer tarayicida dogrulandi. */
/* Secici .footer__col p kuralindan daha guclu olmali, yoksa yazi
   boyutu 13 px'e sabitleniyor ve satir logodan tasiyor. */
.footer__brand .footer__tagline{
  width:var(--logo-w);
  margin:0;
  color:var(--on-dark-accent);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.4;
  white-space:nowrap;
}

.footer__col p{
  margin:0;
  color:var(--on-dark);
  font-size:.8125rem;
  line-height:1.7;
}
.footer__col a{color:var(--on-dark);text-decoration:none}
.footer__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}

/* Sosyal medya simgeleri ust satirin sag ucunda, iletisim bilgileriyle
   ayni hizada. */
.footer__aside{display:flex;justify-content:flex-end}
/* Ust satir sarildiginda simge kendi satirinda kaliyor; orada sag kenara
   yapismasin, diger bloklarla ayni hizadan bassin. */
@media (max-width:980px){
  .footer__aside{justify-content:flex-start}
}
.footer__social{display:flex;gap:12px;margin:0}
.footer__social a{
  display:block;
  opacity:.78;
  transition:opacity .22s var(--ease);
}
.footer__social a:hover{opacity:1}
.footer__social img{width:26px;height:26px}

/* Baglanti seridi: solda sayfalar, sagda yasal metinler ve cerez tercihi. */
.footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 32px;
  padding-block:14px;
  border-top:1px solid var(--dark-rule);
}
.footer__inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 22px;
  margin:0;
}
.footer__inline li{position:relative;font-size:.75rem;line-height:1.9}
/* Ogeler arasindaki ince ayirac. Satir kirildiginda da dogru kalsin diye
   ayirac ogenin kendi solunda duruyor, aralarina ayri bir oge konmuyor. */
.footer__inline li + li::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  width:1px;
  height:11px;
  margin-top:-5px;
  background:rgba(255,255,255,.22);
}
.footer__inline a{color:var(--on-dark-mute);text-decoration:none}
.footer__inline a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.footer__inline--pages li{font-size:.8125rem}
.footer__inline--pages a{color:var(--on-dark)}

/* Dar ekranda baglantilar alt alta. Yatay dizilisi korumak iki sorun
   doguruyordu: satir kirildiginda ayirac cizgisi satir basinda boslukta
   kaliyor, 12 px'lik baglantilara parmakla isabet etmek de zorlasiyordu. */
@media (max-width:700px){
  .footer__nav{gap:18px;padding-block:16px}
  .footer__inline{flex-direction:column;align-items:flex-start;gap:7px}
  .footer__inline li + li::before{display:none}
  .footer__inline li{line-height:1.6}
}

/* Telif ve yasal uyari tek blok: eskiden iki ayri satir ve iki cizgi vardi. */
.footer__bottom{
  padding-block:14px 24px;
  border-top:1px solid var(--dark-rule);
}
.footer__bottom p{
  margin:0;
  color:#8d849c;
  font-size:.75rem;
  line-height:1.6;
}
/* Telif kendi satirinda; uyari metni bir alt satirdan basliyor. */
.footer__copy{color:var(--on-dark-mute)!important;margin-bottom:3px!important}

/* Cerez tercihleri, yasal baglantilarin sonunda bir baglanti gibi durur. */
.footer__cookie-link{
  padding:0;
  border:0;
  background:none;
  color:var(--on-dark-accent);
  font-family:inherit;
  font-size:.75rem;
  line-height:1.9;
  cursor:pointer;
  text-decoration:none;
}
.footer__cookie-link:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}

/* 13 ── cerez onayi ────────────────────────────────────────── */

.cookie{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:150;
  background:var(--ink);
  border-top:2px solid var(--blue);
  color:var(--on-dark);
  transform:translateY(102%);
  transition:transform .4s var(--ease);
}
.cookie.is-visible{transform:none}
.cookie[hidden]{display:none}

.cookie__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(20px,3vw,48px);
  padding-block:26px;
}
@media (max-width:860px){
  .cookie__inner{grid-template-columns:1fr;gap:20px}
}

.cookie__title{
  margin-bottom:8px;
  color:#fff;
  font-size:1rem;
  font-weight:600;
}
.cookie__text{
  max-width:52rem;
  color:var(--on-dark-mute);
  font-size:.875rem;
  line-height:1.6;
}
.cookie__text a{color:var(--on-dark-accent)}

.cookie__actions{display:flex;flex-wrap:wrap;gap:11px}
.cookie .btn{padding:13px 24px;font-size:.75rem}

.cookie__link{
  padding:13px 4px;
  border:0;
  background:none;
  color:var(--on-dark-accent);
  font-family:inherit;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
}
.cookie__link:hover{color:#fff}

/* tercih paneli */
.cookie-panel{
  position:fixed;
  inset:0;
  z-index:160;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.cookie-panel[hidden]{display:none}

.cookie-panel__scrim{position:absolute;inset:0;background:rgba(24,19,34,.68)}

.cookie-panel__box{
  position:relative;
  width:min(660px,100%);
  max-height:min(84vh,720px);
  overflow-y:auto;
  padding:clamp(28px,3.4vw,44px);
  background:var(--paper);
  border-top:3px solid var(--blue);
}
.cookie-panel__box h2{margin-bottom:12px;font-size:1.4rem}
.cookie-panel__box > p{
  margin-bottom:26px;
  color:var(--ink-60);
  font-size:.9375rem;
  line-height:1.6;
}

.cookie-cat{padding:20px 0;border-top:1px solid var(--rule)}
.cookie-cat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
}
.cookie-cat h3{font-size:1rem}
.cookie-cat p{color:var(--ink-60);font-size:.875rem;line-height:1.55}
.cookie-cat__fixed{
  color:var(--ink-40);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* anahtar */
.switch{position:relative;flex:0 0 auto;width:48px;height:26px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch__track{
  display:block;
  width:100%;
  height:100%;
  background:var(--ink-40);
  border-radius:999px;
  transition:background-color .22s var(--ease);
  pointer-events:none;
}
.switch__track::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  transition:transform .22s var(--ease);
}
.switch input:checked + .switch__track{background:var(--blue)}
.switch input:checked + .switch__track::after{transform:translateX(22px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--focus);outline-offset:3px}

.cookie-panel__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}

/* 14 ── yasal metin sayfalari ──────────────────────────────── */

.legal-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(40px,5vw,80px);
  align-items:start;
}
@media (max-width:960px){
  .legal-layout{grid-template-columns:1fr}
}

.legal-toc{position:sticky;top:calc(var(--header-h) + 32px)}
@media (max-width:960px){
  .legal-toc{position:static}
}
.legal-toc li + li{margin-top:11px}
.legal-toc a{
  color:var(--ink-60);
  font-size:.875rem;
  line-height:1.45;
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:14px;
  display:block;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.legal-toc a:hover,
.legal-toc a.is-active{color:var(--blue);border-left-color:var(--blue)}

.legal-body > section + section{
  margin-top:clamp(38px,4vw,58px);
  padding-top:clamp(30px,3.4vw,44px);
  border-top:1px solid var(--rule-soft);
}
.legal-body h2{
  margin-bottom:18px;
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.25;
}
.legal-body p{
  color:var(--ink-90);
  font-size:1rem;
  line-height:1.7;
  text-align:justify;
  hyphens:auto;
}
.legal-body p + p{margin-top:1em}
@media (max-width:640px){
  .legal-body p{text-align:left;hyphens:none}
}

.legal-body ul{margin-top:16px}
.legal-body ul li{
  position:relative;
  padding:0 0 10px 24px;
  color:var(--ink-90);
  font-size:1rem;
  line-height:1.6;
}
.legal-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:12px;
  height:1.5px;
  background:var(--blue);
}

.legal-body .table-wrap{margin-top:22px}
.legal-body table.spec td{text-align:left;white-space:normal}
.legal-body table.spec td:first-child{white-space:normal}
.legal-body table.spec th{text-align:left;padding-left:18px}

.legal-meta{
  margin-top:10px;
  color:var(--on-dark-mute);
  font-size:.8125rem;
  letter-spacing:.04em;
}

.downloads{margin-top:14px;display:grid;gap:12px}
.downloads a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
  border:1px solid var(--rule);
  color:var(--ink);
  font-size:.9375rem;
  text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.downloads a:hover{border-color:var(--blue);background:var(--mist)}
.downloads span{
  color:var(--ink-40);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* 15 ── hareket, erisilebilirlik, yazdirma ─────────────────── */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .cookie{transform:none}
}

@media print{
  .header,.footer,.cookie,.cookie-panel,.hero__media,.nav__toggle,.skip-link{display:none!important}
  body{color:#000;font-size:11pt}
  .hero{min-height:0;padding-block:0;background:none;color:#000}
  .hero h1,.hero h1 span{color:#000}
  .hero__lede,.hero .kicker{color:#333}
  .section{padding-block:16pt}
  a{color:#000;text-decoration:none}
}