/* ── Token seti ─────────────────────────────────────────────────
   Mor doğrudan logodan örneklendi: #803088.
   Sarı, kurumsal vurgu renginizden alındı.
   Türkçe notu: hiçbir yerde text-transform:uppercase yok — büyük
   harfli etiketler HTML içine elle yazıldı ki İ/ı bozulmasın.      */
:root{
  --plum:#803088;
  --plum-deep:#4A1250;
  --plum-ink:#2A0E30;
  --marigold:#F2A008;
  --paper:#FFFCFA;
  --shell:#F6EEF2;
  --ink:#2B2429;
  --muted:#6E6069;
  --line:#E6D8DF;

  --display:"Bricolage Grotesque",-apple-system,"Segoe UI",sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",monospace;

  --top-h:106px;
  /* Slayt bekleme süresi. Hem ilerleme çubuğu hem sayaç bunu
     okuyor; tek yerden değişsin diye burada duruyor. */
  --slayt-sure:10s;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --max:1280px;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.35vw + .95rem,1.075rem);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.03;letter-spacing:-.025em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.eyebrow{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--plum);
  display:block;margin-bottom:1.1rem;
}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.section-head p{margin-top:1.1rem;color:var(--muted);max-width:54ch}

.btn{
  display:inline-flex;align-items:center;gap:.65rem;min-height:52px;
  padding:.85rem 1.5rem;border-radius:100px;border:2px solid transparent;
  font-family:var(--body);font-weight:700;font-size:1rem;text-decoration:none;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum-deep);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:var(--plum-ink);border-color:var(--plum-ink);color:#fff;transform:translateY(-2px)}
.btn-amber{background:var(--marigold);color:var(--plum-ink)}
.btn-amber:hover{transform:translateY(-2px)}

/* ── Başlık çubuğu ───────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:rgba(255,252,250,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:1.5rem;min-height:var(--top-h)}
.brand{flex:none;display:flex;align-items:center;color:var(--plum)}
.logo{height:68px;width:auto;aspect-ratio:196.07/89.7421;display:block}
.nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;padding:.4rem 0;position:relative}
/* Kadromuz artık bağlantı; bağlantılara uygulanan alt çizgi animasyonu
   onda da çalışıyordu, açılır menü düğmesinde istenmiyor. */
.nav a:not(.nav-ac)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--plum);transition:right .25s ease}
.nav a:not(.nav-ac):hover::after{right:0}
.top .btn{min-height:44px;padding:.5rem 1.15rem;font-size:.92rem}
/* ── Mobil menü ────────────────────────────────────────────────
   Eskiden "MENÜ" yazılı bir kutu, açılınca da başlığın altına inen
   düz bir listeydi. Şimdi sağdan kayan bir panel: üç çizgi çarpıya
   dönüşüyor, arkası kararıyor, satırlar sırayla giriyor, altta
   telefon ve randevu düğmesi duruyor. Dokunma alanları büyük.     */
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:12px;width:46px;height:46px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .2s ease,background .2s ease}
.burger:hover{border-color:var(--plum)}
.burger-cizgi{display:block;width:20px;height:2px;border-radius:2px;background:var(--plum-ink);
  transition:transform .32s cubic-bezier(.5,0,.2,1),opacity .2s ease}
.burger[aria-expanded="true"]{background:var(--plum);border-color:var(--plum)}
.burger[aria-expanded="true"] .burger-cizgi{background:#fff}
.burger[aria-expanded="true"] .burger-cizgi:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-cizgi:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-cizgi:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-perde{position:fixed;inset:0;z-index:55;background:rgba(20,4,26,.55);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.menu-perde.acik{opacity:1}
.nav-bas,.nav-alt-bilgi,.nav-kapat{display:none}

@media(max-width:1020px){
  :root{--top-h:88px}
  .logo{height:52px}
  /* Başlıktaki backdrop-filter, içindeki position:fixed öğeleri
     kendine bağlıyor: menü paneli başlığın 88 piksellik kutusuna
     sıkışıyor ve kapalı hâli sayfayı yana kaydırıyordu. Mobilde
     bulanıklığı kapatıyoruz — zemin zaten neredeyse opak, gözle
     farkı yok, panel de ekrana göre konumlanıyor.                 */
  .top{backdrop-filter:none}
  .burger{display:flex}
  .top>.wrap>.btn{display:none}

  .nav{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:70;
    width:min(360px,88vw);display:flex;flex-direction:column;gap:0;
    background:var(--paper);padding:0;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-24px 0 60px -30px rgba(42,14,48,.55);
    transform:translateX(102%);transition:transform .38s cubic-bezier(.33,0,.2,1);
    visibility:hidden}
  .nav.open{transform:none;visibility:visible}

  .nav-bas{display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;
    background:var(--paper);z-index:2}
  .nav-bas-yazi{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--muted)}
  .nav-kapat{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);background:none;color:var(--plum-ink);
    font-size:1.5rem;line-height:1;cursor:pointer}
  .nav-kapat:hover{background:var(--plum);border-color:var(--plum);color:#fff}

  /* Satırlar açılışta sırayla giriyor: panel "kurulmuş" gibi duruyor. */
  .nav > a,.nav > .nav-alt{padding:0 var(--pad);border-bottom:1px solid var(--line);
    opacity:0;transform:translateX(14px)}
  .nav.open > a,.nav.open > .nav-alt{animation:menuSatir .42s cubic-bezier(.33,0,.2,1) both}
  .nav.open > a:nth-of-type(1){animation-delay:.06s}
  .nav.open > a:nth-of-type(2){animation-delay:.1s}
  .nav.open > a:nth-of-type(3){animation-delay:.14s}
  .nav.open > .nav-alt{animation-delay:.18s}
  .nav.open > a:nth-of-type(4){animation-delay:.22s}
  .nav.open > a:nth-of-type(5){animation-delay:.26s}
  .nav.open > a:nth-of-type(6){animation-delay:.3s}
  .nav > a{display:flex;align-items:center;min-height:58px;font-size:1.06rem;
    font-weight:700;letter-spacing:-.01em}
  .nav > a[aria-current="page"]{color:var(--plum)}
  .nav > a:active{background:var(--shell)}

  .nav-alt-bilgi{display:grid;gap:.75rem;padding:1.25rem var(--pad) 1.75rem;
    margin-top:auto;background:var(--shell);opacity:0}
  .nav.open .nav-alt-bilgi{animation:menuSatir .42s cubic-bezier(.33,0,.2,1) .34s both}
  .nav-tel{display:grid;gap:.1rem;text-decoration:none}
  .nav-tel span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--muted)}
  .nav-tel b{font-size:1.12rem;color:var(--plum)}
  .nav-randevu{width:100%;justify-content:center}
}
@keyframes menuSatir{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav.open > a,.nav.open > .nav-alt,.nav.open .nav-alt-bilgi{animation:none;opacity:1;transform:none}
  .burger-cizgi{transition:none}
}

/* ── Hero: tam genişlik görsel alan ────────────────────────────
   Fotoğraf sahnenin tamamını kaplıyor, metin koyu bir geçişin
   üzerinde duruyor. Slaytlar çapraz geçişle değişiyor, aktif
   fotoğraf çok yavaş yaklaşıyor — sinema hissi, dikkat dağıtmadan. */
.hero{position:relative;background:var(--plum-ink);color:#fff;overflow:hidden;
  min-height:clamp(580px,88vh,920px);display:flex;flex-direction:column;touch-action:pan-y}
.hero-bg{position:absolute;inset:0}
.hero-bg figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.hero-bg figure.is-on{opacity:1}
/* Varsayılan odak ortada (eskiden %35'ti, bina fotoğraflarının altını
   yiyordu). Yakınlaşma da azaltıldı: %12 büyütme kırpmayı artırıyor
   ve görüntüyü yumuşatıyordu.                                      */
/* Yaklaşma (Ken Burns): hareket artık slaytla eşleşiyor. Görsel
   ekrana geldiği anda tam kadrajdan başlayıp slayt süresi boyunca
   yavaşça yaklaşıyor, sonraki slaytta baştan alıyor. Önce bütün
   görsellerde kesintisiz dönüyordu: kimi slayt en yakın hâlinde
   giriyor, hareket görünmüyordu. Duruş konumu bitiş ölçeğiyle aynı
   (1.08) — sınıf kalkınca görüntü zıplamıyor.                      */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.08)}
.hero-bg figure.is-on img{animation:approach var(--slayt-sure,10s) ease-out forwards}
@keyframes approach{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){
  .hero-bg img{transform:none}
  .hero-bg figure.is-on img{animation:none}
}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(28,7,34,.95) 0%,rgba(33,9,40,.86) 32%,rgba(42,14,48,.42) 62%,rgba(28,7,34,.7) 100%),
    linear-gradient(rgba(28,7,34,.55),rgba(28,7,34,0) 30%)}


/* width:100% olmadan bu kutu içeriği kadar daralıyor ve sayfanın
   ortasında duruyordu: başlık, altındaki bölümlerin sol kenarıyla
   hizasızdı. Şimdi sayfa payı neredeyse orada başlıyor — diğer
   bölümlerle aynı hizada, kurumsal duruş.                         */
.hero-in{position:relative;z-index:2;flex:1;width:100%;display:flex;
  align-items:center;justify-content:flex-start;
  padding-block:clamp(3.5rem,9vh,6.5rem) clamp(2rem,5vh,3.5rem)}
.slides{display:grid;width:100%;justify-items:start}
/* Slaytın görünürlüğü yalnızca sınıfa bağlı. Daha önce burada bir
   geçiş (transition) vardı; sayfa görünmezken ilerlemediği için slayt
   yarı yolda, görünmez halde kalabiliyordu.                          */
.slide{grid-area:1/1;opacity:0;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.slide .eyebrow{color:var(--marigold)}
/* Başlık ilk slaytta h1, diğerlerinde h2; biçim etikete değil sınıfa bağlı. */
/* Başlık fotoğrafı ezmeyecek ölçüde: geniş ekranda 5.5rem'e kadar
   çıkıyordu, arkadaki bina görünmez oluyordu. Sözün ağırlığı punto
   büyüklüğünden değil, boşluktan ve netlikten geliyor.             */
.slide-baslik{font-family:var(--display);font-weight:700;line-height:1.06;
  font-size:clamp(1.85rem,3.6vw,3.4rem);letter-spacing:-.03em;max-width:19ch;
  text-shadow:0 2px 34px rgba(20,4,26,.5)}
.slide-baslik .l2{display:block;color:#E9CDEF;font-weight:400}
.lede{margin-top:1.05rem;max-width:42ch;color:#EFE2F3;
  font-size:clamp(.98rem,.28vw + .9rem,1.08rem);line-height:1.65;
  text-shadow:0 1px 22px rgba(20,4,26,.55)}
.slide-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
/* Düğmeler de sahnede: sayfa içindeki düğmelerden bir tık küçük,
   fotoğrafın önünde daha az yer kaplıyor.                          */
.hero .btn{min-height:46px;padding:.68rem 1.3rem;font-size:.94rem}
/* İkinci düğme yalnızca beyaz çerçeveyle duruyordu: açık bir
   fotoğrafın (servis araçları, gökyüzü) üstünde okunmuyordu. Koyu
   yarı saydam bir zemin her fotoğrafta okunur kılıyor, birincil
   düğmenin yanında hâlâ ikincil duruyor.                          */
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.72);
  background:rgba(26,6,32,.42);backdrop-filter:blur(6px);
  box-shadow:0 10px 30px -18px rgba(10,2,14,.8)}
.hero .btn-ghost:hover{background:#fff;color:var(--plum-ink);border-color:#fff}

/* alt şerit: bölümlere ayrılmış slayt kumandası */
.hero-foot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(rgba(20,4,26,0),rgba(20,4,26,.4))}
.hero-foot-in{display:flex;align-items:stretch;gap:1.25rem}
.pager{display:flex;flex:1;min-width:0}
.pg{flex:1 1 0;min-width:0;background:none;border:0;border-left:1px solid rgba(255,255,255,.14);
  padding:1.15rem 1.25rem;text-align:left;color:#fff;cursor:pointer;position:relative;
  display:grid;gap:.35rem;align-content:center;min-height:92px;transition:background .25s ease}
