/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fontlar/inter-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;
}

/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fontlar/inter-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;
}

/* Caveat — latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontlar/caveat-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;
}

/* Caveat — latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontlar/caveat-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;
}


/* DM Serif Display — latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontlar/dm-serif-display-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;
}

/* DM Serif Display — latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontlar/dm-serif-display-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;
}

/* dkc.click — stil katmanı. Renk ve hareket kuralları: icerik/02-tasarim-brief.md */

/* ---------- 1. Tokenlar ---------- */
:root {
  --zemin:#FAFAFA; --yuzey:#FFFFFF; --yuzey-2:#F3F4F7;
  --metin:#231F20; --ikincil:#5A5761; --sessiz:#8C8B98;
  --kenar:#E6E5EA; --kenar-guclu:#D6D5DC;
  --vurgu-1:#1D4ED8; --vurgu-2:#0891B2;      /* açık modda koyulaştırılmış uçlar */
  --vurgu-metin:#0B69D4; --vurgu-soluk:rgba(11,105,212,.3); --karalama:#0891B2;
  --bant-zemin:#F1F3F7; --aura:rgba(8,145,178,.16); --aura-op:.8;
  --wa-kenar:#25D366; --wa-metin:#0B7A3E; --hata-metin:#B3261E; --mega-perde:rgba(15,17,22,.16);   /* beyaz üstünde okunur koyu yeşil */
  --dip-metin:#231F20; --dip-cizgi:rgba(35,31,32,.14);
  --degrade:linear-gradient(96deg, var(--vurgu-1), var(--vurgu-2));
  --parlama:none;                            /* açık modda parlama yok */
  --golge-buton:0 10px 30px -8px rgba(29,78,216,.45);
  --hero-isik:radial-gradient(60% 55% at 78% 30%, rgba(37,99,235,.10), transparent 70%);
  --footer-zemin:linear-gradient(180deg, #FAFAFA 0%, #E9F1FF 52%, #E1F5FA 100%);
  --perde-degrade:linear-gradient(125deg, #1D4ED8 0%, #2563EB 42%, #0891B2 100%);
  --olcu:1240px; --yumusak:cubic-bezier(.22,1,.36,1);
  --denetim-boy:38px; --denetim-punto:.92rem;   /* başlıktaki üç denetim ortak ölçü */
}
:root[data-tema="koyu"] {
  --zemin:#0B0A14; --yuzey:#141222; --yuzey-2:#1B1830;
  --metin:#F5F4F8; --ikincil:#A5A2B8; --sessiz:#6F6C86;
  --kenar:rgba(255,255,255,.08); --kenar-guclu:rgba(255,255,255,.16);
  --vurgu-1:#2563EB; --vurgu-2:#22D3EE;
  --vurgu-metin:#4FB6F5; --vurgu-soluk:rgba(79,182,245,.35); --karalama:#22D3EE;
  --bant-zemin:#100E1C; --aura:rgba(37,99,235,.38); --aura-op:.95;
  --wa-kenar:rgba(37,211,102,.5); --wa-metin:#4BE68C; --hata-metin:#FF8A80; --mega-perde:rgba(0,0,0,.45);
  --dip-metin:#EAE9F2; --dip-cizgi:rgba(255,255,255,.14);
  --parlama:0 0 44px -6px rgba(34,211,238,.55);
  --golge-buton:0 14px 40px -10px rgba(37,99,235,.65);
  --hero-isik:radial-gradient(58% 52% at 78% 28%, rgba(37,99,235,.30), transparent 70%);
  --footer-zemin:linear-gradient(180deg, #0B0A14 0%, #101B3E 52%, #0A2C3D 100%);
  --perde-degrade:linear-gradient(125deg, #2563EB 0%, #3B82F6 40%, #22D3EE 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin:#0B0A14; --yuzey:#141222; --yuzey-2:#1B1830;
    --metin:#F5F4F8; --ikincil:#A5A2B8; --sessiz:#6F6C86;
    --kenar:rgba(255,255,255,.08); --kenar-guclu:rgba(255,255,255,.16);
    --vurgu-1:#2563EB; --vurgu-2:#22D3EE;
    --vurgu-metin:#4FB6F5; --vurgu-soluk:rgba(79,182,245,.35); --karalama:#22D3EE;
    --bant-zemin:#100E1C; --aura:rgba(37,99,235,.38); --aura-op:.95;
    --wa-kenar:rgba(37,211,102,.5); --wa-metin:#4BE68C; --hata-metin:#FF8A80; --mega-perde:rgba(0,0,0,.45);
      --dip-metin:#EAE9F2; --dip-cizgi:rgba(255,255,255,.14);
    --parlama:0 0 44px -6px rgba(34,211,238,.55);
    --golge-buton:0 14px 40px -10px rgba(37,99,235,.65);
    --hero-isik:radial-gradient(58% 52% at 78% 28%, rgba(37,99,235,.30), transparent 70%);
    --footer-zemin:linear-gradient(180deg, #0B0A14 0%, #101B3E 52%, #0A2C3D 100%);
    --perde-degrade:linear-gradient(125deg, #2563EB 0%, #3B82F6 40%, #22D3EE 100%);
  --perde-degrade:linear-gradient(125deg, #2563EB 0%, #3B82F6 40%, #22D3EE 100%);
  }
}

/* ---------- 2. Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--zemin)}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font:400 17px/1.6 Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-feature-settings:"cv05","ss03";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.6rem,5.6vw,4.9rem)}
h2{font-size:clamp(2rem,3.9vw,3.3rem);letter-spacing:-.028em}
h3{font-size:1.22rem;letter-spacing:-.02em;line-height:1.25}
p{margin:0}
/* Yazar kuralları tarayıcının [hidden]{display:none} kuralını yenebiliyor:
   .cerez-izin display:flex taşıdığı için hidden=true onu gizlemiyordu. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kap{width:min(100% - 48px, var(--olcu));margin-inline:auto}
/* Degrade metin harfin kutusuna göre kırpılıyor; italik harflerin sağa taşan ucu
   kutunun dışında kalıp kayboluyordu. Sağdaki iç boşluk kutuyu genişletiyor,
   negatif dış boşluk da sonraki karakterin yerini bozmuyor. */
.italik{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0;
  background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-inline:.04em .2em;margin-inline-end:-.16em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.elyaz{font-family:Caveat,"Segoe Script",cursive;font-weight:600;color:var(--vurgu-metin);font-size:1.35rem;line-height:1}
:focus-visible{outline:2px solid var(--vurgu-metin);outline-offset:3px;border-radius:6px}

/* Tema değişirken tüm geçişler tek kare için kapanır: renkler kademeli değişince
   sayfa flaş patlamış gibi görünüyordu. Simge dönüşü hariç. */
.tema-gecis *:not(.tema-gunes):not(.tema-ay),
.tema-gecis *::before, .tema-gecis *::after{transition:none!important}

/* ---------- 3. Dil bandı + başlık ---------- */
.dil-bant{position:relative;z-index:61;background:var(--bant-zemin);border-bottom:1px solid var(--kenar);font-size:.86rem;color:var(--ikincil)}
.dil-bant .kap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:42px;padding-block:8px;text-align:center}
.dil-bant a{color:var(--vurgu-metin);text-decoration:underline;text-underline-offset:3px}
.dil-bant button{margin-left:auto;background:none;border:0;color:var(--sessiz);font-size:1.1rem;cursor:pointer;padding:4px 8px}
.ust{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--zemin) 82%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--kenar)}
/* Sayfanın başında çubuk ve logo geniş duruyor, ilk kaydırmada ikisi de
   daralıyor: giriş anında marka görünür olsun, okumaya başlayınca içeriğin
   önünü kapatmasın. Ölçüyü tek yerden --marka-boy sürüyor; çubuğun yüksekliği
   ona bağlı, böylece ikisi birbirinden ayrı düşmüyor.
   Geniş ölçü vw'ye bağlı: dar ekranda logo denetimleri sıkıştırmıyor. */
.ust{--marka-boy:clamp(46px,4.2vw,58px)}
html.inik .ust{--marka-boy:42px}
.ust .kap{display:flex;align-items:center;gap:28px;
  min-height:calc(var(--marka-boy) + 32px);
  transition:min-height .3s var(--yumusak)}
.marka{display:flex;align-items:center}
/* DKC amblemi + CLICK üst üste duruyor; 26px'te alt satır okunmuyordu.
   42px'te "CLICK" net çıkıyor ve logo 64px geniş kalıyor. */
.marka svg{height:var(--marka-boy);width:auto;fill:var(--metin);
  transition:height .3s var(--yumusak)}
@media (prefers-reduced-motion:reduce){
  .ust .kap,.marka svg{transition:none}
}
.gezinti{display:flex;align-items:center;gap:30px;margin-inline:auto;font-size:.97rem;color:var(--ikincil)}
.gezinti a:hover{color:var(--metin)}
.gez-oge{display:inline-flex}
.gez-oge.acik>a{color:var(--metin)}

/* ---------- Açılan menü paneli ----------
   Panel <header> içinde duruyor: fare bardan panele inerken .ust'ün mouseleave'i
   tetiklenmiyor, menü kapanmıyor. Sayfa arkada ayrı bir perdeyle bulanıklaşıyor —
   main'e filter uygulamak yapışkan öğeleri bozardı. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:2;
  background:var(--zemin);border-bottom:1px solid var(--kenar);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s var(--yumusak),transform .22s var(--yumusak),visibility .22s}
.mega.acik{opacity:1;visibility:visible;transform:none}
/* .ust .kap{display:flex;min-height:74px} bu kabı da yakalıyor — panel
   başlığın içinde olduğu için özgüllüğü aynı seviyeye çekmek gerekiyor. */
.ust .mega-ic.tek{grid-template-columns:minmax(0,1fr)}
.ust .mega-ic{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;
  align-items:start;min-height:0;
  padding-block:clamp(32px,4vw,50px) clamp(38px,5vw,58px)}
.mega-buyuk{display:grid;gap:4px;align-content:start}
.mega-buyuk a,.mega-buyuk .pasif{display:inline-block;justify-self:start;
  font-size:clamp(1.45rem,2.3vw,2.05rem);font-weight:500;line-height:1.3;
  letter-spacing:-.015em;color:var(--metin);padding-block:4px;
  transition:opacity .18s var(--yumusak)}
.mega-buyuk a:hover{opacity:.6}
.mega-kucuk h3{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sessiz);margin-bottom:16px;font-weight:600}
.mega-kucuk ul{display:grid;gap:12px;font-size:.97rem;list-style:none}
.mega-kucuk .pasif{color:var(--ikincil)}
/* yer tutucu maddeler: bağlantı değil, imleç de öyle söylesin */
.mega .pasif{cursor:default}
/* menü açıkken bar saydamlıktan çıksın, panelle arasında ek yeri görünmesin */
html.mega-acik .ust{background:var(--zemin)}
.mega-perde{position:fixed;inset:0;z-index:55;background:var(--mega-perde);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--yumusak),visibility .25s}
html.mega-acik .mega-perde{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.mega{transform:none}}
.ust-arac{display:flex;align-items:center;gap:10px}
.dil-sec{position:relative}
.dil-sec>button{display:flex;align-items:center;gap:7px;height:var(--denetim-boy);background:var(--yuzey);
  border:1px solid var(--kenar);color:var(--metin);border-radius:999px;padding:0 15px;font:inherit;
  font-size:var(--denetim-punto);cursor:pointer}
.dil-liste{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:14px;padding:6px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);display:none}
.dil-sec[data-acik="1"] .dil-liste{display:block}
.dil-liste a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;font-size:.92rem}
.dil-liste a:hover{background:var(--yuzey-2)}
/* Yayınlanmamış diller listeye eklenince kullanılacak */
.dil-liste .yakinda{color:var(--sessiz);font-size:.78rem;align-self:center}
/* Tek düğme: gösterilen simge, tıklayınca geçilecek modu anlatır.
   Karanlıktayken güneş, aydınlıktayken ay. */
.tema-dugme{position:relative;width:var(--denetim-boy);height:var(--denetim-boy);flex:none;border:1px solid var(--kenar);
  border-radius:999px;background:var(--yuzey);color:var(--metin);cursor:pointer;padding:0;
  display:grid;place-items:center;transition:border-color .2s,background-color .2s}
