/* CGX — ortak tasarım sistemi (v5 handoff'undaki token'lar) */
:root{
  --paper:#F4F2ED; --paper-alt:#EAE6DC; --tile:#E2DDD2;
  --ink:#12110D; --meta:#56513F; --muted:#8A8577;
  --rule:#DCD6C8; --rule-alt:#D8D1C3; --border:#CFC8BB;
  --acc:#C9241F;
  --rail:236px; --bar:66px; --px:clamp(18px,2.6vw,48px); --py:clamp(48px,5.4vw,110px);
  --gap:clamp(8px,0.9vw,15px);
  --e1:cubic-bezier(0.16,1,0.3,1); --e2:cubic-bezier(0.76,0,0.24,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-0.022em;line-height:0.98}
/* Vurgu kelimeleri artik EGIK DEGIL. Sebep: basliklarda <em> buyuk harfli
   kelimelere de dusuyordu ("COSKUN GIYIM") ve Instrument Serif'in italigi
   buyuk harfte gercek bir italik degil, yalnizca egilmis roman - Turkce noktali
   I ile birlikte bozuk bir dizgi gibi okunuyor. <em> etiketi markup'ta duruyor:
   anlamsal vurgu korunuyor ve istenirse bu tek satirla geri acilabilir. */
em{font-style:normal}
input,textarea,button{font-family:'Hanken Grotesk',sans-serif}
section[id]{scroll-margin-top:20px}

.btn-solid{background:var(--ink);color:var(--paper);font-size:13px;padding:15px 26px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:background .3s ease}
.btn-solid:hover{background:var(--acc)}
.btn-line{border:1px solid var(--border);font-size:13px;padding:15px 26px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:background .3s ease,color .3s ease}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{font-size:12px;border:1px solid var(--border);padding:9px 16px;border-radius:999px;white-space:nowrap;
  display:inline-block;transition:background .3s ease,color .3s ease}
.btn-sm:hover{background:var(--ink);color:var(--paper)}
.wa-ico{width:15px;height:15px;flex-shrink:0}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
/* KULLANILIYOR — SİLMEYİN: index.html .intro-mark + .rail-mark .mk + .topbar .m .mk.
   Uçlardaki -2% pay şart: viewBox mürekkep kutusuna birebir oturduğu için
   inset(0) en dış antialias satırını tıraşlıyor. */
@keyframes heroIn{from{clip-path:inset(102% -2% -2% -2%)}to{clip-path:inset(-2% -2% -2% -2%)}}

/* ---------- sol ray ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);background:var(--paper);
  border-right:1px solid var(--rule);display:flex;flex-direction:column;padding:26px 22px 20px;z-index:60;overflow-y:auto}
/* Kelime işareti artık metin değil GEOMETRİ: tracking (-0.028em) harflerin
   advance'larına gömülü, CSS değeri olarak ayrışması imkânsız. Kutu ölçüsü
   eskisiyle birebir aynı (38px yüksek) — sıfır düzen kayması. */
.rail-mark{display:block;width:176px;color:var(--ink)}
.rail-sub{font-size:11px;color:var(--meta);padding-top:6px}
.rail-season{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--meta);padding-top:18px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 2.6s ease-in-out infinite;flex-shrink:0}
.rail-nav{display:flex;flex-direction:column;padding-top:30px}
.rail-nav a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;color:var(--meta);
  transition:color .5s var(--e1),transform .5s var(--e1)}
.rail-nav a .ln{width:0;height:1px;background:var(--acc);transition:width .5s var(--e1);flex-shrink:0}
.rail-nav a:hover{color:var(--ink)}
.rail-nav a.on{color:var(--ink);transform:translateX(6px)}
.rail-nav a.on .ln{width:22px}
.rail-nav .gr{font-size:10px;color:var(--muted);padding:16px 0 5px;letter-spacing:.04em}
.rail-nav .sub a{padding-left:11px;font-size:12px}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:26px}
.prog{height:2px;background:var(--rule);position:relative;margin-bottom:6px}
.prog i{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc)}
.rail-foot a.line{font-size:12px;color:var(--meta);display:flex;align-items:center;gap:7px;transition:color .3s ease}
.rail-foot a.line:hover{color:var(--ink)}
.rail-cta{background:var(--ink);color:var(--paper);font-size:12.5px;padding:12px 18px;border-radius:999px;
  text-align:center;transition:background .3s ease;margin-top:4px}
