/* ============================================================================
   system.css — İşler bölümü tasarım sistemi
   Sitenin sumi zemini (#0E0D0B) · Outfit + Inter · mobil öncelikli
   erencanercan.com  ·  v1
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  --cms: #B8D165;   /* CLOUD CMS yeşili — sadece stüdyo imzasında kullanılır */
  /* Yüzey katmanları — sitenin kendi sumi zemininden türetildi (#0E0D0B).
     Sıcak alt ton korunuyor; her katman bir öncekinden ayırt edilebiliyor. */
  --bg:        #0E0D0B;   /* sayfa zemini — index.html ile birebir aynı */
  --surface:   #161511;   /* bölüm bandı */
  --card:      #1E1C17;   /* kart */
  --card-hi:   #28251E;   /* kart hover / girinti */

  /* Metin — washi ailesinden, hepsi kart zemininde en az AA (4.5:1) */
  --ink:       #F4EFE6;   /* ana metin        · kart 14.9:1  AAA */
  --ink-2:     #CFC8BC;   /* gövde metni      · kart 10.3:1  AAA */
  --ink-3:     #A79F92;   /* etiket, 12px     · kart  6.5:1  AAA */
  --ink-4:     #938B7E;   /* alt not, 11.5px  · kart  5.1:1  AA  */

  /* Vurgu — sitenin shu kırmızısı */
  --accent:    #B80000;   /* imza kırmızısı — dolgu, nokta, rozet zemini */
  --accent-txt:#FF8D8A;   /* aynı kırmızının metin hali · kart 7.6:1 AAA */
  --accent-dim:rgba(184,0,0,.14);

  /* Black Cherry — kart ile vurgu arasındaki sıcak yüzey.
     Yeni renk katmadan derinlik verir; öne çıkan kart ve basın bloğunda kullanılır. */
  --cherry:    #55100D;
  --cherry-hi: #6B1711;   /* hover */
  --cherry-lo: #2E0B08;   /* kenarlık / gölge tarafı */
  --pos:       #8FE3BE;   /* artı değer  · kart 11.3:1 */
  --neg:       #F5B396;   /* düşüş       · kart  9.5:1 */
  --info:      #9BC4F0;

  /* Çizgi */
  /* Koyu zeminde dolgu farkı zayıf kalır — ayrım kenarlıkla yapılıyor */
  --line:      rgba(244,239,230,.11);
  --line-2:    rgba(244,239,230,.19);
  --line-3:    rgba(244,239,230,.34);
  --edge-top:  rgba(244,239,230,.20);   /* kartın üst kenarı — ışık buradan gelir */
  --shadow:    0 14px 32px -18px rgba(0,0,0,.8);

  /* Tipografi */
  --f-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Aralık ölçeği — 4px tabanlı, her yerde bu kullanılır */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Kenar yuvarlaklığı */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Kenar boşluğu — mobilde dar, masaüstünde geniş */
  --gut: 20px;
  --maxw: 1360px;

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

@media (min-width: 700px){ :root{ --gut: 32px; } }
@media (min-width: 1100px){ :root{ --gut: 48px; } }

/* ---------------------------------------------------------------- RESET --- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg) }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; font-weight:400; line-height:1.6;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-numeric: tabular-nums;   /* rakamlar hizalı */
}
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0 }
::selection{ background:var(--accent); color:#fff }

/* -------------------------------------------------------------- LAYOUT ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:var(--s8) }
@media (min-width:700px){ .section{ padding-block:var(--s9) } }
.section--tight{ padding-block:var(--s7) }
.band{ background:var(--surface); border-block:1px solid var(--line-2) }

/* -------------------------------------------------------- TYPOGRAPHY ------ */
.h1,.h2,.h3,.h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-.03em }
.h1{ font-size:clamp(34px, 8.5vw, 76px) }
.h2{ font-size:clamp(26px, 5.2vw, 44px); letter-spacing:-.025em }
.h3{ font-size:clamp(20px, 3.4vw, 28px); letter-spacing:-.02em; line-height:1.2 }
.h4{ font-size:clamp(17px, 2.4vw, 20px); font-weight:500; letter-spacing:-.015em; line-height:1.3 }

.lead{ font-size:clamp(17px,2.4vw,21px); line-height:1.55; color:var(--ink-2); max-width:58ch }
.body{ font-size:16px; line-height:1.65; color:var(--ink-2); max-width:66ch }
.small{ font-size:14px; line-height:1.6; color:var(--ink-3) }

/* etiket — küçük ama okunur: 12px, 500 ağırlık, sınırlı harf aralığı */
.eyebrow{
  font-family:var(--f-body); font-size:12px; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:var(--s2);
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none }

.accent{ color:var(--accent) }

/* bölüm başlığı — her sayfada aynı yapı */
.sec-title{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s6) }
@media (min-width:700px){ .sec-title{ margin-bottom:var(--s7) } }

/* ------------------------------------------------------------- HEADER ----- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(14,13,11,.88);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s3) var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:56px;
}
.logo{ font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.02em }
.logo em{ font-style:normal; color:var(--accent) }

/* geri / ileri bağlantısı — dokunma hedefi 44px */
.tlink{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding-inline:var(--s3);
  font-size:13px; font-weight:500; color:var(--ink-3);
  border-radius:var(--r-full); transition:color .25s var(--ease), background .25s var(--ease);
}
.tlink:hover{ color:var(--ink); background:rgba(244,239,230,.06) }
.tlink svg{ width:16px; height:16px; flex:none; transition:transform .3s var(--ease) }
.tlink:hover svg{ transform:translateX(-3px) }
.tlink--fwd:hover svg{ transform:translateX(3px) }

/* --------------------------------------------------------------- HERO ----- */
/* ---- KATEGORI HERO — SIKISTIRILDI ----
   Amac: ziyaretci sayfayi acar acmaz ilk isi gorsun. Baslik + tek satir
   aciklama + kunye; hepsi ekranin ust yarisinda bitiyor. */