.tema-dugme:hover{border-color:var(--kenar-guclu)}
.tema-dugme svg{position:absolute;width:17px;height:17px;
  transition:opacity .26s var(--yumusak),transform .42s var(--yumusak)}
/* varsayılan (karanlık): güneş */
.tema-gunes{opacity:1;transform:rotate(0) scale(1)}
.tema-ay{opacity:0;transform:rotate(90deg) scale(.35)}
/* aydınlık: ay */
:root[data-tema="acik"] .tema-gunes{opacity:0;transform:rotate(-90deg) scale(.35)}
:root[data-tema="acik"] .tema-ay{opacity:1;transform:rotate(0) scale(1)}
@media (prefers-color-scheme: light){
  :root:not([data-tema="koyu"]) .tema-gunes{opacity:0;transform:rotate(-90deg) scale(.35)}
  :root:not([data-tema="koyu"]) .tema-ay{opacity:1;transform:rotate(0) scale(1)}
}
.wa{display:inline-flex;align-items:center;gap:9px;height:var(--denetim-boy);background:var(--yuzey);
  border:1px solid var(--wa-kenar);color:var(--wa-metin);font-weight:500;border-radius:999px;
  padding:0 17px;font-size:var(--denetim-punto)}
.wa:hover{background:color-mix(in srgb, var(--wa-kenar) 12%, var(--yuzey))}
.menu-ac{display:none;background:none;border:1px solid var(--kenar);border-radius:10px;padding:8px 10px;color:var(--metin);cursor:pointer}

/* ---------- 4. Butonlar ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-weight:600;
  font-size:1rem;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--yumusak),box-shadow .3s var(--yumusak),background-color .2s}
.btn-ana{background:var(--degrade);color:#fff;box-shadow:var(--golge-buton)}
.btn-ana:hover{transform:translateY(-1px)}
/* background: <button> öğesinde tarayıcının gri varsayılanı geliyor;
   .btn şimdiye kadar hep <a> üzerinde kullanıldığı için fark edilmemişti. */
.btn-sade{background:transparent;border-color:var(--kenar-guclu);color:var(--metin)}
.btn-sade:hover{border-color:var(--metin)}
/* Giriş bölümündeki ikincil düğme: her iki temada da beyaz zemin.
   Mürekkep sabitlenmeli; koyu temada var(--metin) açık renk olduğu için beyazda okunmazdı. */
.hero-dugme .btn-sade{background:#fff;color:#231F20;border-color:transparent;
  box-shadow:0 1px 2px rgba(35,31,32,.10), 0 8px 24px -12px rgba(35,31,32,.35)}
.hero-dugme .btn-sade:hover{transform:translateY(-1px);border-color:transparent;
  box-shadow:0 2px 4px rgba(35,31,32,.12), 0 14px 30px -12px rgba(35,31,32,.45)}
.btn-parla{position:relative;background:var(--degrade);color:#fff;box-shadow:var(--golge-buton), var(--parlama)}
.btn-parla:hover{transform:scale(1.02);box-shadow:var(--golge-buton), 0 0 70px -4px rgba(34,211,238,.75)}
.btn-parla:active{transform:scale(.98);transition-duration:.12s}
:root:not([data-tema="koyu"]) .btn-parla:hover{box-shadow:0 18px 46px -10px rgba(29,78,216,.55)}
/* Orta boy, sayfanın kendi vurgu rengini taşıyan düğme. --degrade :root'ta
   çözüldüğü için ürün rengini almıyor — gradyanın uçları :root'taki mavi
   değerlerle sabitleniyor. Bu yüzden renk burada doğrudan --vurgu-1'den
   okunuyor; body[data-renk] ne tanımlıyorsa düğme onu alıyor. Gradyanın
   açık ucu yerine koyu uç seçildi, beyaz yazının kontrastı için. */
.btn-vurgu{background:var(--vurgu-1);color:#fff;border-radius:10px;
  padding:11px 20px;font-size:.95rem;box-shadow:var(--golge-buton)}
.btn-vurgu:hover{transform:translateY(-1px)}
.bag{color:var(--vurgu-metin);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.bag:hover{gap:12px}
.bag svg{transition:transform .2s var(--yumusak)}

/* ---------- 5. Beliren öğeler ---------- */
/* Varsayılan görünür: JS çalışmazsa da içerik okunur.
   Gizleme yalnızca <html class="js-hareket"> eklendiğinde devreye girer. */
.js-hareket .bel{opacity:0;transform:translateY(16px);transition:opacity .6s var(--yumusak),transform .6s var(--yumusak)}
.js-hareket .bel.gor{opacity:1;transform:none}
.js-hareket .bel[data-gecik="1"]{transition-delay:.06s} .js-hareket .bel[data-gecik="2"]{transition-delay:.12s}
.js-hareket .bel[data-gecik="3"]{transition-delay:.18s} .js-hareket .bel[data-gecik="4"]{transition-delay:.24s}
.js-hareket .bel[data-gecik="5"]{transition-delay:.3s}  .js-hareket .bel[data-gecik="6"]{transition-delay:.36s}

/* ---------- 6. Hero ---------- */
/* Açılış: üst menü + dil bandı düştükten sonra kalan yükseklik.
   Hero esner, güven bandı hep ilk ekranda kalır. */
.acilis{min-height:calc(100vh - 126px);min-height:calc(100svh - 126px);display:flex;flex-direction:column}
.acilis .hero{flex:1 1 auto;display:flex;align-items:center}
.acilis .guven{flex:0 0 auto}
.hero{position:relative;padding:clamp(48px,7vh,110px) 0 clamp(36px,5vh,72px);overflow:hidden;width:100%}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-isik);pointer-events:none}
/* Açılış zemini. Renk buradan okunuyor (getComputedStyle(canvas).color),
   böylece tema değişince aynı token'ı takip ediyor. */
.sonar{position:absolute;inset:0;display:block;width:100%;height:100%;
  pointer-events:none;color:var(--vurgu-metin)}
.hero .kap{position:relative;z-index:1}
/* Başlık hem genişliğe hem yüksekliğe göre ölçekleniyor: alçak ekranlarda
   büyük punto bandı aşağı itiyordu. */
.hero h1{max-width:16ch;font-size:min(clamp(2.6rem,5.6vw,4.9rem),8.6vh)}
.hero-alt{margin-top:clamp(18px,3vh,34px);max-width:56ch;color:var(--ikincil);
  font-size:min(1.08rem,2.4vh)}
.hero-dugme{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,3.6vh,40px)}

/* ---------- 7. Güven bandı ---------- */
/* Yatay çizgiler ızgarayla aynı genişlikte: köşeler dikey çizgilerle birleşiyor. */
.guven .kap{display:grid;grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--kenar)}
.guven .kap>div{padding:18px 26px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.guven .kap>div:first-child{padding-left:0}
.guven .kap>div:last-child{padding-right:0}
.guven .kap>div+div{border-left:1px solid var(--kenar)}
.guven b{font-size:1.02rem;letter-spacing:-.02em}
.guven p{color:var(--ikincil);font-size:.95rem;line-height:1.5;max-width:34ch}
.guven .git{margin-top:auto;padding-top:8px;color:var(--vurgu-metin);font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start}
.guven .git svg{width:13px;height:13px;transition:transform .2s var(--yumusak)}
.guven .git:hover svg{transform:translateX(3px)}

/* ---------- 8. Bölüm ortak ---------- */
.bolum{padding:clamp(76px,9vw,132px) 0}
.bolum-bas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.bolum-bas p{color:var(--ikincil);max-width:52ch}
.etiket{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vurgu-metin);margin-bottom:18px;display:block}

/* ---------- 9. Hizmet kartları ---------- */
.hizmetler{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--kenar);
  border:1px solid var(--kenar);border-radius:20px;overflow:hidden}
.hizmet{background:var(--zemin);padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;min-height:264px;
  transition:background-color .25s var(--yumusak),transform .25s var(--yumusak)}
.hizmet:hover{background:var(--yuzey);transform:translateY(-2px)}
.hizmet .no{font-size:.8rem;color:var(--vurgu-metin);font-variant-numeric:tabular-nums;font-weight:600}
.hizmet p{color:var(--ikincil);font-size:.97rem;flex:1}
.hizmet .bag{font-size:.94rem}
/* 7. kart tek başına kalmasın: satırın tamamını kaplar (tasarımdaki vurgulu kart) */
.hizmet:last-child{grid-column:1/-1;background:var(--yuzey);min-height:0}
.hizmet:last-child p{max-width:62ch}

/* ---------- 10. Dönüşüm sahnesi ---------- */
.sahne{position:relative;height:340vh}
.sahne-ic{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.sahne-ic .kap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;width:min(100% - 48px,var(--olcu))}
.sahne-metin p{color:var(--ikincil);margin-top:26px;max-width:48ch}
.olcer{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sessiz)}
.olcer-yol{position:relative;width:200px;height:2px;background:var(--kenar-guclu);border-radius:2px}
.olcer-dolu{position:absolute;inset:0 auto 0 0;width:calc(var(--ilerleme,0) * 100%);background:var(--degrade);border-radius:2px}
.tuval{position:relative;height:min(62vh,540px)}
/* left/top kutunun merkezini işaretler: transform'u JS kullandığı için ortalamayı
   negatif kenar boşluğuyla yapıyoruz. Kutu dar ekranda küçülüyor ki beşli sıra
   üst üste binmesin (sütun aralığı tuval genişliğinin %20'si). */
.nesne{--kutu:clamp(52px,13vw,74px);position:absolute;width:var(--kutu);height:var(--kutu);
  margin-left:calc(var(--kutu) / -2);margin-top:calc(var(--kutu) / -2);
  border-radius:calc(var(--kutu) / 4);background:var(--yuzey);border:1px solid var(--kenar);
  display:grid;place-items:center;color:var(--sessiz);will-change:transform}
.nesne svg{width:calc(var(--kutu) * .3);height:calc(var(--kutu) * .3)}
.baglanti{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* non-scaling-stroke kesik çizgi desenini EKRAN pikseliyle hesaplatıyor; viewBox
   birimi (274) ya da sabit bir sayı bu yüzden tutmuyordu — hat kesik kesik çiziliyordu.
   Gerçek ekran uzunluğunu JS ölçüp --u'ya yazıyor (ölçülene kadar hat gizli). */
.baglanti path{fill:none;stroke:var(--vurgu-metin);stroke-width:1.5;opacity:calc(var(--ilerleme,0) * .9);
  stroke-dasharray:var(--u,0);stroke-dashoffset:calc(var(--u,0) * (1 - var(--ilerleme,0)))}
.ornekler{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ornekler .ornek{background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;padding:26px}
.ornekler .ornek p{color:var(--ikincil);font-size:.96rem;margin-top:10px}
/* Sahne içeriği 100vh'lik kutunun ortasında duruyor; altta kalan pay ekran
   yükseldikçe büyüyor ve düğme + örnek kartları sahneden kopuk görünüyordu.
   Payın fazlasını geri alıp aradaki boşluğu 35px'e sabitliyoruz.
   pay = 50vh - içerik/2; içerik = max(sol sütun 481px, tuval min(62vh,540px))
   olduğu için içeriğin yarısını da aynı formülle yazıyoruz — böylece boşluk
   hem kısa hem uzun ekranda 35px çıkıyor (tek sabit sayı ikisini tutmuyordu). */
.sahne-son{padding-bottom:clamp(76px,9vw,120px)}
@media (min-width:861px){
  .sahne-son{margin-top:calc(-1 * max(0px, 50vh - max(240px, min(31vh, 270px)) - 35px))}
}
/* Sütunlar sahnenin sütunlarıyla aynı: düğme metnin, kartlar tuvalin altına hizalanıyor.
   Önceden 1fr/1.15fr idi, hiçbir şey üstteki bölümle hizalanmıyordu. */
.sahne-son .kap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}

/* ---------- 11. Ürün şeridi ---------- */
.urun-serit{position:relative}
.serit-ic{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.serit-ray{display:flex;gap:28px;padding-inline:max(24px,calc((100vw - var(--olcu))/2));will-change:transform}
.urun{flex:0 0 min(88vw,1080px);min-height:min(74vh,640px);background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:28px;padding:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:center;position:relative}
.urun-bas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.urun-bas b{font-size:2rem;letter-spacing:-.03em}
.rozet{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--kenar-guclu);
  border-radius:999px;padding:5px 12px;color:var(--ikincil)}
.rozet[data-canli]{border-color:color-mix(in srgb,var(--vurgu-metin) 55%,transparent);color:var(--vurgu-metin)}
.urun .tur{color:var(--sessiz);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
.urun p{color:var(--ikincil);margin-top:20px;max-width:46ch}
.urun .bag{margin-top:26px}
/* Ölçüyü genişlikten veriyoruz, yüksekliği aspect-ratio türetiyor: yüksekliği
   sabitleyip genişliği kırpmak dar sütunlarda oranı bozuyordu.
   Görseller saydam, zemini ve çerçevesi yok — iki temada da aynı duruyor. */
.urun-gorsel{--gorsel-boy:min(58vh,470px);
  aspect-ratio:1/1;width:min(100%, var(--gorsel-boy));
  margin-inline:auto;display:grid;place-items:center;color:var(--sessiz);font-size:.86rem;text-align:center}
.urun-gorsel img{width:100%;height:100%;object-fit:contain;display:block}
.urun-not{position:absolute;top:26px;right:34px;transform:rotate(-7deg)}

/* ---------- 12. Platform şeridi (açılışta, küçük) ---------- */
.serit-mini{border-top:1px solid var(--kenar);overflow:hidden}
.serit-mini .kap{display:flex;align-items:center;gap:26px;padding-block:14px;min-width:0}
.serit-bas{flex:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sessiz);font-weight:600}
.serit-mini .akis{flex:1;min-width:0}
.serit-mini .akis-ray{gap:38px;padding-right:38px;animation-duration:24s}
.serit-mini .akis-ray span{font-size:.86rem;font-weight:500;opacity:.7}

/* ---------- 12b. Çözüm ortakları ---------- */
.ortak-bolum h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:36px}
.is-ortaklari{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:18px}
.is-ortak{display:grid;place-items:center;background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:18px;padding:26px 22px;min-height:104px;
  transition:border-color .22s,transform .22s var(--yumusak)}