.rail-cta:hover{background:var(--acc)}

/* ---------- mobil üst bar ---------- */
.topbar{display:none;position:sticky;top:0;z-index:60;height:var(--bar);align-items:center;justify-content:space-between;
  gap:14px;padding:0 var(--px);background:rgba(244,242,237,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.topbar .m{display:block;width:117px;flex-shrink:0;color:var(--ink)}
/* Logo KISA HÂL (sadece CGX). Marka kılavuzu: tam kilit için minimum 200px,
   altında kısa hâle geçilir — ray 176px, üst bar 117px, ikisi de eşiğin altında.
   Oran 310.594 / 72.906 = 4.26:1. */
.rail-mark .mk,.topbar .m .mk{display:block;fill:currentColor;
  width:100%;height:auto;aspect-ratio:310.594/72.906;
  animation:heroIn 550ms var(--e2) 120ms both}
.topbar .r{display:flex;align-items:center;gap:10px;flex-shrink:0}
.burger{background:transparent;border:1px solid var(--border);border-radius:999px;padding:10px 16px;
  font-size:12.5px;cursor:pointer;font:inherit;font-size:12.5px}
.drawer{display:none;position:fixed;inset:var(--bar) 0 0;background:var(--paper);z-index:59;padding:var(--px);overflow-y:auto}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 0;font-size:16px;border-bottom:1px solid var(--rule)}
.drawer .gr{font-size:10.5px;color:var(--muted);padding:22px 0 4px;letter-spacing:.04em}
.drawer .sub a{padding-left:14px;font-size:15px;color:var(--meta)}

main{margin-left:var(--rail)}

/* ---------- sayfa başlığı (alt sayfalar) ---------- */
.phead{padding:clamp(40px,5vw,86px) var(--px) clamp(26px,3vw,48px);border-bottom:1px solid var(--rule)}
.phead .crumb{font-size:11px;color:var(--muted);padding-bottom:14px}
.phead h1{font-size:clamp(36px,6vw,92px);letter-spacing:-0.028em}
.phead .lead{margin:clamp(18px,2vw,26px) 0 0;font-size:15.5px;line-height:1.7;color:var(--meta);
  max-width:56ch;text-wrap:pretty}

/* ---------- hero: kısa ve tipografik — ürünler hemen altında ---------- */
.hero-compact{padding:clamp(26px,3.6vw,58px) var(--px) clamp(18px,2.6vw,38px)}
.hero-compact .mt{font-size:11.5px;color:var(--meta);padding-bottom:clamp(10px,1.2vw,16px)}
.hero-compact h1{font-size:clamp(44px,8.5vw,124px);letter-spacing:-0.03em;line-height:.96}

/* hero altındaki iki kanal kartı — sitenin ana çıkışı */
.kanal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.kanal a{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);padding:clamp(20px,2.6vw,34px) var(--px);
  border-left:1px solid var(--rule);transition:background .4s var(--e1)}
.kanal a:first-child{border-left:none}
.kanal a:hover{background:var(--paper-alt)}
.kanal .ico{width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);border-radius:999px;background:var(--ink);
  color:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s var(--e1)}
.kanal a:hover .ico{background:var(--acc)}
.kanal .ico svg{width:19px;height:19px}
.kanal .t{display:block;font-family:'Instrument Serif',serif;font-size:clamp(19px,2.2vw,30px);
  letter-spacing:-0.022em;line-height:1.1}
.kanal .s{display:block;font-size:12.5px;color:var(--meta);padding-top:6px}