.phero{ padding-block:var(--s5) var(--s4); position:relative; overflow:hidden }
@media (min-width:700px){ .phero{ padding-block:var(--s6) var(--s5) } }
/* içerik daima filigranın üstünde */
.phero > *:not(.hero-mark){ position:relative; z-index:1 }
.phero .h1{ margin-block:var(--s3) var(--s3); font-size:clamp(30px, 5.4vw, 52px) }
.phero .lead{ margin-bottom:var(--s4); font-size:clamp(15px,1.5vw,17px); max-width:64ch }
/* kunye satiri daha ince */
.phero .facts{ margin-top:var(--s3) }
.phero .fact{ padding-block:var(--s2) }
/* hero'dan hemen sonraki galeri bolumu yukaridan bosluk yemesin */
.phero + .section--tight{ padding-top:var(--s3) }

/* ---- ARKA PLAN FİLİGRANI — CLOUD CMS ---- */
/* Zemine yedirilmiş editöryel imza. Metnin üstüne asla çıkmaz. */
.hero-mark{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-3%; top:50%; translate:0 -62%;
  width:min(44vw, 560px); height:auto;
  opacity:.06;
  filter:brightness(0) invert(1);
  /* sola doğru eriyerek metne yaklaşmadan biter */
  -webkit-mask-image:linear-gradient(95deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 52%);
  mask-image:linear-gradient(95deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 52%);
}

/* Mobil: metnin akışına hiç girmesin.
   Başlık kısa olduğu için sağ üst köşeye çekiliyor, küçülüyor, daha da soluyor. */
@media (max-width:760px){
  .hero-mark{
    right:-8%; top:0; translate:0 8%;
    width:56vw; opacity:.045;
    -webkit-mask-image:linear-gradient(120deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 62%);
    mask-image:linear-gradient(120deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 62%);
  }
}
/* Çok dar ekranda tamamen kaldır — okunabilirlik her şeyden önce */
@media (max-width:380px){ .hero-mark{ display:none } }

/* ------------------------------------------------------------ GALERİ ---
   İş vitrini: eşit boyutlu kutular, altında kısa künye.
   Video oranı ne olursa olsun kutuya sığdırılır (contain) — ızgara
   bozulmaz ama panel/kadraj oranı da kırpılmadan görünür. */
.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s4) var(--s3) }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1200px){ .gal{ grid-template-columns:repeat(4,1fr) } }
.gal--wide{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
@media (min-width:760px){ .gal--wide{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .gal--wide{ grid-template-columns:repeat(3,1fr) } }
.gal-item{ margin:0; min-width:0 }
.gal-frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--r-md); background:#0c0a08;
  border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
}
.gal-frame video, .gal-frame img{ width:100%; height:100%; object-fit:contain; display:block }
.gal-frame--fill video, .gal-frame--fill img{ object-fit:cover }
.gal-tags{
  /* Artik gorselin UZERINDE degil altinda. Ustte durunca hem mobilde
     isin yarisini kapatiyordu hem de video kontrollerini engelliyordu. */
  display:flex; flex-wrap:wrap; gap:5px; margin-top:7px;
}
.gal-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:var(--r-full);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4);
}
/* Yapay zekâ kullanılan işler — teknik bir not, kategori değil. */
.gal-tag--ai{ border-color:rgba(224,184,120,.45); color:#E4BE86 }
.gal-cap{ display:block; margin-top:9px }
.gal-cap b{
  display:block; font-size:13.5px; font-weight:500; color:var(--ink-2);
  letter-spacing:-.01em; line-height:1.35;
}
.gal-cap span{ display:block; margin-top:1px; font-size:11.5px; color:var(--ink-4) }

@media (prefers-reduced-motion:reduce){ .hero-mark{ opacity:.04 } }

/* künye — mobilde tek kolon liste, masaüstünde ızgara */
.facts{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--line);
}
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2,1fr); column-gap:var(--s7) } }
@media (min-width:1000px){ .facts{ grid-template-columns:repeat(4,1fr); column-gap:var(--s5) } }
.fact{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4); padding-block:var(--s3); border-bottom:1px solid var(--line);
}
@media (min-width:1000px){
  .fact{ flex-direction:column; align-items:flex-start; gap:var(--s2); padding-block:var(--s4) }
}
.fact dt{
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); flex:0 0 auto; white-space:nowrap;
}
/* değer uzunsa sarsın, dt'yi ezmesin */
.fact dd{ font-size:15px; font-weight:500; color:var(--ink); text-align:right; min-width:0; text-wrap:balance }
@media (min-width:1000px){ .fact dd{ text-align:left; font-size:16px } }

/* --------------------------------------------------------------- CHIP ----- */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px var(--s3); border:1px solid var(--line-2); border-radius:var(--r-full);
  font-size:12.5px; font-weight:500; color:var(--ink-2); background:rgba(244,239,230,.03);
  white-space:nowrap;
}
.chip svg{ width:13px; height:13px; flex:none; opacity:.8 }
.chip--accent{ border-color:rgba(184,0,0,.5); color:#FFB3B0; background:var(--cherry) }

/* ---------------------------------------------------------- STAT / VERİ --- */
/* Veri kartı: ikon + değer + değişim + etiket. Her zaman aynı sırada. */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
}
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); gap:var(--s4) } }
.stats--3{ grid-template-columns:repeat(2,1fr) }
@media (min-width:760px){ .stats--3{ grid-template-columns:repeat(3,1fr) } }

.stat{
  background:var(--card); border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
  border-radius:var(--r-md); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
  min-height:132px;
}
@media (min-width:760px){ .stat{ padding:var(--s5); min-height:158px } }

.stat-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2) }
.stat-ico{
  width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex:none;
  background:rgba(244,239,230,.06); color:var(--ink-3);
}
.stat-ico svg{ width:16px; height:16px }