.pg:last-of-type{border-right:1px solid rgba(255,255,255,.14)}
.pg:hover{background:rgba(255,255,255,.08)}
.pg .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--marigold)}
.pg .lbl{font-weight:700;font-size:.97rem;color:#C6ADCF;transition:color .25s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg[aria-current="true"]{background:rgba(255,255,255,.06)}
.pg[aria-current="true"] .lbl{color:#fff}
.pg .bar{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden}
.pg .bar::after{content:"";position:absolute;top:0;bottom:0;left:0;right:100%;background:var(--marigold)}
.pg[aria-current="true"] .bar::after{animation:fill var(--slayt-sure) linear forwards}
.hero.paused .pg[aria-current="true"] .bar::after{animation-play-state:paused}
@keyframes fill{to{right:0}}
.arrows{display:flex;gap:.6rem;align-items:center;flex:none}
.arw{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:none;
  color:#fff;font-family:var(--body);font-size:1.4rem;line-height:1;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.arw:hover{background:#fff;color:var(--plum-ink);border-color:#fff}
@media(max-width:820px){
  .hero{min-height:0}
  .hero-in{padding-block:clamp(3rem,12vh,5rem) 2.5rem;min-height:62vh}
  /* Telefonda eski ölçüler birebir geri geldi: kullanıcı bu hâlini
     beğeniyor. Küçültme yalnızca masaüstünde kaldı — orada başlık
     fotoğrafı eziyordu.                                            */
  .slide-baslik{font-size:2.5rem;max-width:22ch;line-height:1.02}
  .lede{margin-top:1.5rem;font-size:1.05rem;line-height:1.6;max-width:45ch}
  .slide-cta{margin-top:2.2rem;gap:.85rem}
  .hero .btn{min-height:52px;padding:.85rem 1.5rem;font-size:1rem}
  /* Alt şerit mobilde tam genişlikte, kendi koyu zemininde duruyor.
     Önce sayfa payı kadar içeriden başlıyor ama üstündeki çizgi tam
     genişlik olduğu için şerit kopuk görünüyordu; arkası saydam
     olduğundan fotoğraf da araya sızıyordu.                          */
  .hero-foot{background:linear-gradient(rgba(20,4,26,.35),rgba(20,4,26,.92));
    backdrop-filter:blur(6px)}
  .hero-foot-in{flex-direction:column;gap:0;padding-inline:0}
  .pg{min-height:64px;padding:.9rem 1rem}
  .pg:first-of-type{border-left:0}
  .pg:last-of-type{border-right:0}
  .pg .lbl{font-size:.86rem}
  .arrows{padding:.9rem 0 1.1rem;justify-content:center}
}
@media(max-width:560px){
  /* etiketler bu genişlikte kırpılıyordu: sadece numara ve dolum çubuğu */
  .pg{min-height:56px;justify-items:center;padding:.85rem .5rem}
  .pg .lbl{display:none}
  .pg .num{font-size:.8rem}
}
@media(hover:none){
  /* Dokunmatikte oklar yok; kaydırma parmakla yapılıyor. Kapsayıcı da
     gizleniyor, yoksa altta boş bir bant kalıyor.                    */
  .arrows{display:none}
}

/* ── Duyuru şeridi (panelden açılıp kapanır) ─────────────────── */
.announce{background:var(--marigold);color:var(--plum-ink)}
.announce-in{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding-block:1.05rem;font-weight:700}
.flag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;background:var(--plum-ink);color:var(--marigold);
  padding:.35rem .7rem;border-radius:100px;font-weight:400}
.announce a{margin-left:auto;font-family:var(--mono);font-size:.84rem;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}

/* ── Şubeler ─────────────────────────────────────────────────────
   Önce fotoğraflı kart şeridi + altında panel vardı; ikisi aynı
   bilgiyi iki kez gösteriyordu. Şimdi tek sahne: şubenin fotoğrafı
   tam genişlikte, bilgiler fotoğrafın üzerinde, altta sadece şube
   adlarından oluşan ince bir şerit. Tekrar yok, hero ile aynı dil. */
.branches{background:var(--shell);padding-block:clamp(4rem,9vw,7.5rem)}
.bshow{position:relative;overflow:hidden;border-radius:var(--r);background:var(--plum-ink);
  min-height:clamp(430px,54vh,560px);display:flex;align-items:flex-end;
  box-shadow:0 40px 80px -46px rgba(42,14,48,.65);
  /* Dikey kaydırma tarayıcıda kalıyor, yatay hareket JS'e geliyor.
     Bu kural olmadan parmakla şube değiştirilemiyordu.              */
  touch-action:pan-y}
.bstage{position:absolute;inset:0}
.bslide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.bslide.is-on{opacity:1}
.bslide img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.bshow::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(26,6,32,.93) 0%,rgba(30,8,37,.8) 38%,rgba(42,14,48,.3) 68%,rgba(26,6,32,.55) 100%)}

.binfo{position:relative;z-index:2;width:100%;padding:clamp(1.75rem,4vw,3rem);color:#fff;
  display:grid;gap:1.1rem;max-width:760px}
.binfo .idx{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--marigold)}
.binfo h3{font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:-.03em;display:flex;align-items:center;
  gap:.7rem;flex-wrap:wrap;text-shadow:0 2px 30px rgba(20,4,26,.5)}
.binfo-rows{display:grid;gap:.55rem;margin:0}
.binfo-row{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;font-size:1rem;color:#F1E6F4}
.binfo-row dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#C6ADCF;
  min-width:74px;flex:none}