/* renk noktaları */
.renkler{display:flex;gap:5px;flex-wrap:wrap;padding-top:9px}
.renk{width:13px;height:13px;border-radius:999px;border:1px solid rgba(18,17,13,.14);flex-shrink:0}

/* ---------- kart önizleme: manken kareleri fare ile kayar ---------- */
.pv{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.pv.on{opacity:1}
.pv-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;z-index:3;pointer-events:none}
.pv-dots i{width:6px;height:6px;border-radius:999px;background:rgba(244,242,237,.55);transition:background .3s ease,transform .3s ease}
.pv-dots i.on{background:var(--paper);transform:scale(1.25)}
.see{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);z-index:3;
  background:var(--paper);color:var(--ink);font-size:12.5px;padding:11px 20px;border-radius:999px;
  opacity:0;transition:opacity .35s ease,transform .45s var(--e1);pointer-events:none;white-space:nowrap}
.card:hover .see{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Dokunmatikte kare geçişi fareye bağlı olduğu için çalışmıyor: noktaları gizle
   (yanlış vaat) ve pili görünür konuma sabitle. */
@media (hover:none){
  .see{opacity:1;top:auto;bottom:14px;transform:translateX(-50%) scale(1)}
  .pv-dots{display:none}
}

/* ---------- model paneli: stant (renk) galerisi ---------- */
.mp{position:fixed;inset:0;z-index:140;background:rgba(18,17,13,.95);display:none;
  overflow-y:auto;padding:clamp(16px,3vw,44px)}
.mp.on{display:block}
.mp-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(20px,3vw,48px);align-items:start}
.mp-kapat{position:fixed;right:clamp(14px,2vw,28px);top:clamp(14px,2vw,28px);z-index:145;
  background:transparent;border:1px solid rgba(244,242,237,.35);color:var(--paper);
  border-radius:999px;padding:10px 18px;font:inherit;font-size:12.5px;cursor:pointer}
.mp-kapat:hover{background:var(--paper);color:var(--ink)}
.mp h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(28px,3.6vw,48px);
  letter-spacing:-0.025em;color:var(--paper);line-height:1.05}