/* değişim rozeti — artı yeşil, eksi turuncu, nötr gri. Ok yönü de bilgi taşır. */
.delta{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.delta svg{ width:11px; height:11px }
.delta--up{ color:var(--pos); background:rgba(143,227,190,.13) }
.delta--down{ color:var(--neg); background:rgba(245,179,150,.13) }
.delta--flat{ color:var(--ink-3); background:rgba(244,239,230,.07) }

.stat-val{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(26px,5.4vw,36px); line-height:1.05; letter-spacing:-.03em; color:var(--ink);
  margin-top:auto;
}
.stat-val .unit{ font-size:.52em; font-weight:500; color:var(--ink-3); margin-left:3px; letter-spacing:0 }
.stat-lbl{ font-size:12.5px; line-height:1.45; color:var(--ink-3); font-weight:450 }
.stat-sub{ font-size:11.5px; color:var(--ink-4); line-height:1.4 }

/* kaynak notu — verinin nereden geldiği daima yazılır */
.source{
  display:flex; align-items:flex-start; gap:var(--s2);
  margin-top:var(--s4); font-size:12px; line-height:1.55; color:var(--ink-4);
}
.source svg{ width:14px; height:14px; flex:none; margin-top:2px }

/* ------------------------------------------------------ SÜTUN GRAFİK ----- */
/* Aylık seyir. Yükseklik --v (0—100) ile veriliyor, JS gerektirmez. */
.chart{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:var(--s2); align-items:end;
  height:190px; padding:var(--s5) 0 0;
  border-bottom:1px solid var(--line-2);
}
@media (min-width:700px){ .chart{ height:240px; gap:var(--s3) } }
.bar{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:var(--s2); height:100% }
.bar-fill{
  width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:linear-gradient(180deg, rgba(184,0,0,.85), rgba(184,0,0,.35));
  height:calc(var(--v) * 1%); min-height:3px;
  transform-origin:bottom; transform:scaleY(0);
  transition:transform 1s var(--ease-out);
}
[data-rv].in .bar-fill, .chart.in .bar-fill{ transform:scaleY(1) }
.bar--peak .bar-fill{ background:linear-gradient(180deg, var(--accent-txt), rgba(255,141,138,.4)) }
.bar-val{
  font-family:var(--f-display); font-size:12px; font-weight:600;
  color:var(--ink-2); letter-spacing:-.01em; white-space:nowrap;
}
@media (min-width:700px){ .bar-val{ font-size:13.5px } }
.bar--peak .bar-val{ color:var(--accent-txt) }
.chart-x{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--s2);
  padding-top:var(--s3);
}
@media (min-width:700px){ .chart-x{ gap:var(--s3) } }
.chart-x span{
  text-align:center; font-size:11.5px; font-weight:500;
  color:var(--ink-4); letter-spacing:.02em;
}
.chart-cap{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s4) }
.chart-key{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3) }
.chart-key i{ width:10px; height:10px; border-radius:3px; background:rgba(184,0,0,.7); flex:none }
.chart-key.peak i{ background:var(--accent-txt) }

/* --------------------------------------------------- ÖNCE / SONRA TABLO --- */
.ba{ display:flex; flex-direction:column; gap:var(--s2) }
.ba-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s3);
  background:var(--card); border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
  border-radius:var(--r-md);
  padding:var(--s4);
}
@media (min-width:760px){
  .ba-row{ grid-template-columns:1.5fr 1fr auto 1fr auto; gap:var(--s5); padding:var(--s4) var(--s5) }
}
.ba-key{ font-size:14.5px; font-weight:500; color:var(--ink-2) }
.ba-pair{ display:flex; align-items:center; gap:var(--s3); justify-self:end }
@media (min-width:760px){ .ba-pair{ display:contents } }
.ba-from{ font-family:var(--f-display); font-size:19px; font-weight:500; color:var(--ink-4); letter-spacing:-.02em }
.ba-arrow{ color:var(--ink-4); display:grid; place-items:center }
.ba-arrow svg{ width:15px; height:15px }
.ba-to{ font-family:var(--f-display); font-size:23px; font-weight:600; color:var(--ink); letter-spacing:-.025em }
.ba-row .delta{ justify-self:end }
@media (max-width:759px){
  .ba-row{ grid-template-columns:1fr; gap:var(--s3) }
  .ba-key{ font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; font-weight:500 }
  .ba-pair{ justify-self:start }
  .ba-row .delta{ justify-self:start }
}

/* -------------------------------------------------------- YAPILANLAR ------ */
.tasks{ display:grid; grid-template-columns:1fr; gap:0 var(--s7) }
@media (min-width:760px){ .tasks{ grid-template-columns:1fr 1fr } }
.task{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding-block:var(--s3); border-bottom:1px solid var(--line);
  font-size:15px; line-height:1.5; color:var(--ink-2);
}
.task svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--accent-txt); opacity:.9 }
.task b{ font-weight:600; color:var(--ink) }

/* ------------------------------------------------------- KATEGORİ KART --- */
.cards{ display:grid; grid-template-columns:1fr; gap:var(--s3) }
@media (min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s4) } }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
  border-radius:var(--r-lg);
  overflow:hidden; isolation:isolate;
  transition:border-color .4s var(--ease), transform .5s var(--ease-out), background .4s var(--ease);
}
@media (hover:hover){
  .card:hover{ border-color:var(--line-3); background:var(--card-hi); transform:translateY(-3px) }
}
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.card-media{
  position:relative; aspect-ratio:16/10; background:var(--bg);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
@media (hover:hover){ .card:hover .card-media img{ transform:scale(1.04) } }

.card-body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); flex:1 }
@media (min-width:680px){ .card-body{ padding:var(--s5) } }
.card-body .h3{ color:var(--ink) }
.card-body .body{ font-size:14.5px; color:var(--ink-3); max-width:none }

.card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line);
}
.card-go{ display:inline-flex; align-items:center; gap:var(--s2); font-size:13px; font-weight:600; color:var(--accent-txt) }
.card-go svg{ width:15px; height:15px; transition:transform .35s var(--ease) }
@media (hover:hover){ .card:hover .card-go svg{ transform:translateX(4px) } }
.card-meta{ font-size:12px; color:var(--ink-4); font-weight:500 }

