/* ============================================================================
   icmsamet.com — hizmet satan kişisel marka sitesi
   Kayıt: sıcak krem + bal, yuvarlak kartlar, maskot merkezli.
   RENK YASASI: bal (--bal) DOLGU rengidir ve üstüne KOYU yazı gelir
   (beyaz 2.70 ile kalıyor, koyu 6.39 geçiyor). Metin/bağlantı balı ayrıdır
   ve daha koyudur (--bal-ink, krem üzerinde 5.47).
   ========================================================================== */

@font-face{font-family:"Nunito";src:url("/assets/nunito-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Baloo2";src:url("/assets/baloo2-var.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap}

/* ---------- TOKENLAR ----------
   Palet kahve ailesi. İki katman:
     BAL  = eylem — düğmeler, hero dairesi, etiketler
     ESPRESSO = yapı — ölçü çizgisi, adım çerçevesi, SSS, kart meta
   Yorumdaki sayılar krem zemin (#FDF7F1) üzerindeki WCAG kontrastıdır.  */
:root{
  --bg:#FDF7F1; --bg-2:#F9EEE4; --card:#FFFFFF;
  --ink:#3E2D20;        /* başlık · krem 12.34 — nötr siyah değil, espresso */
  --ink-2:#6B5A4C;      /* gövde  · krem 6.19 · beyaz 6.58 */
  --bal:#C69455;        /* dolgu — üstüne --on-bal gelir */
  --bal-2:#D8AC72;      /* hero dairesinin açık ucu */
  --bal-ink:#875D1C;    /* metin · krem 5.47 */
  --bal-soft:#EBD3AE; --bal-tint:#FBF2E4;
  --kum:#C4A68B;        /* DEKORATİF — eyebrow çizgisi. Metin için kullanma:
                           krem üzerinde 2.15, AA sınırının çok altında. */
  --espresso:#3E2D20;   /* krem 12.34 */
  --espresso-2:#4A3628;
  --espresso-ink:#3E2D20;
  --espresso-soft:#E2D6C8; --espresso-tint:#F3EDE5;
  --line:#EDE3D8;
  --on-bal:#1E1A17;    /* bal dolgu üzerinde 6.39 */
  --sh-1:0 1px 2px #2a1a0c0d, 0 6px 16px -8px #2a1a0c1c;
  --sh-2:0 3px 6px #2a1a0c10, 0 16px 34px -12px #2a1a0c26;
  --sh-3:0 8px 16px #2a1a0c14, 0 28px 56px -16px #2a1a0c33;

  --sans:"Nunito",ui-rounded,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Baloo2","Nunito",ui-rounded,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:32px;
  --s1:.375rem; --s2:.625rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4.5rem; --s8:6.5rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-s:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}



/* ---------- TEMEL ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:clamp(1rem,.975rem+.12vw,1.0625rem);line-height:1.65;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s var(--ease-s),color .25s var(--ease-s)}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;margin:0;cursor:pointer}
::selection{background:var(--bal-soft);color:var(--ink)}

html[data-lang="tr"] [lang="en"], html[data-lang="en"] [lang="tr"]{display:none!important}

.wrap{max-width:75rem;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.75rem)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:16px;top:16px;z-index:100;padding:.7rem 1.1rem;
  background:var(--card);border-radius:999px;box-shadow:var(--sh-2)}

/* ---------- TİPOGRAFİ ---------- */
h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2.35rem,1.5rem+3.6vw,4.15rem);line-height:1.06;
  letter-spacing:-.02em;text-wrap:balance;margin-block:var(--s3) var(--s4)}
h1 em{font-style:normal;color:var(--bal-ink)}
h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.8rem,1.35rem+1.9vw,2.75rem);line-height:1.14;
  letter-spacing:-.015em;text-wrap:balance;margin-top:var(--s2)}
h3{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.3}

/* Bölüm başlığının imzası: teknik resimdeki ÖLÇÜ ÇİZGİSİ — uçlarında kısa
   dikey serifler olan yatay çizgi. SVG değil, üç kenarlı bir kutu: esnetme
   yok, serif kalınlıkları her başlık genişliğinde birebir aynı kalıyor.
   width:fit-content şart — h2 blok olduğu için çizgi yoksa satır sonuna
   kadar uzardı. */
h2:not(.duz){position:relative;width:fit-content;max-width:100%;padding-bottom:.44em}
.sec-head.center h2{margin-inline:auto}
h2:not(.duz)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.34em;
  border:0 solid var(--espresso);border-width:0 2px 2.5px;pointer-events:none}
/* Çizilme animasyonu yalnızca JS açıkken: .js sınıfını onyukleme.js koyar,
   .in sınıfını site.js'teki gözlemci [data-draw] öğelerine ekler. JS yoksa
   çizgi olduğu gibi durur — animasyona bağlı görünmezlik riski yok. */
@media (prefers-reduced-motion:no-preference){
  .js h2[data-draw]::after{clip-path:inset(0 100% 0 0);transition:clip-path .75s var(--ease-s) .1s}
  .js h2[data-draw].in::after{clip-path:inset(0 0 0 0)}
}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.7rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--bal-ink)}
/* Çizgi dekoratif — kontrast kuralı yazıya işler, çizgiye değil. */
.eyebrow .pip{width:22px;height:2px;border-radius:2px;background:var(--kum);flex:none}
.lede{font-size:clamp(1.05rem,1rem+.32vw,1.2rem);color:var(--ink-2);max-width:48ch}
.sec-intro{color:var(--ink-2);max-width:58ch;margin-top:var(--s3)}
.prose p{color:var(--ink-2);max-width:64ch}
.prose p+p{margin-top:var(--s3)}