.binfo-row dd{margin:0}
.binfo-row a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.binfo-row a:hover{border-color:var(--marigold);color:var(--marigold)}
.binfo-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.35rem}
.branches .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.branches .btn-ghost:hover{background:#fff;color:var(--plum-ink);border-color:#fff}
.map-toggle{background:none;border:0;padding:.5rem 0;font-family:var(--mono);font-size:.76rem;
  color:#fff;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.4);min-height:44px}
.map-toggle:hover{border-color:var(--marigold);color:var(--marigold)}

/* şube adları şeridi: fotoğraf yok, tekrar yok */
.bnav{display:flex;align-items:center;gap:.35rem;margin-top:1rem;flex-wrap:wrap}
.bnav-item{background:none;border:0;cursor:pointer;font-family:var(--body);font-weight:700;
  font-size:1rem;color:var(--muted);padding:.85rem 1.05rem;border-radius:100px;min-height:48px;
  display:inline-flex;align-items:center;gap:.45rem;transition:background .2s ease,color .2s ease}
.bnav-item:hover{background:rgba(128,48,136,.09);color:var(--plum)}
.bnav-item[aria-selected="true"]{background:var(--plum);color:#fff}
.bnav .arrows{margin-left:auto}
.branches .arw{border-color:var(--line);color:var(--plum)}
.branches .arw:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.map-wrap{margin-top:1rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:360px;border:0;display:block}
@media(max-width:760px){
  /* mobilde metin fotoğrafın altına düşüyor: karartmayı da dikey çevir */
  .bshow::before{background:linear-gradient(rgba(26,6,32,.2) 0%,rgba(26,6,32,.7) 30%,rgba(26,6,32,.95) 58%)}
  .bshow{min-height:0;align-items:stretch}
  .binfo{padding:1.5rem 1.35rem 1.75rem}
  .bshow{padding-top:190px}
  .bnav{gap:.25rem}
  .bnav-item{font-size:.94rem;padding:.7rem .85rem}
  /* dar ekranda şerit zaten sığmıyor; oklar yerine parmakla kaydırma */
  .bnav .arrows{display:none}
}

/* ── Hizmetler ───────────────────────────────────────────────── */
/* ── Hizmetler: on satırlık liste yerine akan başlıklar ────────
   On kalem tek sütunda alt alta dizilince duvar gibi duruyordu.
   Bu düzende satır sayısı sabit değil: kalem eklendikçe akıyor,
   hiçbir zaman tek başına alta düşen bir öğe olmuyor.            */
.svc-cloud{display:flex;flex-wrap:wrap;gap:.7rem}
.pill{display:inline-flex;align-items:center;gap:.75rem;min-height:58px;
  padding:.85rem 1.4rem;border:1.5px solid var(--line);border-radius:100px;background:var(--paper);
  text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1rem,1.15vw + .55rem,1.2rem);color:var(--ink);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
/* Her hizmet ayrı bir alan; imleç geldiğinde hepsi aynı mora dönünce
   liste tek parça gibi duruyordu. Altı renkli bir set sırayla dağıtılıyor
   — rastgele değil, sabit: aynı hizmet her zaman aynı rengi alıyor.
   Yazı renkleri her zemine göre ayrı seçildi (okunurluk için).      */
.pill:hover{background:var(--plum);border-color:var(--plum);color:#fff;transform:translateY(-2px)}
.svc-cloud .pill:nth-child(6n+1):hover{background:var(--plum);border-color:var(--plum);color:#fff}
.svc-cloud .pill:nth-child(6n+2):hover{background:var(--marigold);border-color:var(--marigold);color:var(--plum-ink)}
.svc-cloud .pill:nth-child(6n+3):hover{background:#0F6E86;border-color:#0F6E86;color:#fff}
.svc-cloud .pill:nth-child(6n+4):hover{background:#90C838;border-color:#90C838;color:#17240A}
.svc-cloud .pill:nth-child(6n+5):hover{background:#6B3FA0;border-color:#6B3FA0;color:#fff}
.svc-cloud .pill:nth-child(6n+6):hover{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff}

.pill .arrow{color:inherit;opacity:.3;font-size:1.15rem}
.pill:hover .arrow{opacity:1;transform:translateX(3px)}

/* Dar ekranda hap düzeni dağınık duruyordu: her hizmetin adı farklı
   uzunlukta olduğu için satırlar tırtıklı bitiyor, bazı satırda bir
   bazısında iki hap kalıyordu. Telefonda hepsi tam genişlikte, eşit
   yükseklikte satırlar — ad solda, ok sağda.                        */
@media(max-width:700px){
  .svc-cloud{display:grid;gap:.5rem}
  .pill{width:100%;justify-content:space-between;border-radius:14px;
    padding:.9rem 1.15rem;min-height:56px;font-size:1.02rem;
    background:var(--shell);border-color:transparent}
  .pill .arrow{opacity:.55;flex:none}
  .svc-cloud.sm .pill{min-height:52px;font-size:.95rem;padding:.75rem 1rem}
}

/* ── Kadro ───────────────────────────────────────────────────────
   Şube seçimi düz metin sekmeleriydi, tıklanacak yer belli değildi.
   Artık şubenin fotoğrafını taşıyan kartlar: seçili olan renkli ve
   sarı çerçeveli, diğerleri soluk. Her şube kendi içinde birimlere
   ayrılıyor — yönetim, eğitim, sağlık, idari — eski sitedeki gibi. */
.staff{background:var(--plum-ink);color:#fff}
.staff .section-head p{color:#D9C4DF}
.staff .eyebrow{color:var(--marigold)}

.staff .picker{display:flex;gap:.7rem;flex-wrap:wrap;padding:.15rem .15rem 1rem;
  scroll-snap-type:x proximity;margin-bottom:.5rem}
.staff .pick{flex:1 1 158px;max-width:210px;scroll-snap-align:start;cursor:pointer;overflow:hidden;text-align:left;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);border-radius:14px;
  padding:0 0 .9rem;color:#EBDDEF;display:grid;gap:.25rem;font-family:var(--body);
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.staff .pick:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.staff .pick-ph{display:block;aspect-ratio:16/10;background:var(--plum-deep);overflow:hidden}
.staff .pick-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.65);transition:filter .3s ease}
.staff .pick-name{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;
  padding:.7rem .9rem 0;color:#fff;display:flex;align-items:center;gap:.4rem}
.staff .pick-n{font-family:var(--mono);font-size:.71rem;padding:0 .9rem;color:#C6ADCF}
.staff .pick[aria-selected="true"]{border-color:var(--marigold);background:rgba(242,160,8,.12)}
.staff .pick[aria-selected="true"] .pick-ph img{filter:none}
.staff .pick[aria-selected="true"] .pick-n{color:var(--marigold)}

.dept{border-top:1px solid rgba(255,255,255,.16);margin-top:0}
/* birim başlığı artık açılır kapanır: yönetim ve idari kadro varsayılan
   olarak kapalı duruyor, veliyi ilgilendiren eğitim kadrosu açık gelir */
.dept-head{width:100%;background:none;border:0;cursor:pointer;color:#fff;font-family:var(--body);
  display:flex;align-items:center;gap:.85rem;padding:1.4rem 0;text-align:left;min-height:64px}
.dept-head:hover .dept-title{color:var(--marigold)}
.dept-title{font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;
  transition:color .2s ease}
.dept-count{font-family:var(--mono);font-size:.75rem;color:var(--marigold)}
.dept-caret{margin-left:auto;width:34px;height:34px;border-radius:50%;flex:none;
  border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:.85rem;
  transition:transform .25s ease,background .2s ease}
.dept-head[aria-expanded="true"] .dept-caret{transform:rotate(180deg);background:rgba(255,255,255,.1)}
.dept-body{overflow:hidden}
.dept-body[hidden]{display:none}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:1.15rem;
  list-style:none;margin:0 0 1.75rem;padding:0}
.person{background:rgba(255,255,255,.05);border-radius:12px;overflow:hidden;
  transition:transform .2s ease,background .2s ease}
.person:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.person .pic{aspect-ratio:4/5;background:var(--plum-deep);overflow:hidden;position:relative}
.person .pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:grayscale(.12) contrast(1.03);transition:filter .3s ease,transform .4s ease}
.person:hover .pic img{filter:none;transform:scale(1.03)}
.person .pic.empty{display:grid;place-items:center;color:rgba(255,255,255,.4);
  font-family:var(--mono);font-size:.68rem;text-align:center;padding:1rem;line-height:1.5}
.person .who{padding:.85rem .95rem 1.05rem}
.person h4{font-size:1.02rem;letter-spacing:-.015em}
.person .role{font-family:var(--mono);font-size:.71rem;color:var(--marigold);line-height:1.5;margin-top:.35rem}
/* sertifikalar: kartta en çok iki tane, tamamı profil sayfasında */
.badges{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.03em;padding:.18rem .45rem;
  border:1px solid rgba(242,160,8,.55);color:var(--marigold);border-radius:100px}
.badge.more{border-color:rgba(255,255,255,.3);color:#C6ADCF}
.person .go-profile{font-family:var(--mono);font-size:.69rem;color:#C6ADCF;margin-top:.6rem;
  opacity:0;transition:opacity .2s ease}
.person:hover .go-profile{opacity:1;color:#fff}
.staff-note{font-family:var(--mono);font-size:.77rem;color:#C8AFD0;margin-top:2.25rem;
  border-left:2px solid var(--marigold);padding-left:1rem;max-width:70ch;line-height:1.7}

/* ── Veli görüşleri ──────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem}
.quote{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.6rem 1.4rem;background:var(--paper);
  display:flex;flex-direction:column;gap:1rem;
  transition:transform .3s cubic-bezier(.33,0,.2,1),box-shadow .3s ease,border-color .3s ease}
.quote:hover{transform:translateY(-6px) scale(1.02);border-color:var(--plum);
  box-shadow:0 26px 50px -30px rgba(42,14,48,.55)}
.quote:hover .tick{color:var(--marigold)}
.quote blockquote{margin:0;font-size:1.06rem;line-height:1.6}
.quote .tick{color:var(--plum)}
.quote footer{margin-top:auto;font-family:var(--mono);font-size:.76rem;color:var(--muted)}

/* ── Blog ────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.post{text-decoration:none;display:flex;flex-direction:column;gap:.9rem}
.post .ph{aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:var(--shell)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post:hover .ph img{transform:scale(1.04)}
.post time{font-family:var(--mono);font-size:.74rem;color:var(--plum)}
.post h3{font-size:1.3rem}
.post:hover h3{color:var(--plum)}

/* ── Formlar ─────────────────────────────────────────────────── */
.forms{background:var(--shell)}
/* min(320px,100%): dar telefonda sütun kabın enini aşmasın —
   düz minmax(320px,…) 360px ekranda formu 15px taşırıyordu */
/* En küçük sütun 420px: tablette iki form yan yana sıkışınca şube
   ve konu kutuları okunmaz hâle geliyordu. Bu enin altında formlar
   alt alta geçiyor. min(…,100%) dar telefonda taşmayı önlüyor.     */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:1.5rem;align-items:start}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.1rem)}
.card h3{font-size:1.6rem}
.card>p{color:var(--muted);margin-top:.6rem;font-size:.95rem}
.field{display:grid;gap:.4rem;margin-top:1.1rem}
.field label,.field .label-like{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--plum)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;padding:.8rem .9rem;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);min-height:50px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px rgba(128,48,136,.14)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.file{border:1.5px dashed var(--line);border-radius:10px;padding:1rem;font-size:.9rem;color:var(--muted);
  display:flex;align-items:center;gap:.75rem;background:#fff;cursor:pointer;min-height:56px;
  transition:border-color .18s ease,color .18s ease}
.file:hover{border-color:var(--plum);color:var(--plum)}
/* .field input kuralı .sr'yi genişlikte eziyordu; dosya girdisi için
   daha özel kural: gizli kalsın ama etiketle tıklanabilir olsun. */
.field input.sr{width:1px;height:1px;min-height:0;padding:0;border:0}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;font-size:.86rem;color:var(--muted)}
.consent input{width:22px;height:22px;min-height:0;flex:none;margin-top:.15rem}
.card .btn{margin-top:1.3rem;width:100%;justify-content:center}

/* ── Alt bilgi ───────────────────────────────────────────────────
   Önceki halinde dört ince sütun vardı, sağda kocaman boşluk
   kalıyordu. Şimdi üstte telefon şeridi, altında şube adresleri
   var — hem boşluğu dolduruyor hem yerel aramada işe yarıyor:
   adres ve telefonun sitenin her sayfasında aynı yazılması
   Google'ın kurumu doğrulamasına yardım ediyor.                  */
footer.site{background:var(--plum-ink);color:#EBDDEF;padding-block:clamp(2.5rem,5vw,3.5rem) 1.75rem}
.foot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;
  padding-bottom:clamp(2rem,4vw,2.75rem);border-bottom:1px solid rgba(255,255,255,.16)}
.foot-cta .eyebrow{color:var(--marigold);margin-bottom:.5rem}
.foot-tel{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);
  letter-spacing:-.03em;color:#fff;text-decoration:none;display:block;line-height:1}
.foot-tel:hover{color:var(--marigold)}
.foot-cta-line{max-width:44ch;color:#E3D2E8;font-size:clamp(1rem,.4vw + .95rem,1.15rem);line-height:1.6}
.foot-cta-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-left:auto}
footer.site .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
footer.site .btn-ghost:hover{background:#fff;color:var(--plum-ink);border-color:#fff}

.foot-grid{display:grid;grid-template-columns:1.15fr 1.5fr .85fr .85fr;
  gap:clamp(1.75rem,3vw,3rem);padding-top:clamp(2rem,4vw,2.75rem)}
footer.site h4{font-family:var(--mono);font-weight:500;font-size:.73rem;letter-spacing:.13em;
  color:var(--marigold);margin-bottom:1.1rem}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.foot-brand{color:#fff;--logo-sub:#C8AFD0}
.foot-brand p{margin-top:1.1rem;max-width:32ch;font-size:.92rem;color:#C8AFD0;line-height:1.6}
.foot-social{display:flex;gap:.6rem;margin-top:1.25rem;flex-wrap:wrap}
.foot-social a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:.4rem .75rem;color:#EBDDEF}
.foot-social a:hover{background:#fff;color:var(--plum-ink);border-color:#fff;text-decoration:none}
/* şube adresleri: iki kolona akan derli toplu bloklar */
.foot-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem 1.5rem}
.fb{display:grid;gap:.25rem}
.fb strong{font-family:var(--display);font-size:.98rem;font-weight:700;color:#fff}
.fb span{font-size:.85rem;color:#C8AFD0;line-height:1.5}
.fb a{font-family:var(--mono);font-size:.79rem;color:var(--marigold)}
.legal{border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;font-family:var(--mono);font-size:.73rem;color:#B79CC0}
.legal a{margin-right:1.25rem}
@media(max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-cta-btns{margin-left:0;width:100%}
}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr}
}

/* ── Randevu penceresi ──────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:1.25rem}
.modal.open{display:grid}
.modal-back{position:absolute;inset:0;background:rgba(20,4,26,.72);backdrop-filter:blur(5px)}
.modal-card{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--r);
  width:min(560px,100%);max-height:92vh;overflow:auto;padding:clamp(1.5rem,4vw,2.4rem);
  box-shadow:0 44px 90px -30px rgba(20,4,26,.85);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-card h3{font-size:clamp(1.5rem,3vw,1.9rem);padding-right:3rem}
.modal-card>p{color:var(--muted);margin-top:.6rem;font-size:.95rem}
.modal-close{position:absolute;top:.85rem;right:.85rem;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--shell);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--plum);color:#fff}
body.locked{overflow:hidden}

/* hizmet ve şube bağlantılarındaki ok */
.arrow{font-family:var(--body);color:var(--plum);transition:transform .25s ease,opacity .25s ease;
  display:inline-block}
.svc .arrow{opacity:0;transform:translateX(-6px);font-size:1.3rem}
.svc:hover .arrow{opacity:1;transform:translateX(0)}
.branch a.go:hover .arrow{transform:translateX(4px)}
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;top:.4rem;left:1.4rem;font-family:var(--display);
  font-size:3.4rem;line-height:1;color:var(--plum);opacity:.22}
.quote blockquote{margin-top:.7rem}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}


/* ═══════════════════════════════════════════════════════════════
   ALT SAYFALAR
   Anasayfa dışındaki sayfalar bu bloğu kullanıyor: sayfa başlığı
   bandı, metin sütunu, yan kutular, şube/hizmet/personel kartları.
   ═══════════════════════════════════════════════════════════════ */
main{display:block}
.pt0{padding-top:0}
.pt-sm{padding-block:clamp(2.5rem,5vw,4rem)}

/* sayfa başlığı bandı */
.phead{background:var(--plum-ink);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.25rem,5vw,3.5rem)}
.phead .eyebrow{color:var(--marigold)}
.phead h1{font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.035em;max-width:26ch}
.phead--banner h1,.phead--banner .lede-dark{text-shadow:0 2px 28px rgba(20,4,26,.55)}
.lede-dark{margin-top:1.1rem;max-width:56ch;color:#E3D2E8;font-size:clamp(1rem,.4vw + .95rem,1.15rem)}
.crumb{font-family:var(--mono);font-size:.74rem;color:#C6ADCF;margin-bottom:1.5rem;
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.crumb a{color:#EBDDEF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.crumb a:hover{color:#fff;border-color:var(--marigold)}
.nav a[aria-current="page"]{color:var(--plum)}
.nav a[aria-current="page"]::after{right:0}

/* metin sütunu + yan kutular */
.prose-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:2.25rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1.1rem}
.prose .lead{font-size:clamp(1.1rem,.5vw + 1rem,1.3rem);line-height:1.6;color:var(--ink)}
.ticks{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.6rem}
.ticks li{padding-left:1.5rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:9px;border-radius:50%;
  background:var(--marigold)}
.steps{margin:0 0 1.5rem;padding-left:1.4rem;display:grid;gap:.75rem}
.steps li{padding-left:.3rem}
.steps strong{font-family:var(--display)}
.aside{display:grid;gap:1rem;position:sticky;top:calc(var(--top-h) + 1rem)}
.aside-card{background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.5rem;display:grid;gap:.85rem;justify-items:start}
.aside-card h3{font-size:1.2rem}
.aside-card p{color:var(--muted);font-size:.94rem}
.aside-card .btn{width:100%;justify-content:center}
.svc-cloud.sm .pill{min-height:44px;padding:.55rem 1rem;font-size:.92rem}

/* şubeler listesi */
.sube-list{display:grid;gap:1.25rem}
.sube-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sube-ph{display:block;background:var(--plum-deep)}
.sube-ph img{width:100%;height:100%;object-fit:cover;min-height:210px}
.sube-body{padding:clamp(1.25rem,2.4vw,1.9rem);display:grid;gap:1rem;align-content:start}
.sube-body h2{font-size:clamp(1.4rem,2.4vw,1.9rem);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sube-body h2 a{text-decoration:none}
.sube-body h2 a:hover{color:var(--plum)}
.sube-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.sube-body .binfo-row dt{color:var(--plum)}
.sube-body .binfo-row{color:var(--ink)}
.sube-body .binfo-row a{color:var(--ink);border-bottom-color:var(--line)}
.sube-body .binfo-row a:hover{color:var(--plum);border-color:var(--plum)}

/* şube sayfası */
.sube-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.sube-hero{border-radius:var(--r);overflow:hidden;background:var(--plum-deep)}
.sube-hero img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.sube-meta{display:grid;gap:1.4rem;align-content:start}
.sube-meta .binfo-row dt{color:var(--plum)}
.sube-meta .binfo-row{color:var(--ink);font-size:1rem}
.sube-meta .binfo-row a{color:var(--ink);border-bottom-color:var(--line)}
.sube-meta .binfo-row a:hover{color:var(--plum);border-color:var(--plum)}
.sube-map{margin-top:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.sube-map iframe{width:100%;height:380px;border:0;display:block}

/* hizmetler ızgarası */
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1.15rem}
.hz-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.6rem;text-decoration:none;display:grid;gap:.6rem;align-content:start;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.hz-card:hover{transform:translateY(-3px);border-color:var(--plum);
  box-shadow:0 18px 40px -28px rgba(42,14,48,.5)}
.hz-card h3{font-size:1.3rem}
.hz-card p{color:var(--muted);font-size:.95rem}
.hz-go{font-family:var(--mono);font-size:.76rem;color:var(--plum);margin-top:.3rem}

/* iletişim */
.il-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.15rem}
.il-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.6rem;display:grid;gap:1rem;align-content:start}
.il-card h3{font-size:1.25rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.il-card .binfo-row dt{color:var(--plum)}
.il-card .binfo-row{color:var(--ink);font-size:.95rem}
.il-card .binfo-row a{color:var(--ink);border-bottom-color:var(--line)}
.il-card .binfo-row a:hover{color:var(--plum);border-color:var(--plum)}
.il-yol{font-family:var(--mono);font-size:.78rem;color:var(--plum);text-decoration:none;
  border-bottom:1px solid var(--line);justify-self:start;padding-bottom:.15rem}
.il-yol:hover{border-color:var(--plum)}

/* kadro sayfası */
.sticky-nav{position:sticky;top:var(--top-h);z-index:20;background:#1D0721;
  padding-block:.9rem;margin-bottom:0}
.staff .bnav-item{color:#C6ADCF;text-decoration:none}
.staff .bnav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.kadro-sube{padding-top:clamp(1.75rem,3.5vw,2.75rem)}
.kadro-sube-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.25rem}
.kadro-sube-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.kadro-sube-meta{font-family:var(--mono);font-size:.78rem;color:var(--marigold)}
.kadro-sube-meta a{color:#fff}
.person-link{display:block;text-decoration:none;color:inherit}

/* personel profili */
.profil{padding-block:clamp(2rem,4vw,3.5rem)}
.profil .crumb{color:var(--muted);margin-bottom:1.75rem}
.profil .crumb a{color:var(--ink);border-bottom-color:var(--line)}
.profil .crumb a:hover{color:var(--plum);border-color:var(--plum)}
.profil-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
.profil-foto{border-radius:var(--r);overflow:hidden;background:var(--shell);aspect-ratio:4/5}
.profil-foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.profil-foto .pic.empty{display:grid;place-items:center;height:100%;font-family:var(--mono);
  font-size:.8rem;color:var(--muted)}
.profil-body{display:grid;gap:1.1rem;align-content:start}
.profil-body h1{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em}
.profil-unvan{font-family:var(--mono);font-size:.9rem;color:var(--plum)}
.profil-body .binfo-row dt{color:var(--plum);min-width:70px}
.profil-body .binfo-row{color:var(--ink)}
.profil-ek{margin-top:clamp(2rem,4vw,3rem);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.post-kisa{color:var(--muted);font-size:.95rem}

@media(max-width:900px){
  .prose-wrap{grid-template-columns:1fr}
  .aside{position:static}
  .sube-top{grid-template-columns:1fr}
  .sube-row{grid-template-columns:1fr}
  .profil-grid{grid-template-columns:1fr}
  .profil-foto{max-width:320px}
}

.kadro-tumu{margin-top:2rem;display:flex;justify-content:center}

/* şube adının yanındaki YENİ etiketi */
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;background:var(--marigold);
  color:var(--plum-ink);padding:.2rem .45rem;border-radius:100px;flex:none;white-space:nowrap}

/* dar ekranda gereksiz yatay kaydırma çubuğu çıkmasın */
.picker{scrollbar-width:thin}
.picker::-webkit-scrollbar{height:0}

/* sürüklenebilir alanlar: fare imleci bunu belli etsin */
.hero,.bshow{cursor:grab}
.hero.is-dragging,.bshow.is-dragging{cursor:grabbing;user-select:none}
.hero.is-dragging *,.bshow.is-dragging *{user-select:none;pointer-events:none}
.hero a,.hero button,.bshow a,.bshow button{cursor:pointer}


/* ═══════════════════════════════════════════════════════════════
   DERİN DİSLEKSİ TEMASI
   Disleksi şubesinin kendi logosu ve kendi rengi var (logodan
   örneklendi: #90C838). O şubenin sayfasında vurgu rengi yeşile
   dönüyor; koyu zemin Derin kimliği olarak kalıyor. Metin ve
   düğmelerde parlak yeşil değil, okunabilir koyu yeşil kullanılıyor.
   ═══════════════════════════════════════════════════════════════ */
[data-tema="disleksi"]{
  /* Hepsi logodaki #90C838 yeşilinin kendi tonundan (H=80°) türetildi.
     Parlak yeşil beyaz üstünde okunmuyor (1.9:1), o yüzden yazı ve
     bağlantılarda aynı rengin koyusu kullanılıyor; düğmeler, vurgular
     ve koyu zeminlerde logonun yeşili birebir duruyor.               */
  --plum:#4E7A15;            /* açık zeminde yazı, bağlantı, etiket */
  --plum-deep:#3A5B0F;
  --plum-ink:#16240A;        /* koyu zemin — yeşilin kendi koyusu */
  --marigold:#90C838;        /* logo yeşili: vurgu ve düğme */
  --shell:#F2F7E9;
  --line:#DAE6C6;
}
[data-tema="disleksi"] .phead{background:var(--plum-ink)}
[data-tema="disleksi"] .staff{background:var(--plum-ink)}
[data-tema="disleksi"] footer.site{background:var(--plum-ink)}
[data-tema="disleksi"] .btn-primary{background:#90C838;color:#16240A}
[data-tema="disleksi"] .btn-primary:hover{background:#7FB52C;color:#16240A}
[data-tema="disleksi"] .btn-amber{background:#90C838;color:#16240A}
[data-tema="disleksi"] .badge{border-color:rgba(144,200,56,.6);color:#90C838}
[data-tema="disleksi"] .modal-close:hover{background:var(--plum)}
[data-tema="disleksi"] .logo{height:54px}
[data-tema="disleksi"] .dept-count,
[data-tema="disleksi"] .kadro-sube-meta,
[data-tema="disleksi"] .staff .bnav-n{color:#90C838}
[data-tema="disleksi"] .person .role{color:#A8DA55}   /* koyu yeşil üstünde daha okunur */
[data-tema="disleksi"] .crumb a:hover{color:#90C838;border-color:#90C838}

/* sertifika rozeti ve simgesi */
.sert-ikon{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:.3rem}
.person--belgeli .go-profile{opacity:1;color:var(--marigold);display:flex;align-items:center;gap:.1rem}
.person--belgeli:hover .go-profile{color:#fff}
.person--belgeli{outline:1px solid rgba(242,160,8,.35)}

/* ═══ Instagram akışı ═══════════════════════════════════════════
   Gerçek Instagram gömme kutuları hem ağır hem çirkin; onun yerine
   kareler panelden yönetiliyor, her kare gönderiye bağlanıyor.     */
.insta{background:var(--plum-ink);color:#fff}
.insta .section-head p{color:#D9C4DF}
.insta .eyebrow{color:var(--marigold)}
.insta-bas{display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.insta-bas .section-head{margin-bottom:0}
.insta-bas .btn{margin-left:auto}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
/* Sütun sayısı sabit: kendiliğinden sığdırınca 5+1 gibi kırılıyor ve
   son kare tek başına kalıyordu.                                    */
@media(max-width:1000px){.insta-grid{grid-template-columns:repeat(3,1fr)}}
.insta-kare{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;display:block;
  background:var(--plum-deep);text-decoration:none}
.insta-kare img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease}
.insta-kare:hover img{transform:scale(1.06)}
.insta-kare::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,4,26,.75),transparent 55%);opacity:0;transition:opacity .3s ease}
.insta-kare:hover::after{opacity:1}
.insta-yazi{position:absolute;inset:auto .85rem .8rem;z-index:2;font-size:.82rem;line-height:1.45;
  color:#fff;opacity:0;transform:translateY(6px);transition:.3s ease;overflow-wrap:anywhere}
.insta-kare:hover .insta-yazi{opacity:1;transform:none}
.insta-simge{position:absolute;top:.7rem;right:.7rem;z-index:2;width:22px;height:22px;color:#fff;
  opacity:.85;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
@media(max-width:520px){
  .insta-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .insta-bas .btn{margin-left:0;width:100%}
}


/* ── Menüdeki açılır kadro listesi ──────────────────────────────
   Beş şubenin kadrosu tek sayfada birbirine karışıyordu. Artık her
   şubenin kendi kadro sayfası var; menüde küçük fotoğraflarıyla
   listeleniyorlar.                                                */
.nav-alt{position:relative;display:flex;align-items:center}
.nav-ac{background:none;border:0;cursor:pointer;font-family:var(--body);font-size:.95rem;
  color:inherit;padding:.4rem 0;display:inline-flex;align-items:center;gap:.35rem;
  /* düğmeler satır yüksekliğini bağlantılardan farklı hesaplıyor; eşitlenmezse
     yazı birkaç piksel aşağı kayıyor. Dokunma alanı görünmez bir katmanla korunuyor. */
  line-height:1.65;min-height:0;position:relative}
.nav-ac::after{content:"";position:absolute;left:-.35rem;right:-.35rem;top:50%;
  transform:translateY(-50%);height:44px}
.nav-ok{font-size:.7rem;transition:transform .2s ease}
.nav-ac[aria-expanded="true"] .nav-ok{transform:rotate(180deg)}
.nav-ac[aria-current="page"],.nav-ac:hover{color:var(--plum)}
.mm{position:absolute;top:calc(100% + .6rem);left:0;
  width:min(320px,calc(100vw - 2rem));background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:.75rem;box-shadow:0 28px 60px -28px rgba(42,14,48,.45);
  z-index:80;display:grid;gap:.15rem}
/* küçük ok: panelin hangi başlığa ait olduğu belli olsun */
.mm::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;
  background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg)}
.mm[hidden]{display:none}
.mm-bas{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--plum);
  padding:.35rem .6rem .5rem}
.mm-oge{display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem;border-radius:10px;
  text-decoration:none;color:var(--ink);min-height:56px}
.mm-oge:hover{background:var(--shell)}
.mm-ph{width:52px;height:38px;border-radius:8px;overflow:hidden;flex:none;background:var(--plum-deep)}
.mm-ph img{width:100%;height:100%;object-fit:cover}
.mm-yazi{display:grid;line-height:1.3}
.mm-yazi strong{font-family:var(--display);font-size:1rem}
.mm-yazi span{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.mm-tumu{font-family:var(--mono);font-size:.72rem;color:var(--plum);text-decoration:none;
  padding:.6rem;border-top:1px solid var(--line);margin-top:.3rem}
.mm-tumu:hover{color:var(--plum-deep)}
@media(max-width:1020px){
  .nav.open .nav-alt{display:block;width:100%;border-bottom:1px solid var(--line)}
  .nav.open .nav-ac{width:100%;justify-content:space-between;padding:.9rem 0}
  .mm{position:static;transform:none;width:auto;border:0;box-shadow:none;padding:0 0 .75rem}
}

/* kadro özet kartları */
/* Beş şube kartı: hiçbir genişlikte tek başına alta düşmesin diye
   kolon sayısı serbest bırakılmıyor — geniş ekranda beşi bir sırada,
   ortada üçlü (3+2), darda tek sütun.                               */
.kk-grid{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media(min-width:700px){.kk-grid{grid-template-columns:repeat(3,1fr)}}
/* Geniş ekranda ızgara değil, açılan bir şerit: imlecin üzerinde
   olduğu şube genişliyor, diğerleri hafifçe daralıyor. Fotoğraf da
   onunla birlikte büyüdüğü için hangi şubeye baktığınız net oluyor.
   Dokunmatikte ve dar ekranda şerit yok — orada büyütecek imleç yok. */
@media(min-width:1120px){
  .kk-grid{display:flex;align-items:stretch}
  .kk{flex:1 1 0;min-width:0;
    transition:flex-grow .45s cubic-bezier(.33,0,.2,1),border-color .25s ease,box-shadow .25s ease}
  /* Bir şubenin üzerine gelince o kart öne çıkıyor: genişliyor,
     rengi yerinde kalıyor. Diğerleri daralıp soluyor — göz doğrudan
     baktığınız şubeye gidiyor.                                      */
  .kk-grid:hover .kk,.kk-grid:focus-within .kk{flex-grow:.82;opacity:.45;filter:saturate(.45)}
  /* Öne çıkan kartın seçicisi, soldurma kuralından daha ağır olmalı;
     yoksa soldurma onu da yakalıyor ve hiçbir kart büyümüyor.       */
  .kk-grid:hover .kk:hover,.kk-grid:focus-within .kk:focus-within{
    flex-grow:2;opacity:1;filter:none;
    box-shadow:0 34px 60px -34px rgba(42,14,48,.6)}
  .kk:hover{transform:none}
  .kk{transition:flex-grow .45s cubic-bezier(.33,0,.2,1),opacity .3s ease,
    filter .3s ease,border-color .25s ease,box-shadow .3s ease}
  /* dar kalan kartlarda uzun birim adları taşmasın */
  .kk-satir span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:1120px) and (prefers-reduced-motion:reduce){
  .kk-grid:hover .kk,.kk-grid:focus-within .kk,.kk:hover,.kk:focus-within{
    flex-grow:1;opacity:1;filter:none}
}
.kk{display:grid;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.kk:hover,.kk:focus-visible{transform:translateY(-3px);border-color:var(--plum);
  box-shadow:0 20px 44px -30px rgba(42,14,48,.5)}
.kk:hover .kk-ph img,.kk:focus-within .kk-ph img{transform:scale(1.04)}
.kk:hover .kk-ad,.kk:focus-within .kk-ad{color:var(--plum)}
.kk:hover .kk-git,.kk:focus-within .kk-git{color:var(--plum-deep);font-weight:500}
.kk-ph{display:block;aspect-ratio:16/10;background:var(--plum-deep);overflow:hidden}
.kk-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.33,0,.2,1)}
.kk-ic{padding:1rem 1.1rem 1.2rem;display:grid;gap:.45rem}
.kk-ad{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.4vw,1.3rem);
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.kk-n{font-family:var(--mono);font-size:.74rem;color:var(--plum)}
/* Birim adları rakamsız, küçük etiketler hâlinde: "Yönetim 3" gibi
   satırlar küçük şubelerde zayıf duruyordu.                        */
.kk-birim{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.kk-birim-oge{font-size:.78rem;line-height:1.3;color:var(--muted);
  background:var(--shell);border-radius:100px;padding:.3rem .6rem}
.kk-git{font-family:var(--mono);font-size:.74rem;color:var(--plum);margin-top:.5rem}
.kadro-diger{border-top:1px solid rgba(255,255,255,.16);margin-top:2.5rem;padding-top:1.75rem}
.kadro-diger .eyebrow{color:var(--marigold)}
.staff .bnav-n{font-family:var(--mono);font-size:.7rem;color:var(--marigold);margin-left:.3rem}

/* ── Kaydırma hissi ─────────────────────────────────────────────
   Yumuşaklığın üç şartı: (1) giden slayt kaybolmuyor, iki slayt
   birlikte eriyor; (2) arka plandaki yakınlaşma her geçişte
   sıfırlanmıyor, kesintisiz dönüyor — böylece görüntü zıplamıyor;
   (3) tek bir hareket var, alt öğeler ayrıca oynamıyor.
   Sürüklerken sahne parmağı takip ediyor, bırakınca yavaşlayarak
   yerine oturuyor.                                                */
.slides{transform:translateX(calc(var(--dx,0px) * .38));
  transition:transform .65s cubic-bezier(.33,0,.2,1)}
.hero-bg{transform:translateX(calc(var(--dx,0px) * .12));
  transition:transform .85s cubic-bezier(.33,0,.2,1)}
.hero.is-dragging .slides,.hero.is-dragging .hero-bg{transition:none}

/* Yönlü giriş yalnızca konumu oynatıyor. Görünürlük animasyona
   bağlı değil: animasyon herhangi bir sebeple çalışmazsa (sekme arka
   plandayken, sayfa kaydırılıp geri dönüldüğünde) slayt yine görünür
   kalıyor — "bitiş durumunu koru" ayarı slaydı gizli bırakıyordu. */
.slides[data-yon] .slide.is-on{animation:slaytGel .9s cubic-bezier(.33,0,.2,1) forwards}
.slides[data-yon="geri"] .slide.is-on{animation-name:slaytGelGeri}
/* "forwards": animasyon biterse bitiş durumu (görünür) korunur.
   Animasyon hiç çalışmazsa da .is-on kuralı zaten görünür yapıyor. */
@keyframes slaytGel{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes slaytGelGeri{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.hero-bg figure{transition:opacity 1.2s cubic-bezier(.33,0,.2,1)}

/* şube sahnesi aynı davranışta */
.binfo{transform:translateX(calc(var(--dx,0px) * .38));
  transition:transform .65s cubic-bezier(.33,0,.2,1)}
.bstage{transform:translateX(calc(var(--dx,0px) * .12));
  transition:transform .85s cubic-bezier(.33,0,.2,1)}
.bshow.is-dragging .binfo,.bshow.is-dragging .bstage{transition:none}
.bshow[data-yon] .binfo{animation:slaytGel .9s cubic-bezier(.33,0,.2,1) forwards}
.bshow[data-yon="geri"] .binfo{animation-name:slaytGelGeri}
.bslide{transition:opacity 1.2s cubic-bezier(.33,0,.2,1)}
.bslide img{animation:approach 34s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
  .slides,.hero-bg,.binfo,.bstage{transform:none !important}
  .slides[data-yon] .slide.is-on,.bshow[data-yon] .binfo{animation:none}
}

/* form gönderim durumu */
/* Gönderim sonucu: eskiden tek satır soluk yazıydı, gönderdiğini
   anlamayan geri dönüp tekrar dolduruyordu. Artık kutu hâlinde,
   yeşil onay ya da kırmızı uyarı. Boşken hiç yer kaplamıyor, yani
   formun ilk hâlindeki düzen bozulmuyor.                          */
.form-durum{font-family:var(--body);font-size:.95rem;line-height:1.55;
  color:var(--plum);margin:.95rem 0 0;min-height:0}
.form-durum:empty{display:none}
.form-durum.hata{color:#B3261E}
.card .form-durum{text-align:left}

.form-durum--kutu{display:flex;gap:.75rem;align-items:flex-start;
  padding:1rem 1.15rem;border-radius:14px;border:1px solid;border-left-width:4px;
  animation:onayGirisi .45s cubic-bezier(.33,0,.2,1) both}
.form-durum--kutu::before{flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.9rem;font-weight:700;line-height:1;
  color:#fff;margin-top:.05rem}
.form-durum.form-durum--ok{background:#EEF7E4;border-color:#90C838;color:#2C4A12}
.form-durum--ok::before{content:"✓";background:#7CB22F}
.form-durum.form-durum--yanlis{background:#FDECEA;border-color:#E0837A;color:#7A1F17}
.form-durum--yanlis::before{content:"!";background:#C4362B}
.form-durum-baslik{display:block;font-weight:700;font-size:1.02rem;
  letter-spacing:-.01em;margin-bottom:.15rem}
@keyframes onayGirisi{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.form-durum--kutu{animation:none}}

/* ── Videolar ───────────────────────────────────────────────────
   Dikey kartlar ekrana girince sessiz oynar. Instagram'ın gömme
   kutusu kullanılmıyor: hem ağır hem her arayüz değişiminde kırılıyor.
   Videolar kendi sunucumuzda, kontrol bizde.                        */
.reels{background:var(--shell)}
/* Şerit kaydırılabilir bir alan: dört videodan fazlası sığmıyor.
   Kenarlarda soluklaşma devamı olduğunu gösteriyor, masaüstünde
   oklar var, fareyle sürüklenebiliyor, dokunmatikte kendiliğinden. */
.reels-sar{position:relative}
/* Kenarlarda soluklaşma yok: kartların üstüne binen açık bir bant
   gibi duruyordu. Devamı olduğu, okların ve kayan kartların
   kendisinden anlaşılıyor.                                          */
.reels-serit{display:flex;gap:1rem;overflow-x:auto;padding:.25rem .25rem 1rem;
  -webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain}
.reels-serit.suruklenen{cursor:grabbing}
.reels-serit.suruklenen *{pointer-events:none}
.reels-serit::-webkit-scrollbar{height:0}
.reels-serit:focus-visible{outline:3px solid var(--marigold);outline-offset:4px;border-radius:18px}

.reels-ok{position:absolute;top:calc(50% - 34px);z-index:3;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--plum);
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 14px 30px -18px rgba(42,14,48,.6);transition:opacity .2s ease,background .2s ease}
.reels-ok--geri{left:.4rem}
.reels-ok--ileri{right:.4rem}
.reels-ok:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.reels-ok[hidden]{display:none}
@media(hover:none){.reels-ok{display:none}}

/* Ölçü sarmalayıcıda: videolar her kartta aynı boyutta kalıyor.
   Ölçü .reel'de kalınca Instagram bağlantısı olan kart kısalıyor,
   olmayan uzuyordu.                                                */
.reel-kutu{flex:0 0 clamp(190px,22vw,260px);position:relative;
  display:grid;align-content:start;justify-items:center}
.reel{width:100%;position:relative;padding:0;
  border:0;border-radius:16px;overflow:hidden;background:var(--plum-deep);cursor:pointer;
  aspect-ratio:9/16;transition:transform .25s ease,box-shadow .25s ease}
.reel:hover{transform:translateY(-4px);box-shadow:0 22px 48px -26px rgba(42,14,48,.6)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,4,26,.72),transparent 48%)}
.reel-baslik{position:absolute;left:.9rem;right:.9rem;bottom:.85rem;z-index:2;color:#fff;
  font-family:var(--body);font-weight:700;font-size:.95rem;line-height:1.35;text-align:left}
.reel-ses{position:absolute;top:.7rem;right:.7rem;z-index:2;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;background:rgba(20,4,26,.6);color:#fff;padding:.3rem .55rem;border-radius:100px}

.tanitim{padding-block:clamp(3rem,6vw,5rem)}
.tanitim-kutu{position:relative;border-radius:var(--r);overflow:hidden;background:var(--plum-ink);
  aspect-ratio:16/9}
.tanitim-kutu video{width:100%;height:100%;object-fit:cover;display:block}
.tanitim-ust{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;gap:2rem;
  padding:clamp(1.5rem,4vw,3rem);color:#fff;transition:opacity .4s ease;
  background:linear-gradient(to top,rgba(20,4,26,.85),rgba(20,4,26,.15) 60%)}
.tanitim-ust.gizli{opacity:0;pointer-events:none}
.tanitim-ust .eyebrow{color:var(--marigold)}
.tanitim-ust h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.tanitim-ust .lede{margin-top:.6rem;max-width:46ch;color:#EBDDEF}
.oynat{margin-left:auto;flex:none;width:76px;height:76px;border-radius:50%;border:2px solid #fff;
  background:rgba(255,255,255,.14);cursor:pointer;display:grid;place-items:center;
  transition:background .2s ease,transform .2s ease}
.oynat:hover{background:#fff;transform:scale(1.06)}
.oynat-ok{width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px;transition:border-color .2s ease}
.oynat:hover .oynat-ok{border-left-color:var(--plum-ink)}

.video-pencere{position:fixed;inset:0;z-index:120;background:rgba(20,4,26,.9);display:grid;
  place-items:center;padding:1.5rem}
.video-pencere video{max-width:min(420px,92vw);max-height:88vh;border-radius:16px;background:#000}
.video-kapat{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);flex:none}
.video-kapat:hover{background:#fff;color:var(--plum-ink)}
@media(max-width:700px){
  .tanitim-ust{flex-direction:column;align-items:flex-start;gap:1rem}
  .oynat{margin-left:0;width:64px;height:64px}
}

/* ── Şube kadro sayfası banner'ı ────────────────────────────────
   Bina veya ekip fotoğrafı başlığın arkasına geçiyor; üstüne mordan
   koyuya inen bir perde konuyor ki yazı her fotoğrafta okunsun.     */
.phead--banner{position:relative;overflow:hidden;
  padding-block:clamp(4rem,9vw,7rem) clamp(3rem,6vw,4.5rem)}
.phead-arka{position:absolute;inset:0}
.phead-arka img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Perde yalnızca yazının olduğu sol tarafta koyu; sağa doğru açılıyor,
   böylece bina fotoğrafı görünüyor ama başlık her fotoğrafta okunuyor. */
.phead--banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(28,7,34,.88) 0%,rgba(30,8,36,.6) 32%,
    rgba(42,14,48,.2) 62%,rgba(42,14,48,.06) 100%)}
.phead--banner .wrap{position:relative;z-index:2}
[data-tema="disleksi"] .phead--banner::after{
  background:linear-gradient(102deg,rgba(16,26,8,.92) 0%,rgba(18,30,9,.8) 34%,
    rgba(22,36,10,.42) 66%,rgba(22,36,10,.24) 100%)}

/* ── Personel kartı: isim ve ünvan fotoğrafın üzerinde ──────────
   Fotoğraf kartın tamamını kaplıyor, alttan yükselen mor perdenin
   üzerine isim yazılıyor. Fotoğrafı olmayan kayıtta da aynı düzen
   korunuyor — kartlar aynı boyda kalıyor.                          */
/* Kartlar zeminle aynı morda olunca birbirine karışıyordu: bölümün
   zemini bir tık koyulaştırıldı, kartlara yumuşak gölge ve çok ince
   bir üst hat eklendi. Artık zeminden ayrılıyorlar.                 */
.staff{background:#1D0721}
.person{position:relative;aspect-ratio:5/7;border-radius:14px;overflow:hidden;
  /* zemin bölümle birebir aynı: yuvarlak köşede alttan açık bir tel sızmasın */
  background:#1D0721;border:0;outline:0;background-clip:padding-box;
  /* beyaz iç çizgi kaldırıldı: kart kenarında açık bir hat bırakıyordu */
  box-shadow:0 16px 32px -20px rgba(0,0,0,.85);
  transition:transform .2s ease,box-shadow .25s ease}
.person:hover{background:#1D0721;transform:translateY(-5px);
  box-shadow:0 26px 48px -22px rgba(0,0,0,.9)}
.person .pic{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0;background:#1D0721}
.person .pic img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
/* Portreler farklı yerlerde, çoğu açık duvar önünde çekilmiş: kenar
   parlaklığı 228'e kadar çıkıyor (ölçüldü) ve koyu zeminde beyaz bir
   çerçeve gibi duruyordu. İki önlem: fotoğraf hafifçe yakınlaştırılıp
   duvar payı kırpılıyor, üstüne köşelerden merkeze açılan bir karartma
   biniyor. Yüz temiz kalıyor, kenarlar zeminle birleşiyor.           */
.person .pic img{transform:scale(1.07);transform-origin:center 20%}
.person .pic::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(128% 104% at 50% 28%,
    rgba(29,7,33,0) 34%, rgba(29,7,33,.55) 66%, rgba(29,7,33,1) 97%)}
[data-tema="disleksi"] .person .pic::before{
  background:radial-gradient(128% 104% at 50% 28%,
    rgba(22,36,10,0) 34%, rgba(22,36,10,.55) 66%, rgba(22,36,10,1) 97%)}
.person .pic::after{content:"";position:absolute;inset:0;
  /* perde yalnızca yazının olduğu alt şeridi kapatıyor; yüz açıkta kalıyor */
  /* daha derin ve renkli mor: grimsi ton fotoğrafı boğuyordu */
  /* en alt ton sayfa zeminiyle aynı (29,7,33): kartın alt kenarı zeminden
     açık kalıp çerçeve gibi görünmesin. Renk, üstteki bantta yaşıyor.   */
  background:linear-gradient(to top,rgba(29,7,33,.98) 0%,rgba(34,8,42,.9) 8%,
    rgba(48,11,64,.62) 24%,rgba(48,11,64,.1) 46%,transparent 60%);
  transition:background .3s ease}
.person:hover .pic::after{background:linear-gradient(to top,rgba(29,7,33,.98) 0%,rgba(34,8,42,.92) 8%,
  rgba(48,11,64,.68) 26%,rgba(48,11,64,.18) 52%,transparent 66%)}
.person .who{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem .95rem 1.05rem;
  display:grid;gap:.15rem}
.person h4{font-size:1.02rem;color:#fff;text-shadow:0 1px 12px rgba(20,4,26,.6)}
/* ünvanlar sarı kalıyor: marka vurgusu ve isimden ayrışması için */
.person .role{font-family:var(--mono);font-size:.7rem;color:var(--marigold);line-height:1.45;margin-top:.3rem}
.person .badges{margin-top:.5rem}
.person .go-profile{margin-top:.45rem}
/* sertifikalı kartta çerçeve yerine içeriden ince sarı bir hat */
.person--belgeli{box-shadow:inset 0 0 0 1.5px rgba(242,160,8,.45)}
.dept--yonetim .person h4{font-size:1.18rem}
.dept--yonetim .person .role{font-size:.75rem}
/* Telefonda kartlar tek sütuna düşüyordu: 36 kişilik bir şubede sayfa
   bitmek bilmiyordu. İki sütun hem daha çok yüz gösteriyor hem listeyi
   gezilebilir tutuyor. Bu blok, kart biçiminin son tanımından sonra
   duruyor — daha yukarıda yazıldığında sonraki kurallar eziyordu.   */
@media(max-width:620px){
  .people{grid-template-columns:repeat(2,1fr);gap:.65rem;margin-bottom:1.25rem}
  .person .who{padding:.75rem .7rem .8rem}
  .person h4,.dept--yonetim .person h4{font-size:.88rem;line-height:1.25}
  .person .role,.dept--yonetim .person .role{font-size:.63rem;margin-top:.22rem}
  .person .go-profile{opacity:1;font-size:.62rem;margin-top:.35rem}
}
@media(max-width:380px){
  .person h4,.dept--yonetim .person h4{font-size:.82rem}
}
[data-tema="disleksi"] .person,[data-tema="disleksi"] .person:hover,
[data-tema="disleksi"] .person .pic{background:#16240A}
[data-tema="disleksi"] .person .pic::after{
  background:linear-gradient(to top,rgba(22,36,10,.95) 0%,rgba(22,36,10,.74) 20%,rgba(22,36,10,.12) 44%,transparent 58%)}
[data-tema="disleksi"] .person .role{color:#A8DA55}

/* ── banner alt kenarı ──────────────────────────────────────────
   Fotoğraf sayfa zeminine keskin bir çizgiyle bitiyordu; alta doğru
   erimesi için ikinci bir perde eklendi. Görsel ölçüsü ne olursa
   olsun alanı kaplıyor (cover), boşluk kalmıyor.                   */
/* metin banner'ın altına yaslanıyor: altta ölü boşluk kalmıyor */
/* Yüklenen şube fotoğrafları 16:9. Alan 4:1'e yakındı, fotoğrafın
   ancak %40'ı kalıyordu — bina tanınmıyordu. Alan artık fotoğrafın
   oranına çok daha yakın.                                          */
.phead--banner{min-height:clamp(320px,38vw,560px);display:flex;align-items:flex-end;
  padding-block:clamp(3.5rem,7vw,5rem) clamp(1.75rem,3.5vw,2.75rem)}
.phead--banner .wrap{width:100%}
/* banner'dan sonraki bölüm üstten bu kadar boşluk istemiyor */
.phead + .section{padding-top:clamp(1.5rem,3vw,2.5rem)}
.phead-arka::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(to top,#1D0721 0%,rgba(29,7,33,.82) 24%,rgba(29,7,33,.3) 60%,transparent)}
[data-tema="disleksi"] .phead-arka::after{
  background:linear-gradient(to top,#16240A 0%,rgba(22,36,10,.82) 24%,rgba(22,36,10,.3) 60%,transparent)}


/* ═══ Disleksi teması: kalan mor yüzeyler ═══════════════════════
   Sekme şeridi ve kadro bölümünün zemini sabit mor kalmıştı; banner
   yeşile inerken şerit morda kalınca ortada keskin bir bant oluşuyordu. */
[data-tema="disleksi"] .sticky-nav,
[data-tema="disleksi"] .staff,
[data-tema="disleksi"] .phead{background:#16240A}
[data-tema="disleksi"] .person,
[data-tema="disleksi"] .person:hover,
[data-tema="disleksi"] .person .pic{background:#16240A}
[data-tema="disleksi"] .person .pic::after{
  background:linear-gradient(to top,rgba(22,36,10,.98) 0%,rgba(26,42,12,.9) 8%,
    rgba(38,60,16,.62) 24%,rgba(38,60,16,.1) 46%,transparent 60%)}
[data-tema="disleksi"] .dept{border-top-color:rgba(168,218,85,.22)}
[data-tema="disleksi"] .dept-caret{border-color:rgba(168,218,85,.35)}
[data-tema="disleksi"] .kadro-diger{border-top-color:rgba(168,218,85,.22)}

/* ═══ Yönetim kadrosu ═══════════════════════════════════════════
   Diğer birimlerle aynı kart düzeni: yan yana, aynı boyda. Ayrı bir
   düzen denendi ama gereksiz yer kaplıyordu; tek fark, kurucuların
   kartında ince bir sarı üst hat olması.                            */
.dept--yonetim .person.kademe-0::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--marigold);z-index:3}
[data-tema="disleksi"] .dept--yonetim .person.kademe-0::after,
.staff.tema-disleksi .dept--yonetim .person.kademe-0::after{background:#90C838}

/* ═══ Google yorum çağrısı ══════════════════════════════════════
   Şubelerin İşletme Profili açık; asıl eksik yorum sayısı. Bu blok
   sayfayı bölmeden, ziyaretçiyi doğrudan yorum yazma ekranına
   götürüyor. Yıldızlar bir puanı temsil etmiyor, çağrının işareti —
   bu yüzden sayfada uydurma bir puan ya da yorum sayısı yazmıyor.  */
.yorum-cagri{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.1rem;
  padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--shell);text-decoration:none;color:var(--ink);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.yorum-cagri:hover{border-color:var(--marigold);transform:translateY(-1px);
  box-shadow:0 12px 24px -18px rgba(42,14,48,.5)}
.yorum-cagri strong{display:block;font-size:1rem;margin-bottom:.15rem}
.yorum-cagri span:last-child{font-size:.9rem;color:var(--muted);line-height:1.5}
.yorum-yildiz{color:var(--marigold);font-size:.95rem;letter-spacing:.05em;
  flex:none;margin-top:.15rem}
.il-yorum{color:var(--plum)}
/* Ana sayfada veli görüşlerinin altındaki değerlendirme çağrısı.
   Kendi zemininde duran bir kutu: görüşleri okuyan ziyaretçi zaten
   değerlendirme kafasında. Yine de randevu düğmesinin önüne
   geçmiyor — ilk kez gelen kişinin işi yorum yazmak değil.        */
/* Değerlendirme çağrısı: sayfadaki tek koyu ada. Etrafındaki her şey
   açık zeminde olduğu için kendiliğinden öne çıkıyor, büyütmeye gerek
   kalmıyor. Yıldızlar bölüm görününce sırayla doluyor — sayfada tek
   hareketli an burası, o yüzden dikkat çekiyor ama yormuyor.       */
.yorum-kutu{position:relative;overflow:hidden;margin-top:2.75rem;
  padding:clamp(1.75rem,3.5vw,2.75rem);border-radius:var(--r);
  background:var(--plum-ink);color:#fff;display:grid;gap:.55rem;
  box-shadow:0 30px 60px -40px rgba(42,14,48,.85)}
.yorum-kutu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 92% 8%,rgba(242,160,8,.22),transparent 55%)}
.yorum-kutu > *{position:relative;z-index:1}
.yorum-kutu h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.025em;line-height:1.12}
.yorum-kutu p{margin:0;max-width:58ch;color:#E3D2E8;font-size:1rem;line-height:1.6}

/* Varsayılan durum: her şey görünür. Animasyon yalnızca JS kutuya
   .canli sınıfını verdiğinde devreye giriyor. Görünürlük animasyona
   bağlanırsa, animasyon herhangi bir sebeple çalışmadığında düğmeler
   kayboluyor — slider'da bir kez yaşadığımız hata buydu.            */
.yorum-yildiz{display:flex;gap:.22rem;font-size:1.15rem;line-height:1;margin-bottom:.3rem}
.yorum-yildiz .yildiz{color:var(--marigold)}
.yorum-kutu.canli .yildiz{color:rgba(255,255,255,.22)}
/* Rengi sınıf veriyor, animasyon yalnızca dolma anını süslüyor:
   animasyon çalışmasa da yıldızlar sarıya dönüyor.                 */
.yorum-kutu.canli.gorunur .yildiz{color:var(--marigold);
  animation:yildizDol .5s cubic-bezier(.34,1.4,.5,1) var(--g,0ms) both}
@keyframes yildizDol{
  0%{color:rgba(255,255,255,.22);transform:scale(1)}
  55%{color:var(--marigold);transform:scale(1.35)}
  100%{color:var(--marigold);transform:scale(1)}}

.yorum-secim{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.yorum-secim a{font-weight:700;font-size:.9rem;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.35);
  border-radius:100px;padding:.7rem 1.2rem;min-height:46px;
  display:inline-flex;align-items:center;
  /* transform bilerek geçişte değil: sınıf değişince anında son
     değerine gitsin, yarım kalmış bir geçişte takılmasın.     */
  transition:background .2s ease,color .2s ease,border-color .2s ease}
/* Düğmeler hiçbir zaman saydam değil; yalnızca hafifçe aşağıdan
   geliyorlar. Animasyon çalışmazsa 8 piksel aşağıda dururlar, kaybolmazlar. */
.yorum-kutu.canli .yorum-secim a{transform:translateY(8px)}
.yorum-kutu.canli.gorunur .yorum-secim a{transform:none;
  animation:dugmeGel .45s cubic-bezier(.33,0,.2,1) var(--g,0ms) both}
@keyframes dugmeGel{from{transform:translateY(8px)}to{transform:none}}
/* Animasyon bittiğinde (ya da hiç çalışmadıysa yedek zamanlayıcıyla)
   kutu .bitti alıyor: son durum sınıfla sabitleniyor.              */
.yorum-kutu.canli.gorunur.bitti .yildiz{color:var(--marigold);animation:none}
.yorum-kutu.canli.gorunur.bitti .yorum-secim a{transform:none;animation:none}
.yorum-secim a:hover{background:var(--marigold);border-color:var(--marigold);
  color:var(--plum-ink);transform:translateY(-2px)}
@media(max-width:620px){
  .yorum-secim a{font-size:.85rem;padding:.65rem 1rem}
}
@media(prefers-reduced-motion:reduce){
  .yorum-kutu.canli .yildiz{color:var(--marigold);animation:none}
  .yorum-kutu.canli .yorum-secim a{transform:none;animation:none}
}
.il-yorum{color:var(--plum)}
/* Ana sayfada veli görüşlerinin altındaki değerlendirme çağrısı.
   Kendi zemininde duran bir kutu: görüşleri okuyan ziyaretçi zaten
.binfo-yorum{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-family:var(--mono);font-size:.78rem;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);width:fit-content;
  transition:color .2s ease,border-color .2s ease}
.binfo-yorum span{color:var(--marigold);font-size:.95rem}
.binfo-yorum:hover{color:var(--marigold);border-color:var(--marigold)}
@media(max-width:620px){
  .yorum-secim a{font-size:.76rem;padding:.55rem .8rem}
}
[data-tema="disleksi"] .yorum-cagri:hover{border-color:#90C838}
[data-tema="disleksi"] .yorum-yildiz{color:#7CA82F}

/* ═══ Hizmet ve iletişim kutuları ═══════════════════════════════
   Hepsi aynı beyaz kutuydu, göz nereye bakacağını seçemiyordu.
   Her kutu sırayla değişen çok hafif bir mor tonda ve sol kenarında
   ince bir renk şeridiyle ayrışıyor.                                */
.hz-card,.il-card{position:relative;background:var(--paper);overflow:hidden}
.hz-card::before,.il-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--plum);opacity:.55;transition:opacity .2s ease,width .2s ease}
.hz-card:hover::before,.il-card:hover::before{opacity:1;width:6px}
.hz-grid > .hz-card:nth-child(3n+2),.il-grid > .il-card:nth-child(3n+2){background:#FBF4F7}
.hz-grid > .hz-card:nth-child(3n),.il-grid > .il-card:nth-child(3n){background:#F7F1F4}
.hz-grid > .hz-card:nth-child(3n+2)::before,.il-grid > .il-card:nth-child(3n+2)::before{background:var(--marigold)}
.hz-grid > .hz-card:nth-child(3n)::before,.il-grid > .il-card:nth-child(3n)::before{background:var(--plum-deep)}
.hz-card,.il-card{padding-left:clamp(1.5rem,2.2vw,1.9rem)}
/* yeni şube kartı öne çıksın */
/* Yeni şube kartı: çerçeve ile sol şerit birbirine giriyordu.
   Şeridi kaldırıp yalnızca sarı çerçeve bırakıldı.               */
.il-card:has(.tag){box-shadow:0 0 0 2px var(--marigold);background:var(--paper)}
.il-card:has(.tag)::before{display:none}
.il-card:has(.tag){padding-left:clamp(1.35rem,2vw,1.75rem)}

/* ═══ Instagram kareleri: gerçek gönderi oranı ══════════════════ */

/* ═══ Video bölümü: alttaki fazla boşluk ═══════════════════════ */
.reels{padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.reels + .section{padding-top:clamp(2.5rem,5vw,4rem)}

/* ═══ Anasayfada Disleksi seçilince bölüm yeşile döner ═════════ */
.staff.tema-disleksi{background:#16240A}
.staff.tema-disleksi .eyebrow,.staff.tema-disleksi .dept-count,
.staff.tema-disleksi .bnav-n,.staff.tema-disleksi .kadro-sube-meta{color:#90C838}
.staff.tema-disleksi .pick[aria-selected="true"]{border-color:#90C838;background:rgba(144,200,56,.14)}
.staff.tema-disleksi .pick[aria-selected="true"] .pick-n{color:#90C838}
.staff.tema-disleksi .person,.staff.tema-disleksi .person:hover,
.staff.tema-disleksi .person .pic{background:#16240A}
.staff.tema-disleksi .person .pic::after{
  background:linear-gradient(to top,rgba(22,36,10,.98) 0%,rgba(26,42,12,.9) 8%,
    rgba(38,60,16,.62) 24%,rgba(38,60,16,.1) 46%,transparent 60%)}
.staff.tema-disleksi .person .role{color:#A8DA55}
.staff.tema-disleksi .dept{border-top-color:rgba(168,218,85,.22)}
.staff.tema-disleksi .btn-amber{background:#90C838;color:#16240A}
.staff.tema-disleksi .dept--yonetim .person .pic{
  box-shadow:0 0 0 3px #16240A, 0 0 0 5px rgba(144,200,56,.55), 0 14px 26px -14px rgba(0,0,0,.9)}
.staff.tema-disleksi .dept--yonetim .people::before{
  background:linear-gradient(90deg,transparent,rgba(144,200,56,.45) 12%,rgba(144,200,56,.45) 88%,transparent)}

/* profil sayfasında sertifika dosyası bağlantısı */

/* iletişim sayfasında form kartlara yapışmıştı */
.il-grid + *,
.section.forms.pt0{padding-top:clamp(2.5rem,5vw,4rem)}
.forms .form-grid{margin-top:.5rem}

/* ── Belgeli kartta yazılar taşmasın ────────────────────────────
   Rozetler ve "sertifikaları görüntüleyin" satırı fotoğrafın üstüne
   biniyordu. Perde bu kartlarda biraz yukarı çekiliyor, rozetler tek
   satırda kırpılıyor.                                              */
.person--belgeli .pic::after{
  background:linear-gradient(to top,rgba(29,7,33,.98) 0%,rgba(34,8,42,.94) 18%,
    rgba(48,11,64,.7) 38%,rgba(48,11,64,.12) 58%,transparent 70%)}
.person--belgeli .who{padding-bottom:.85rem}
.person--belgeli .badges{flex-wrap:nowrap;overflow:hidden;gap:.25rem}
.person--belgeli .badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9.5rem;
  font-size:.58rem;padding:.15rem .4rem}
.person--belgeli .go-profile{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person--belgeli h4{font-size:.97rem}
.person--belgeli .role{font-size:.66rem;margin-top:.2rem}

/* ── Şube listesinde fotoğraf daha geniş ───────────────────────── */
.sube-row{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
@media(max-width:900px){.sube-row{grid-template-columns:1fr}}

/* ── Profil sayfası: sağ sütun ──────────────────────────────────
   Masaüstünde sağ taraf boş kalıyordu; bilgi kutuları oraya taşındı. */
.profil-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(260px,320px)}
.profil-grid .profil-ek{grid-column:3;grid-row:1;margin-top:0;display:grid;gap:1rem;
  grid-template-columns:1fr;align-content:start}
.aside-cta{background:var(--plum-ink);color:#fff;border-color:var(--plum-ink)}
.aside-cta h3{color:#fff}
.aside-cta p{color:#E3D2E8}
@media(max-width:1100px){
  .profil-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .profil-grid .profil-ek{grid-column:1/-1;grid-row:auto;margin-top:2rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media(max-width:900px){.profil-grid{grid-template-columns:1fr}}

/* ── Hizmet kartları: arkada görsel ─────────────────────────────
   Düz beyaz kutular soğuk kalıyordu. Görsel yüklenen hizmette kart
   fotoğrafın üstüne kuruluyor; yüklenmeyende eski sade hali sürüyor,
   yani karışık bir liste bile düzenli görünüyor.                   */
.hz-card--foto{padding:0;min-height:230px;color:#fff;border-color:transparent;
  display:grid;align-items:end;overflow:hidden}
.hz-card--foto::before{z-index:3}
.hz-ph{grid-area:1/1;display:block;height:100%;overflow:hidden}
.hz-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hz-card--foto:hover .hz-ph img{transform:scale(1.05)}
.hz-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(29,7,33,.94) 6%,rgba(42,14,48,.72) 42%,rgba(42,14,48,.18) 78%)}
.hz-card--foto{position:relative}
.hz-ic{grid-area:1/1;position:relative;z-index:2;align-self:end;
  padding:clamp(1.2rem,2vw,1.6rem);display:grid;gap:.45rem}
.hz-card--foto h3{color:#fff}
.hz-card--foto p{color:#EBDDEF}
.hz-card--foto .hz-go{color:var(--marigold)}
.hz-card--foto:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(42,14,48,.7)}
.hz-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.nav-ac{text-decoration:none}
.nav-ac::after{display:none !important}

/* profil kutuları artık ızgaranın içinde: sağ sütuna otururlar */
.profil-ek{grid-column:3;grid-row:1;margin-top:0;display:grid;gap:1rem;align-content:start}
@media(max-width:1100px){
  .profil-ek{grid-column:1/-1;grid-row:auto;margin-top:2rem;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}

/* sertifika satırı kartta tek başına: daha okunur */
.person--belgeli .go-profile{font-size:.72rem;opacity:1;color:var(--marigold);margin-top:.55rem}
.person--belgeli .who{padding-bottom:.95rem}

/* güvenlik ağı: aktif slayt animasyondan bağımsız olarak görünür */
.slide.is-on{opacity:1 !important}
.slide:not(.is-on){opacity:0}

/* ── Kapalı birimlerde "açılabilir" vurgusu ─────────────────────
   Kapalı bir başlığın açılabildiği anlaşılmıyordu. Ok halkası yavaşça
   nabız gibi atıyor ve yanında küçük bir ipucu yazısı beliriyor;
   başlık açılınca ikisi de duruyor. Hareketi azalt ayarı açıksa
   nabız çalışmaz, yalnızca sarı çerçeve kalır.                     */
@keyframes birimNabzi{
  0%{box-shadow:0 0 0 0 rgba(242,160,8,.5)}
  70%{box-shadow:0 0 0 12px rgba(242,160,8,0)}
  100%{box-shadow:0 0 0 0 rgba(242,160,8,0)}
}
.dept-head[aria-expanded="false"] .dept-caret{
  border-color:rgba(242,160,8,.75);color:var(--marigold);
  animation:birimNabzi 2.4s ease-out infinite}
.dept-head[aria-expanded="false"]:hover .dept-caret{background:rgba(242,160,8,.16)}
.dept-head[aria-expanded="false"] .dept-title::after{
  content:" · açmak için dokunun";color:#C6ADCF;font-size:.72rem;font-family:var(--mono);
  font-weight:400;letter-spacing:.02em;white-space:nowrap}
@media(max-width:560px){.dept-head[aria-expanded="false"] .dept-title::after{content:none}}
.dept-head[aria-expanded="true"] .dept-caret{animation:none}
[data-tema="disleksi"] .dept-head[aria-expanded="false"] .dept-caret,
.staff.tema-disleksi .dept-head[aria-expanded="false"] .dept-caret{
  border-color:rgba(144,200,56,.75);color:#90C838}
[data-tema="disleksi"] .dept-head[aria-expanded="false"] .dept-caret{
  animation-name:birimNabziYesil}
@keyframes birimNabziYesil{
  0%{box-shadow:0 0 0 0 rgba(144,200,56,.5)}
  70%{box-shadow:0 0 0 12px rgba(144,200,56,0)}
  100%{box-shadow:0 0 0 0 rgba(144,200,56,0)}
}
@media(prefers-reduced-motion:reduce){
  .dept-head[aria-expanded="false"] .dept-caret{animation:none}
}

/* Dar ekranda yazı fotoğrafın üstüne biniyor; yatay perde orada işe
   yaramıyor, perde aşağıdan yukarı çalışsın.                        */
@media(max-width:760px){
  .phead--banner{min-height:clamp(300px,74vw,460px)}
  .phead--banner::after{background:linear-gradient(to top,rgba(28,7,34,.94) 0%,
    rgba(30,8,36,.7) 34%,rgba(42,14,48,.22) 68%,rgba(42,14,48,.1) 100%)}
  [data-tema="disleksi"] .phead--banner::after{background:linear-gradient(to top,
    rgba(16,26,8,.94) 0%,rgba(18,30,9,.7) 34%,rgba(22,36,10,.22) 68%,rgba(22,36,10,.1) 100%)}
}

/* ═══ Rakamlar ══════════════════════════════════════════════════
   Sayfanın iki ucuna yaslanan bant her kurumsal sitede var. Burada
   rakamlar ortada duran, köşeleri yumuşak koyu bir kartın içinde;
   kart açık zeminin üstünde yüzüyor. İçinde kare kutucuklar, her
   birinde rakam, etiketi ve ne anlama geldiğini söyleyen bir cümle. */
/* Zemin komşu bölümlerle aynı: aradaki ton farkı dikiş gibi duruyordu. */
.sayi-bolum{background:var(--shell);padding-block:clamp(2rem,4vw,3.25rem)}
/* Kutular kendi renklerini taşıdığı için altlarında koyu bir zemine
   gerek kalmadı: renkler açık sayfa üstünde daha parlak duruyor.
   Yalnızca panelden arka görsel verilirse koyu kart geri geliyor —
   fotoğrafın üstünde yazının okunması için gerekiyor.               */
.sayi-kart{position:relative}
.sayi-kart--arka{overflow:hidden;color:#fff;background:var(--plum-ink);
  border-radius:clamp(22px,2.6vw,34px);padding:clamp(1.5rem,3vw,2.75rem);
  box-shadow:0 40px 80px -50px rgba(42,14,48,.8)}
.sayi-kart--arka::before{content:"";position:absolute;inset:0;background-image:var(--arka,none);
  background-size:cover;background-position:center 40%;opacity:.2}
.sayi-kart--arka::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 110% at 90% -15%,rgba(242,160,8,.22),transparent 62%)}
.sayi-kart > *{position:relative;z-index:1}

.sayi-serit{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1.15rem)}
/* Her kutu kendi renginde. Renk panelden seçiliyor; seçilmezse sarı,
   mor, yeşil, koyu mor diye sırayla dağılıyor. Renkler markanın kendi
   renkleri — dışarıdan renk katmıyoruz.                             */
.sayi{border-radius:16px;padding:clamp(1rem,1.8vw,1.45rem);
  display:grid;gap:.25rem;align-content:end;aspect-ratio:1/.92;
  transition:transform .3s ease,box-shadow .3s ease}
.sayi:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(0,0,0,.7)}
.sayi-deger{font-family:var(--display);font-weight:700;line-height:.85;
  font-size:clamp(2.1rem,3.4vw,3.1rem);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.sayi-etiket{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;margin-top:.45rem}
.sayi-not{font-size:.86rem;line-height:1.45;margin-top:.3rem}

.sayi--sari{background:var(--marigold);color:var(--plum-ink)}
.sayi--sari .sayi-etiket{color:rgba(42,14,48,.72)}
.sayi--sari .sayi-not{color:rgba(42,14,48,.8)}

.sayi--mor{background:#8E38A0;color:#fff}
.sayi--mor .sayi-etiket{color:#FFD98A}
.sayi--mor .sayi-not{color:#F0E1F4}

.sayi--yesil{background:#90C838;color:#17240A}
.sayi--yesil .sayi-etiket{color:rgba(23,36,10,.72)}
.sayi--yesil .sayi-not{color:rgba(23,36,10,.82)}

.sayi--koyu{background:#4A1250;color:#fff}
.sayi--koyu .sayi-etiket{color:var(--marigold)}
.sayi--koyu .sayi-not{color:#E3D2E8}
.sayi-imza{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--plum);
  margin:0 0 clamp(1rem,2vw,1.5rem)}
.sayi-kart--arka .sayi-imza{color:#B79FC0}

@media(max-width:900px){
  .sayi-serit{grid-template-columns:repeat(2,1fr)}
  .sayi{aspect-ratio:1/.78}
}
@media(max-width:480px){
  .sayi{aspect-ratio:auto;min-height:128px}
  .sayi-not{font-size:.82rem}
}
[data-tema="disleksi"] .sayi-kart{background:#16240A}
[data-tema="disleksi"] .sayi-etiket{color:#90C838}
[data-tema="disleksi"] .sayi:hover .sayi-deger{color:#90C838}

/* ═══ Hakkımızda ════════════════════════════════════════════════
   Kurumun hikâyesi solda, fotoğraf sağda. Altındaki üç madde
   (değerler, misyon, vizyon) eşit sütunlarda. Numara koymuyoruz:
   bunlar bir sıra değil, üç ayrı başlık.                          */
.hakkimizda{background:var(--shell)}
.hk-ust{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.hk-ust.hk-fotolu{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hk-metin{display:grid;gap:.9rem;max-width:62ch}
.hk-metin h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.035em;line-height:1.05;
  margin-bottom:.35rem}
.hk-metin p{margin:0;font-size:clamp(1rem,.4vw + .95rem,1.12rem);line-height:1.7;color:var(--ink)}
.hk-git{margin-top:.75rem !important}
.hk-foto{border-radius:var(--r);overflow:hidden;background:var(--plum-deep);
  box-shadow:0 34px 64px -40px rgba(42,14,48,.6)}
.hk-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:6/7;display:block}

.ilkeler{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.25rem);
  margin-top:clamp(2.5rem,5vw,4rem)}
.ilke{background:var(--paper);border-radius:var(--r);padding:clamp(1.35rem,2.4vw,1.85rem);
  display:grid;gap:.6rem;align-content:start}
.ilke h3{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.4rem);
  letter-spacing:-.02em;color:var(--plum)}
.ilke p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.65}
@media(max-width:900px){
  .hk-ust.hk-fotolu{grid-template-columns:1fr}
  .hk-foto img{aspect-ratio:16/10}
  .ilkeler{grid-template-columns:1fr}
}
[data-tema="disleksi"] .ilke h3{color:#4C7A12}

/* ═══ Logo şeridi ═══════════════════════════════════════════════
   Şerit soldan sağa akıyor: iki özdeş ray yan yana, biri bitince
   diğeri devam ediyor, dikiş görünmüyor. Logolar gri duruyor,
   üzerine gelince kendi renklerine dönüyor. Animasyon çalışmasa
   bile logolar görünür — akış yalnızca hareket katıyor.            */
.logo-bolum{background:var(--shell);padding-block:clamp(2.25rem,4.5vw,3.5rem);overflow:hidden}
.logo-bas{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.logo-bas .eyebrow{color:var(--plum)}
.logo-not{margin:.4rem 0 0;color:var(--muted);font-size:.95rem;max-width:56ch}

.logo-serit{display:flex;width:100%;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)}
.logo-ray{display:flex;flex:none;align-items:center;
  gap:clamp(1.75rem,4vw,3.5rem);padding-right:clamp(1.75rem,4vw,3.5rem);
  animation:logoKay 34s linear infinite}
.logo-serit:hover .logo-ray{animation-play-state:paused}

/* sağa doğru: ikinci ray soldan gelip birincinin yerini alıyor */
@keyframes logoKay{from{transform:translateX(-100%)}to{transform:translateX(0)}}

.logo-oge{flex:none;display:grid;place-items:center;text-decoration:none;
  height:clamp(48px,6vw,72px);width:clamp(112px,14vw,190px)}
.logo-oge img{max-width:clamp(112px,14vw,190px);max-height:clamp(48px,6vw,72px);
  width:auto;height:auto;
  filter:grayscale(1);opacity:.55;
  transition:filter .35s ease,opacity .35s ease}
.logo-oge:hover img{filter:none;opacity:1}
.logo-yazi{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--muted);
  text-align:center;line-height:1.2}

@media(hover:none){
  /* dokunmatikte imleç yok: logolar kendi renginde dursun */
  .logo-oge img{filter:none;opacity:.9}
}
@media(max-width:620px){
  .logo-ray{gap:1.5rem;padding-right:1.5rem;animation-duration:26s}
  .logo-oge{height:44px;width:104px}
  .logo-oge img{max-height:44px;max-width:104px}
}
@media(prefers-reduced-motion:reduce){
  .logo-serit{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logo-ray{animation:none}
  .logo-ray[aria-hidden="true"]{display:none}
  .logo-oge img{filter:none;opacity:.9}
}

/* ═══ Sertifika listesi ve penceresi ════════════════════════════
   Belgeler satır satır listeleniyor; tıklanınca aynı sayfada açılan
   bir pencerede gösteriliyor (görsel doğrudan, PDF gömülü olarak).
   Bağlantılar yerinde duruyor: JS çalışmazsa dosya yeni sekmede açılır. */
/* minmax(0,1fr): ızgara gözü de içeriğinden dar olabilsin. Yalnızca
   flex öğesini daraltmak yetmiyordu, ızgara satırı geniş kalıyordu. */
.belge-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:minmax(0,1fr)}
.belge-liste li{min-width:0}
/* min-width:0 olmadan uzun belge adı satırı kırmıyor, kutuyu genişletip
   sayfayı sağa taşırıyordu (flex öğeleri içeriğinden dar olamıyor).   */
.belge-bag{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  padding:.7rem .8rem;border-radius:12px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);min-height:52px;min-width:0;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.belge-bag:hover{border-color:var(--plum);transform:translateY(-1px);
  box-shadow:0 14px 26px -22px rgba(42,14,48,.6)}
.belge-bag--yok{opacity:.65;cursor:default}
.belge-bag--yok:hover{border-color:var(--line);transform:none;box-shadow:none}
.belge-ikon{flex:none;width:34px;height:34px;border-radius:9px;background:var(--shell);
  display:grid;place-items:center;color:var(--plum);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em}
.belge-ikon .sert-ikon{width:19px;height:19px}
.belge-ad{flex:1;min-width:0;font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.belge-ac{flex:none;font-family:var(--mono);font-size:.68rem;color:var(--plum);white-space:nowrap}
.belge-bag--yok .belge-ac{color:var(--muted)}

.belge-pop{position:fixed;inset:0;z-index:120;display:none;
  background:rgba(20,4,26,.82);padding:clamp(.75rem,3vw,2rem)}
.belge-pop.acik{display:grid;place-items:center}
.belge-pop-ic{background:var(--paper);border-radius:var(--r);overflow:hidden;
  width:min(900px,100%);max-height:92vh;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto}
.belge-pop-bas{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--line)}
.belge-pop-ad{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.belge-pop-arac{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.belge-pop-dugme{font-family:var(--mono);font-size:.72rem;text-decoration:none;
  border:1px solid var(--line);background:none;border-radius:100px;color:var(--ink);
  padding:.5rem .85rem;min-height:40px;display:inline-flex;align-items:center;cursor:pointer}
.belge-pop-dugme:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.belge-kapat{font-size:1.3rem;line-height:1;width:40px;justify-content:center;padding:0}
.belge-pop-govde{background:var(--shell);display:grid;place-items:center;overflow:auto;min-height:0}
.belge-pop-govde img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block}
.belge-pop-govde iframe{width:100%;height:74vh;border:0;display:block;background:#fff}
.belge-pop-alt{display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:.7rem;border-top:1px solid var(--line)}
.belge-ok{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink)}
.belge-ok:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.belge-sayac{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
@media(max-width:620px){
  .belge-pop-govde iframe{height:62vh}
  .belge-pop-govde img{max-height:62vh}
  .belge-pop-dugme{font-size:.68rem;padding:.45rem .7rem}
}

/* Reels kartının altındaki Instagram bağlantısı: videoyu sitede
   izlemek isteyenle Instagram'da açmak isteyeni ayırıyor.          */
/* Instagram bağlantısı kartın içinde, "Sesi açın" rozetinin karşı
   köşesinde. Kartların altında ayrı düğme olarak durunca şeridin
   ritmini bozuyordu — bazı kartta var bazısında yok.               */
/* Büyük ekranda açılan videonun üst şeridi: kapatma ve — varsa —
   Instagram bağlantısı. Kartların üstünde rozet taşımıyoruz.       */
.video-arac{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  z-index:3;display:flex;align-items:center;gap:.6rem}
.video-insta{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;text-decoration:none;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  border-radius:100px;padding:.55rem 1rem;min-height:42px;display:inline-flex;align-items:center;
  backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,color .2s ease}
.video-insta:hover{background:#fff;color:var(--plum-ink);border-color:#fff}

/* Yan sütundaki kartlar içeriklerinden dar olabilsin: uzun bir metin
   sütunu genişletip sayfayı taşırmasın.                              */
.profil-ek,.profil-ek .aside-card,.aside,.aside-card{min-width:0}
.aside-card > *{min-width:0}

/* ═══ Görüş şeridi ══════════════════════════════════════════════
   Üçten fazla görüş varsa alt alta yığılmak yerine yana kayıyor:
   bölüm hep aynı yükseklikte kalıyor, görüş sayısı artabiliyor.   */
.quotes-sar{position:relative}
.quotes--serit{display:flex;gap:1.5rem;overflow-x:auto;padding:.75rem .5rem 1.5rem;
  -webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain;
  grid-template-columns:none}
.quotes--serit::-webkit-scrollbar{height:0}
.quotes--serit.suruklenen{cursor:grabbing}
.quotes--serit.suruklenen *{pointer-events:none}
.quotes--serit .quote{flex:0 0 min(360px,78vw)}
.quotes--serit:focus-visible{outline:3px solid var(--marigold);outline-offset:4px;border-radius:18px}

/* ═══ Hakkımızda sayfası ════════════════════════════════════════
   Düz paragraf yığını yerine editoryal bir düzen: solda kurumun
   kendi cümlesi büyük punto, sağda hikâye; altında yıl yıl akan
   kuruluş çizgisi ve numaralı ilkeler. Numaralar burada gerçek bir
   sıra: çizgi kronolojik, ilkeler ise okuma sırası veriyor.        */
.hk-giris{background:var(--paper);padding-block:clamp(2.5rem,6vw,5rem)}
.hk-giris-in{display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.hk-alinti{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:-.03em;
  color:var(--plum);text-wrap:balance}
.hk-govde{display:grid;gap:1rem}
.hk-govde p{margin:0;font-size:clamp(1rem,.4vw + .95rem,1.1rem);line-height:1.75;color:var(--ink)}

/* kuruluş çizgisi */
.hk-cizgi{background:var(--shell)}
.kt-liste{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:kt}
.kt{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-top:1px solid var(--line)}
.kt:last-child{border-bottom:1px solid var(--line)}
.kt-yil{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;color:var(--plum);
  font-variant-numeric:tabular-nums}
.kt-ic{display:grid;gap:.5rem;max-width:62ch}
.kt-ic h3{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.45rem);
  letter-spacing:-.02em}
.kt-ic p{margin:0;color:var(--muted);font-size:1rem;line-height:1.7}
.kt:hover .kt-yil{color:var(--marigold);transition:color .3s ease}

/* ilkeler */
.hk-ilke{background:var(--paper)}
.ilke-liste{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.ilke-satir{display:grid;gap:.75rem;align-content:start;
  padding-top:1.25rem;border-top:2px solid var(--plum)}
.ilke-bas{display:flex;align-items:baseline;gap:.75rem}
.ilke-no{font-family:var(--mono);font-size:.78rem;color:var(--marigold);letter-spacing:.08em}
.ilke-satir h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.025em}
.ilke-satir p{margin:0;color:var(--muted);font-size:1rem;line-height:1.7}

@media(max-width:820px){
  .hk-giris-in{grid-template-columns:1fr}
  .kt{grid-template-columns:1fr;gap:.5rem}
  .kt-yil{font-size:2rem}
}
[data-tema="disleksi"] .hk-alinti,[data-tema="disleksi"] .kt-yil{color:#4C7A12}

/* ═══ Profil altındaki şube ekibi şeridi ════════════════════════
   Uzun bir ızgara yerine yana kayan bir şerit: ziyaretçi ekibi
   gezerken sayfayı aşağı doğru uzatmıyoruz. Kartlar kadro
   bölümündekilerle aynı, yalnızca dizilişi farklı.               */
.pd-sar{position:relative}
.pd-serit{display:flex;gap:1rem;overflow-x:auto;margin:0;padding:.25rem .25rem 1rem;
  grid-template-columns:none;cursor:grab;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;list-style:none}
.pd-serit::-webkit-scrollbar{height:0}
.pd-serit.suruklenen{cursor:grabbing}
.pd-serit.suruklenen *{pointer-events:none}
.pd-serit .person{flex:0 0 clamp(160px,18vw,215px)}
.pd-serit:focus-visible{outline:3px solid var(--marigold);outline-offset:4px;border-radius:18px}

/* ═══ Profil altındaki şube ekibi: açık zemin ══════════════════
   Kartlar kadro bölümünde koyu zemine göre kurgulanmıştı; burada
   sayfanın kendi krem zemini sürüyor, o yüzden renkleri çeviriyoruz.
   Bölüm hocanın bilgilerinin hemen altında duruyor.               */
.profil-diger{background:var(--shell);color:var(--ink);
  /* kısa bir bölüm: standart bölüm boşluğu burada sayfayı gereksiz
     uzatıyor, şerit ekrana girmeden kalıyordu */
  padding-block:clamp(2.5rem,5vw,4rem)}
.profil-diger .eyebrow{color:var(--plum)}
/* alt bölüm başlığı: sayfanın kendi başlığı kadar iri olmasına
   gerek yok, küçültünce şerit de ekrana daha çabuk giriyor */
.profil-diger .section-head h2{color:var(--ink);font-size:clamp(1.55rem,2.8vw,2.3rem)}
.profil-diger .section-head p{margin-top:.6rem}
.profil-diger .section-head p{color:var(--muted)}
/* Kartın kendisi fotoğraf + perde: isim beyaz, ünvan sarı kalıyor.
   Yalnızca açık zeminde yüzsün diye hafif bir gölge veriyoruz.      */
.profil-diger .person{box-shadow:0 18px 40px -32px rgba(42,14,48,.75)}
.profil-diger .person:hover{box-shadow:0 26px 48px -28px rgba(42,14,48,.55)}

/* Başlık ile "tüm kadro" düğmesi aynı satırda: düğme sağ üstte
   durunca bölüm toparlanıyor, şerit de yukarı geliyor. Dar ekranda
   alt alta iniyor.                                                  */
.pd-bas{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.25rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.pd-bas .section-head{margin-bottom:0}
.pd-tumu{flex:none}
@media(max-width:640px){.pd-tumu{width:100%;justify-content:center}}

/* ═══ Birim çubuğu: nereye gidildiği belli olsun ═══════════════
   Bulunulan birim çubukta sarıyla yanıyor; tıklanan birim açılıp
   bir an için sarı çerçeveyle işaretleniyor.                     */
.staff .bnav-item[aria-current="true"]{background:var(--marigold);color:#2A0E30}
.staff .bnav-item[aria-current="true"] .bnav-n{color:#2A0E30;opacity:.7}
.staff.tema-disleksi .bnav-item[aria-current="true"],
[data-tema="disleksi"] .staff .bnav-item[aria-current="true"]{background:#90C838;color:#16240A}
[data-tema="disleksi"] .staff .bnav-item[aria-current="true"] .bnav-n{color:#16240A}
/* Önce çerçeve, sonra zemin denedik: ikisi de sayfada koca bir kutu
   bırakıyordu. Kalan tek iz başlığın kendisi — bir an sarıya çalıp
   normale dönüyor, altındaki ince çizgi soldan sağa geçiyor.        */
@keyframes birimVurguYazi{
  0%,45%{color:var(--marigold)}
  100%{color:#fff}
}
@keyframes birimVurguCizgi{
  0%{transform:scaleX(0);opacity:1}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
.dept--vurgu > .dept-head .dept-title{animation:birimVurguYazi 1.6s ease-out 1;
  position:relative}
.dept--vurgu > .dept-head .dept-title::before{content:"";position:absolute;
  left:0;right:0;bottom:-.3rem;height:2px;background:var(--marigold);
  transform-origin:left;animation:birimVurguCizgi 1.6s ease-out 1}
@media(prefers-reduced-motion:reduce){
  .dept--vurgu > .dept-head .dept-title{animation:none}
  .dept--vurgu > .dept-head .dept-title::before{animation:none;opacity:0}
}

/* Dar telefonda "Sertifikaları görüntüleyin" satırı tek satıra
   sığmayıp üç noktayla kesiliyordu. Kesmek yerine ikinci satıra
   sarıyoruz. Bu blok dosyanın sonunda: aynı seçicinin yukarıdaki
   nowrap tanımı sonradan geldiği için orada ezilmişti.            */
@media(max-width:620px){
  .person--belgeli .go-profile{white-space:normal;overflow:visible;
    text-overflow:clip;line-height:1.3;align-items:flex-start}
}

/* ═══ İş ilanları (kariyer sayfası) ════════════════════════════
   Kart başına bir pozisyon. Düğme aşağıdaki formu o ilana ayarlıyor,
   ziyaretçinin ayrıca "hangi ilana başvuruyorum" yazması gerekmiyor. */
.ilanlar{background:var(--shell)}
.ilan-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:1.25rem;align-items:start}
.ilan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;
  transition:transform .3s cubic-bezier(.33,0,.2,1),box-shadow .3s ease,border-color .3s ease}
.ilan:hover{transform:translateY(-4px);border-color:var(--plum);
  box-shadow:0 26px 50px -32px rgba(42,14,48,.5)}
.ilan-ust{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ilan-tur{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  padding:.28rem .6rem;border-radius:100px;background:rgba(128,48,136,.1);color:var(--plum)}
.ilan-tarih{font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.ilan h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
.ilan-sube{display:flex;flex-wrap:wrap;gap:.3rem;margin:0}
.ilan-sube span{font-family:var(--mono);font-size:.63rem;letter-spacing:.04em;
  padding:.18rem .5rem;border:1px solid rgba(242,160,8,.5);color:#9A6300;border-radius:100px}
.ilan-ozet{color:var(--muted);line-height:1.65;margin:0}
.ilan-nitelik{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.ilan-nitelik li{position:relative;padding-left:1.15rem;font-size:.94rem;line-height:1.55}
.ilan-nitelik li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--marigold)}
.ilan-bas{margin-top:auto;align-self:flex-start}
/* forma gelindiğinde ilan alanı bir an için işaretleniyor */
@keyframes ilanSecildi{
  0%{box-shadow:0 0 0 0 rgba(242,160,8,.55)}
  100%{box-shadow:0 0 0 14px rgba(242,160,8,0)}
}
.ilan-secildi{animation:ilanSecildi 1.4s ease-out 1;border-color:var(--marigold) !important}
@media(prefers-reduced-motion:reduce){.ilan-secildi{animation:none}}

/* İlan afişi: sosyal medya görseli kartın üstünde, 4:5 dikey. */
.ilan--afisli{padding:0;overflow:hidden}
.ilan--afisli > .ilan-ust,
.ilan--afisli > h3,
.ilan--afisli > .ilan-sube,
.ilan--afisli > .ilan-ozet,
.ilan--afisli > .ilan-nitelik,
.ilan--afisli > .ilan-bas{margin-inline:1.6rem}
.ilan--afisli > .ilan-ust{margin-top:1.4rem}
.ilan--afisli > .ilan-bas{margin-bottom:1.5rem}
.ilan-afis{display:block;width:100%;padding:0;border:0;background:var(--shell);
  cursor:zoom-in;position:relative;aspect-ratio:4/5;overflow:hidden;line-height:0}
.ilan-afis img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.33,0,.2,1)}
.ilan-afis:hover img{transform:scale(1.03)}
.ilan-afis-buyut{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(20,4,26,.85),transparent);
  opacity:0;transition:opacity .25s ease;line-height:1.4;text-align:left}
.ilan-afis:hover .ilan-afis-buyut,
.ilan-afis:focus-visible .ilan-afis-buyut{opacity:1}
@media(hover:none){.ilan-afis-buyut{opacity:1}}
/* afişli kartlar dar kalmasın: görsel iki sütunda daha iyi duruyor */
@media(min-width:760px){
  .ilan-liste{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
}

/* Afiş penceresi */
.afis-pop{position:fixed;inset:0;z-index:130;display:none;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);background:rgba(20,4,26,.92);
  backdrop-filter:blur(6px)}
.afis-pop.acik{display:grid}
.afis-kutu{margin:0;max-width:min(560px,100%);max-height:100%;display:grid;gap:.9rem}
.afis-kutu img{width:100%;height:auto;max-height:78vh;object-fit:contain;
  border-radius:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.afis-kutu figcaption{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  color:#E9CDEF;text-align:center}
.afis-kapat{position:absolute;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(20,4,26,.6);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.afis-kapat:hover{background:#fff;color:var(--plum-ink)}

/* ═══ Kadro araması ════════════════════════════════════════════
   Panelde alışılan canlı arama, sitenin kadro sayfalarında da.
   Yazarken süzüyor; sunucuya istek gitmiyor. Koyu zeminde durduğu
   için kutu da koyu — bölümün geri kalanıyla aynı dilde.          */
.kadro-ara{position:relative;display:flex;align-items:center;
  margin:1.5rem 0 .5rem;max-width:430px}
.kadro-ara input{width:100%;min-height:52px;padding:.85rem 2.6rem .85rem 3rem;
  border-radius:100px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;font-family:var(--body);font-size:1rem;
  transition:border-color .2s ease,background .2s ease}
.kadro-ara input::placeholder{color:#B79BC0}
.kadro-ara input:focus{outline:none;border-color:var(--marigold);background:rgba(255,255,255,.11)}
.kadro-ara input::-webkit-search-cancel-button{display:none}
.kadro-ara-ikon{position:absolute;left:1.1rem;width:19px;height:19px;color:#B79BC0;
  pointer-events:none}
.kadro-ara input:focus ~ .kadro-ara-ikon{color:var(--marigold)}
.kadro-ara-sil{position:absolute;right:.6rem;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.kadro-ara-sil:hover{background:var(--marigold);color:var(--plum-ink)}
.kadro-ara-sonuc{position:absolute;left:1.2rem;top:calc(100% + .45rem);margin:0;
  font-family:var(--mono);font-size:.72rem;color:var(--marigold);white-space:nowrap}
.kadro-ara-sonuc:empty{display:none}
/* süzme sırasında eşleşmeyenler gizleniyor, boş birim de kapanıyor */
.person[hidden],.dept[hidden]{display:none !important}
.kadro-bos{font-family:var(--mono);font-size:.85rem;color:#C8AFD0;
  border-left:2px solid var(--marigold);padding:.15rem 0 .15rem 1rem;margin:2rem 0 0}
@media(max-width:620px){
  .kadro-ara{margin-top:1.1rem;max-width:100%}
  .kadro-ara input{min-height:48px;font-size:.95rem}
}

/* ═══ Çerez onayı ══════════════════════════════════════════════
   KVKK: ölçüm çerezi ancak açık onaydan sonra yükleniyor. Şerit
   sayfanın altında duruyor, içeriği kapatmıyor; reddetmek kabul
   etmek kadar kolay — tek tıkla ve aynı görünürlükte.              */
.cerez{position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--plum-ink);color:#F1E6F4;border-top:2px solid var(--marigold);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.33,0,.2,1)}
.cerez.acik{transform:none}
.cerez-in{max-width:var(--max);margin-inline:auto;padding:1.1rem var(--pad);
  display:flex;align-items:center;gap:1.25rem 1.75rem;flex-wrap:wrap}
.cerez-yazi{margin:0;font-size:.94rem;line-height:1.6;flex:1 1 320px;min-width:0}
.cerez-yazi a{color:var(--marigold)}
.cerez-dugmeler{display:flex;gap:.6rem;flex-wrap:wrap}
.cerez .btn{min-height:44px;padding:.6rem 1.25rem;font-size:.92rem}
.cerez-red{background:none;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.cerez-red:hover{background:#fff;color:var(--plum-ink);border-color:#fff}
@media(max-width:620px){
  .cerez-in{padding:1rem var(--pad) 1.15rem;gap:.9rem}
  .cerez-yazi{font-size:.88rem;flex-basis:100%}
  .cerez-dugmeler{width:100%}
  .cerez .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.cerez{transition:none}}