.card--wide{ grid-column:1/-1 }
@media (min-width:680px){
  .card--wide{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch }
  .card--wide .card-media{ aspect-ratio:auto; height:100%; min-height:280px; border-bottom:0; border-right:1px solid var(--line) }
}

/* eşit kart ızgarası — hiyerarşi kategori seviyesinde, marka seviyesinde değil */
.cards--even{ grid-template-columns:1fr }
@media (min-width:620px){ .cards--even{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .cards--even{ grid-template-columns:repeat(3,1fr) } }
.cards--even .card-body{ padding:var(--s4) }
@media (min-width:680px){ .cards--even .card-body{ padding:var(--s5) } }
.cards--even .h3{ font-size:clamp(19px,2.2vw,23px) }
.cards--even .body{ font-size:14px }
/* kart üstü rozet — vaka mı, tekil iş mi */
.card-badge{
  position:absolute; top:var(--s3); left:var(--s3); z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:var(--r-full);
  background:rgba(14,13,11,.86); backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.card-badge svg{ width:11px; height:11px }
.card-badge--case{ border-color:rgba(184,0,0,.5); color:#FFB3B0; background:var(--cherry) }

/* ------------------------------------------------------------ ARŞİV ------- */
/* all-projects.html kart mantığı — büyütülmüş, başlık sığacak şekilde */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:var(--s3) }
@media (min-width:700px){ .tiles{ gap:var(--s4) } }
.tile{
  display:flex; flex-direction:column; gap:var(--s3);
  min-height:190px; padding:var(--s4);
  background:var(--card); border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
  border-radius:var(--r-md);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease-out);
}
@media (min-width:700px){ .tile{ min-height:210px; padding:var(--s5) } }
@media (hover:hover){ .tile:hover{ border-color:var(--line-3); background:var(--card-hi); transform:translateY(-3px) } }
.tile-num{ font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--ink-4) }
.tile-title{ font-family:var(--f-display); font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.2; color:var(--ink) }
@media (min-width:700px){ .tile-title{ font-size:21px } }
.tile-desc{ font-size:13.5px; line-height:1.5; color:var(--ink-3) }
.tile-foot{ margin-top:auto; display:flex; align-items:center; gap:var(--s2); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4) }
.tile-foot svg{ width:13px; height:13px }

/* --------------------------------------------------------- MEDYA IZGARA -- */
.mgrid{ display:grid; grid-template-columns:1fr; gap:var(--s3) }
@media (min-width:640px){ .mgrid{ grid-template-columns:repeat(6,1fr); gap:var(--s3) } }
.mitem{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.mitem img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
/* Ambalaj, etiket, katalog gibi metin taşıyan görseller kırpılmamalı —
   kutuya sığdır, kalan alanı koyu zeminle doldur. */
.mitem--fit img{ object-fit:contain; background:#0c0a08 }
@media (hover:hover){ .mitem--fit:hover img{ transform:scale(1.02) } }
@media (hover:hover){ .mitem:hover img{ transform:scale(1.04) } }
.mitem-cap{
  position:absolute; left:var(--s3); bottom:var(--s3); z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-full);
  background:rgba(14,13,11,.85); backdrop-filter:blur(8px);
  font-size:11.5px; font-weight:500; color:var(--ink-2);
  pointer-events:none;
}
/* Dar ekranda gorselin uzerindeki yazi cok yer kapliyor — altina in. */
@media (max-width:720px){
  .mitem-cap{
    position:static; margin-top:7px; padding:0; background:none;
    backdrop-filter:none; font-size:11.5px; color:var(--ink-4);
  }
  .mitem{ background:none; border:none; box-shadow:none; aspect-ratio:auto; overflow:visible }
  .mitem img{ height:auto; border-radius:var(--r-md); border:1px solid var(--line) }
}
@media (min-width:640px){
  .m-a{ grid-column:span 4; aspect-ratio:16/10 }
  .m-b{ grid-column:span 2; aspect-ratio:4/5 }
  .m-c{ grid-column:span 2 }
  .m-d{ grid-column:span 2 }
  .m-e{ grid-column:span 2 }
  .m-full{ grid-column:span 6; aspect-ratio:21/9 }
}

/* ------------------------------------------------- SOSYAL MEDYA FEED ------ */
/* Instagram içerikleri tasarlandıkları oranda gösterilmeli. 4:3 kutuya
   kırpılınca başlıklar kesiliyor ve iş anlaşılmıyor. Bu ızgara postları
   4:5'te, profildeki gibi üçlü sıra hâlinde sunuyor. */
.feed-block{ margin-top:var(--s5) }
/* Telefon solda, strateji metni sağda — araştırmadaki "bağlam ver" kuralı */
.feed-split{
  display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:center;
}
@media (min-width:900px){
  .feed-split{ grid-template-columns:300px 1fr; gap:var(--s5) }
}
.feed-note-list{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s2) }
.feed-note-list li{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline;
  font-size:var(--fs-0); color:var(--muted); line-height:1.55;
}
.feed-note-list b{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}

.feed-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding-bottom:var(--s2); margin:0 auto var(--s3);
  max-width:540px;
  border-bottom:1px solid var(--line);
}

/* -------------------------------------------------------- REELS ----------- */
/* Dikey video içerikleri: telefon oranında, sessiz otomatik döngü.
   Üzerine gelince sesi açma düğmesi çıkar. */