.mp .et{font-size:11px;color:rgba(244,242,237,.5);padding:0 0 9px}
.mp-main{display:block;width:100%;background:#221F18;border:none;padding:0;cursor:zoom-in}
/* aspect-ratio olmadan panel açılırken görsel inene kadar içerik zıplıyordu */
.mp-main img{width:100%;max-height:66vh;object-fit:contain;display:block;aspect-ratio:3/4}
.mp-thumbs{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.mp-th{width:clamp(56px,6vw,84px);aspect-ratio:3/4;overflow:hidden;background:#221F18;border:1px solid transparent;
  padding:0;cursor:pointer;opacity:.6;transition:opacity .3s ease,border-color .3s ease}
.mp-th img{width:100%;height:100%;object-fit:cover;display:block}
.mp-th.on,.mp-th:hover{opacity:1;border-color:rgba(244,242,237,.5)}
.mp-info{position:sticky;top:0}
.mp-note{font-size:14px;line-height:1.7;color:rgba(244,242,237,.6);margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:40ch;text-wrap:pretty}
.mp-act{display:flex;gap:9px;flex-wrap:wrap;padding-top:clamp(18px,2.2vw,26px)}
.mp-tel{border-color:rgba(244,242,237,.35);color:var(--paper)}
/* Ürün künyesi — satırlar opsiyonel, veri yoksa hiç basılmaz.
   .crow kullanılmadı: .crow .v{white-space:nowrap} "Tül modal" gibi değerleri
   taşırıyor ve .crow .v:hover link olmayan bir değerde yanıltıcı hover veriyor.
   .krow/.chip de kullanılamaz — hepsi açık zemin için yazılmış, panelin
   rgba(18,17,13,.95) zemininde okunmaz. */
.mp-kunye{margin-top:clamp(16px,2vw,22px);border-top:1px solid rgba(244,242,237,.16)}
.mp-kunye .kr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:clamp(9px,1.05vw,13px) 0;border-bottom:1px solid rgba(244,242,237,.16)}
.mp-kunye .k{font-size:12.5px;color:rgba(244,242,237,.45);white-space:nowrap;flex-shrink:0}
.mp-kunye .v{font-size:15.5px;color:var(--paper);text-align:right;max-width:22ch;text-wrap:pretty}
@media (max-width:820px){
  .mp-in{grid-template-columns:minmax(0,1fr)}
  .mp-info{position:static}
  .mp-main img{max-height:52vh}
}

/* ---------- lightbox: stant fotoğrafı tam ekran ---------- */
.lb2{position:fixed;inset:0;z-index:150;background:rgba(18,17,13,.97);display:none;
  align-items:center;justify-content:center;cursor:zoom-out;padding:clamp(10px,2vw,30px)}
.lb2.on{display:flex}
/* 1100px tavanı: kaynak stant karesi 1100px geniş — üstüne ölçeklenirse piksel görünür */
.lb2 img{max-width:min(100%,1100px);max-height:100%;object-fit:contain}
.lb2-kapat{position:fixed;right:clamp(14px,2vw,28px);top:clamp(14px,2vw,28px);
  background:transparent;border:1px solid rgba(244,242,237,.35);color:var(--paper);
  border-radius:999px;padding:10px 18px;font:inherit;font-size:12.5px;cursor:pointer}

/* Instagram vurgu bölümü */
.igsec{background:var(--paper-alt)}
.igsec .lead{margin:0;font-family:'Instrument Serif',serif;font-size:clamp(24px,3.4vw,50px);
  line-height:1.15;letter-spacing:-0.025em;max-width:20ch}
.igsec .alt{font-size:14.5px;color:var(--meta);line-height:1.7;max-width:44ch;padding-top:clamp(16px,1.8vw,24px);text-wrap:pretty}

/* ---------- ortak bölüm ---------- */
.sec{padding:var(--py) var(--px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:clamp(20px,2.4vw,38px)}
.sec-head h2{font-size:clamp(34px,5vw,80px);letter-spacing:-0.025em}
.sec-head.sm h2{font-size:clamp(26px,3.2vw,46px)}
.sec-meta{font-size:12.5px;color:var(--meta)}

[data-wipe]{position:relative;overflow:hidden;background:var(--tile)}
[data-wipe] > *{display:block;width:100%;height:100%}
/* %100 kuralı yalnızca görsel sarmalayıcı içindir — pil ve noktalar kendi boyutunda kalır,
   yoksa "Renkleri gör" pili kart boyunda beyaz bir elipse dönüşüyor */
[data-wipe] > .see,[data-wipe] > .pv-dots{width:auto;height:auto}
/* .par inset ile çerçeveden taşacak şekilde gerilir (üst/alt -%7,5); height:100% dayatılırsa
   alt kenar %92,5'te kalıp çerçevenin altında boş zemin şeridi bırakıyor */
[data-wipe] > .par{width:auto;height:auto}
[data-wipe] img{transition:transform .5s var(--e1)}
.card:hover [data-wipe] img,.ig:hover img{transform:scale(1.055)}

/* lookbook */
.lb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(118px,13vw,215px);gap:var(--gap)}
.lb figure{margin:0;position:relative;overflow:hidden;background:var(--tile)}
.lb figcaption{position:absolute;left:13px;bottom:11px;font-size:10.5px;color:var(--paper);
  mix-blend-mode:difference;pointer-events:none;z-index:3}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:var(--py);padding-top:clamp(18px,2vw,28px);border-top:1px solid var(--rule);
  padding-right:clamp(60px,14vw,340px)}
.cta-strip p{margin:0;font-family:'Instrument Serif',serif;font-size:clamp(20px,2.6vw,38px);
  line-height:1.2;letter-spacing:-0.022em;max-width:22ch}