.is-ortak:hover{border-color:var(--vurgu-metin);transform:translateY(-2px)}
/* Logolar tek renk: beşinin de kendi renkleri var ama biri beyaz (PayTR),
   biri lacivert (QNB) — ikisi bir temada kayboluyor. Tek mürekkep hem iki
   temada okunur hem şerit derli toplu duruyor. */
/* Yükseklik piksel: ızgara ögesi esnetilmediği için yüzdelik yükseklik
   çözümsüz kalıyor ve max-height:100% de kırpmıyordu — QNB bu yüzden
   kutudan taşıyordu. Kilit oranları farklı olduğundan ölçü markaya özel. */
.cozum-logo{--boy:38px;display:grid;place-items:center;width:100%;height:38px;
  color:var(--metin);opacity:.62;transition:opacity .25s var(--yumusak)}
.is-ortak:hover .cozum-logo{opacity:1}
.cozum-logo svg,.cozum-logo img{height:var(--boy);width:auto;max-width:100%;display:block}
.cozum-logo svg *{fill:currentColor}
/* QNB vektör değil: tek renge çevirmek için filtre gerekiyor. */
.cozum-logo img{filter:brightness(0)}
:root[data-tema="koyu"] .cozum-logo img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]) .cozum-logo img{filter:brightness(0) invert(1)}
}
.cozum-logo[data-marka="verimor"]{--boy:29px}
.cozum-logo[data-marka="parasut"]{--boy:36px}
.cozum-logo[data-marka="paytr"]{--boy:20px}
.cozum-logo[data-marka="qnb"]{--boy:30px}
.akis{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.akis-ray{display:flex;align-items:center;gap:64px;padding-right:64px;flex:0 0 auto;animation:kay 42s linear infinite}
.akis:hover .akis-ray{animation-play-state:paused}
.akis-ray span{color:var(--sessiz);font-weight:600;font-size:1.06rem;white-space:nowrap;opacity:.85}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- 13. Süreç ---------- */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
/* Adımlar: üzerine gelince üstteki çizgi soldan sağa çiziliyor, rakam degradesi kayıyor. */
.adim{position:relative;border-top:1px solid var(--kenar-guclu);padding-top:22px;
  transition:transform .3s var(--yumusak)}
.adim::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;
  background:var(--degrade);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--yumusak)}
.adim:hover,.adim:focus-within{transform:translateY(-4px)}
.adim:hover::after,.adim:focus-within::after{transform:scaleX(1)}
.adim b{display:block;font-size:2.1rem;letter-spacing:-.04em;background:var(--degrade);
  background-size:230% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px;
  transition:background-position .55s var(--yumusak),transform .35s var(--yumusak)}
.adim:hover b,.adim:focus-within b{background-position:100% 0;transform:translateY(-3px) scale(1.06)}
.adim h3{margin-bottom:10px;transition:transform .35s var(--yumusak)}
.adim:hover h3,.adim:focus-within h3{transform:translateX(3px)}
.adim p{color:var(--ikincil);font-size:.95rem}

/* --- Adım animasyonu: ekranın ortasında beliren katman --- */
.adim[data-animasyon]{cursor:default}
.adim-katman{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none;opacity:0;transition:opacity .28s var(--yumusak);
  /* sayfa hafifçe geri çekilsin, çizgiler öne çıksın */
  background:color-mix(in srgb, var(--zemin) 62%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.adim-katman-ic{width:min(560px,78vw);transform:scale(.94);
  transition:transform .38s var(--yumusak);
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--zemin) 92%, transparent) 60%, transparent 100%);
  padding:clamp(16px,4vw,44px)}
.adim-katman-ic svg{width:100%;height:auto;display:block}
/* Ekranı kaplayan animasyonlar: kutu yok, tuval bütün ekrana yayılır */
.adim-katman--tam .adim-katman-ic{width:100%;height:100%;padding:0;background:none}
.adim-katman--tam .adim-katman-ic svg{width:100%;height:100%}
.adim-katman.acik{opacity:1}
.adim-katman.acik .adim-katman-ic{transform:scale(1)}
/* Kapalıyken animasyon hiç tanımlı değil; katman açılınca baştan başlıyor.
   Tek tur oynayıp son karede duruyor — döngü yok. */
.adim-katman:not(.acik) svg *{animation:none!important}
.adim-katman.acik svg *{animation-iteration-count:1!important;animation-fill-mode:both!important}
@media (prefers-reduced-motion: reduce){ .adim-katman{display:none} }

/* ---------- 14. Kapanış ---------- */
.kapanis .kap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.kapanis p{color:var(--ikincil);margin-top:20px}
.kanallar{display:flex;flex-direction:column;gap:12px}
.kanal{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:16px;padding:18px 22px;font-weight:600;transition:border-color .2s,transform .2s var(--yumusak)}
.kanal:hover{border-color:var(--vurgu-metin);transform:translateX(3px)}

/* ---------- 15. Footer perdesi ---------- */
.govde{position:relative;z-index:1;background:var(--zemin)}
.dip{background:var(--footer-zemin);color:var(--dip-metin);padding-top:clamp(70px,8vw,110px)}
.dip-ust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:40px}
.dip h3{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sessiz);margin-bottom:16px;font-weight:600}
.dip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:.96rem;color:var(--ikincil)}
.dip a:hover{color:var(--metin)}
.dip-aciklama{color:var(--ikincil);font-size:.95rem;text-align:right}
/* Telif satırı ekranın dibine yapışır; perde onun ardından yukarı doğru açılır. */
.dip-alt{position:sticky;bottom:0;z-index:2;
  background:var(--zemin);border-top:1px solid var(--kenar);color:var(--ikincil);font-size:.9rem}
.dip-alt .kap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:22px}
.ortaklar{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  padding-bottom:clamp(36px,5vw,56px);margin-bottom:clamp(36px,5vw,56px);
  border-bottom:1px solid var(--dip-cizgi);color:var(--dip-metin)}
.ortak{display:flex;align-items:center;gap:12px;min-width:0}
.ortak-logo{flex:none;display:block;color:var(--dip-metin);opacity:.55;
  transition:opacity .25s var(--yumusak)}
.ortak-logo svg{height:24px;width:auto;display:block}
/* Vercel kilidi kutusunu tepeden tırnağa dolduruyor, diğer üçünde
   çevresinde boşluk var — optik olarak eşitlemek için kısaltıldı. */
.ortak-logo[data-marka="vercel"] svg{height:20px}
.ortak-logo svg [fill]{transition:fill .25s var(--yumusak)}
/* varsayılan: her şey tek renk. Fare gelince kural düşer, dosyadaki
   kendi dolguları geri gelir — kelime markaları currentColor olduğu için
   tema rengini korur, yalnızca simgeler renklenir. */
.ortak:not(:hover) .ortak-logo svg [fill]{fill:currentColor}
.ortak:hover .ortak-logo{opacity:1}
.ortak-etiket{font-size:.88rem;opacity:.68;white-space:nowrap;transition:opacity .25s var(--yumusak)}
.ortak:hover .ortak-etiket{opacity:1}
.marka-notu{opacity:.85;font-size:.78rem}
.marka-notu a{font-weight:700;border-bottom:1px solid var(--dip-cizgi)}
.marka-notu a:hover{border-bottom-color:currentColor}
.dip-sosyal{display:flex;flex-wrap:wrap;gap:22px;margin-top:44px;padding-bottom:clamp(40px,6vw,72px);font-size:.9rem;color:var(--dip-metin);opacity:.7}
.dip-sosyal a{display:inline-flex;align-items:center;gap:8px}
.dip-sosyal a:hover{opacity:1}
.dip-alt a:hover{color:var(--metin)}

/* Alçak ekranlar (dizüstü, tarayıcı çubukları açık) */
@media (max-height:820px) and (min-width:861px){
  .hero{padding-block:clamp(28px,4.5vh,60px)}
  .guven .kap>div{padding-block:14px 12px}
  .guven p{font-size:.9rem;line-height:1.45}
  .guven .git{padding-top:6px}
}

/* Çok alçak ekranlar: bant yine de tam görünsün */
@media (max-height:700px) and (min-width:861px){
  .hero{padding-block:20px}
  .hero h1{font-size:min(clamp(2.2rem,5vw,4.9rem),7.4vh)}
  .hero-alt{margin-top:14px;font-size:min(1rem,2.2vh)}
  .hero-dugme{margin-top:18px}
  .guven .kap>div{padding-block:12px 10px}
  .guven p{font-size:.86rem;line-height:1.42}
  .guven .git{padding-top:4px;font-size:.84rem}
}

/* --- Footer perdesi: telif satırının altından açılan tam ekran alan --- */
/* Perde, telif çubuğu düştükten sonra kalan alanı tam kaplar; içerik gerçekten ortalanır. */
.perde-yuva{height:auto;overflow:hidden}
.js-hareket .perde-yuva{height:0;transition:height .5s var(--yumusak)}
.perde{position:relative;min-height:calc(100vh - var(--dip-alt-boy,68px));
  min-height:calc(100svh - var(--dip-alt-boy,68px));display:grid;place-items:center;text-align:center;
  background:var(--perde-degrade);overflow:hidden;
  /* üst menü perdenin tepesini örtüyor; içerik görünen alana göre ortalanıyor */
  padding:calc(clamp(36px,6vh,80px) + var(--ust-boy,76px)) 24px clamp(36px,6vh,80px)}
.perde-ic{display:grid;justify-items:center;gap:clamp(16px,2.6vh,30px);width:min(100%,1100px)}
/* Alçak ekranda logo alttaki not ve düğmenin üstüne biniyordu:
   yükseklik de sınırlandı, genişlik oranı koruyarak küçülüyor. */
.perde-logo{width:min(72%,820px);height:auto;max-height:34vh;max-height:34svh;
  transform:scale(calc(.97 + .05 * var(--perde-oran,1)));
  opacity:calc(.55 + .45 * var(--perde-oran,1));
  transition:opacity .1s linear}
.perde .perde-not{color:rgba(255,255,255,.94);font-size:clamp(1.15rem,2.2vw,1.6rem);transform:rotate(-1.5deg)}
.perde-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0B2A5B;font-weight:600;
  font-size:1rem;border-radius:999px;padding:14px 26px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  transition:transform .2s var(--yumusak),box-shadow .3s var(--yumusak)}