/* ---------- DÜĞMELER ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.25rem;min-height:46px;border-radius:999px;
  font-weight:800;font-size:.92rem;line-height:1;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
    background-color .18s var(--ease-s),color .18s var(--ease-s),border-color .18s var(--ease-s)}
.btn-lg{padding:.95rem 1.6rem;min-height:54px;font-size:1rem}
.btn-primary{background:var(--bal);color:var(--on-bal);box-shadow:var(--sh-2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--bal);color:var(--bal-ink)}
.btn .arrow{transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- BAŞLIK ---------- */
.site-head{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.head-in{display:flex;align-items:center;gap:var(--s3);padding-block:.6rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-weight:800;font-size:1rem;white-space:nowrap}
/* İmza: vektör, yüksekliğe göre ölçekleniyor. currentColor ile rengi
   üst çubuktan alıyor. */
/* Rozet kalktı, imza tek başına marka. Yükseklik 24 -> 34px: rozetin
   bıraktığı yeri dolduruyor ve üst çubuğun 38px'lik iç yüksekliğine
   sığıyor. */
.brand-imza{height:34px;width:auto;display:block;color:var(--ink)}
.brand-badge{width:38px;height:38px;border-radius:999px;background:var(--bal);
  display:grid;place-items:center;overflow:hidden;flex:none}
/* Maskot görseli KAFA MERKEZİ tuvalin ortasına gelecek şekilde üretiliyor
   (bkz. tools/maskot-hazirla.py). Bu yüzden transform-origin'e dokunmuyoruz:
   varsayılan merkez zaten doğru yer. Görseli figüre göre ortalamak yetmiyordu
   — saç bir yana savrulunca kafa yana kayıyor, büyütme onu kenara itiyordu. */
/* Kadraj görselin kendisinde: kafa kare tuvalin ortasında ve %80'ini
   kaplıyor (tools/maskot-hazırla.py). Burada ölçek yok — eskiden her
   rozetin kendi çarpanı vardı ve kaynak değişince altısı birden
   yanlışa düşüyordu. */
.brand-badge img,.about-badge img{width:100%;height:100%;object-fit:contain}
.index{display:flex;gap:.1rem;margin-inline:auto;flex-wrap:wrap}
.index a{padding:.5rem .7rem;min-height:42px;display:inline-flex;align-items:center;
  border-radius:999px;font-weight:700;font-size:.9rem;color:var(--ink-2);
  transition:background-color .16s var(--ease-s),color .16s var(--ease-s)}
.index a:hover{background:var(--bal-tint);color:var(--ink)}
.index a.is-active{background:var(--bal-tint);color:var(--bal-ink)}
.controls{display:flex;align-items:center;gap:.3rem}
.switch{display:flex;background:var(--bal-tint);border-radius:999px;padding:3px}
.switch button{padding:.5rem .65rem;min-height:36px;border-radius:999px;font-size:.72rem;
  font-weight:800;letter-spacing:.06em;color:var(--ink-2);transition:background-color .16s,color .16s}
.switch button[aria-pressed="true"]{background:var(--bal);color:var(--on-bal)}
/* Dar ekranda menü alt satıra iniyor. SARMA YOK: altı bağlantı iki satıra
   yayılınca yapışkan başlık ekranın üçte birini yiyordu. Tek satırda kalıp
   yatayda kaydırılıyor; kaydırma çubuğu gizli, kenarlar sayfa boşluğuna
   taşırılıyor ki ilk ve son bağlantı kenara yapışmasın. */
@media (max-width:62rem){
  .index{order:3;width:100%;margin:0;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;
    border-top:1px solid var(--line);padding-top:.4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * clamp(1.15rem,4vw,2.75rem));
    padding-inline:clamp(1.15rem,4vw,2.75rem)}
  .index::-webkit-scrollbar{display:none}
  .index a{flex:none}
  .head-cta{display:none}}

/* ---------- HERO ---------- */
.sec{padding-block:clamp(3.25rem,6vw,5.5rem)}
/* Açık/koyu şerit örüntüsü. Sabit sınıfa bağlı DEĞİL: bir bölüm yönetim
   panelinden kapatılınca örüntü kayardı. Görünür bölümlere göre bandı
   content.js atıyor; alttaki HTML sınıfları JS'siz durum için başlangıç. */
.sec.bant,.site-foot.bant{background:var(--bg-2)}
.hero{padding-block:clamp(2.25rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem);
  position:relative;
  /* Maskot genişliği burada: hem figür hem metin sütunu bunu okuyor. */
  /* Yeni görsel belden kesik geldiği için aynı yükseklikte kafa eskisinin
     iki katı büyüyor: eski figürde kafa yüksekliğin %28'iydi, bunda %45.
     Genişlik ona göre kısıldı — ölçü kafanın ekrandaki boyu, figürün değil. */
  --mg:clamp(300px,28vw,420px);
  /* Maskotun beli burada kesiliyor. clip-path DEĞİL: clip-path öge
     döndürülmeden önce uygulanıyor, 5 derecelik dönüşle birlikte kesim
     çizgisi de eğiliyor ve bandın üstünde eğri bir kenar bırakıyordu.
     Bölümün kendi taşmasıyla kesince çizgi sayfa düzleminde yatay kalıyor. */
  overflow:clip}
/* Tek sütun, ortalanmış. Sağdaki maskot ve kesikli halka kaldırıldı;
   ortalanan metinde satır uzunluğu okunurluğu belirlediği için lede ve
   not için üst sınır konuyor. */
.hero-grid{display:grid;gap:var(--s6);justify-items:center;text-align:center;
  position:relative}
/* Hero maskotu — süsleme, akışın dışında.

   BEL ÇİZGİSİ BÖLÜM SINIRINDA. Görselde kazak eteğinin altında gövde
   aniden daralıyor; ölçüldü, bu %76'da (8 satırda 47px daralma). Alttaki
   %24 clip-path ile kesiliyor ve figürün alt kenarı hero'nun alt kenarına
   oturtuluyor — maskot bandın arkasından belden yukarısıyla çıkıyor.

   Kesme clip-path ile, .hero'ya overflow vererek DEĞİL: figür yukarıda da
   hero sınırını aşıyor, overflow saçın tepesini de kırpardı.

   Dar ekranda gizli: metin sütunu ortalanmış ve tam genişlikte, maskot
   orada yazının üstüne biner. */
.hero-maskot{display:none}
@media (min-width:72rem){
  .hero-maskot{
    --yuk:calc(var(--mg) * 1.403);          /* görsel oranı 432:606 */
    display:block;position:absolute;
    width:var(--mg);height:auto;
    /* Sağ kenar içerik sütununun sağ kenarıyla aynı hizada. */
    /* +36px: kompozisyonun (kutular + figür) ortası sayfa ortasından
       18px sağda kalıyordu — üç genişlikte de aynı sapma, yani sabit bir
       kaydırma çözüyor. Figür 36px sola çekilince orta 18px sola geliyor.
       Aynı 36px aşağıda rakamların payına da ekleniyor, yoksa kutular
       figüre yaklaşıp altında kalırdı. */
    right:calc(max(0px,(100% - 75rem) / 2) + clamp(1.15rem,4vw,2.75rem) + 36px);
    /* ÜSTTEN hizalanıyor, alttan değil. Alta sabitlenince kısa figür
       aşağı kayıp elini kartların arkasına sokuyordu. Elin ucu görselin
       üstünden %11.6 aşağıda (ölçüldü); hero dolgusu kadar inip o payı
       geri çekince el üst başlık hizasına oturuyor.
       Belden kesim yorum kartlarının ARKASINDA kalıyor: kartlar önde
       (z-index:1), kesik kenar görünmüyor, figür kartların arkasında
       duruyormuş gibi okunuyor. */
    top:calc(clamp(2.25rem,5vw,4.5rem) - 0.116 * var(--yuk));
    transform:rotate(-5deg);
    pointer-events:none;user-select:none;z-index:0}
  /* Metne yer açılıyor. Bu boyutta figür ortalanmış metnin üstüne
     biniyordu (ölçüldü: 124px). Figürü küçültmek yerine metin sola
     alınıyor — yan figürlü bir hero'da metnin sayfaya değil KALAN ALANA
     ortalanması zaten doğrusu. */
  /* Pay SARMALAYICILARA veriliyor, iç listeye değil. Rakam kutuları ayrı
     bir .wrap içinde ve o sarmalayıcının kendi 44px kenar boşluğu zaten
     var; payı listenin içine verince o boşluk iki kez sayılıyor ve kutu
     sırası metinden 22px sola kayıyordu (ölçüldü, her genişlikte sabit).

     Çarpan 0.78 değil 0.88: metin bloğu 62ch'de duruyor ama rakam sırası
     kalan genişliği tamamen dolduruyor, yani daha geniş. 0.78'de üçüncü
     kutunun yazısı figürün kolunun altında kalıyordu. */
  .hero-grid,
  .hero-sayilar{padding-right:calc(var(--mg) * 0.88 + 36px)}
  /* İçerik figürün ÖNÜNDE. Arkada kalınca rakam kutusunun sağ köşesi
     kolun altına giriyor ve kart kesik görünüyordu; önde olunca kol
     kartın arkasından geçiyor, kart bütün kalıyor. Şeritte de aynı
     düzen kurulu. */
  .hero-grid,
  .hero-sayilar{position:relative;z-index:1}
}
/* min(...) ŞART: justify-items:center grid öğesini kendi genişliğinde
   bırakır, 62ch de dar ekranda ~527px eder ve sayfa yatayda taşardı. */