.cta-strip .b{display:flex;gap:9px;flex-wrap:wrap}

/* öne çıkan modeller */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap) clamp(14px,1.8vw,30px)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.card{display:block}
.card .fr{aspect-ratio:3/4;display:block;position:relative;overflow:hidden;background:var(--tile)}
.card .nm{font-family:'Instrument Serif',serif;font-size:clamp(18px,1.9vw,25px);letter-spacing:-0.022em;
  padding-top:14px;display:block;line-height:1.15}
/* Boş span dolu span ile AYNI yüksekliği kaplamalı, yoksa ızgarada veri olan
   satır olmayandan 5px uzun kalıyor. min-height'e padding de dahil:
   box-sizing:border-box olduğu için `1em` tek başına padding'i yutuyordu.
   nowrap+ellipsis → uzun bir kumaş adı iki satıra sarmaz; sarsaydı o ızgara
   SATIRININ tamamı uzardı. */
.card .cd{font-size:11.5px;color:var(--meta);padding-top:5px;display:block;
  line-height:1;min-height:calc(1em + 5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ask{font-size:12px;color:var(--acc);padding-top:9px;display:block;opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--e1),transform .4s var(--e1)}
.card:hover .ask{opacity:1;transform:translateY(0)}

/* koyu bölüm */
.dark{background:var(--ink);color:var(--paper)}
.dark h1,.dark h2{color:var(--paper)}
.dark .sec-meta{color:rgba(244,242,237,.55)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.8vw,52px) clamp(24px,3.4vw,72px)}
.step{position:relative;padding-top:clamp(16px,1.8vw,24px)}
.step::before{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:rgba(244,242,237,.28);
  transition:width 1.1s var(--e1)}
.step.in::before{width:100%}
.step .n{font-size:11px;color:var(--acc);padding-bottom:11px}
/* açık zeminde kullanılan adım blokları */
.igsec .step::before,.sec:not(.dark) .step::before{background:var(--rule-alt)}
.igsec .step h3,.sec:not(.dark) .step h3{color:var(--ink)}
.igsec .step p,.sec:not(.dark) .step p{color:var(--meta)}
.step h3{margin:0 0 10px;font-size:clamp(21px,2.3vw,32px);line-height:1.05}
.step p{margin:0;font-size:14px;line-height:1.65;color:rgba(244,242,237,.6);max-width:34ch;text-wrap:pretty}

/* künye / iki kolon */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.6vw,80px);align-items:center}
.krow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:clamp(10px,1.2vw,16px) 0;border-bottom:1px solid var(--rule)}
.krow .k{font-size:13px;color:var(--meta)}
.krow .v{font-family:'Instrument Serif',serif;font-size:clamp(18px,1.9vw,26px);text-align:right;letter-spacing:-0.022em}
.quote{font-family:'Instrument Serif',serif;font-size:clamp(17px,1.9vw,25px);line-height:1.35;
  letter-spacing:-0.022em;max-width:34ch;margin:clamp(22px,2.6vw,38px) 0 0;text-wrap:pretty}
.quote-src{font-size:12px;color:var(--meta);padding-top:12px}
/* kaynak 600×800 — çerçeve kaynağın yarısını fazla aşmasın ki piksel görünmesin */
.tall{height:clamp(300px,46vh,470px);max-width:360px;margin-left:auto;width:100%}
.par{position:absolute;inset:-7.5% 0}

/* kumaş / instagram */
.sw .fr{aspect-ratio:1/1;display:block;position:relative;overflow:hidden;background:var(--tile)}
.sw .r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:11px}
.sw .nm{font-size:13px}
.sw .ct{font-size:11px;color:var(--meta)}
.ig{aspect-ratio:1/1;display:block}