.perde-btn:hover{transform:translateY(-2px);box-shadow:0 22px 50px -18px rgba(0,0,0,.6)}
@media (max-width:860px){
  .perde{min-height:calc(76svh - var(--dip-alt-boy,68px));padding-block:clamp(32px,5vh,64px)}
  .perde-logo{width:84%}
}
@media (prefers-reduced-motion: reduce){
  .perde-logo{transform:none;opacity:1}
}

/* ---------- 16. Duyarlılık ---------- */
@media (max-width:1080px){
  .ortaklar{grid-template-columns:repeat(2,1fr);gap:18px}
  .is-ortaklari{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
  .hizmetler{grid-template-columns:repeat(2,1fr)}
  .surec{grid-template-columns:repeat(2,1fr);gap:34px}
  .dip-ust{grid-template-columns:repeat(2,1fr)}
  .dip-aciklama{text-align:left;grid-column:1/-1}
}
@media (max-width:860px){
  body{font-size:16px}
  .ortaklar{grid-template-columns:1fr;gap:14px}
  .is-ortaklari{grid-template-columns:1fr}
  .serit-mini .kap{gap:16px}
  .serit-bas{display:none}
  .kap{width:calc(100% - 36px)}
  .gezinti,.wa span{display:none}
  .mega,.mega-perde{display:none}
  .menu-ac{display:block}
  .bolum-bas,.kapanis .kap,.sahne-son .kap{grid-template-columns:1fr;gap:26px}
  .hizmetler{grid-template-columns:1fr}
  .acilis{min-height:0}
  .guven .kap{grid-template-columns:1fr}
  .guven .kap>div{padding:16px 0}
  .guven .kap>div+div{border-left:0;border-top:1px solid var(--kenar)}
  .ornekler{grid-template-columns:1fr}
  /* sahne: mobilde uçuşma yok, hizalı hâliyle gelir.
     --ilerleme'yi JS yazmadığı için burada 1'e sabitliyoruz; yoksa bağlantı
     hattının opaklığı 0 kalıyor ve hat hiç görünmüyordu. */
  .sahne{height:auto;--ilerleme:1}
  .sahne-ic{position:static;min-height:0;padding-block:70px}
  .sahne-ic .kap{grid-template-columns:1fr;gap:40px}
  .tuval{height:300px}
  /* ürünler: parmakla kaydırılan yapışmalı galeri */
  .urun-serit{height:auto!important}
  .serit-ic{position:static;height:auto;padding-block:20px}
  .serit-ray{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:18px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .serit-ray::-webkit-scrollbar{display:none}
  .urun{flex-basis:min(86vw,460px);scroll-snap-align:center;grid-template-columns:1fr;padding:30px;min-height:0}
  .urun-gorsel{--gorsel-boy:min(40vh,320px)}   /* oran 1/1 kalıyor */
  .dip{position:static;min-height:0}
  .dip-ust{grid-template-columns:1fr}
}

/* ---------- 17. Hareket kısıtı ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-hareket .bel{opacity:1;transform:none}
  .sahne{height:auto;--ilerleme:1}
  .sahne-son{margin-top:0}
  .sahne-ic{position:static;min-height:0;padding-block:70px}
  .urun-serit{height:auto!important}
  .serit-ic{position:static;height:auto}
  .serit-ray{transform:none!important;overflow-x:auto}
  .akis-ray{animation:none}
}

/* =================== 18. İç sayfa bileşenleri =================== */

/* --- sayfa başlığı --- */
.ic-hero{position:relative;padding:clamp(56px,7vw,88px) 0 clamp(48px,5.5vw,72px);overflow:hidden}
.ic-hero.cizgili{border-bottom:1px solid var(--kenar)}
.ic-hero .kap{position:relative;z-index:1}
.aura{position:absolute;top:-280px;right:6%;width:min(600px,70vw);height:480px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, var(--aura) 0%, transparent 70%);opacity:var(--aura-op)}
.kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--ikincil)}
.kirinti span[aria-hidden]{opacity:.5}
.kirinti a:hover{color:var(--metin)}
.kirinti .simdi{color:var(--metin);opacity:.8}
.ic-hero h1{margin-top:22px;font-size:clamp(2.4rem,4.6vw,4.25rem);font-weight:600;max-width:20ch}
/* 20ch sınırı okunur satır boyu içindi; başlık logo olunca harf ölçüsü
   anlamsız kalıyor ve rozetleri gereksiz yere alt satıra itiyordu. */
.ic-hero h1:has(.h1-logo){max-width:none}
.ic-hero .giris{margin-top:26px;max-width:66ch;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.62;color:var(--ikincil)}
.ic-hero .giris strong{color:var(--metin);font-weight:600}
/* Başlık solda, dış bağlantılar sağda ve başlıkla üstten hizalı.
   Düğmeler yan yana; genişlik içeriğe göre, sabit değil. Başlığın ilk
   satırıyla optik hizada dursun diye küçük bir üst payı var (h1'in satır
   yüksekliğinden gelen boşluğu telafi ediyor). */
.ic-hero-duzen{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);align-items:start}
.hero-bag{display:flex;flex-wrap:wrap;gap:12px;padding-top:clamp(10px,1.2vw,18px)}
.hero-bag .btn{padding:16px 30px;font-size:1.05rem}
@media (max-width:860px){
  .ic-hero-duzen{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  .hero-bag{padding-top:0}
}

/* --- iki sütun: sol etiket + sağ içerik --- */
.ikili{display:grid;grid-template-columns:340px minmax(0,1fr);gap:72px;align-items:start;
  padding-block:clamp(56px,6vw,88px)}
.ikili>h2,.ikili .sol h2{margin:0;font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1.14;letter-spacing:-.025em;font-weight:600}
.ikili .sol p{margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--ikincil)}
.ikili .sag{max-width:760px}
.ikili .sag>p{font-size:1.09rem;line-height:1.68;color:var(--ikincil)}
/* Ürün sayfalarında bölüm başına tek paragraf vardı, proje sayfalarında birden çok; 
   arka arkaya gelenler bitişik duruyordu. */
.ikili .sag>p+p{margin-top:18px}

/* --- yan gezinti (bu sayfada / içindekiler) --- */
.yan-duzen{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:80px;align-items:start;padding-top:clamp(48px,5vw,72px)}
.yan-duzen.solda{grid-template-columns:248px minmax(0,1fr)}
.yan-duzen .govde-metin{max-width:760px}
.yan-gez{position:sticky;top:96px}
.yan-gez .bas{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ikincil);opacity:.7}
.yan-gez nav{display:grid;gap:11px;margin-top:16px;font-size:.9rem}
.yan-gez nav a{opacity:.85}
.yan-gez nav a:hover{opacity:1;color:var(--vurgu-metin)}
.yan-gez .alt{margin-top:28px;padding-top:22px;border-top:1px solid var(--kenar);font-size:.9rem;color:var(--ikincil)}
.yan-gez .alt a{display:inline-flex;margin-top:12px;color:var(--vurgu-metin)}

/* --- içerik blokları --- */
.blok+.blok{margin-top:88px}
.blok>h2{margin:0;font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.14;letter-spacing:-.025em;font-weight:600}
.blok>p{margin-top:20px;font-size:1.08rem;line-height:1.68;color:var(--ikincil)}
.numarali{display:grid;margin-top:26px;border-top:1px solid var(--kenar)}
.numarali div{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--kenar)}
.numarali span{flex:none;width:22px;font-size:.85rem;color:var(--ikincil);opacity:.7}
.numarali p{font-size:1.02rem;line-height:1.6}
.kart-liste{display:grid;gap:20px;margin-top:30px}
.kart-liste article{background:var(--yuzey);border:1px solid var(--kenar);border-radius:16px;padding:26px 28px}
.kart-liste .kart-ust{display:flex;align-items:baseline;gap:12px}
.kart-liste .kart-ust span{font-size:.8rem;color:var(--vurgu-metin)}
.kart-liste h3{font-size:1.22rem}
.kart-liste p{margin-top:12px;font-size:1rem;line-height:1.65;color:var(--ikincil)}
.satir-liste{display:grid;margin-top:30px;border-top:1px solid var(--kenar)}
.satir-liste article{padding:28px 0;border-bottom:1px solid var(--kenar)}
.satir-liste h3{font-size:1.22rem}
.satir-liste p{margin-top:12px;font-size:1.03rem;line-height:1.65;color:var(--ikincil)}
.satir-liste .bag{margin-top:16px;font-size:.96rem}
.sss{margin-top:30px;border-top:1px solid var(--kenar)}
.sss article{padding:26px 0;border-bottom:1px solid var(--kenar)}
.sss h3{font-size:1.14rem}
.sss p{margin-top:12px;max-width:66ch;font-size:1.03rem;line-height:1.65;color:var(--ikincil)}
.ikili-kart{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.ikili-kart article{background:var(--yuzey);border:1px solid var(--kenar);border-radius:14px;padding:20px 22px}
.ikili-kart h3{font-size:1.06rem}
.ikili-kart p{margin-top:8px;font-size:.94rem;line-height:1.6;color:var(--ikincil)}
.ikili-kart .genis{grid-column:span 2}
/* Kart içindeki düğmeler yan yana; dar ekranda alt alta geçiyor. */
.kart-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* --- tablo --- */
.tablo{margin-top:30px;border:1px solid var(--kenar);border-radius:16px;overflow:hidden;font-size:1rem}
.tablo .satir{display:grid;grid-template-columns:var(--kolonlar,200px 1fr 200px)}
.tablo .satir+.satir{border-top:1px solid var(--kenar)}
.tablo .basliklar{background:var(--yuzey-2);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ikincil)}
.tablo .basliklar>*{padding:14px 22px}
.tablo .satir>*{padding:18px 22px;color:var(--ikincil)}
.tablo .satir>*:first-child{color:var(--metin);font-weight:500}
.tablo.kunye .satir>*:first-child{background:var(--yuzey-2);color:var(--ikincil);font-weight:400}
.tablo.kunye .satir>*:last-child{background:var(--yuzey);color:var(--metin)}
/* Teknoloji dökümü kaynakça gibi: okunur ama sayfanın ağırlık merkezi değil. */
.tablo.kucuk{margin-top:18px;border-radius:12px;font-size:.82rem}
.tablo.kucuk .satir>*{padding:10px 14px}
.chip{display:inline-block;padding:3px 9px;border-radius:6px;border:1px dashed var(--vurgu-soluk);
  color:var(--ikincil);font-size:.84rem}
.bekleyen{border-bottom:1px dashed var(--vurgu-soluk)}
.uyari-kutu{margin-top:14px;padding:14px 18px;border:1px dashed var(--vurgu-soluk);border-radius:12px;
  font-size:.96rem;line-height:1.6;color:var(--ikincil)}

/* --- CTA kartı --- */
.cta-kart{position:relative;background:var(--yuzey);border:1px solid var(--kenar);border-radius:22px;
  padding:clamp(32px,4vw,56px);overflow:hidden;margin-block:clamp(60px,7vw,96px)}
.cta-kart h2{max-width:22ch;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;font-weight:600}
.cta-kart p{margin-top:18px;max-width:56ch;font-size:1.06rem;line-height:1.6;color:var(--ikincil)}
.cta-kart .dugmeler{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
/* Yan yana kapanış: başlık solda, düğmeler karşısında ve dikeyde ortalı. */
.cta-kart.yan{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);align-items:center}
.cta-kart.yan .dugmeler{margin-top:0}
@media (max-width:860px){
  .cta-kart.yan{grid-template-columns:1fr;gap:28px}
  .cta-kart.yan .dugmeler{margin-top:0}
}
.cta-kart .karalama{position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(24px,4vw,56px)}
.karalama{font-family:Caveat,"Segoe Script",cursive;font-weight:600;font-size:1.62rem;line-height:1;
  color:var(--karalama);transform:rotate(-4deg);display:inline-block}
/* Akış içinde her zaman bir blok ögeden sonra geliyor ve kendi boşluğu yoktu:
   üstündeki çizgiye/metne yapışıyordu. Kapanış kartındaki kopya mutlak konumlu,
   üst boşluk onun yerini değiştirmiyor. */
.karalama{margin-top:28px}
.btn-kutu{border-radius:12px;padding:15px 26px;font-size:1rem;font-weight:500}

/* --- hizmet/ürün liste kartları --- */
.liste-kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.liste-kart{display:block;background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;
  padding:28px 26px 26px;transition:transform .22s var(--yumusak),border-color .22s}