.hero-text{max-width:min(62ch,100%)}
/* Müsaitlik rozeti: yeşil nokta güven ve "şimdi uygun" sinyali veriyor.
   Semantik renk paletten bağımsız — bal/espresso burada "açık/kapalı"
   ayrımını taşıyamaz. */
.musaitlik{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:var(--s3);
  padding:.35rem .8rem;border-radius:999px;background:#EAF5EE;border:1px solid #C3E2CE;
  color:#1F5B36;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.mus-nokta{width:8px;height:8px;border-radius:999px;background:#2E9E5B;flex:none;
  box-shadow:0 0 0 3px #2e9e5b26}
@media (prefers-reduced-motion:no-preference){
  .mus-nokta{animation:mus-nabiz 2.4s ease-in-out infinite}
  @keyframes mus-nabiz{0%,100%{box-shadow:0 0 0 3px #2e9e5b26}
                       50%{box-shadow:0 0 0 6px #2e9e5b12}}
}
.hero-text .lede{margin-inline:auto}
.hero-cta{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:var(--s5);
  justify-content:center}
/* Telefonda iki düğme yan yana sığmıyor ve tek tek ortalanınca dağınık
   duruyordu; tam genişlik alıp alt alta dizilmeleri daha derli toplu. */
@media (max-width:26rem){
  .hero-cta{flex-direction:column;align-items:stretch;gap:.5rem}
  .hero-cta .btn{justify-content:center;width:100%}}
.hero-note{margin-top:var(--s4);font-size:.85rem;font-weight:600;color:var(--ink-2)}

.blob{position:absolute;z-index:-2;width:min(92%,400px);aspect-ratio:1;
  border-radius:46% 54% 52% 48%/48% 46% 54% 52%;
  background:radial-gradient(120% 120% at 32% 22%,var(--bal-2) 0%,var(--bal) 56%,#A87A38 100%)}
.blob-sm{width:min(80%,220px)}
/* Araç etiketleri: önce maskotun etrafında üç sabit yuvaydı, sonra kesikli
   halkanın üzerine dağıtıldı. Hero tek sütuna inince ikisi de gereksizleşti;
   şimdi düz, ortalanmış bir sıra. Sayıları içerikten geliyor. */
.arac-sira{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-top:var(--s5)}
.arac{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem;font-size:.78rem;font-weight:800;
  box-shadow:var(--sh-1);white-space:nowrap}

/* ---------- BILLBOARD ----------
   Yeni uygulamanın vitrini. Kart ekranın sol kenarından dışarı TAŞIYOR:
   negatif sol boşlukla --tasma kadarı ekran dışında kalıyor, hero'nun
   overflow:clip'i onu tam kenarda kesiyor. İçerik o payı sol dolgu olarak
   geri alıyor, yani kesilen yalnızca zemin — yazı hiçbir zaman.

   Renkler tek yerde, .pano üzerindeki --pano-* değişkenlerinde: ton
   değişince yalnızca o blok değişir. Kenarında amber bir NEON: sönük bir
   tüp ve onun üzerinde sürekli dönen parlak bir ışık.

   62rem üstünde metnin solundaki boşluğa mutlak konumlanan dikey afiş,
   altında akışta (metin ile rakamlar arası) yatay kart.

   Maskotun göründüğü genişlikte (72rem+) kart ASLA akışa girmemeli: hero
   uzayınca yorum şeridi aşağı kayıyor ve maskotun bel kesiği açıkta
   kalıyordu (ölçüldü, 1200px). Bu yüzden afiş genişliği en dar yere göre:
   1152px'te başlığın solunda ~188px var, afiş 176px'te kalıyor. */
.pano{position:relative;z-index:2;display:flex;justify-self:start;
  /* TON — zemin yorum ve rakam kartlarıyla aynı beyaz (--card). Önce
     espresso, sonra açık kahve denendi; ikisi de sayfada fazla koyu
     kaldı. Beyazda kartı ayıran şey neon. Neon da bal ailesinden: turuncu
     denendi, sitenin tonlarından kopuk duruyordu. */
  --pano-zemin:var(--card);--pano-isik:transparent;
  --pano-yazi:var(--ink);--pano-soluk:var(--ink-2);--pano-ust:var(--bal-ink);
  --pano-hayalet:transparent;--pano-hayalet-cizgi:var(--line);
  /* Ana düğme ve rozet açık bant zemininde (--bg-2), koyu yazı. Beyaz
     kartın üstünde zemin farkı ince kaldığı için düğmeye --line çizgisi. */
  --pano-ana:var(--bg-2);--pano-ana-yazi:var(--ink);--pano-ana-cizgi:var(--line);
  --pano-ana-ust:color-mix(in srgb,var(--bg-2),var(--bal-soft) 40%);
  --pano-rozet:var(--bg-2);--pano-rozet-yazi:var(--ink);
  /* Işığın kuyruğu açık, başı koyu bal: beyaz zeminde en açık ton başta
     olunca ışık sönüyormuş gibi okunuyordu. */
  --pano-tup:#C6945547;--pano-n1:var(--bal-soft);--pano-n2:var(--bal-2);--pano-n3:var(--bal);
  --pano-parilti:var(--bal-2);
  /* Grid öğesi, sarmalayıcının içinde. Sarmalayıcı ortalı olduğu için
     (100% - 100vw) / 2 tam olarak ekranın sol kenarına olan mesafe. Metinle
     arasındaki boşluğu grid'in kendi aralığı veriyor. */
  margin-left:calc((100% - 100vw) / 2);
  --tasma:2.25rem;--egim:-2.5deg}
.pano-kart{position:relative;flex:0 1 auto;
  max-width:calc(min(100vw - 3.5rem,23rem) + var(--tasma));
  margin-left:calc(-1 * var(--tasma));
  padding:1rem 1.15rem 1.1rem calc(var(--tasma) + clamp(1.15rem,4vw,2.75rem));
  border-radius:var(--r-lg);color:var(--pano-yazi);text-align:left;
  /* Üstten vuran ışık: tabelanın lambası. */
  background:radial-gradient(130% 90% at 85% -15%,var(--pano-isik) 0%,transparent 60%),var(--pano-zemin);
  /* Neonun zemine düşen sabit hâlesi + kartın kendi gölgesi. */
  box-shadow:0 0 30px -4px color-mix(in srgb,var(--pano-parilti) 55%,transparent),var(--sh-3);
  transform:rotate(var(--egim));transform-origin:0 50%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
    translate .9s cubic-bezier(.34,1.45,.64,1)}
.pano-rozet{position:absolute;top:-.7rem;right:1rem;z-index:1;pointer-events:none;
  padding:.32rem .7rem;border-radius:999px;background:var(--pano-rozet);color:var(--pano-rozet-yazi);
  font-size:.68rem;font-weight:800;letter-spacing:.12em;line-height:1;
  box-shadow:var(--sh-2);transform:rotate(8deg)}
.pano-bas{display:flex;align-items:center;gap:.8rem}
.pano-ikon{width:3.25rem;height:3.25rem;flex:none;border-radius:22%;object-fit:cover;
  background:var(--card);box-shadow:0 0 0 1px #ffffff1f,0 6px 14px -4px #0008}
.pano-harf{display:grid;place-items:center;background:var(--bal);color:var(--on-bal);
  font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1}
.pano-ust{font-size:.66rem;font-weight:800;letter-spacing:.16em;line-height:1.3;
  color:var(--pano-ust)}
.pano-ad{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.15;
  margin-top:.15rem;text-wrap:balance}
.pano-metin{margin-top:.65rem;font-size:.84rem;line-height:1.5;color:var(--pano-soluk);
  text-wrap:pretty}
.pano-baglar{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
/* Diğer mağaza düğmeleri ana bağlantının kart örtüsünün ÜSTÜNDE kalmalı,
   yoksa hepsi ilk bağlantıya gider. */
.pano-bag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;
  min-height:34px;padding:.35rem .8rem;border-radius:999px;
  font-size:.76rem;font-weight:800;line-height:1;white-space:nowrap;
  background:var(--pano-hayalet);color:var(--pano-yazi);border:1px solid var(--pano-hayalet-cizgi);
  transition:background-color .16s var(--ease-s),transform .16s var(--ease-s)}
.pano-bag:hover{background:color-mix(in srgb,var(--pano-hayalet) 50%,var(--pano-hayalet-cizgi));
  transform:translateY(-1px)}
.pano-bag img{width:18px;height:18px;border-radius:5px;flex:none}
/* İlk bağlantı: bal dolgu ve kartın tamamını kaplayan örtü. position
   VERİLMİYOR — ::after en yakın konumlu ataya, yani karta yayılsın diye. */
.pano-ana{position:static;background:var(--pano-ana);color:var(--pano-ana-yazi);
  border-color:var(--pano-ana-cizgi)}
/* transform YOK: dönüşüm verilen öge kendi ::after'ının konum bağlamı olur,
   örtü düğme boyuna küçülür, fare örtüden çıkar, hover biter, örtü yeniden
   büyür — kart gövdesinde titreme döngüsü. */
.pano-ana:hover{background:var(--pano-ana-ust);transform:none}
.pano-ana::after{content:'';position:absolute;inset:0;border-radius:inherit}
.pano :focus-visible{outline-color:var(--pano-yazi)}

/* NEON. Halka ::before'da maskeyle çiziliyor, parıltı onu saran .pano-neon'un
   drop-shadow'u. Tek öğede olamazdı: filtre maskeden ÖNCE uygulanıyor, yani
   aynı öğedeki parıltı halkanın değil konik dolgunun tamamının parıltısı
   olur ve kartın içine pasta dilimi gibi ışık yayılırdı. Ebeveynin filtresi
   ise çocuğun maskelenmiş hâline uygulanıyor.
   Işık kartla birlikte döner, ekran dışına taşan kenardan da geçer.
   @property desteklemeyen tarayıcıda açı canlanmaz: ışık tepede sabit
   durur, tüp yine görünür. Hareket azaltmada da öyle. */
@property --pano-aci{syntax:'<angle>';inherits:false;initial-value:0deg}
.pano-neon{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  filter:drop-shadow(0 0 3px var(--pano-n2)) drop-shadow(0 0 9px var(--pano-parilti))
    drop-shadow(0 0 20px var(--pano-parilti))}
.pano-neon::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;
  background:conic-gradient(from var(--pano-aci),var(--pano-tup) 0deg 190deg,var(--pano-n1) 250deg,
    var(--pano-n2) 315deg,var(--pano-n3) 348deg,var(--pano-tup) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pano-neon 3.6s linear infinite}
@keyframes pano-neon{to{--pano-aci:360deg}}
@media (hover:hover){
  .pano:hover .pano-kart{transform:rotate(calc(var(--egim) * .3)) translateX(.35rem);
    box-shadow:0 0 40px -2px color-mix(in srgb,var(--pano-parilti) 65%,transparent),
      0 12px 24px #2a1a0c26,0 36px 70px -18px #2a1a0c55}
}
/* Giriş: kart kenardan kayarak gelip hafifçe sekiyor. Gözlemcinin izlediği
   .pano yerinde duruyor, kayan yalnızca kart — dış kutu ekran dışına
   itilseydi hiç kesişmez, .in sınıfını hiç almazdı. transform değil
   translate: eğim ve üzerine gelme dönüşü transform'da, ikisi çakışmıyor.
   Perde kalkmadan (.hazir) başlamıyor ki animasyon perdenin arkasında
   bitmesin. Hareket azaltmada bu blok hiç devreye girmiyor. */
html.js .pano.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js .pano .pano-kart{translate:-115% 0}
  html.js.hazir .pano.in .pano-kart{translate:0 0}
}
@media (min-width:62rem){
  /* ALTTAN hizalı: afişin alt kenarı metin bloğunun (düğmelerin) alt
     kenarında. Üstten konumlanınca metin uzadıkça ya da afiş dar ekranda
     uzadıkça alt köşesi ilk rakam kutusuna biniyordu (1152-1280px, ölçüldü).
     Sol: sarmalayıcının otomatik kenar boşluğu kadar dışarı, yani ekran
     kenarına. */
  .pano{position:absolute;bottom:0;margin:0;justify-self:start;align-self:end;
    left:calc(-1 * max(0px,(100vw - 75rem) / 2));
    --tasma:3rem;--egim:-4deg}
  .pano-kart{max-width:calc(clamp(11rem,15.5vw,16rem) + var(--tasma));
    padding:1rem 1rem 1.1rem calc(var(--tasma) + 1.35rem)}
  /* Dikey afiş: ikon üstte, ad altında. Dar sütunda yan yana dururken ad
     üç satıra bölünüyordu. */
  .pano-bas{flex-direction:column;align-items:flex-start;gap:.6rem}
  .pano-ikon{width:clamp(2.75rem,3.5vw,3.5rem);height:clamp(2.75rem,3.5vw,3.5rem)}
  /* Düğmeler küçülüyor: 1152px'te iki düğme ancak böyle tek satıra sığıyor,
     alt alta düşünce afiş uzayıp rozetiyle üst çubuğa değiyordu. */
  .pano-baglar{gap:.3rem;margin-top:.75rem}
  .pano-bag{min-height:30px;padding:.3rem .62rem;gap:.3rem;font-size:.72rem}
  .pano-bag img{width:16px;height:16px}
  .pano-ad{font-size:clamp(1.15rem,.6rem + .8vw,1.35rem)}
  /* Rakam kutularına inmesin: tanıtım en fazla üç satır. */
  .pano-metin{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden}
}

/* ---------- RAKAM ŞERİDİ ---------- */
/* minmax(0,1fr) — düz 1fr aslında minmax(auto,1fr) demek ve kolon
   içeriğinden küçülemiyor: "19 müşteri değerlendirmesi" gibi uzun etiket
   kendi kutusunu genişletip diğerlerini sıkıştırıyordu. Artık dördü de
   eşit genişlikte. */
/* Kutu sayisi panelden degisiyor, o yuzden sutun sayisi CSS'te yazili degil.
   Izgara denendi ve birakildi: sabit sutun sayisi bir kutu silinince bos
   sutun birakiyor, sutunlari icerikten turetince de kalan kutular satiri
   doldurmak icin gereginden fazla genisliyordu.

   Esnek kutu ikisini de cozuyor: kutular buyuyebiliyor ama 16.6rem'de
   duruyor (dortlu duzendeki olculmus 266px genislik), artan bosluk
   justify-content ile iki yana esit dagiliyor. Kac kutu olursa olsun
   genislik ayni kaliyor ve sira ortada duruyor.
   Taban 9.5rem: dar ekranda iki kutunun yan yana sigmasini saglayan en
   buyuk deger; kucuk basamaklarda kendiliginden alt satira geciyorlar. */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  margin-top:var(--s6)}
@media (min-width:48rem){.stats{gap:var(--s3)}}

/* Kutular ölçüldü, dördü de eşit genişlikte (266px). Dengesiz görünmelerinin
   sebebi hizalamaydı: metinler sola dayalıyken "8 YIL" ile "19 müşteri
   değerlendirmesi" arasındaki uzunluk farkı sağ tarafta düzensiz boşluk
   bırakıyordu. Ortalanınca fark göze batmıyor. Dikey ortalama da şart:
   etiketi iki satıra düşen kutu diğerlerinden yüksek durmasın. */
.stat{flex:1 1 9.5rem;max-width:16.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);box-shadow:var(--sh-1);text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.stat-v{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,1.05rem+.7vw,1.6rem);color:var(--bal-ink);line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums}
.stat-k{display:block;font-size:.8rem;font-weight:700;color:var(--ink-2);margin-top:.1rem}

/* ---------- BÖLÜM BAŞLIKLARI ---------- */
.sec-head{max-width:62ch;margin-bottom:var(--s6)}
/* Bölümün ilk satırı küçük punto BÜYÜK HARF. .eyebrow satır içi bir kutu
   olduğu için üstünde satır kutusu boşluğu kalıyor; bölümün dolgusu üstte
   ve altta eşit olsa bile göz üstü daha boşluklu görüyor. Ölçüldü: her
   bölümde ilk mürekkep 81-84px aşağıda, son kart kenarı 70-73px yukarıda —
   fark 11px. Kusur dolguda olmadığı için dolguya değil, başlığa dokunuluyor:
   blok seviyesine alınca satır kutusu payı kalkıyor. */
.sec-head > .eyebrow:first-child{display:flex;width:fit-content}
.sec-head.center > .eyebrow:first-child{margin-inline:auto}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .sec-intro{margin-inline:auto}

/* ---------- HİZMET KARTLARI ---------- */
/* Hizmetler dikey ızgarada altı kart boyu uzuyordu. Artık sayfa sayfa
   yatay kaydırma: bir ekranda görünen kart sayısı genişliğe göre değişiyor,
   scroll-snap sayfayı hizaya oturtuyor, altındaki noktalar nerede olduğunu
   söylüyor. Kaydırma çubuğu gizli — gezinme noktalarla. */
.cards{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* DİKEY PAY ŞART: overflow-x:auto verilen kutuda tarayıcı dikey ekseni
     de kırpar (spec gereği bir eksen visible değilse diğeri auto olur).
     Kart rozetleri kartın üstüne taşıdığı için pay olmadan tepeleri
     kesiliyordu. Üst pay rozetin taşma miktarından (--s3) büyük. */
  padding-top:calc(var(--s3) + 14px);padding-bottom:var(--s2);
  margin-top:var(--s4)}
.cards::-webkit-scrollbar{display:none}
.cards{cursor:grab}
.cards.surukleniyor{cursor:grabbing;user-select:none}
/* Sürüklerken metin seçilmesin ve görseller sürüklenmesin. */
.cards.surukleniyor *{user-select:none;pointer-events:none}
.cards:focus-visible{outline:3px solid var(--bal-ink);outline-offset:4px;border-radius:var(--r)}
.cards>.card{flex:0 0 100%;scroll-snap-align:start;min-width:0}
@media (min-width:40rem){.cards>.card{flex-basis:calc(50% - var(--s4) / 2)}}
@media (min-width:64rem){.cards>.card{flex-basis:calc(33.333% - var(--s4) * 2 / 3)}}

/* Sayfa noktaları */
.noktalar{display:flex;justify-content:center;gap:.45rem;margin-top:var(--s4)}
.noktalar button{width:9px;height:9px;border-radius:999px;background:var(--bal-soft);
  border:0;padding:0;cursor:pointer;transition:width .2s var(--ease-s),background-color .2s}
.noktalar button[aria-current="true"]{width:26px;background:var(--bal)}
.noktalar button:hover{background:var(--bal-ink)}
@media (prefers-reduced-motion:reduce){.noktalar button{transition:none}}
.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5) var(--s4) var(--s4);box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease-s)}
.card:hover,.card:focus-within{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--bal)}
.card-badge{position:absolute;top:calc(-1 * var(--s3));left:var(--s4);width:58px;height:58px;
  border-radius:999px;background:var(--bal);display:grid;place-items:center;overflow:hidden;
  box-shadow:var(--sh-2);transition:transform .22s var(--ease)}
.card-badge img{width:52px;transform:scale(1.34)}
/* İkon rozetinde maskot yok: zemin espresso tonuna geçiyor ki
   çizgi ikon bal üstünde kaybolmasın. */
.card-badge:has(.kart-ikon){background:var(--espresso-tint);
  border:1.5px solid var(--espresso-soft)}
.kart-ikon{width:26px;height:26px;color:var(--espresso)}
.card:hover .card-badge{transform:rotate(-8deg) scale(1.06)}
.card h3{margin-top:var(--s4)}
.card p{color:var(--ink-2);font-size:.94rem;margin-top:var(--s2)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--s3)}
.tags li{background:var(--bal-tint);color:var(--bal-ink);padding:.28rem .6rem;
  border-radius:999px;font-size:.74rem;font-weight:800}