/* koşullar */
.kos{background:var(--paper-alt);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,90px)}
.kos h2{font-size:clamp(26px,3.2vw,46px);padding-bottom:clamp(18px,2.2vw,30px)}
.arow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(9px,1.1vw,14px) 0;border-bottom:1px solid var(--rule-alt)}
.arow .nm{font-size:14.5px}
.chips{display:flex;gap:6px}
.chip{min-width:38px;text-align:center;font-size:12px;padding:6px 0;border-radius:999px;background:var(--ink);color:var(--paper)}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:clamp(9px,1.1vw,14px) 0;border-bottom:1px solid var(--rule-alt)}
.trow .k{font-size:13px;color:var(--meta)}
.trow .v{font-size:14.5px;text-align:right}
.note{font-size:12px;color:var(--meta);padding-top:14px;line-height:1.6;text-wrap:pretty}

/* sss */
.sss{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(24px,3.4vw,72px)}
.fq{border-top:1px solid var(--rule)}
.fq button{width:100%;background:transparent;border:none;cursor:pointer;text-align:left;font:inherit;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(14px,1.7vw,22px) 0;font-size:clamp(15px,1.6vw,20px);color:var(--ink)}
.fq .pl{font-size:20px;color:var(--meta);line-height:1;flex-shrink:0;transition:transform .45s var(--e1)}
.fq button[aria-expanded="true"] .pl{transform:rotate(45deg)}
.fq .ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--e1),opacity .4s ease}
.fq .ans > div{overflow:hidden}
.fq.open .ans{grid-template-rows:1fr;opacity:1}
.fq .ans p{margin:0;padding:0 0 clamp(16px,1.8vw,24px);font-size:14.5px;line-height:1.65;
  color:var(--meta);max-width:640px;text-wrap:pretty}

/* iletişim */
.cnt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,90px)}
.cnt h2{font-size:clamp(32px,5vw,78px);letter-spacing:-0.025em;padding-bottom:clamp(16px,2vw,26px)}
.cnt .lead{margin:0 0 clamp(26px,3vw,44px);font-size:15px;line-height:1.7;color:rgba(244,242,237,.6);
  max-width:400px;text-wrap:pretty}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:clamp(11px,1.3vw,17px) 0;border-bottom:1px solid rgba(244,242,237,.16)}
.crow .k{font-size:12.5px;color:rgba(244,242,237,.45);white-space:nowrap}
.crow .v{font-size:15.5px;color:var(--paper);white-space:nowrap;transition:color .3s ease}
.crow .v:hover{color:var(--acc)}
form{display:flex;flex-direction:column;gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:11.5px;color:rgba(244,242,237,.45)}
.fld input{border:none;border-bottom:1px solid rgba(244,242,237,.25);padding:10px 0;font-size:15px;
  outline:none;background:transparent;color:var(--paper)}
.fld input:focus{border-color:var(--paper)}
.fld textarea{border:1px solid rgba(244,242,237,.25);padding:13px;font-size:15px;outline:none;
  resize:vertical;background:transparent;color:var(--paper)}
.fld textarea:focus{border-color:var(--paper)}
.wa-btn{background:var(--paper);color:var(--ink);padding:17px;font-size:13px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:background .3s ease,color .3s ease}
.wa-btn:hover{background:var(--acc);color:var(--paper)}
.or{display:flex;align-items:center;gap:14px;font-size:12px;color:rgba(244,242,237,.45)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(244,242,237,.16)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:rgba(244,242,237,.5)}
.consent input{margin-top:2px;accent-color:var(--paper)}
.submit{background:transparent;color:var(--paper);border:1px solid rgba(244,242,237,.35);padding:17px;
  font-size:13px;cursor:pointer;border-radius:999px;transition:background .3s ease,color .3s ease}
.submit:hover{background:var(--paper);color:var(--ink)}

/* metin sayfaları */
.prose{max-width:64ch}
.prose p{font-size:16px;line-height:1.75;color:var(--meta);margin:0 0 1.15em;text-wrap:pretty}
.prose p:first-child{font-size:clamp(18px,2vw,24px);line-height:1.5;color:var(--ink);
  font-family:'Instrument Serif',serif;letter-spacing:-0.018em}