.reel-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
  max-width:760px; margin:0 auto;
}
@media (min-width:640px){ .reel-grid{ grid-template-columns:repeat(4,1fr); gap:var(--s2) } }
.reel{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r-md); background:#0c0a08;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.reel video, .reel img{ width:100%; height:100%; object-fit:cover; display:block }
.reel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 10px 9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.reel-sound{
  position:absolute; top:8px; right:8px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:11px; cursor:pointer; opacity:0; transition:opacity .3s;
}
@media (hover:hover){ .reel:hover .reel-sound{ opacity:1 } }
@media (hover:none){ .reel-sound{ opacity:1 } }
.feed-head h3{
  font-size:var(--fs-1); font-weight:500; color:var(--ink); margin:0;
  letter-spacing:-.01em;
}
.feed-head .feed-note{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
/* Telefon çerçevesi — feed'in Instagram olduğu bakışta anlaşılsın diye.
   Düz ızgara "bir sürü görsel" gibi duruyordu; çerçeve bağlamı kuruyor. */
.phone{
  width:300px; margin:0 auto; padding:9px;
  border-radius:38px; background:linear-gradient(160deg,#2a2723,#131110);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.phone-screen{
  border-radius:30px; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.5);
}
.ig-bar{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px 10px; background:#fff; border-bottom:1px solid #efefef;
}
.ig-avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none;
  background:#eee; border:1px solid #e2e2e2;
}
.ig-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.ig-meta{ min-width:0; line-height:1.25 }
.ig-handle{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  color:#111; letter-spacing:.01em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.ig-sub{ display:block; font-size:9.5px; color:#8a8a8a }
.ig-stats{
  display:flex; gap:14px; padding:8px 12px 10px; background:#fff;
  border-bottom:1px solid #efefef;
}
.ig-stat{ text-align:center; line-height:1.2 }
.ig-stat b{ display:block; font-size:11px; color:#111; font-weight:600 }
.ig-stat span{ font-size:9px; color:#8a8a8a }

.feed-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:#fff;
}
.feed-item{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:#f2f2f2;
}
.feed-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease-out);
}
@media (hover:hover){ .feed-item:hover img{ transform:scale(1.03) } }
.feed-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 10px 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity:0; transition:opacity .35s var(--ease-out);
}
@media (hover:hover){ .feed-item:hover figcaption{ opacity:1 } }
@media (hover:none){ .feed-item figcaption{ opacity:1 } }

/* -------------------------------------------------------- PLACEHOLDER ----- */
/* Gerçek görsel gelene kadar: marka adı + oran + doku. Boş kutu görünmüyor. */
.ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:var(--s4);
  background:
    linear-gradient(135deg, rgba(244,239,230,.05) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(244,239,230,.025) 0 2px, transparent 2px 9px),
    var(--card);
}
.ph-in{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); max-width:90% }
.ph-mark{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(16px,3.4vw,26px); color:var(--ink-2);
}
.ph-note{ font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4) }
.ph-badge{
  position:absolute; top:var(--s3); right:var(--s3); z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:var(--r-full);
  background:var(--cherry); border:1px solid rgba(184,0,0,.45);
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-txt);
}
.ph-badge svg{ width:11px; height:11px }
.ph-icon{ width:26px; height:26px; color:var(--ink-4); margin-bottom:2px }

/* video/oynatma göstergesi olan placeholder */
.ph-play{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(244,239,230,.08); border:1px solid var(--line-2); color:var(--ink-2);
  margin-bottom:var(--s1);
}
.ph-play svg{ width:16px; height:16px; margin-left:2px }

/* --------------------------------------------- İMLEÇ TAKİPLİ ÖNİZLEME ---- */
/* Sadece masaüstünde görünür; dokunmatikte tamamen kapalı. */
#hoverPreview{
  position:fixed; left:0; top:0; z-index:90; pointer-events:none;
  width:250px; aspect-ratio:4/5; display:grid; place-items:center;
  will-change:transform; opacity:0; transition:opacity .25s var(--ease);
}
#hoverPreview.on{ opacity:1 }
#hoverPreview figure{
  grid-area:1/1; width:100%; height:100%;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  background:var(--card); box-shadow:0 28px 60px -18px rgba(0,0,0,.7);
  opacity:0; scale:.72; translate:0 14%;
  transition:opacity .3s var(--ease), scale .5s var(--ease-out), translate .5s var(--ease-out);
  position:relative;
}
#hoverPreview figure.on{ opacity:1; scale:1; translate:0 0 }
#hoverPreview img{ width:100%; height:100%; object-fit:cover }
@media (hover:none),(pointer:coarse){ #hoverPreview{ display:none } }

/* --------------------------------------------------------------- PRESS ---- */
.press-card{
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s5); border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--cherry-hi), var(--cherry) 55%, var(--cherry-lo));
  border:1px solid rgba(184,0,0,.42);
  box-shadow:var(--shadow);
}
.press-card .h4{ color:var(--ink) }

/* ----------------------------------------------------------------- CTA ---- */
.cta{ padding-block:var(--s8); border-top:1px solid var(--line); text-align:center }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding:0 var(--s6); border-radius:var(--r-full);
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  background:var(--ink); color:var(--bg);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); opacity:.92 }
.btn svg{ width:17px; height:17px }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2) }
.btn--ghost:hover{ background:rgba(244,239,230,.06) }

/* -------------------------------------------------------- STÜDYO İMZASI -- */
/* CLOUD CMS markası — künyede ve footer'da */
.studio{ display:inline-flex; align-items:center; gap:var(--s2) }
/* CLOUD CMS imzası — logodan önce küçük yeşil nokta */
.studio::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cms); opacity:.55; flex:none;
  transition:opacity .3s ease, box-shadow .3s ease;
}
.studio:hover::before{ opacity:1; box-shadow:0 0 0 3px rgba(184,209,101,.14) }
.studio img{
  height:16px; width:auto; opacity:.9;
  filter:brightness(0) invert(1);   /* her zeminde beyaz kalsın */
}
.studio span{ font-size:15px; font-weight:500; color:var(--ink); letter-spacing:.01em }
.fact .studio img{ height:15px }
.foot .studio img{ height:14px; opacity:.65; transition:opacity .3s ease }
.foot .studio:hover img{ opacity:1 }
.foot .studio span{ font-size:13px; color:var(--ink-4) }
.foot .studio:hover span{ color:var(--ink-2) }
/* büyük imza — sayfa sonunda tek başına */
.studio--mark img{ height:26px; opacity:.5 }
@media (min-width:700px){ .studio--mark img{ height:30px } }