.liste-kart:hover{transform:translateY(-2px);border-color:var(--vurgu-metin)}
.liste-kart .no{font-size:.8rem;color:var(--ikincil);opacity:.8}
.liste-kart h2{margin:14px 0 10px;font-size:1.38rem;font-weight:600;letter-spacing:-.02em}
.liste-kart p{font-size:.97rem;line-height:1.6;color:var(--ikincil)}
.liste-kart .kart-ornek{margin-top:18px;padding-top:14px;border-top:1px solid var(--kenar);font-size:.88rem;color:var(--ikincil)}
.liste-kart .kart-ornek b{color:var(--metin);opacity:.9;font-weight:500}
.liste-kart.genis{grid-column:span 2;background:var(--yuzey-2);display:grid;align-content:space-between}
.liste-kart.genis h2{font-size:1.62rem}
.liste-kart.genis p{max-width:520px;font-size:1rem}
.liste-kart.genis .bag{margin-top:22px}

/* --- 4 adım --- */
.adimlar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.adimlar article{position:relative;border-top:2px solid var(--vurgu-soluk);padding-top:18px;
  transition:transform .3s var(--yumusak)}
.adimlar article::after{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;
  background:var(--degrade);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--yumusak)}
.adimlar article:hover{transform:translateY(-4px)}
.adimlar article:hover::after{transform:scaleX(1)}
.adimlar .no{font-size:.8rem;color:var(--ikincil)}
.adimlar h3{margin:10px 0 8px;font-size:1.18rem}
.adimlar p{font-size:.95rem;line-height:1.6;color:var(--ikincil)}
.ayirici{border-top:1px solid var(--kenar);padding-top:56px;margin-top:clamp(40px,5vw,72px)}
.ayirici h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;font-weight:600}

/* --- ürün detay --- */
/* Başlığın son satırının ardında, kendi ölçüsünde: h1'in punto ve satır
   yüksekliğini miras almıyor, başlık ne kadar büyürse büyüsün aynı kalıyor. */
.rozetler{display:inline-flex;flex-wrap:wrap;gap:10px;margin-left:14px;
  vertical-align:middle;font-size:1rem;line-height:1.4;font-weight:400;
  letter-spacing:normal;translate:0 -.12em}
.rozetler span{font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--kenar);color:var(--ikincil)}
.rozetler span.canli{border-color:var(--vurgu-soluk);color:var(--vurgu-metin);display:inline-flex;align-items:center;gap:7px}
.rozetler span.canli::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
.katlanir{max-width:760px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;overflow:hidden}
.katlanir summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;
  cursor:pointer;font-weight:500;list-style:none}
.katlanir summary::-webkit-details-marker{display:none}
.katlanir summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;border-radius:99px;
  border:1px solid var(--kenar);color:var(--ikincil);font-size:1.05rem;flex:none}
.katlanir[open] summary::after{content:"−"}
.katlanir .ic{padding:24px 28px 28px;border-top:1px solid var(--kenar)}
.katlanir .ic p{font-size:1.03rem;line-height:1.68;color:var(--ikincil)}
.katlanir .ic p+p{margin-top:16px}
.katlanir .alt-blok{margin-top:28px;padding-top:24px;border-top:1px solid var(--kenar)}
.katlanir .alt-blok h3{font-size:1.06rem}
.katlanir .madde{display:grid;margin-top:14px}
.katlanir .madde div{padding:11px 0;border-bottom:1px solid var(--kenar);font-size:.97rem;color:var(--ikincil)}
.katlanir .madde div:last-child{border-bottom:0}
.gorsel-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px;max-width:760px}
.gorsel-kutu{aspect-ratio:var(--oran,3/4);border:1px dashed var(--vurgu-soluk);border-radius:16px;background:var(--yuzey);
  display:grid;place-items:center;text-align:center;padding:20px;font-size:.9rem;line-height:1.5;color:var(--ikincil)}

/* --- iletişim --- */
.kanal-kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kanal-kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;padding:26px;
  transition:transform .22s var(--yumusak),border-color .22s}
a.kanal-kart:hover{transform:translateY(-2px);border-color:var(--vurgu-metin)}
.kanal-kart .bas{display:flex;align-items:center;gap:10px;color:var(--ikincil)}
.kanal-kart .bas.yesil{color:var(--wa-metin)}
.kanal-kart h2{margin:0;font-size:1.25rem;color:var(--metin)}
.kanal-kart p{margin-top:14px;font-size:.97rem;line-height:1.6;color:var(--ikincil)}
.kanal-kart .deger{margin-top:20px;font-size:.97rem;color:var(--vurgu-metin)}
.asistan-serit{display:flex;align-items:center;gap:18px;margin-top:20px;background:var(--yuzey-2);
  border:1px solid var(--kenar);border-radius:18px;padding:22px 26px}
.asistan-serit .rozet-ai{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:99px;
  background:var(--zemin);border:1px solid var(--kenar);color:var(--vurgu-metin);font-size:.78rem;font-weight:600}
.asistan-serit h3{font-size:1.06rem}
.asistan-serit p{margin-top:6px;max-width:76ch;font-size:.97rem;line-height:1.6;color:var(--ikincil)}
/* ---------- Çerez izni penceresi ----------
   Sayfanın altına oturan tek bir kutu. Ekranı kaplayan bir katman değil:
   ziyaretçi karar vermeden de siteyi okuyabiliyor. */
.cerez-izin{position:fixed;z-index:80;inset-inline:0;bottom:0;padding:16px;
  display:flex;justify-content:center;pointer-events:none}
.cerez-ic{pointer-events:auto;width:min(860px,100%);background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:18px;padding:22px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.cerez-ic h2{font-size:1.02rem;font-weight:600}
.cerez-ic p{margin-top:8px;font-size:.94rem;line-height:1.6;color:var(--ikincil)}
.cerez-ic p a{color:var(--vurgu-metin);border-bottom:1px solid var(--vurgu-soluk)}
.cerez-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cerez-dugmeler .btn{flex:1 1 auto;justify-content:center}
@media (min-width:620px){
  .cerez-ic{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"bas dugme" "metin dugme";gap:0 26px;align-items:center}
  .cerez-ic h2{grid-area:bas} .cerez-ic p{grid-area:metin;margin-top:6px}
  .cerez-dugmeler{grid-area:dugme;margin-top:0;flex-wrap:nowrap}
  .cerez-dugmeler .btn{flex:none}
}

/* Sayfa içi çapalar: yapışkan menü 75 px, üstünde nefes payı kalsın.
   Hem iletişim formunun başlığı hem yasal/hizmet sayfalarının bölümleri. */
#ana,#form,.govde-metin .blok[id]{scroll-margin-top:100px}
.form-duzen{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start}
.form-duzen h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.12;font-weight:600}
.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
label{display:grid;gap:8px;font-size:.9rem;color:var(--ikincil)}
label .zorunlu{color:var(--vurgu-metin)}
.etiket{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* form etiketleri alanına yakın dursun — .etiket'in bölüm başlığı için
   taşıdığı 18px alt boşluk burada gereksiz */
.iletisim-form .etiket{margin-bottom:0}
.iletisim-form label{gap:10px}
input[type=text],input[type=email],input[type=tel],textarea,select{
  background:var(--yuzey);border:1px solid var(--kenar);border-radius:11px;padding:13px 15px;
  color:var(--metin);font-family:inherit;font-size:1rem;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--vurgu-metin)}
textarea{resize:vertical;min-height:140px}
.konu{margin-top:26px}
.konu-liste{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.konu-liste label{display:inline-flex;align-items:center;font-size:.9rem;padding:9px 15px;border-radius:999px;
  border:1px solid var(--kenar);color:var(--ikincil);cursor:pointer;gap:0}
.konu-liste input{position:absolute;opacity:0;width:0;height:0}
.konu-liste label:has(input:checked){border-color:var(--vurgu-metin);color:var(--metin);background:var(--yuzey-2)}
.onay{display:flex;align-items:flex-start;gap:12px;margin-top:22px;font-size:.95rem;line-height:1.6}
.onay input{margin-top:3px;width:17px;height:17px;accent-color:var(--vurgu-metin);flex:none}
.onay a{color:var(--vurgu-metin);border-bottom:1px solid var(--vurgu-soluk)}
.gonder-satir{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
.form-durum{margin-top:20px;padding:14px 18px;border-radius:12px;font-size:.96rem;line-height:1.55;
  border:1px solid var(--kenar);color:var(--ikincil)}
.form-durum.basarili{border-color:color-mix(in srgb, #25D366 45%, transparent);
  background:color-mix(in srgb, #25D366 9%, transparent);color:var(--wa-metin)}
.form-durum.hata{border-color:color-mix(in srgb, #FF6B6B 50%, transparent);
  background:color-mix(in srgb, #FF6B6B 9%, transparent);color:var(--hata-metin)}
.form-durum a{text-decoration:underline;text-underline-offset:3px}
.form-not{margin-top:26px;max-width:640px;font-size:.88rem;line-height:1.6;color:var(--ikincil);opacity:.85}
/* Konum: form düzeninin altında, tam genişlikte iki şehir */
.konumlar-blok{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--kenar)}
.konumlar-blok>h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.14;font-weight:600}
.konumlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:clamp(24px,3vw,34px)}
.konum-kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column}
.konum-kart .harita{height:clamp(200px,22vw,260px);background:var(--yuzey-2);display:grid;
  place-items:center;text-align:center;padding:20px;border-bottom:1px solid var(--kenar);
  font-size:.9rem;line-height:1.5;color:var(--ikincil)}
/* Harita görseli: fare gelince işaretçi sabit kalacak şekilde 3 kat yakınlaşır.
   transform-origin işaretçinin görseldeki yerine kuruluyor (--ix/--iy). */
.konum-kart .harita--gorsel{padding:0;display:block;position:relative;overflow:hidden}
.konum-kart .harita--gorsel img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:var(--ix,50%) var(--iy,50%);
  transition:transform .55s var(--yumusak)}
@media (hover:hover){
  .konum-kart:hover .harita--gorsel img{transform:scale(3)}
}
@media (prefers-reduced-motion:reduce){
  .konum-kart:hover .harita--gorsel img{transform:none}
}
.konum-kart .ic{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.konum-kart h3{font-size:1.18rem}
.konum-kart p{margin-top:10px;font-size:1rem;line-height:1.6;color:var(--ikincil)}
.konum-kart .bag{margin-top:auto;padding-top:16px;font-size:.95rem;align-self:flex-start}
.konumlar-not{margin-top:16px;font-size:.85rem;opacity:.8;color:var(--ikincil)}
@media (max-width:760px){.konumlar{grid-template-columns:1fr}}

.yan-kartlar{display:grid;gap:20px}
.yan-kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;overflow:hidden}
.yan-kart .harita{height:200px;background:var(--yuzey-2);display:grid;place-items:center;text-align:center;
  padding:20px;border-bottom:1px solid var(--kenar);font-size:.9rem;line-height:1.5;color:var(--ikincil)}
.yan-kart .ic{padding:22px 24px}
.yan-kart h3{font-size:1.06rem}
.yan-kart p{margin-top:10px;font-size:.97rem;line-height:1.6;color:var(--ikincil)}
.yan-kart .kucuk{margin-top:14px;font-size:.85rem;opacity:.8}
.yan-kart .bag{margin-top:14px;font-size:.95rem}
.sosyal-baglar{display:grid;gap:10px;margin-top:16px}
/* Uzun listede tek sütun gereksiz yer kaplıyor; yer varsa yana açılıyor. */
.sosyal-baglar.cok{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));margin-top:26px}
.sosyal-bag{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:13px;
  border:1px solid var(--kenar);background:var(--yuzey-2);
  transition:border-color .2s var(--yumusak),background-color .2s var(--yumusak)}
.sosyal-bag:hover{border-color:var(--vurgu-metin);background:var(--yuzey)}
/* Kartın içindeyken zemin değişmiyor: kart zaten --yuzey, ikisi eşitlenince
   bağ kaybolurdu. Geri bildirimi kenarlık ve ikon rengi veriyor. */
.ikili-kart .sosyal-bag:hover{background:var(--yuzey-2)}
.sosyal-bag .sim{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--kenar);color:var(--ikincil);transition:color .2s var(--yumusak)}
.sosyal-bag:hover .sim{color:var(--vurgu-metin);border-color:var(--vurgu-soluk)}
.sosyal-bag .ad{display:grid;gap:1px;min-width:0;font-size:.95rem;color:var(--metin);line-height:1.3}
.sosyal-bag .ad em{font-style:normal;font-size:.85rem;color:var(--ikincil)}
.sosyal-bag>svg:last-child{margin-inline-start:auto;flex:none;color:var(--ikincil);
  transition:color .2s var(--yumusak)}