/* ---------- SÜREÇ ---------- */
.steps{display:grid;gap:var(--s4);counter-reset:adim}
@media (min-width:44rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.step{position:relative;padding:var(--s5) var(--s4) var(--s4);border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.step-n{position:absolute;top:calc(-1 * var(--s3));left:var(--s4);width:46px;height:46px;
  /* Kenarlık + koyu yazı; açık metin sayfada hiç kullanılmıyor. Dolgu
     saydam DEĞİL: daire kartın üst kenarına biniyor, saydam olsa kartın
     çizgisi dairenin içinden geçerdi. Kart rengiyle maskeleniyor. */
  border-radius:999px;background:var(--card);border:2.5px solid var(--espresso);
  color:var(--espresso);display:grid;
  place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem}
.step h3{margin-top:var(--s3)}
.step p{color:var(--ink-2);font-size:.92rem;margin-top:var(--s2)}

/* ---------- NEDEN BEN ---------- */
.why-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:62rem){.why-grid{grid-template-columns:1.25fr .75fr;gap:var(--s7)}}
.why-list{margin-top:var(--s5);display:grid;gap:var(--s3)}
.why-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);box-shadow:var(--sh-1);
  border-left:4px solid var(--bal);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.why-list li:hover{transform:translateX(4px);box-shadow:var(--sh-2)}