/* -------------------------------------------------------------- FOOTER ---- */
.foot{
  border-top:1px solid var(--line); padding-block:var(--s6);
  display:flex; flex-direction:column; gap:var(--s3);
  font-size:13px; color:var(--ink-4);
}
@media (min-width:640px){ .foot{ flex-direction:row; align-items:center; justify-content:space-between } }
.foot a:hover{ color:var(--ink-2) }

/* ------------------------------------------------------------- NOT KUTU --- */
.note{
  border:1px dashed rgba(184,0,0,.45); background:rgba(184,0,0,.07);
  border-radius:var(--r-md); padding:var(--s4);
  font-size:13px; line-height:1.75; color:var(--ink-2);
}
.note b{ display:block; margin-bottom:var(--s2); color:var(--accent-txt); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase }
.note code{ font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; background:rgba(244,239,230,.07); padding:2px 6px; border-radius:4px }

/* ---------------------------------------------------------------- A11Y ---- */
.skip{ position:absolute; left:-9999px; top:0; z-index:9999; background:var(--ink); color:var(--bg); padding:var(--s3) var(--s4); border-radius:0 0 var(--r-sm) 0; font-weight:600 }
.skip:focus-visible{ left:0 }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* -------------------------------------------------------------- REVEAL ---- */
[data-rv]{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
[data-rv].in{ opacity:1; transform:none }

/* ------------------------------------------------------- MOBİL RÖTUŞ ----- */
@media (max-width:480px){
  /* uzun başlıklar taşmasın */
  .h1,.h2,.h3{ overflow-wrap:anywhere; hyphens:auto }
  /* veri kartında rakam sığmazsa küçülsün */
  .stat-val{ font-size:clamp(22px,6.2vw,30px) }
  .stat{ min-height:124px; padding:var(--s3) }
  .stat-ico{ width:26px; height:26px }
  .stat-ico svg{ width:14px; height:14px }
  .delta{ font-size:11px; padding:3px 7px }
  /* chip'ler taşmasın, sarabilsin */
  .chip{ white-space:normal; font-size:12px }
  /* önce/sonra satırı okunur kalsın */
  .ba-to{ font-size:21px }
  .ba-from{ font-size:17px }
  /* künye çok uzunsa alt alta */
  .fact{ flex-direction:column; align-items:flex-start; gap:2px }
  .fact dd{ text-align:left }
  /* buton tam genişlik */
  .btn{ width:100%; padding-inline:var(--s4); font-size:14.5px }
  .cta{ padding-block:var(--s7) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  [data-rv]{ opacity:1; transform:none }
}

/* hero'dan sonraki ilk bolum yukaridan bosluk yemesin */
.phero + .section{ padding-top:var(--s5) }
.phero + .band > .section{ padding-top:var(--s5) }

/* ---- STUDYO YESIL — CLOUD CMS imzasi kunye hucresine yedirildi ---- */
.fact:has(.studio){ position:relative; overflow:hidden }
.fact:has(.studio)::before{
  content:""; position:absolute; z-index:0;
  right:-8%; top:50%; translate:0 -50%;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,209,101,.20), rgba(184,209,101,.05) 55%, transparent 72%);
  pointer-events:none;
}
.fact:has(.studio) > *{ position:relative; z-index:1 }
.fact .studio img{ filter:brightness(0) invert(1); opacity:.85 }
.fact .studio span{ color:var(--ink-2) }

/* ---- SADE KART ----
   Kategori karti uc parcaya indi: kapak, baslik, tek satir marka.
   Aciklama paragrafi, cip sirasi ve alt CTA kaldirildi — kartin tamami
   zaten tiklanabilir. Amac: yedi karti tek bakista tarayabilmek. */
.card--sade .card-body{ padding:var(--s4) var(--s4) var(--s5) }
.card--sade .h3{ font-size:clamp(18px,2.2vw,22px); margin:0 }
.card--sade .card-meta{
  margin:6px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-4);
}
.card--sade .card-media{ aspect-ratio:16/10 }
.card--sade:hover .h3{ color:var(--ink) }

/* ---- KATEGORI SERIDI ----
   Tek bir kapak gorseli "bu kategori tek markadan ibaret" hissi veriyordu.
   Yerine o kategorideki islerden yavas kayan, karartilmis bir serit.
   Ustune gelince hizlanmiyor — sadece aciliyor. */
.cat-strip{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; border-radius:3px 3px 0 0;
  background:#0c0a08;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);
  mask-image:linear-gradient(to bottom,#000 74%,transparent);
}
.cat-track{
  display:flex; height:100%; width:max-content;
  animation:catSlide 34s linear infinite;
}
.cat-track img{
  height:100%; width:158px; display:block; flex:none;
  object-fit:cover; margin-right:-12px;
  filter:grayscale(1) brightness(.62) contrast(1.08);
  transition:filter .5s var(--ease,ease), transform .5s var(--ease,ease);
}
.card:hover .cat-track img{ filter:grayscale(.15) brightness(.9) }
.cat-strip{ }
@keyframes catSlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .cat-track{ animation:none } }
.cat-strip--bos{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
}
/* tipografik kart — kutu degil, satir */
.card--sade{
  border-radius:3px;
  background:transparent;
  border:1px solid var(--line);
  transition:border-color .35s ease, background .35s ease;
}
.card--sade:hover{ border-color:var(--edge-top); background:rgba(255,255,255,.018) }
.card--sade .card-body{ padding:var(--s3) var(--s4) var(--s4) }

/* ---- ARA BASLIK (subhead) --------------------------------------------------
   Sayfa icinde bolum ayirici. .sec-title kadar buyuk degil: is akisini
   bolmez, ama nerede oldugunu soyler. */
.subhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  margin:var(--s7) 0 var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
}
.subhead h2{
  font-family:var(--f-display); font-weight:600; line-height:1.2;
  font-size:clamp(18px,2.2vw,22px); letter-spacing:-.02em; margin:0;
}
.subhead .subhead-note{
  font-family:var(--f-body); font-size:12px; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-4);
  white-space:nowrap;
}
@media (max-width:560px){
  .subhead{ flex-direction:column; align-items:flex-start; gap:var(--s2) }
}

/* ---- KUNYE SATIRI — tek satir, fold yemez -------------------------------- */
.metaline{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
  margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3);
}
.metaline b{ color:var(--ink); font-weight:600 }
.metaline > span{ white-space:nowrap }
.metaline > span:not(:first-child):not(.studio)::before{
  content:"·"; margin-right:var(--s4); color:var(--line-3);
}
.metaline .studio{ display:inline-flex; align-items:center; gap:var(--s2) }
.metaline .studio img{ height:13px; width:auto; filter:brightness(0) invert(1); opacity:.85 }
.metaline .studio::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cms); opacity:.65; flex:none;
}

/* ---- BOLUM BASLIKLARI KUCULTULDU -------------------------------------------
   Buyuk h2'ler bolumleri birbirinden fazla ayiriyor, isler ekrandan asagi
   kaciyordu. Baslik hala hiyerarsiyi kuruyor ama yer kaplamiyor. */
.section .h2, .section--tight .h2, .band .h2{ font-size:clamp(21px,3.2vw,30px); letter-spacing:-.02em }
.sec-title{ gap:var(--s2); margin-bottom:var(--s5) }
@media (min-width:700px){ .sec-title{ margin-bottom:var(--s5) } }
.sec-title .lead{ font-size:clamp(14px,1.4vw,16px); max-width:62ch; margin-top:var(--s2) !important }
.sec-title[style*="--s8"]{ margin-top:var(--s7) !important }

/* ---- KATEGORI KARTLARI — MOBILDE IKI SUTUN --------------------------------
   Tek sutunda ekrana bir bucuk kart giriyordu; ziyaretci ne kadar is
   oldugunu gormeden kaydirmaya basliyordu. Iki sutunda dort kart goruluyor. */
.cards--even{ grid-template-columns:repeat(2,1fr); gap:var(--s2) }
@media (min-width:620px){ .cards--even{ gap:var(--s4) } }
@media (min-width:1040px){ .cards--even{ grid-template-columns:repeat(3,1fr) } }

@media (max-width:619px){
  .card--sade .card-body{ padding:var(--s3) }
  .card--sade .h3{ font-size:15.5px; line-height:1.2; letter-spacing:-.015em }
  .card--sade .card-meta{ font-size:10.5px; letter-spacing:.06em }
  .cat-track img{ width:104px; margin-right:-8px }
  .cat-track{ animation-duration:26s }
}

/* ---- GORSEL BUYUTEC ------------------------------------------------------ */
.gal-frame:not(:has(video)), .mitem{ cursor:zoom-in }
.gal-tags{ pointer-events:none }
.gal-frame img:focus-visible, .mitem img:focus-visible{ outline:2px solid var(--line-3); outline-offset:2px }