.prose p:first-child::first-letter{font-size:1em}

/* duyurular */
.duy{border-top:1px solid var(--rule);display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,38px) 0;transition:padding-left .5s var(--e1)}
.duy:hover{padding-left:14px}
.duy .d{font-size:12px;color:var(--muted);padding-top:6px}
.duy .yil{display:block;font-size:10.5px;color:var(--muted);padding-top:3px;opacity:.85}
.duy h3{font-size:clamp(21px,2.4vw,34px);letter-spacing:-0.022em;padding-bottom:10px}
.duy p{margin:0;font-size:14.5px;line-height:1.7;color:var(--meta);max-width:62ch;text-wrap:pretty}

/* harita/iletişim kartları */
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding-top:clamp(20px,2.4vw,34px)}
.info div{border-top:1px solid var(--rule);padding-top:16px}
.info .k{font-size:11px;color:var(--muted);padding-bottom:8px}
.info .v{font-size:clamp(15px,1.6vw,20px);font-family:'Instrument Serif',serif;letter-spacing:-0.018em}

footer{background:var(--ink);color:rgba(244,242,237,.5);padding:clamp(22px,2.6vw,38px) var(--px)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;
  border-top:1px solid rgba(244,242,237,.16);padding-top:clamp(18px,2.2vw,30px)}

.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  grid-template-columns:1.2fr 1fr 1fr;background:var(--ink)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 6px;
  font-size:13px;color:var(--paper);border-left:1px solid rgba(244,242,237,.16)}
.mbar a:first-child{background:var(--paper);color:var(--ink);border-left:none;font-weight:500}

/* ---------- kırılımlar ---------- */
@media (max-width:1080px){
  :root{--rail:0px}
  .rail{display:none}
  .topbar{display:flex}
  main{margin-left:0}
  /* .topbar sticky ve JS ile DOMContentLoaded'da ekleniyor — o an <main>
     bar yüksekliği kadar aşağı sıçrıyordu. Yer önceden ayrılıyor. */
  body:not(.shelled){padding-top:var(--bar)}
  section[id]{scroll-margin-top:calc(var(--bar) + 6px)}
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .hero-gal{margin-left:0;max-width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.kos,.sss,.cnt{grid-template-columns:minmax(0,1fr)}
  .tall{margin-left:0;max-width:400px}
  .tall{height:clamp(300px,46vh,460px)}
  .lb{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lb figure:nth-child(1){grid-column:span 6;grid-row:span 3}
  .lb figure:nth-child(n+2){grid-column:span 3;grid-row:span 2}
  .grid6{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-strip{padding-right:0}
  .info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duy{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:680px){
  .grid6,.grid4,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.info{grid-template-columns:minmax(0,1fr)}
  .kanal{grid-template-columns:minmax(0,1fr)}
  .kanal a{border-left:none;border-top:1px solid var(--rule)}
  .kanal a:first-child{border-top:none}
  .lb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb figure:nth-child(1){grid-column:span 2;grid-row:span 3}
  .lb figure:nth-child(n+2){grid-column:span 1;grid-row:span 2}
  .mbar{display:grid}
  body{padding-bottom:52px}
  .drawer{bottom:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* UYARI: yukarıdaki joker kural animation-DELAY'e DOKUNMAZ. Gecikmeli bir
     animasyon burada "gecikme boyunca donmuş, sonra tek karede biten" hale
     gelir — hareketten daha kötü. Aşağıdakiler bu yüzden AÇIK iptaldir. */
  .par{transform:none!important}
  /* heroIn `both` fill ile çalışıyor; iptal edilmezse joker kural süreyi
     .01ms'e indirse bile `from` karesinin clip'i uygulanır ve kelime işareti
     hiç görünmeyebilir. clip-path:none bunu kesin kapatır. */
  .rail-mark .mk,.topbar .m .mk{animation:none!important;clip-path:none!important}
}