.why-list strong{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;
  margin-bottom:.15rem}
.why-list li>span{color:var(--ink-2);font-size:.94rem}
.why-art{position:relative;display:grid;place-items:center;min-height:220px}
.why-art .mascot{width:min(70%,220px);position:relative;z-index:1;
  filter:drop-shadow(0 14px 24px #2a1a0c2b)}

/* ---------- İŞLER ---------- */
/* Arşiv sayfasında (/isler) kartlar ızgarada. minmax(0,1fr) — düz 1fr
   aslında minmax(auto,1fr) demek ve kolon içeriğinden küçülemez. */
.work-grid{display:grid;gap:var(--s4);list-style:none;margin-top:var(--s5)}
@media (min-width:40rem){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:66rem){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Ana sayfada aynı kartlar iki sıralı akan şeritte. Genişlik sabit:
   geniş ekranda üç kart görünüyor, dar ekranda bir buçuk. */
/* ---------- İŞ KATEGORİ SEÇİCİ ----------
   Uzun oval bir ray, içinde kayan dolgu. Dolgu JS ile ölçülüp
   konumlandırılıyor; JS gelmeden etkin düğme kendi zeminini taşıyor. */
.kat-sec{display:flex;flex-wrap:wrap;gap:.15rem;position:relative;margin-top:var(--s4);
  padding:.3rem;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);
  width:fit-content;max-width:100%}
.kat-sec:empty{display:none}
.kat-kaydirici{position:absolute;top:.3rem;bottom:.3rem;left:0;border-radius:999px;
  background:var(--card);box-shadow:var(--sh-1);opacity:0;
  transition:transform .32s var(--ease-s),width .32s var(--ease-s),opacity .2s}
.kat-sec[data-hazir] .kat-kaydirici{opacity:1}
.kat-dugme{position:relative;z-index:1;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:800;color:var(--ink-2);
  padding:.52rem 1.05rem;border-radius:999px;white-space:nowrap;
  transition:color .2s var(--ease-s)}
.kat-dugme:hover{color:var(--ink)}
.kat-dugme[aria-pressed="true"]{color:var(--espresso)}
/* JS yokken kayan dolgu gizli; etkin düğme kendi zeminiyle belli oluyor. */
.kat-sec:not([data-hazir]) .kat-dugme[aria-pressed="true"]{
  background:var(--card);box-shadow:var(--sh-1)}
.kat-dugme:focus-visible{outline:2px solid var(--bal);outline-offset:2px}
.kat-sayi{margin-left:.35rem;font-size:.74rem;font-weight:700;color:var(--kum)}


@media (prefers-reduced-motion:reduce){
  .kat-kaydirici{transition:none}
}

.is-serit{margin-top:var(--s4)}
.is-serit .ray{gap:var(--s4);align-items:stretch}
.is-serit .work-card{width:min(80vw,330px);flex:none}
.work-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  min-width:0;   /* aynı sebep: kart da içeriğinden küçülebilmeli */
  /* layout+style: kartın içindeki değişiklik dışarıyı yeniden hesaplatmasın.
     paint EKLENMEZ — gölge kartın dışına taşıyor, kırpılırdı. */
  contain:layout style;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease-s)}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--bal)}