.sosyal-bag:hover>svg:last-child{color:var(--vurgu-metin)}

/* --- yasal --- */
.yasal h1{font-size:clamp(2rem,3.6vw,3.25rem)}
.yasal .tarih{margin-top:18px;font-size:.94rem;color:var(--ikincil)}
.yasal .govde-metin section+section{margin-top:56px}
.yasal h2{font-size:1.62rem;font-weight:600;letter-spacing:-.02em}
.yasal .govde-metin p{margin-top:16px;font-size:1.03rem;line-height:1.7;color:var(--ikincil)}
.yasal h3{margin-top:24px;font-size:1.06rem}
.dizi{display:grid;margin-top:12px;border-top:1px solid var(--kenar)}
.dizi p{margin:0!important;padding:14px 0;border-bottom:1px solid var(--kenar);font-size:1.03rem;line-height:1.65}
.alt-serit{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:18px;padding:28px 32px;margin-block:clamp(56px,7vw,88px)}
.alt-serit p{max-width:62ch;font-size:1.03rem;line-height:1.6;color:var(--ikincil)}

/* --- iç sayfa duyarlılık --- */
@media (max-width:1080px){
  .ikili{grid-template-columns:1fr;gap:28px}
  /* 1fr ızgara ögesinin asgari boyu min-content'tir: içindekiler yan yana dizilince
     min-content ~1030px oluyor, sütun daralmıyor ve bütün sayfa yatay kayıyordu.
     minmax(0,1fr) + min-width:0 ile şerit kendi içinde kayıyor, sayfa taşmıyor. */
  .yan-duzen,.yan-duzen.solda{grid-template-columns:minmax(0,1fr);gap:40px}
  .yan-gez{position:static;order:-1;min-width:0}
  .yan-gez nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:18px;padding-bottom:6px}
  .liste-kartlar{grid-template-columns:repeat(2,1fr)}
  .liste-kart.genis{grid-column:span 2}
  .adimlar{grid-template-columns:repeat(2,1fr);gap:28px}
  .form-duzen{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  .liste-kartlar,.kanal-kartlar,.gorsel-ikili,.ikili-kart,.alanlar{grid-template-columns:1fr}
  .liste-kart.genis{grid-column:auto}
  .ikili-kart .genis{grid-column:auto}
  .adimlar{grid-template-columns:1fr}
  .tablo .satir{grid-template-columns:1fr}
  .tablo .satir>*+*{padding-top:0}
  .tablo .basliklar{display:none}
  .alt-serit{flex-direction:column;align-items:flex-start;gap:20px}
  .cta-kart .karalama{position:static;display:block;margin-top:24px}
}

/* ---------- 22. Kanal telefonları (DKC.ai) ----------
   Beş mecranın arayüzünün sade karşılığı. Ekran her iki temada da açık
   görünümde kalıyor: koyu gövdenin içinde ışıyan gerçek bir ekran gibi duruyor.
   Şerit native kaydırma + scroll-snap ile çalışıyor; dokunmatik sürükleme,
   momentum ve klavye bedava geliyor. */