.lb{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; gap:var(--s3);
  padding:clamp(12px,3vw,40px);
  background:rgba(8,7,6,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lb.on{ display:flex }
.lb-fig{ margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; gap:var(--s3) }
.lb-fig img{
  max-width:100%; max-height:calc(100vh - 130px);
  width:auto; height:auto; object-fit:contain;
  border-radius:3px; background:var(--card);
}
.lb-fig figcaption{ font-size:13px; color:var(--ink-3); text-align:center }

.lb button{
  flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(244,239,230,.06);
  color:var(--ink); font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.lb button:hover{ background:rgba(244,239,230,.14); border-color:var(--line-3) }
.lb-x{ position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); font-size:28px }
.lb--tek .lb-p, .lb--tek .lb-n{ visibility:hidden }
@media (max-width:640px){
  .lb{ gap:var(--s2) }
  .lb-p, .lb-n{ position:absolute; bottom:16px; z-index:2 }
  .lb-p{ left:22% } .lb-n{ right:22% }
  .lb-fig img{ max-height:calc(100vh - 170px) }
}

/* ---- KATLANIR GALERI ----------------------------------------------------- */
.gal-gizli{ display:none }
.gal-acik .gal-gizli{ display:block }
.gal-ac{
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s4); padding:10px var(--s4); min-height:42px;
  border:1px solid var(--accent); border-radius:2px; background:var(--accent);
  color:#fff; font-family:var(--f-body); font-size:12.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 8px 22px -14px rgba(184,0,0,.9);
  transition:filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gal-ac:hover{ filter:brightness(1.14); transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(184,0,0,1) }
.gal-ac:active{ transform:translateY(0) }
.gal-ac::after{ content:"+"; font-size:15px; line-height:1; opacity:.85 }
.gal-acik + .gal-ac::after{ content:"−" }

/* ---- TAM GENISLIK GALERI OGESI (teknik serim gibi) ---------------------- */
.gal-item--tam{ grid-column:1 / -1 }
.gal-frame--serim{ aspect-ratio:auto; background:#0c0a08 }
.gal-frame--serim img{ height:auto; max-height:64vh; object-fit:contain }

/* ---- KOMPAKT NOT KARTLARI ------------------------------------------------
   Basin cikisi, uygulama linki gibi metin agirlikli bloklar. Eskiden tam
   genislikte press-card idiler ve ilk isi ekrandan asagi itiyorlardi. */
.mini-cards{ display:grid; grid-template-columns:1fr; gap:var(--s3) }
@media (min-width:680px){ .mini-cards{ grid-template-columns:repeat(2,1fr); gap:var(--s4) } }
.mini-card{
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s4); border:1px solid var(--line); border-radius:3px;
  border-top-color:var(--edge-top); background:var(--card);
}
.mini-title{
  font-family:var(--f-display); font-weight:600; line-height:1.25;
  font-size:clamp(16px,1.9vw,19px); letter-spacing:-.02em; margin:0; color:var(--ink);
}
.mini-desc{ font-size:13.5px; line-height:1.6; color:var(--ink-3); margin:0; flex:1 }
.mini-card .chips{ margin-top:auto }

/* ---- DIKEY (4:5) GALERI — sosyal medya postlari -------------------------
   Post'lar 4:5 tasarlaniyor. 16:10 cerceveye koyunca ust ve alt kirpiliyor,
   baslik gidiyordu. Bu varyantta cerceve postun kendi orani. */
.gal--dikey .gal-frame{ aspect-ratio:4/5 }
@media (min-width:760px){ .gal--dikey{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:1200px){ .gal--dikey{ grid-template-columns:repeat(5,1fr) } }

/* ---- KIRPMASIZ GALERI — orani degisken tasarim dosyalari ---------------- */
.gal--tam .gal-frame img{ object-fit:contain; background:#0c0a08 }

/* ---- SUNUM VITRINI — canli site kayitlari -------------------------------
   Ekran kaydi kucuk kutuda anlasilmiyor. Buyuk, sessiz, kendiliginden donen
   bir gosterim: sayfanin kendisi gibi dursun. */
.showcase{ display:grid; grid-template-columns:1fr; gap:var(--s5) }
@media (min-width:1000px){ .showcase{ gap:var(--s6) } }
.show-item{ margin:0 }
.show-item video{
  width:100%; height:auto; display:block;
  border-radius:4px; background:#0c0a08;
  border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85);
}
.show-item figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s3);
  margin-top:var(--s3); font-size:13px; color:var(--ink-3);
}
.show-item figcaption b{ color:var(--ink); font-weight:600; font-size:14.5px }

/* ---- MOBIL DUZELTMELERI --------------------------------------------------
   Telefonda tek sutun devasa gorseller cikiyordu; galeriler iki sutuna,
   telefon maketi ekran genisligine gore olceklendi. */
@media (max-width:640px){
  .phone{ width:min(300px, 86vw); padding:7px; border-radius:32px }
  .phone-screen{ border-radius:26px }
  .gal{ grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s2) }
  .gal--dikey{ grid-template-columns:repeat(2,1fr) }
  .gal-cap{ font-size:12px }
  .gal-cap b{ font-size:12.5px }
  .reel-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s2) }
  .reel figcaption{ font-size:9px; padding:22px 7px 7px }
  .gal-item--tam .gal-frame--serim img{ max-height:none }
  .stats{ gap:var(--s3) }
  .mini-cards{ gap:var(--s3) }
  .showcase{ gap:var(--s4) }
}
/* Cok dar ekranda video galerisi tek sutun kalsin — kontroller sigmiyor */
@media (max-width:380px){
  .gal:has(video){ grid-template-columns:1fr }
}

/* sunum vitrininde gorsel de olabilir */
.show-item img{
  width:100%; height:auto; display:block;
  border-radius:4px; background:#0c0a08;
  border:1px solid var(--line); border-top-color:var(--edge-top);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85);
}
.show-item video{ cursor:default }

/* ---- REELS: her video kendi oraninda ------------------------------------- */
.reel--yatay{ aspect-ratio:16/9; grid-column:span 2 }
.reel--kare{ aspect-ratio:4/5 }
@media (max-width:640px){ .reel--yatay{ grid-column:span 2 } }

/* ---- KATALOG KARTI ------------------------------------------------------- */
.katalog-kart{
  display:flex; align-items:center; gap:var(--s4);
  margin-top:var(--s5); padding:var(--s3) var(--s4) var(--s3) var(--s3);
  border:1px solid var(--line); border-top-color:var(--edge-top); border-radius:3px;
  background:var(--card); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.katalog-kart:hover{ border-color:var(--line-3); background:var(--card-hi) }
.katalog-kart img{ width:92px; height:auto; border-radius:2px; flex:none; display:block }
.katalog-bilgi{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0 }
.katalog-bilgi b{ font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--ink) }
.katalog-bilgi span{ font-size:12.5px; color:var(--ink-3) }
.katalog-ok{ font-size:20px; color:var(--ink-3); flex:none; transition:transform .25s var(--ease) }
.katalog-kart:hover .katalog-ok{ transform:translateX(4px); color:var(--ink) }

/* ============================================================
   GORSELLER GERCEK ORANINDA
   Sabit 16/10 cerceve + object-fit her isi ya kirpiyordu ya da
   yanlarina siyah bant koyuyordu. Gorsel tasiyan cerceveler artik
   oranini kendi belirliyor: kirpma yok, bant yok. Video tasiyanlar
   sabit oranda kaliyor (oynatici icin kararli kutu gerekiyor).
   ============================================================ */
.gal{ align-items:start }

.gal-frame:not(:has(video)){
  aspect-ratio:auto;
  overflow:visible;
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.gal-frame:not(:has(video)) img{
  width:100%; height:auto;
  object-fit:fill;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
/* eski oran zorlamalarini gorsellerde iptal et */
.gal--dikey .gal-frame:not(:has(video)),
.gal--tam .gal-frame:not(:has(video)),
.gal-frame--serim{ aspect-ratio:auto }
.gal--tam .gal-frame:not(:has(video)) img,
.gal-frame--serim img{ max-height:none; object-fit:fill; background:none }

/* Video kontrolleri her zaman erisilebilir: cerceve icindeki hicbir
   sey tiklamayi yakalamaz, sadece video'nun kendisi. */
.gal-frame:has(video) > :not(video),
.reel:has(video) > :not(video),
.show-item:has(video) > :not(video){ pointer-events:none }

/* :has() desteklemeyen eski tarayicilarda gorseller yine de kirpilmasin */
@supports not selector(:has(video)){
  .gal-frame{ aspect-ratio:auto; background:none; border:none; box-shadow:none }
  .gal-frame img, .gal-frame video{ height:auto }
}