/* Kart görseli: 16:9, kartın üst köşelerine oturuyor. object-fit:cover —
   kaynaklar farklı oranlarda geliyor (YouTube 16:9, Play Store kare). */
.work-gorsel{width:calc(100% + 2 * var(--s4));max-width:none;height:auto;aspect-ratio:16/9;
  object-fit:cover;display:block;
  margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background:var(--bal-tint)}
.work-card h3{font-size:1.05rem}
.work-card p{color:var(--ink-2);font-size:.92rem;margin-top:var(--s2)}
.work-meta{font-size:.78rem!important;font-weight:700;color:var(--espresso);
  margin-top:var(--s2)!important}
/* Bağlantı satırı: yazı yerine sitenin ikonu. Bir iş birden fazla yerde
   yayınlanmış olabiliyor (hem mağaza hem tarayıcı), o yüzden satır. */
.work-baglar{margin-top:auto;padding-top:var(--s3);display:flex;flex-wrap:wrap;
  gap:.45rem;align-items:center}
.work-bag{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--bal-ink);
  transition:border-color .16s var(--ease-s),transform .16s var(--ease-s)}
.work-bag:hover{border-color:var(--bal);transform:translateY(-2px)}
.work-bag img{width:20px;height:20px;display:block}
/* Normalde ad yalnızca ekran okuyucu için. İkon yüklenemezse onerror img'yi
   siliyor, span :first-child oluyor ve yazı görünür hale geliyor — kart
   hiçbir durumda boş bağlantı göstermiyor. */
.work-bag img + span{position:absolute;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.work-bag span:first-child{padding:0 .6rem;font-size:.78rem;font-weight:800}
/* Davet kartı: "sıradaki senin projen" kutusu. Kısa kod kalkınca kesikli
   çerçeve tek başına ayırt edici, o yüzden kart kenarı biraz belirginleşti. */
.work-card-ghost{border-style:dashed;border-width:2px;background:transparent;box-shadow:none}

/* ---------- HAKKIMDA ---------- */
.about-grid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:60rem){.about-grid{grid-template-columns:.62fr 1.38fr;gap:var(--s7)}}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5) var(--s4);box-shadow:var(--sh-2);text-align:center;
  position:sticky;top:calc(64px + var(--s3))}
@media (max-width:60rem){.about-card{position:static}}
/* Hakkımda görseli. Daire GÖRSELE ÇİZİLİ ama Samet'in verdiği gömülü
   daire değil: o daire gerçek bir çember değildi (ölçüldü, ortalama 5px
   salınım) ve büyütünce basamaklı duruyordu. Burada daire 4 kat süper
   örneklemeyle yeniden çiziliyor — kenar pürüzü 0.174'ten 0.091'e indi.

   Daire neden CSS'te değil: saçın daireden TAŞMASI gerekiyor, alt ve
   yanlarda ise daire figürü kesmeli. CSS'te bu ancak çok katmanlı maske
   ile olur ve tarayıcılar arasında kırılgandır; görselde tek seferde ve
   kesin olarak çözülüyor. */
.about-gorsel{display:block;width:min(210px,64%);height:auto;margin:0 auto var(--s3)}
.about-badge{display:grid;place-items:center;width:104px;height:104px;margin:0 auto var(--s3);
  border-radius:999px;background:var(--bal);overflow:hidden}
/* Ölçek küçük rozetlerdekiyle AYNI oranda değil, bilerek daha yüksek:
   daire büyüdükçe aynı oran figürü uzaklaştırıyor, gövde giriyor ve kafa
   küçülüyordu. Burada kafa dairenin içini dolduruyor. */
.about-name{font-family:var(--display);font-weight:800;font-size:1.15rem}
.about-role{color:var(--ink-2);font-size:.9rem;font-weight:600}
.about-links{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:var(--s3)}
.about-links a{display:inline-flex;min-height:38px;align-items:center;padding:.4rem .8rem;
  border-radius:999px;border:1px solid var(--line);font-size:.82rem;font-weight:800;
  color:var(--ink-2);transition:border-color .16s,color .16s,background-color .16s}
.about-links a:hover{border-color:var(--bal);color:var(--bal-ink);background:var(--bal-tint)}