.telefonlar{--tel-en:clamp(224px,24vw,258px);margin-top:clamp(28px,4vw,44px)}
.tel-ray{display:flex;gap:clamp(16px,2.4vw,30px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Alttaki pay gölgenin ineceği mesafeden fazla: kaydırma kabı taşanı
     kırpıyor, gölgenin ucu kenara denk gelirse düz bir çizgi olarak kesiliyor.
     Denetimlerin üst boşluğu aynı kadar kısılıyor ki toplam aralık değişmesin. */
  padding-block:8px 24px;padding-inline:24px}
/* Sığdığında grup ortalanır, sığmadığında otomatik kenar boşlukları 0'a
   düşer ve şerit kaydırmaya geçer. flex + overflow ile ortalamanın
   baştan kırpma sorunu bu yolla oluşmuyor. */
.tel-ray>.tel:first-child{margin-inline-start:auto}
.tel-ray>.tel:last-child{margin-inline-end:auto}
.tel-ray::-webkit-scrollbar{display:none}
.tel-ray:focus-visible{outline:2px solid var(--vurgu-metin);outline-offset:6px;border-radius:18px}
.tel{flex:none;width:var(--tel-en);scroll-snap-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px;opacity:.5;transform:scale(.93);
  transition:opacity .35s var(--yumusak),transform .35s var(--yumusak)}
.tel.etkin{opacity:1;transform:none}

/* Gölgenin yayılması bilerek negatif: kaydırma kabı taşanı kırpıyor ve şerit
   sonuna kadar kaydırıldığında baştaki telefon zorunlu olarak kırpma kenarına
   dayanıyor — dolgu bunu çözmüyor, çünkü dolgu da kenarın dışına kayıyor.
   yayılma = bulanıklık/2 olunca gölge yanlara ve yukarı hiç taşmıyor, aşağı
   26px iniyor; telefonun altında 41px yer var, yani hiçbir konumda kesilmiyor. */
.tel-govde{position:relative;width:100%;aspect-ratio:9 / 18.6;border-radius:34px;
  background:#1b1d21;padding:7px;box-shadow:0 26px 60px -30px rgba(0,0,0,.55),
  inset 0 0 0 1px rgba(255,255,255,.08)}
.tel-tus{position:absolute;width:2.5px;border-radius:2px;background:#34373d}
.tel-tus--ses-ust{left:-2px;top:22%;height:7%}
.tel-tus--ses-alt{left:-2px;top:31%;height:7%}
.tel-tus--kilit{right:-2px;top:25%;height:10%}
.tel-ekran{position:relative;height:100%;border-radius:28px;overflow:hidden;display:flex;
  flex-direction:column;background:var(--m-zemin);color:#111b21}

.tel-durum{flex:none;display:flex;align-items:center;justify-content:space-between;
  background:var(--m-ust);color:var(--m-ust-yazi);padding:6px 12px 2px;
  font-size:10px;font-weight:700;letter-spacing:-.01em}
.tel-durum-sag{display:flex;align-items:center;gap:3px}

.sohbet-ust{flex:none;display:flex;align-items:center;gap:7px;padding:6px 10px 8px;
  background:var(--m-ust);color:var(--m-ust-yazi);border-bottom:1px solid var(--m-ust-cizgi,transparent)}
.sohbet-geri{display:flex;opacity:.9;flex:none}
.sohbet-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--m-vurgu);color:#fff;font-size:11px;font-weight:700}
.sohbet-kisi{display:flex;flex-direction:column;gap:1px;min-width:0;margin-inline-end:auto}
.sohbet-kisi b{font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sohbet-kisi em{font-style:normal;font-size:9px;line-height:1;opacity:.75}
.sohbet-arac{display:flex;align-items:center;gap:9px;opacity:.85;flex:none}

.sohbet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:8px 8px 10px;background:var(--m-zemin);overflow:hidden}
.sohbet-gun{align-self:center;margin-bottom:3px;padding:2px 8px;border-radius:999px;
  background:var(--m-gun);color:var(--m-gun-yazi);font-size:8.5px;font-weight:600}
.balon{max-width:86%;padding:5px 8px 4px;border-radius:11px;font-size:10.5px;line-height:1.35;
  display:flex;flex-direction:column;gap:1px}
.balon p{margin:0}
.balon-alt{display:flex;align-items:center;justify-content:flex-end;gap:3px;
  font-size:8px;opacity:.65;margin-top:1px}
.balon-alt .tik{color:#34b7f1;opacity:.95}
.balon--gelen{align-self:flex-start;border-top-left-radius:3px;
  background:var(--m-gelen);color:var(--m-gelen-yazi)}
.balon--giden{align-self:flex-end;border-top-right-radius:3px;
  background:var(--m-giden);color:var(--m-giden-yazi)}

.yaziyor{align-self:flex-start;display:none;align-items:center;gap:4px;
  padding:7px 10px;border-radius:11px;border-top-left-radius:3px;background:var(--m-gelen)}
.yaziyor.acik{display:flex}
.yaziyor span{width:5px;height:5px;border-radius:50%;background:var(--m-vurgu);
  animation:yaziyor-zipla .9s infinite}
.yaziyor span:nth-child(2){animation-delay:.15s}
.yaziyor span:nth-child(3){animation-delay:.3s}
@keyframes yaziyor-zipla{0%,100%{transform:none;opacity:.45}50%{transform:translateY(-3px);opacity:1}}

.sohbet-alt{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;
  background:var(--m-alt);color:var(--m-alt-yazi)}
.sohbet-alt-ikon{display:flex;opacity:.6;flex:none}
.sohbet-kutu{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;
  gap:6px;background:var(--m-kutu);border-radius:999px;padding:5px 9px;font-size:10px;opacity:.85}
.sohbet-kutu>span{display:flex;align-items:center;gap:6px;opacity:.7;flex:none}
.sohbet-gonder{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--m-vurgu);color:#fff}
.tel-cizgi{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:34%;height:3px;border-radius:3px;background:#0000002e}

.tel-ad{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ikincil)}
.tel.etkin .tel-ad{color:var(--metin)}
.tel-denetim{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:max(2px,calc(clamp(18px,2.4vw,28px) - 16px))}
.tel-ok{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--kenar);color:var(--ikincil);
  transition:border-color .2s var(--yumusak),color .2s var(--yumusak)}
.tel-ok:hover{border-color:var(--vurgu-metin);color:var(--vurgu-metin)}
.tel-noktalar{display:flex;align-items:center;gap:8px}
.tel-nokta{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--kenar-guclu);transition:background-color .2s var(--yumusak),transform .2s}
.tel-nokta.etkin{background:var(--vurgu-metin);transform:scale(1.35)}

/* mesajlar sırayla beliriyor; JavaScript yoksa ya da hareket azaltılmışsa hepsi açık */
html.js-hareket .balon{opacity:0;transform:translateY(7px) scale(.97);
  transition:opacity .3s var(--yumusak),transform .3s var(--yumusak)}
html.js-hareket .balon.gorunur{opacity:1;transform:none}

/* ---- mecra paletleri ---- */
[data-mecra="whatsapp"]{--m-ust:#008069;--m-ust-yazi:#fff;--m-zemin:#efeae2;
  --m-gelen:#fff;--m-gelen-yazi:#111b21;--m-giden:#d9fdd3;--m-giden-yazi:#111b21;
  --m-vurgu:#00a884;--m-alt:#f0f2f5;--m-alt-yazi:#54656f;--m-kutu:#fff;
  --m-gun:#ffffffe6;--m-gun-yazi:#54656f}
[data-mecra="instagram"]{--m-ust:#fff;--m-ust-yazi:#131518;--m-ust-cizgi:#dbdbdb;
  --m-zemin:#fff;--m-gelen:#efefef;--m-gelen-yazi:#131518;
  --m-giden:linear-gradient(135deg,#4f5bd5,#962fbf);--m-giden-yazi:#fff;
  --m-vurgu:#c13584;--m-alt:#fff;--m-alt-yazi:#737373;--m-kutu:#f1f1f1;
  --m-gun:#f1f1f1;--m-gun-yazi:#737373}
[data-mecra="facebook"]{--m-ust:#fff;--m-ust-yazi:#050505;--m-ust-cizgi:#e4e6eb;
  --m-zemin:#fff;--m-gelen:#f0f0f0;--m-gelen-yazi:#050505;--m-giden:#0084ff;--m-giden-yazi:#fff;
  --m-vurgu:#0084ff;--m-alt:#fff;--m-alt-yazi:#65676b;--m-kutu:#f0f2f5;
  --m-gun:#f0f2f5;--m-gun-yazi:#65676b}
[data-mecra="tiktok"]{--m-ust:#fff;--m-ust-yazi:#161823;--m-ust-cizgi:#e3e3e4;
  --m-zemin:#fff;--m-gelen:#f1f1f2;--m-gelen-yazi:#161823;--m-giden:#fe2c55;--m-giden-yazi:#fff;
  --m-vurgu:#fe2c55;--m-alt:#fff;--m-alt-yazi:#8a8b91;--m-kutu:#f1f1f2;
  --m-gun:#f1f1f2;--m-gun-yazi:#8a8b91}
[data-mecra="telegram"]{--m-ust:#517da2;--m-ust-yazi:#fff;--m-zemin:#dfe6ec;
  --m-gelen:#fff;--m-gelen-yazi:#111;--m-giden:#eeffde;--m-giden-yazi:#111;
  --m-vurgu:#40a7e3;--m-alt:#fff;--m-alt-yazi:#707579;--m-kutu:#f4f4f5;
  --m-gun:#ffffffcc;--m-gun-yazi:#707579}
/* Instagram'ın gönderilen balonu gradyan: tik rengi beyaz zeminde kaybolmasın */
[data-mecra="instagram"] .balon--giden .tik,
[data-mecra="facebook"] .balon--giden .tik,
[data-mecra="tiktok"] .balon--giden .tik{color:#fff}

@media (max-width:560px){
  .telefonlar{--tel-en:min(258px, 76vw)}
  .tel-ray{gap:14px}
}

/* Geniş bölüm: başlık kabın içinde, içerik tam genişlikte.
   Telefon şeridi ekranın kenarından kayabilsin diye kaptan taşıyor
   (body'de overflow-x:hidden olduğu için yatay çubuk oluşmuyor). */
.genis-bolum>.sol{max-width:none}
.genis-bolum>.sol h2{margin-bottom:14px}
/* Punto ve satır aralığı .ikili .sol p ile aynı; geniş bölümde alt boşluk
   da veriliyor, yoksa açıklama içeriğe yapışıyordu. */
.genis-bolum>p,.genis-bolum>.sol p{max-width:62ch;color:var(--ikincil);
  font-size:.95rem;line-height:1.6;margin-bottom:clamp(22px,2.4vw,32px)}
.genis-bolum .telefonlar{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
/* Ekran şeridi solda başlıkla hizalı kalıyor ama sağda kabın kenarında
   kesiliyordu: sayfanın ortasında düz bir kesik ve ardından boşluk.
   Negatif sağ kenar boşluğu kutuyu ekranın kenarına kadar uzatıyor, kesik
   oraya taşınıyor. Sondaki dolgu aynı kadar; şerit sonuna kadar
   kaydırıldığında son kart yine kap hizasında duruyor.
   Yüzdeler kabın genişliğine göre çözülüyor, bu yüzden doğrudan çocuk. */
.genis-bolum>.ekran-serit{margin-inline-end:calc(50% - 50vw);
  padding-inline-end:calc(50vw - 50%)}

/* ---------- Dönen ünvan satırı ----------
   Harfler tek tek, sırayla ve bulanıklıktan çıkarak geliyor. Çıkan kelime
   akıştan alınıp mutlak konumlanıyor; böylece giren kelime satırı hemen
   devralıyor ve iki kelime üst üste binmiyor. */
.morf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.34em;
  margin-top:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.18}
.morf-sabit{color:var(--metin)}
.morf-yuva{display:inline-grid;justify-items:start;color:var(--vurgu-metin)}
.morf-olcu{grid-area:1 / 1;visibility:hidden;white-space:nowrap;pointer-events:none}
.morf-kelime{grid-area:1 / 1;display:inline-flex}
.morf-kelime>span{display:inline-block;white-space:pre}
.morf-kelime--cikan{pointer-events:none}
html.js-hareket .morf-kelime>span{opacity:0;transform:translateY(5px);filter:blur(5px);
  animation:morf-gir .3s var(--yumusak) forwards;animation-delay:calc(var(--i) * 30ms)}
html.js-hareket .morf-kelime--cikan>span{animation-name:morf-cik;animation-duration:.26s}
@keyframes morf-gir{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes morf-cik{from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:translateY(-5px);filter:blur(5px)}}
@media (max-width:560px){.morf{font-size:clamp(1.32rem,6.4vw,1.8rem)}}

/* Ürün sayfasında başlığın yerini alan logo. Yükseklikten ölçekleniyor;
   kelime markası currentColor olduğu için temayı takip ediyor. */
/* inline-block: rozetler logonun altına düşmeyip yanında kalıyor. */
.h1-logo{display:inline-block;vertical-align:middle}
.h1-logo svg{height:calc(clamp(52px,7.4vw,92px) * var(--logo-olcek));width:auto;display:block}

/* ---------- Sayfaya özel renk: DKC.ai ----------
   Ürünün kendi turuncusu yalnızca bu sayfada vurgu rengi oluyor.
   Marka turuncusu (#FF3B00) iki temada da olduğu gibi kullanılıyor.
   Koyu zeminde kontrastı 5.5:1, sorun yok. Açık zeminde 3.4:1 — normal
   metin için gereken 4.5:1'in altında. Marka rengi bozulmasın diye
   bilerek böyle bırakıldı; açık temada bağlantı ve küçük yazılar
   diğer sayfalara göre daha zor okunuyor. */
body[data-renk="dkc-ai"]{
  --vurgu-1:#E53100; --vurgu-2:#FF6A00;
  --vurgu-metin:#FF3B00; --vurgu-soluk:rgba(255,59,0,.32); --karalama:#FF3B00;
  --golge-buton:0 10px 30px -8px rgba(255,59,0,.4);
  --aura:rgba(255,59,0,.15);
}
:root[data-tema="koyu"] body[data-renk="dkc-ai"]{
  --vurgu-1:#E53100; --vurgu-2:#FF8A3D;
  --vurgu-metin:#FF3B00; --vurgu-soluk:rgba(255,59,0,.35); --karalama:#FF7A45;
  --parlama:0 0 44px -6px rgba(255,122,45,.5);
  --golge-buton:0 14px 40px -10px rgba(229,49,0,.6);
  --aura:rgba(255,59,0,.34);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) body[data-renk="dkc-ai"]{
    --vurgu-1:#E53100; --vurgu-2:#FF8A3D;
    --vurgu-metin:#FF3B00; --vurgu-soluk:rgba(255,59,0,.35); --karalama:#FF7A45;
    --parlama:0 0 44px -6px rgba(255,122,45,.5);
    --golge-buton:0 14px 40px -10px rgba(229,49,0,.6);
    --aura:rgba(255,59,0,.34);
  }
}
/* Logonun ".ai"si zaten marka turuncusu; açık temada gövde rengi
   koyulaştırıldığı için logo ile satır arasında fark kalmasın diye
   logo da aynı koyu tonu almıyor — marka rengi logoda sabit kalıyor. */

/* Ürün kartında logo: başlığın yerini alıyor, h2'nin optik boyuna denk yükseklikte.
   Kelime markası currentColor taşıdığı için kartın metin rengini alıyor;
   ".ai" marka turuncusunda kalıyor. */
.liste-kart .kart-logo{display:flex;align-items:center;min-height:1.2em}
/* Logonun sanat eseri "DKC"nin büyük harf yüksekliğini dolduruyor; em ile
   bağlayınca başlık puntosuyla birlikte ölçekleniyor ve diğer iki kartın
   yazı başlığıyla aynı optik ağırlıkta duruyor. */
.liste-kart .kart-logo svg{height:calc(.95em * var(--logo-olcek));width:auto;display:block}

/* ---------- Marka mürekkepleri ----------
   Logolar tek dosya; temaya göre değişen kısım token'dan geliyor.
   muuv'un limonu (#CCFF3E) ve DKC.ai'nin turuncusu dosyada sabit. */
:root{--muuv-murekkep:#4342FF; --dyety-murekkep:#005561}
:root[data-tema="koyu"]{--muuv-murekkep:#FFFFFF; --dyety-murekkep:#49D6C2}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]){--muuv-murekkep:#FFFFFF; --dyety-murekkep:#49D6C2}
}

/* ---------- Sayfaya özel renk: muuv ----------
   Marka moru #4342FF açık zeminde 5.81:1 — olduğu gibi kullanılıyor.
   Koyu zeminde 3.24:1'e düşüyor, orada açılmış tonu (#8A89FF, 6.65:1) geçiyor.
   Marka limonu #CCFF3E açık zeminde 1.12:1, yani yazı olarak kullanılamaz;
   yalnızca koyu temada el yazısı vurgusu ve parıltı olarak görünüyor. */
body[data-renk="muuv"]{
  --vurgu-1:#3A39E6; --vurgu-2:#6B6AFF;
  --vurgu-metin:#4342FF; --vurgu-soluk:rgba(67,66,255,.3); --karalama:#4342FF;
  --golge-buton:0 10px 30px -8px rgba(67,66,255,.42);
  --aura:rgba(67,66,255,.16);
}
:root[data-tema="koyu"] body[data-renk="muuv"]{
  --vurgu-1:#4342FF; --vurgu-2:#8A89FF;
  --vurgu-metin:#8A89FF; --vurgu-soluk:rgba(138,137,255,.35); --karalama:#CCFF3E;
  --parlama:0 0 44px -6px rgba(204,255,62,.4);
  --golge-buton:0 14px 40px -10px rgba(67,66,255,.6);
  --aura:rgba(67,66,255,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) body[data-renk="muuv"]{
    --vurgu-1:#4342FF; --vurgu-2:#8A89FF;
    --vurgu-metin:#8A89FF; --vurgu-soluk:rgba(138,137,255,.35); --karalama:#CCFF3E;
    --parlama:0 0 44px -6px rgba(204,255,62,.4);
    --golge-buton:0 14px 40px -10px rgba(67,66,255,.6);
    --aura:rgba(67,66,255,.4);
  }
}

/* ---------- Sayfaya özel renk: dyety ----------
   Marka paleti iki temaya birebir oturuyor: koyu yeşil #005561 açık zeminde
   8.14:1, nane #49D6C2 koyu zeminde 10.94:1. Logonun iki sürümüyle aynı mantık. */
body[data-renk="dyety"]{
  --vurgu-1:#005561; --vurgu-2:#0E8A99;
  --vurgu-metin:#005561; --vurgu-soluk:rgba(0,85,97,.3); --karalama:#00707F;
  --golge-buton:0 10px 30px -8px rgba(0,85,97,.42);
  --aura:rgba(73,214,194,.2);
}
:root[data-tema="koyu"] body[data-renk="dyety"]{
  --vurgu-1:#0E8A99; --vurgu-2:#49D6C2;
  --vurgu-metin:#49D6C2; --vurgu-soluk:rgba(73,214,194,.35); --karalama:#49D6C2;
  --parlama:0 0 44px -6px rgba(73,214,194,.45);
  --golge-buton:0 14px 40px -10px rgba(14,138,153,.6);
  --aura:rgba(73,214,194,.34);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) body[data-renk="dyety"]{
    --vurgu-1:#0E8A99; --vurgu-2:#49D6C2;
    --vurgu-metin:#49D6C2; --vurgu-soluk:rgba(73,214,194,.35); --karalama:#49D6C2;
    --parlama:0 0 44px -6px rgba(73,214,194,.45);
    --golge-buton:0 14px 40px -10px rgba(14,138,153,.6);
    --aura:rgba(73,214,194,.34);
  }
}

/* ---------- Logo optik ölçeği ----------
   Kutu yüksekliği eşit olunca logolar eşit görünmüyor; göz kutuyu değil harf
   gövdesini (x-yüksekliği / kapital) ölçüyor. SVG'leri rasterleyip satır satır
   mürekkep yoğunluğunu ölçtük — gövdenin kutuya oranı:
     muuv %56  ·  dyety %56  ·  DKC.ai %98
   muuv'da kalan pay kuşak, dyety'de ise ince çıkıntılar ('d/t' çıkışı, 'y' inişi):
   ikisi de görsel ağırlık taşımıyor.
   --govde markanın kendi ölçüsü; katsayı ondan türüyor, elle hesaplanmıyor.
   Pay 1 iken gövde taban yüksekliğe eşit oluyor: kartta .95em = 21px,
   başlıkta clamp(52px,7.4vw,92px).

   muuv ve dyety'de değer ölçülen harf gövdesi oranı; ikisi de geniş, küçük harf
   kelime markası olduğu için harf yüksekliğini eşitlemek yetiyor (mürekkep
   alanları %1 farkla aynı çıkıyor). DKC.ai ise derli toplu bir marka: aynı harf
   yüksekliğinde mürekkep alanı muuv'un yalnızca %67'si kalıyor ve göz bunu küçük
   okuyor. Alan ölçeğin karesiyle büyüdüğü için 1/sqrt(.67)=1.22 kat gerekiyor;
   .82 bunun karşılığı. Kapitalin küçük harf gövdesinden uzun durması zaten doğru.

   Değerler ölçümle bulundu, sonra gözle ayarlandı: dyety %6 küçültüldü
   (.54 -> .574), DKC.ai %10 büyütüldü (.82 -> .745). Boyut 1/--govde ile
   orantılı olduğu için küçültmek bölmek, büyütmek de bölmek demek. */
[data-logo]{--govde:1;--logo-olcek:calc(1 / var(--govde))}
[data-logo="muuv"]{--govde:.56}
[data-logo="dyety"]{--govde:.574}
[data-logo="dkc-ai"]{--govde:.745}


/* ---------- Perde zemini: WebGL ışık ----------
   Canvas boyanamazsa (WebGL yok, bağlam kaybı) altındaki degrade görünür
   kalıyor; perde hiçbir durumda boş bir kutuya dönüşmüyor. */
.perde-isik{position:absolute;inset:0;width:100%;height:100%;display:block;
  border:0;pointer-events:none}
.perde-ic{position:relative;z-index:1}

/* Perde: logo alanın tam ortasında; not ve düğme dibe alındı. */
.perde-alt{position:absolute;inset-inline:0;bottom:clamp(18px,3.4vh,52px);z-index:1;
  display:grid;justify-items:center;gap:clamp(12px,2vh,22px);padding-inline:24px}

/* ---------- Harf harf tepki veren başlık ----------
   Inter değişken (400-800) olduğu için ağırlık kademesiz geçiyor.
   Taban ağırlık başlığın kendi ağırlığı; efekt üstüne ekleniyor,
   başlık boştayken zayıflamıyor. */
.balon-yazi>span{transition:font-weight .28s var(--yumusak),color .28s var(--yumusak)}
.balon-yazi>span[data-uzak="0"]{font-weight:800;color:var(--vurgu-metin)}
.balon-yazi>span[data-uzak="1"]{font-weight:720;
  color:color-mix(in srgb, var(--vurgu-metin) 55%, var(--metin))}
.balon-yazi>span[data-uzak="2"]{font-weight:660;
  color:color-mix(in srgb, var(--vurgu-metin) 22%, var(--metin))}
@media (prefers-reduced-motion:reduce){.balon-yazi>span{transition:none}}

/* 720 pikselin altında logo ve alt blok kaçınılmaz olarak çakışıyor;
   orada akışa dönüp ikisini grup hâlinde ortalıyoruz. */
@media (max-height:720px){
  .perde-alt{position:static;margin-top:clamp(12px,2.2vh,22px)}
}


/* ---------- Projeler ----------
   Süzme tamamen istemci tarafında: kartlar sayfada duruyor, düğme yalnızca
   görünürlüğü değiştiriyor. JS yoksa bütün işler listeleniyor — süzgeç
   şeridi de o durumda gizleniyor ki çalışmayan düğme kalmasın. */
.suzgecler{display:none;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,36px)}
.js-hareket .suzgecler{display:flex}
.suzgec{border:1px solid var(--kenar-guclu);background:var(--yuzey);color:var(--ikincil);
  border-radius:999px;padding:9px 18px;font-size:.92rem;font-weight:500;cursor:pointer;
  transition:border-color .2s var(--yumusak),color .2s var(--yumusak),background-color .2s var(--yumusak)}
.suzgec:hover{border-color:var(--metin);color:var(--metin)}
.suzgec[aria-pressed="true"]{background:var(--metin);border-color:var(--metin);color:var(--zemin)}

.proje-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proje-kart{display:block;background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;
  overflow:hidden;transition:transform .25s var(--yumusak),border-color .25s var(--yumusak)}
.proje-kart:hover{transform:translateY(-2px);border-color:var(--vurgu-metin)}
.proje-kart .proje-kapak{display:grid;place-items:center;aspect-ratio:16/10;background:var(--yuzey-2);
  border-bottom:1px solid var(--kenar);overflow:hidden}
.proje-kart .proje-kapak img{width:100%;height:100%;object-fit:cover;display:block}
.proje-kapak-bos{padding:20px;text-align:center;font-size:.88rem;line-height:1.5;color:var(--sessiz)}
.proje-etiket{display:inline-block;margin:20px 24px 0;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vurgu-metin)}
.proje-kart h2{margin:10px 24px 0;font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.proje-kart p{margin:8px 24px 24px;font-size:.96rem;line-height:1.6;color:var(--ikincil)}
.proje-bos{margin-top:28px;color:var(--ikincil)}

/* detay sayfası */
.proje-kapak img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--kenar)}
.proje-ekranlar{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px}
.proje-ekranlar figure{margin:0}
.proje-ekranlar img{width:100%;height:auto;aspect-ratio:var(--oran,16/10);object-fit:cover;
  border-radius:16px;border:1px solid var(--kenar);display:block}
.proje-ekranlar figcaption{margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--ikincil)}
.proje-baglar{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.proje-bag{display:inline-flex;align-items:center;border:1px solid var(--kenar-guclu);
  border-radius:999px;padding:9px 18px;font-size:.92rem;font-weight:500;color:var(--metin)}
.proje-bag:hover{border-color:var(--vurgu-metin);color:var(--vurgu-metin)}

.degerlendirme{margin:0;background:var(--yuzey-2);border:1px solid var(--kenar);
  border-radius:18px;padding:clamp(24px,3vw,34px)}
.degerlendirme blockquote{margin:0}
.degerlendirme blockquote p{font-size:1.1rem;line-height:1.7;color:var(--metin)}
.degerlendirme blockquote p::before{content:"\201C"}
.degerlendirme blockquote p::after{content:"\201D"}
.degerlendirme figcaption{margin-top:18px;font-weight:600;font-size:.96rem}
.degerlendirme figcaption span{display:block;margin-top:3px;font-weight:400;
  font-size:.9rem;color:var(--ikincil)}

@media (max-width:1080px){
  .proje-izgara{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .proje-izgara{grid-template-columns:1fr}
  .proje-ekranlar{grid-template-columns:1fr}
}

/* Proje sayıları: künyenin altındaki rakam şeridi. */
.proje-sayilar{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;
  font-size:.9rem;color:var(--ikincil)}
.proje-sayilar span{position:relative}
.proje-sayilar span+span::before{content:"·";position:absolute;left:-13px;color:var(--sessiz)}

/* ---------- Ekran görüntüsünü büyütme ---------- */
.ekran-ac{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:16px;overflow:hidden}
.ekran-ac:focus-visible{outline:2px solid var(--vurgu-metin);outline-offset:3px}
.ekran-ac img{transition:transform .35s var(--yumusak)}
@media (hover:hover){.ekran-ac:hover img{transform:scale(1.03)}}

/* Tarayıcının kendi kuralı olan dialog:not([open]){display:none} yazar
   stillerine yeniliyor; aşağıdaki display:grid onu eziyordu. Kapalı kutu
   sayfada duruyor, hareket azaltma açıkken opaklığı da 1 olduğu için
   footer'ın üstünde boş bir kutu olarak görünüyordu. Kuralı geri koyuyoruz. */
dialog.buyutec:not([open]){display:none}
.buyutec{border:0;padding:0;background:none;color:var(--metin);
  max-width:min(94vw,1500px);max-height:96vh;overflow:visible;
  display:grid;gap:12px;justify-items:center;
  opacity:0;transform:scale(.94);transition:opacity .22s var(--yumusak),transform .22s var(--yumusak)}
.buyutec.acik{opacity:1;transform:scale(1)}
.buyutec::backdrop{background:rgba(6,8,14,0);backdrop-filter:blur(0);
  transition:background-color .22s var(--yumusak),backdrop-filter .22s var(--yumusak)}
.buyutec.acik::backdrop{background:rgba(6,8,14,.84);backdrop-filter:blur(4px)}

.buyutec-ust{width:100%;display:flex;justify-content:flex-end}
.buyutec-govde{display:grid;place-items:center;max-width:100%}
.buyutec img,.buyutec video{display:block;width:auto;max-width:100%;
  object-fit:contain;border-radius:14px;background:var(--yuzey-2);
  /* Üst çubuk, açıklama ve denetimler sabit bir yer kaplıyor. Sınırı yalnızca vh
     ile vermek uzun ekranda görseli gereksiz küçültüyor, kısa ekranda kutuyu
     taşırıyordu. İkisinin küçüğünü alınca görsel elverdiğince büyüyor, kutu da
     her zaman ekrana sığıyor. */
  max-height:min(80vh,calc(96vh - 175px))}
.buyutec .buyutec-alt{margin:0;max-width:70ch;font-size:.92rem;line-height:1.5;color:#E8E8EF;
  text-align:center}
.buyutec-denetim{display:flex;align-items:center;gap:18px}
.buyutec-sayac{min-width:56px;text-align:center;font-size:.86rem;letter-spacing:.06em;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}

.buyutec-kapat,.buyutec-ok{display:grid;place-items:center;width:40px;height:40px;line-height:1;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;transition:background-color .2s var(--yumusak)}
.buyutec-kapat{font-size:1.4rem}
.buyutec-ok{font-size:1.5rem;padding-bottom:3px}
.buyutec-kapat:hover,.buyutec-ok:hover{background:rgba(255,255,255,.2)}
.buyutec-kapat:focus-visible,.buyutec-ok:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:760px){
  .buyutec{max-width:94vw;gap:10px}
  .buyutec img,.buyutec video{max-height:min(72vh,calc(96vh - 210px))}
}
@media (prefers-reduced-motion:reduce){
  .ekran-ac img{transition:none}
  .buyutec,.buyutec::backdrop{transition:none}
  .buyutec{opacity:1;transform:none}
  @media (hover:hover){.ekran-ac:hover img{transform:none}}
}

/* ---------- Telefon ekranı şeridi ----------
   Yedi ekran yan yana sığmıyor; dikey yığmak yerine yatay kaydırılıyor.
   Kaydırma yapışmalı, böylece her ekran kendi yerine oturuyor. */
.ekran-serit{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ekran-serit figure{margin:0;flex:0 0 auto;width:var(--kart,196px);scroll-snap-align:start}
.ekran-serit .ekran-ac{border-radius:16px}
.ekran-serit img{width:100%;height:auto;aspect-ratio:var(--oran,9/19.5);object-fit:cover;
  border-radius:16px;border:1px solid var(--kenar);background:var(--yuzey-2);display:block}
.ekran-serit figcaption{margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--ikincil)}
@media (max-width:560px){.ekran-serit figure{width:min(var(--kart,196px),72vw)}}

/* ---------- Video ----------
   Dikey (9:16) tanıtım filmi. Kendi sunucumuzda durduğu için üçüncü taraf
   oynatıcı, çerez ya da izleme yok; yasal metinlerde değişiklik gerekmiyor. */
.video-kutu{margin:0;max-width:340px}
.video-kutu video{width:100%;height:auto;aspect-ratio:9/16;display:block;
  border-radius:20px;border:1px solid var(--kenar);background:var(--yuzey-2)}
.video-kutu figcaption{margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--ikincil)}

/* ---------- Galeri kutuları ----------
   Küçük bir düğme; içerik büyüteçte açılıyor. Sayfada onlarca küçük resim
   taşımak yerine ögeler JSON olarak gömülü, ilk yükte hiçbiri inmiyor. */
.galeri-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-top:22px}
.galeri-kutu{display:grid;justify-items:center;gap:12px;padding:28px 18px;cursor:pointer;
  background:var(--yuzey);border:1px solid var(--kenar);border-radius:16px;color:var(--metin);
  transition:border-color .22s var(--yumusak),transform .22s var(--yumusak)}
.galeri-kutu:hover{border-color:var(--vurgu-metin);transform:translateY(-2px)}
.galeri-kutu:focus-visible{outline:2px solid var(--vurgu-metin);outline-offset:3px}
.galeri-ikon{display:grid;place-items:center;color:var(--vurgu-metin)}
.galeri-etiket{font-size:.92rem;font-weight:500;letter-spacing:-.01em;text-align:center}
/* Henüz görseli gelmemiş kutu: tıklanmıyor, bekleyeni işaret ediyor. */
.galeri-kutu.bos{cursor:default;border-style:dashed;border-color:var(--vurgu-soluk);
  background:transparent;color:var(--sessiz);align-content:center}
.galeri-kutu.bos:hover{transform:none;border-color:var(--vurgu-soluk)}