/* ---------- SSS ---------- */
.faq-list{display:grid;gap:var(--s2);max-width:52rem;margin-inline:auto}
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;transition:border-color .18s var(--ease-s)}
.qa[open]{border-color:var(--espresso-2)}
.qa summary{list-style:none;cursor:pointer;padding:var(--s3) var(--s4);
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  display:flex;align-items:center;gap:var(--s3);min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary{position:relative}
.qa summary::after{content:"";flex:none;margin-left:auto;width:24px;height:24px;
  background:var(--espresso-tint);border-radius:999px;
  transition:background-color .18s var(--ease-s)}
/* kapalıyken artı, açıkken çarpı — 45° dönerek */
.qa summary::before{content:"";position:absolute;right:calc(var(--s4) + 6px);
  width:12px;height:12px;z-index:1;transform-origin:50% 50%;
  background:
    linear-gradient(var(--espresso-ink),var(--espresso-ink)) center/12px 2px no-repeat,
    linear-gradient(var(--espresso-ink),var(--espresso-ink)) center/2px 12px no-repeat;
  transition:transform .22s var(--ease)}
.qa[open] summary::before{transform:rotate(45deg)}
.qa p{padding:0 var(--s4) var(--s4);color:var(--ink-2);font-size:.95rem;max-width:62ch}
.qa summary:hover::after{background:var(--espresso-soft)}

/* ---------- İLETİŞİM ---------- */
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:clamp(1.35rem,3.5vw,3rem);display:grid;gap:var(--s6)}
/* Yan panel kalkinca kart tek sutuna dustu. Kart 75rem'lik kabin tamamini
   kaplasaydi form alanlari 540px'e uzardi; ic max-width vermek ise genis bir
   kartin ortasinda yuzen bir icerik birakiyordu. Bu yuzden KART daraltiliyor:
   sinir formun kendisinde, kutunun kenari da orada bitiyor. */
.contact-card{max-width:56rem;margin-inline:auto}
.contact-form{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:36rem){.contact-form{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.3rem}
.field-full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:800;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--bg);
  border:1.5px solid var(--line);font-size:.95rem;line-height:1.4;
  transition:border-color .16s var(--ease-s),background-color .16s var(--ease-s)}
.field textarea{resize:vertical;min-height:110px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--bal-soft)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bal);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--bal-ink);outline-offset:2px}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.form-alt{font-size:.86rem;color:var(--ink-2);display:flex;flex-wrap:wrap;
  align-items:center;gap:.4rem}
.form-alt .email{font-weight:800;color:var(--bal-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;
  text-decoration-skip-ink:none}
.form-alt .copy{font-size:.8rem;font-weight:800;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;min-height:34px}
.form-alt .copy:hover{border-color:var(--bal);color:var(--bal-ink)}
.form-ok{grid-column:1/-1;background:var(--bal-tint);color:var(--bal-ink);
  border-radius:var(--r-sm);padding:var(--s3);font-weight:700;font-size:.9rem}


/* Şeridin altındaki "hepsini gör": şerit tam genişlik olduğu için
   düğme kendi wrap'ine alınıyor, yoksa kenara yapışıyor. */
.tumu-kap{margin-top:var(--s5);display:flex;justify-content:center}

/* ---------- AÇILIŞ PERDESİ ----------
   Yalnızca JS varken çiziliyor. .hazir sınıfını content.js koyuyor:
   içerik geldiğinde ya da zaman aşımında. */
.perde{display:none}
.js .perde{display:grid;position:fixed;inset:0;z-index:60;place-items:center;
  background:var(--bg);transition:opacity .32s var(--ease-s);
  /* GÜVENLİK AĞI: perde normalde content.js'in koyduğu .hazir sınıfıyla
     kalkar. O betik bir sebeple çalışmazsa (hata, engellenmiş dosya, çok
     yavaş ağ) perde ekranda kilitli kalırdı. Animasyon JS'ten bağımsız
     çalışıp 3sn sonra perdeyi kendiliğinden kaldırıyor. */
  animation:perde-guvenlik 3s linear forwards}
.js.hazir .perde{opacity:0;pointer-events:none;animation:none}
@keyframes perde-guvenlik{
  0%,92%{opacity:1}
  100%{opacity:0;visibility:hidden;pointer-events:none}
}
.perde-ic{display:grid;justify-items:center;gap:.75rem}
/* Perdede imza: maskot rozeti üst çubuktan kalkınca burada tek başına
   kalıyordu, iki ayrı marka işareti oluyordu. İmza sayfanın açılışında da
   aynı şeyi söylüyor. */
.perde-imza{height:44px;width:auto;display:block;color:var(--ink)}
/* Belirsiz ilerleme, ölçü çizgisi diliyle: uçları serifli ray üzerinde
   gidip gelen bir işaret. */
.perde-cizgi{position:relative;width:132px;height:10px}
.perde-cizgi::before{content:'';position:absolute;left:0;right:0;top:4px;height:2px;
  background:var(--line)}
.perde-cizgi::after{content:'';position:absolute;top:0;bottom:0;width:38px;
  border:0 solid var(--espresso);border-width:0 2px 2px;
  animation:perde-kay 1.15s var(--ease-s) infinite alternate}
@keyframes perde-kay{from{left:0}to{left:calc(100% - 38px)}}
.perde-yazi{font-size:.78rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bal-ink)}
@media (prefers-reduced-motion:reduce){
  .perde-cizgi::after{animation:none;left:calc(50% - 19px)}
  .js .perde{transition:none}
}

/* ---------- YORUM ŞERİDİ ---------- */
.ozet{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:flex-end;
  margin-top:var(--s5);padding:1.25rem 1.4rem;background:var(--card);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-1)}
.ozet-genel{display:flex;align-items:baseline;gap:.5rem}
.ozet-puan{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  font-variant-numeric:tabular-nums}
.ozet-bes{color:var(--ink-2);font-weight:700}
.ozet-alt{color:var(--ink-2);font-size:.86rem;font-weight:600}

/* Kırılım barları başlık imzasıyla aynı dilde: uçları serifli ölçü çizgisi */
.kirilim{display:grid;gap:.55rem;min-width:min(100%,260px);flex:1}
.kir{display:grid;grid-template-columns:6.5rem 1fr 2.6rem;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:700}
.kir-ad{color:var(--ink-2)}
.kir-ray{position:relative;height:12px}
.kir-ray::before{content:'';position:absolute;left:0;right:0;top:5px;height:2px;
  background:var(--line)}
.kir-ray::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--dolu);
  border:0 solid var(--bal);border-width:0 2px 2px}
.kir-say{text-align:right;font-variant-numeric:tabular-nums;color:var(--bal-ink)}

/* z-index: hero maskotu mutlak konumlu ve şeritle aynı yığın bağlamında.
   Şerit önde olmazsa figürün bacakları kartların üstüne biniyor ve kesik
   görünüyor; arkada kalınca "kartların arkasında duruyor" diye okunuyor. */
.serit{position:relative;z-index:1;overflow:hidden;padding-block:.5rem;margin-top:var(--s5)}
.serit-alt{margin-top:.75rem}
/* Kenarlarda yumuşak kesim. Zemin rengi bant/düz bölüme göre değiştiği için
   currentColor değil, doğrudan bölümün zemin değişkeni kullanılıyor. */
.serit::before,.serit::after{content:'';position:absolute;top:0;bottom:0;
  width:clamp(28px,7vw,90px);z-index:2;pointer-events:none}
.serit::before{left:0;background:linear-gradient(90deg,var(--serit-zemin,var(--bg)),transparent)}
.serit::after{right:0;background:linear-gradient(270deg,var(--serit-zemin,var(--bg)),transparent)}
.bant .serit{--serit-zemin:var(--bg-2)}

.ray{display:flex;gap:1rem;width:max-content;
  animation:serit-kay var(--sure,70s) linear infinite}
/* Ekran dışındaki şerit durur (sınıfı site.js koyar) ve katman istemez.
   will-change yalnızca çalışan şeritte: beş şeride birden verilirse
   tarayıcı beş katman ayırıp belleği boşuna şişiriyor. */
.serit-dur .ray,.serit-dur .studyo-ray{animation-play-state:paused}
.serit:not(.serit-dur) .ray{will-change:transform}

/* ---------- ŞERİTLER: DAR EKRAN ----------
   Telefonda şerit başına tek kart sığıyordu ve o tek kart sürekli kayınca
   okunmuyordu. Ayrıca beş animasyon + 36 kart düşük güçlü cihazı boğuyor.
   Bu yüzden dar ekranda akış yok: parmakla kaydırılıyor, kartlar hizaya
   oturuyor. Animasyon olmayınca will-change de gereksiz — katman ayırmak
   burada tam tersi etki yapardı. */
@media (max-width:48rem){
  .ray{animation:none!important;width:auto;will-change:auto}
  .serit{overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .serit::-webkit-scrollbar{display:none}
  .serit>.ray>*{scroll-snap-align:center}
  /* Kenar maskeleri kaydırmada kartı yarım gösteriyor gibi durur. */
  .serit::before,.serit::after{display:none}
  .is-serit .work-card{width:min(86vw,320px)}
  .yorum{width:min(84vw,320px)}
  .serit-mini .yorum{width:min(80vw,290px)}
}
.ray.ters{animation-direction:reverse}
/* Okunacak içerik: üzerine gelince ya da içine odaklanınca durur. */
.serit:hover .ray,.serit:focus-within .ray{animation-play-state:paused}
@keyframes serit-kay{to{transform:translateX(-50%)}}

.yorum{width:min(78vw,340px);flex:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.15rem;box-shadow:var(--sh-1);
  display:grid;gap:.7rem;align-content:start}
.yorum blockquote{font-size:.92rem;color:var(--ink);text-wrap:pretty;margin:0}
.yorum figcaption{display:flex;align-items:center;gap:.5rem;padding-top:.6rem;
  border-top:1px solid var(--line);font-size:.8rem;font-weight:800;color:var(--ink-2)}
.rumuz-rozet{width:26px;height:26px;flex:none;border-radius:999px;
  background:var(--espresso-tint);color:var(--espresso);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.78rem}
.yorum .mini{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--kum)}
/* Çeviri notu: alıntının kendisi değil, onun hakkında bir bilgi —
   bu yüzden alıntıdan görsel olarak ayrı ve daha sönük. */
.yorum-ceviri{margin:0;font-size:.68rem;color:var(--kum);font-style:italic}

/* Yıldız: iki katman, üstteki genişlikle kırpılır — 4.5 yuvarlanmadan görünür */
.yildiz-sat{display:flex;align-items:center;gap:.5rem}
.yildiz{position:relative;display:inline-block;line-height:1;font-size:1rem;
  letter-spacing:.12em;white-space:nowrap}
.yildiz-bos{color:var(--bal-soft)}
.yildiz-dolu{position:absolute;left:0;top:0;overflow:hidden;color:var(--bal);
  width:var(--oran)}
.yildiz-say{font-weight:800;font-size:.82rem;color:var(--bal-ink);
  font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .ray{animation:none;width:auto}
  .serit{overflow-x:auto;scroll-snap-type:x mandatory}
  .yorum{scroll-snap-align:start}
  .serit::before,.serit::after{display:none}
}

/* Hero altındaki tek sıra: aynı kart, daha alçak. Yorum iki satırda
   kesiliyor ki kutular eşit yükseklikte kalsın. */
/* Şerit hero'nun son elemanı: üstünde maskottan ayrılacak kadar nefes,
   altında hero'nun kendi boşluğu var. İkisi eşitlenmezse şerit yukarı
   yapışıp altta boş bir bant bırakıyor. */
/* Üst bölümün dikey ritmi tek değerde: düğme->kutu, kutu->şerit ve
   şerit->bölüm sonu aralıkları ölçüldüğünde 48/24/64 çıkıyordu ve göz
   bunu dengesiz okuyordu. Üçü de --s6. */
.serit-mini{margin-top:var(--s6)}
/* Hero'nun altında yorum şeridi varken alt boşluk şeridin kendi
   boşluğuyla eşitleniyor. */
.hero:has(.serit){padding-bottom:var(--s6)}
.serit-mini .yorum{width:min(72vw,300px);padding:.8rem .9rem;gap:.45rem}
.serit-mini .yorum blockquote{font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.serit-mini .yildiz{font-size:.88rem}
.serit-mini .yorum figcaption{padding-top:.5rem;font-size:.74rem}
.serit-mini .rumuz-rozet{width:22px;height:22px;font-size:.7rem}

/* ---------- ALT BİLGİ ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:var(--s5)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.foot-meta{font-size:.85rem;color:var(--ink-2);font-weight:600}
.foot-bag{font-size:.85rem;font-weight:700;color:var(--bal-ink);
  text-decoration:underline;text-underline-offset:.2em;
  transition:color .16s var(--ease-s)}
.foot-bag:hover{color:var(--bal)}

/* Gizlilik sayfası: uzun metin, okunur satır uzunluğu ve nefesli başlıklar. */
.gizlilik{max-width:70ch}
.gizlilik h3{font-family:var(--display);font-weight:700;font-size:1.05rem;
  margin-top:var(--s5);margin-bottom:var(--s2)}
.gizlilik p{margin-bottom:var(--s3)}
.gizlilik em{font-style:normal;font-weight:700;color:var(--espresso)}
.gizlilik-alt{font-size:.85rem;color:var(--ink-2);margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line)}

/* ---------- ODAK ---------- */
:focus-visible{outline:3px solid var(--bal-ink);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- HAREKET ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) var(--d,0ms),transform .5s var(--ease) var(--d,0ms)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .blob{animation:yuz 10s ease-in-out infinite alternate}
  .chip-1{animation:sek 5s ease-in-out infinite alternate}
  .chip-2{animation:sek 6.5s .4s ease-in-out infinite alternate}
  .chip-3{animation:sek 5.6s .8s ease-in-out infinite alternate}
  .ring{animation:don 40s linear infinite}
}
@keyframes yuz{from{border-radius:46% 54% 52% 48%/48% 46% 54% 52%;transform:rotate(0) scale(1)}
  to{border-radius:54% 46% 48% 52%/52% 54% 46% 48%;transform:rotate(6deg) scale(1.03)}}
@keyframes sek{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes don{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  a,button,.card,.stat,.work-card,.why-list li,.qa{
    transition:color .12s,background-color .12s,border-color .12s,outline-color .12s!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}

/* ---------- ZORLANMIŞ RENKLER ---------- */
@media (forced-colors:active){
  .pano-neon{display:none}
  .card,.stat,.step,.work-card,.qa,.contact-card,.about-links a,.btn,.chip,.why-list li,.pano-kart,.pano-bag{
    border:1px solid CanvasText!important}
  .btn-primary,.step-n{background:ButtonFace!important;color:ButtonText!important}
  .brand-badge,.card-badge,.about-badge{background:Canvas!important;border:1px solid CanvasText!important}
  .blob{background:Canvas!important}
  :focus-visible{outline-color:Highlight!important}
}