/* =====================================================================
   NAILS BY TUU — gorunum katmani
   tasarim.css ve uygulama.css'ten SONRA yuklenir.
   Renk paletleri, etkilesim ve hareket burada.
   ===================================================================== */

/* =====================================================================
   1) OJE PALETLERI  —  yeniden tasarlandi
   Her palet 3 katman: renk gecisi + parlama + derinlik.
   ===================================================================== */

.f-milky {
  background-image:
    radial-gradient(120% 80% at 30% 12%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(168deg, #FBF6F0 0%, #F0E5DA 48%, #DFCFC0 100%);
}
.f-nude {
  background-image:
    radial-gradient(110% 70% at 32% 14%, rgba(255,246,238,.6), transparent 52%),
    linear-gradient(168deg, #E8CDB8 0%, #D4AF95 52%, #B98E72 100%);
}
.f-french {
  background-image:
    linear-gradient(180deg, #FFFEFC 0 26%, rgba(255,255,255,0) 26.6%),
    radial-gradient(100% 60% at 30% 40%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(168deg, #F6DDCD 26%, #E4BBA4 100%);
}
.f-choco {
  background-image:
    radial-gradient(100% 62% at 34% 14%, rgba(214,168,120,.4), transparent 58%),
    linear-gradient(168deg, #6B4A38 0%, #402A20 55%, #241612 100%);
}
.f-chrome {
  background-image:
    conic-gradient(from 218deg at 46% 40%,
      #F4ECE3 0deg, #C9B3A0 62deg, #FFFFFF 118deg, #A98F7C 186deg,
      #EFE2D6 252deg, #BDA48F 312deg, #F4ECE3 360deg);
}
.f-bakir {
  background-image:
    conic-gradient(from 200deg at 44% 38%,
      #E9BE96 0deg, #A9663C 70deg, #FFE2C6 132deg, #8A4F2C 200deg,
      #D9A377 268deg, #B3703F 322deg, #E9BE96 360deg);
}
.f-ink {
  background-image:
    radial-gradient(90% 55% at 36% 12%, rgba(255,255,255,.34), transparent 52%),
    linear-gradient(168deg, #33363B 0%, #1A1C1F 58%, #0C0D0F 100%);
}
.f-gece {
  background-image:
    radial-gradient(95% 58% at 34% 13%, rgba(190,214,255,.32), transparent 54%),
    linear-gradient(168deg, #2B3A52 0%, #1A2437 56%, #0E1420 100%);
}
.f-blush {
  background-image:
    radial-gradient(110% 70% at 32% 14%, rgba(255,250,248,.62), transparent 54%),
    linear-gradient(168deg, #F7DEDA 0%, #E6B7B3 55%, #C98F8C 100%);
}
.f-lavanta {
  background-image:
    radial-gradient(110% 70% at 32% 14%, rgba(255,252,255,.55), transparent 54%),
    linear-gradient(168deg, #DED2EC 0%, #BFAEDA 55%, #9C89BC 100%);
}
.f-olive {
  background-image:
    radial-gradient(100% 62% at 34% 14%, rgba(240,244,228,.35), transparent 56%),
    linear-gradient(168deg, #98997A 0%, #6E7055 55%, #4A4C38 100%);
}
.f-red {
  background-image:
    radial-gradient(95% 58% at 34% 13%, rgba(255,214,214,.34), transparent 52%),
    linear-gradient(168deg, #A63241 0%, #79202E 55%, #4C1119 100%);
}
.f-inci {
  background-image:
    conic-gradient(from 160deg at 42% 36%,
      #FDF6F2 0deg, #EADCE6 70deg, #DCE7EE 140deg, #F3E6DA 210deg,
      #E6DCEC 282deg, #FDF6F2 360deg);
}
.f-mermer {
  background-image:
    linear-gradient(118deg, transparent 40%, rgba(120,110,100,.30) 41%, transparent 43%),
    linear-gradient(72deg, transparent 58%, rgba(120,110,100,.22) 59%, transparent 61.5%),
    linear-gradient(150deg, transparent 22%, rgba(140,128,116,.18) 23%, transparent 25%),
    linear-gradient(168deg, #FAF5EF 0%, #EDE3D8 100%);
}
.f-glitter {
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.9) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 68% 34%, rgba(255,246,228,.85) 0 1.3px, transparent 2px),
    radial-gradient(circle at 42% 62%, rgba(255,255,255,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 76%, rgba(255,240,214,.8) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 14% 82%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    linear-gradient(168deg, #F0DCC2 0%, #D8B894 52%, #B5926E 100%);
  background-size: 34px 34px, 46px 46px, 40px 40px, 52px 52px, 38px 38px, 100% 100%;
}

/* Parlamayi biraz yumusat — yeni paletler zaten derinlik tasiyor */
.nail::after {
  background:
    linear-gradient(112deg, rgba(255,255,255,.30) 0 13%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 40%),
    linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,0) 52%);
}

/* =====================================================================
   2) HERO — tiklanabilir tirnak yelpazesi
   ===================================================================== */

/* Bes tirnak da AYNI hizada ve ayni boyutta durur. Once basamakliydi;
   goz basamakli diziyi "farkli buyuklukte" okuyordu. */
.fan .nail-bag {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: relative;
  transform: none;
  transition: transform .4s cubic-bezier(.2,.8,.3,1), filter .4s ease;
  cursor: pointer;
}
.fan .nail-bag .nail { transform: none; display: block; width: 100%; }

.fan .nail-bag:hover,
.fan .nail-bag:focus-visible {
  transform: translateY(-12px);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.5));
}

/* Yelpazedeki diger tirnaklar hafifce geri cekilsin */
.fan:hover .nail-bag:not(:hover) { filter: brightness(.72) saturate(.85); }

/* =====================================================================
   3) HIZMET SATIRI — secim isigi yenilendi
   Eskisi soluk bir gradyan lekesiydi; yerine net bir vurgu cizgisi.
   ===================================================================== */

.svc {
  position: relative;
  padding-inline: clamp(14px, 2vw, 24px);
  border-radius: 10px;
  transition: background-color .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.svc:hover,
.svc:focus-within {
  background-color: rgba(198,161,122,.055);
  background-image: none;              /* eski gradyan lekesi kapatildi */
  transform: translateX(4px);
}

/* Sol kenarda buyuyen vurgu cizgisi */
.svc::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0; translate: 0 -50%;
  background: linear-gradient(180deg, transparent, var(--sand) 22%, var(--sand) 78%, transparent);
  border-radius: 2px;
  transition: height .4s cubic-bezier(.2,.8,.3,1);
}
.svc:hover::before, .svc:focus-within::before { height: 68%; }

.svc-name, .svc-price { transition: color .3s ease; }
.svc:hover .svc-name  { color: #fff; }
.svc:hover .svc-price { color: #E0C4A2; }

/* Hizmet satiri baglanti; alti cizili durmasin.
   NOT: ::after artik ARKA ISIK katmani (47. bolum). Eskiden buradaki
   sag ok isaretiydi; ayni pseudo'yu ikisi paylasamaz, ok kaldirildi —
   yerini satirin altindaki "Randevu al" aldi. */
a.svc { text-decoration: none; }

/* =====================================================================
   4) GALERI FILTRELERI
   ===================================================================== */

.filters button {
  border-radius: 999px;
  transition: color .25s ease, background-color .25s ease,
              border-color .25s ease, transform .25s ease;
}
.filters button:hover { border-color: rgba(198,161,122,.5); transform: translateY(-1px); }
.filters button[aria-pressed="true"] {
  background: var(--sand); color: var(--ink); border-color: var(--sand);
  box-shadow: 0 6px 18px rgba(198,161,122,.22);
}

.tile { border-radius: 10px; }
.tile .nail { transition: filter .4s ease; }
.tile:hover .nail { filter: brightness(1.06) saturate(1.05); }
.tile:hover figcaption { color: var(--bone); }
.tile figcaption { transition: color .3s ease; }

/* =====================================================================
   5) RANDEVU CAGRISI — gri kutu sorunu giderildi
   Onceki hali koyu zemin uzerinde yari saydam beyazdi ve gri gorunuyordu.
   ===================================================================== */

.randevu-cagri {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 120% at 12% 0%, rgba(198,161,122,.20), transparent 56%),
    radial-gradient(90% 90% at 100% 100%, rgba(198,161,122,.10), transparent 60%),
    linear-gradient(158deg, #212429 0%, #16181B 62%, #111214 100%);
  border: 1px solid rgba(198,161,122,.22);
  border-radius: 12px;
  padding: clamp(32px, 4.5vw, 52px);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

/* Kose susu — tirnak formunda hafif isik */
.randevu-cagri::before {
  content: ''; position: absolute; right: -60px; top: -70px;
  width: 210px; height: 300px; pointer-events: none;
  border-radius: var(--nail-radius);
  background: linear-gradient(170deg, rgba(198,161,122,.22), rgba(198,161,122,0) 68%);
  filter: blur(2px);
  transform: rotate(14deg);
}

.randevu-cagri > * { position: relative; }
.randevu-cagri .btn-solid {
  box-shadow: 0 10px 28px rgba(198,161,122,.26);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.randevu-cagri .btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(198,161,122,.34);
}

.randevu-cagri .cagri-baslik {
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px);
  color: var(--bone); margin-bottom: 10px; line-height: 1.2;
}
.randevu-cagri .cagri-metin {
  color: var(--mute); font-size: 15.5px; margin-bottom: 26px; max-width: 42ch;
}
.randevu-cagri .cagri-liste {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 10px;
}
.randevu-cagri .cagri-liste li {
  position: relative; padding-left: 24px;
  font-size: 14.5px; color: var(--mute);
}
.randevu-cagri .cagri-liste li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50% 50% 2px 2px; background: var(--sand);
}

/* =====================================================================
   6) HAREKET
   Hepsi kisa ve sakin. Hareket hassasiyeti olan kullanicilarda kapanir.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Sayfa girisi ------------------------------------------------
     KALDIRILDI. main/.foot sifir opaklıktan geliyordu; randevu gibi her
     adimi tam sayfa yenileyen ekranlarda her tiklamada sayfa kararip
     tekrar aciliyordu. Sayfa artik dogrudan gorunur gelir. */

  /* --- Mobil menu ------------------------------------------------- */
  .nav[data-open="true"] {
    animation: menuAc .26s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes menuAc {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }

  /* Menu ogeleri sirayla gelsin */
  .nav[data-open="true"] > a,
  .nav[data-open="true"] > .nav-hesap {
    animation: menuOge .3s ease both;
  }
  .nav[data-open="true"] > *:nth-child(1) { animation-delay: .03s; }
  .nav[data-open="true"] > *:nth-child(2) { animation-delay: .06s; }
  .nav[data-open="true"] > *:nth-child(3) { animation-delay: .09s; }
  .nav[data-open="true"] > *:nth-child(4) { animation-delay: .12s; }
  .nav[data-open="true"] > *:nth-child(5) { animation-delay: .15s; }
  .nav[data-open="true"] > *:nth-child(6) { animation-delay: .18s; }
  .nav[data-open="true"] > *:nth-child(7) { animation-delay: .21s; }
  .nav[data-open="true"] > *:nth-child(8) { animation-delay: .24s; }

  @keyframes menuOge {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Hamburger ikonu carpiya donusur ----------------------------- */
  .burger span,
  .burger span::before,
  .burger span::after { transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s ease; }

  .burger[aria-expanded="true"] span { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(-90deg); }
  .burger[aria-expanded="true"] span::after  { opacity: 0; }

  /* --- Bildirimler ------------------------------------------------- */
  .bildirim { animation: bildirimGir .34s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes bildirimGir {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Panel ve kartlar -------------------------------------------- */
  .panel, .ozet { transition: border-color .3s ease; }

  /* --- Takvim ve saat secimi --------------------------------------- */
  .takvim-gun, .saat-dugme {
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease;
  }
  .takvim-gun:hover:not(:disabled),
  .saat-dugme:hover:not(:disabled) { transform: translateY(-2px); }

  /* --- Butonlar ----------------------------------------------------- */
  .btn { transition: background-color .28s ease, color .28s ease,
                     border-color .28s ease, transform .28s cubic-bezier(.2,.8,.3,1); }
  .btn:active { transform: scale(.985); }
}

/* Hareket hassasiyeti: her sey aninda, animasyonsuz */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   7) GALERIDE GERCEK FOTOGRAFLAR
   Ornek tirnaklar imza formunda kalir; gercek fotograflar dikey kart olur.
   ===================================================================== */

.tile-foto .foto-kutu {
  position: relative; overflow: hidden;
  aspect-ratio: .78;
  border-radius: 10px;
  background: var(--coal-2);
  box-shadow: inset 0 0 0 1px rgba(241,236,228,.08);
}
.tile-foto .foto-kutu img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.tile-foto:hover .foto-kutu img { transform: scale(1.05); }

/* Alt kenarda yumusak karartma — alt yazi okunakli kalsin */
.tile-foto .foto-kutu::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(0deg, rgba(0,0,0,.42), transparent);
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.tile-foto:hover .foto-kutu::after { opacity: 1; }

/* =====================================================================
   8) YONETIM — GALERI IZGARASI
   ===================================================================== */

.galeri-yonetim {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; margin-top: 20px;
}
.galeri-oge {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; background: var(--coal-2);
}
.galeri-oge.pasif { opacity: .55; }

.galeri-gorsel {
  position: relative; aspect-ratio: .82; border-radius: 7px;
  overflow: hidden; margin-bottom: 12px; background: var(--ink);
}
.galeri-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galeri-rozet {
  position: absolute; left: 8px; top: 8px;
  font-size: 11px; letter-spacing: .06em;
  background: rgba(19,20,22,.85); color: #D6A85F;
  border: 1px solid rgba(214,168,95,.4);
  border-radius: 999px; padding: 3px 9px;
}

.galeri-oge .field { margin-bottom: 8px; }
.galeri-oge input, .galeri-oge select { font-size: 13.5px; padding: 9px 11px; }

/* =====================================================================
   9) DIL SECIMI
   ===================================================================== */

.dil-secim {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px; margin-inline-start: 6px;
}
.dil-secim a {
  font-size: 12px; letter-spacing: .08em; color: var(--mute-dark);
  padding: 4px 9px; border-radius: 999px; line-height: 1;
  transition: color .22s ease, background-color .22s ease;
}
.dil-secim a:hover { color: var(--bone); }
.dil-secim a.aktif { background: var(--sand); color: var(--ink); }

@media (max-width: 860px) {
  .dil-secim {
    width: auto; margin: 10px var(--gutter) 4px;
    align-self: flex-start;
  }
  .dil-secim a { padding: 8px 14px; font-size: 13px; }
}

/* =====================================================================
   10) SAGDAN SOLA (Arapca)
   Mantiksal ozellikler (margin-inline gibi) kendiliginden donuyor;
   burada yalnizca sabit sag/sol degerler duzeltiliyor.
   ===================================================================== */

[dir="rtl"] {
  /* Rakamlar ve fiyatlar soldan saga kalsin */
  --yon-carpan: -1;
}

/* Geri baglantisindaki ok ters donsun */
[dir="rtl"] .geri-bag::before { content: '→'; }

/* Hizmet satirindaki vurgu cizgisi saga gecsin */
[dir="rtl"] .svc::before { left: auto; right: 0; }
[dir="rtl"] .svc.havada { transform: translateY(-4px); }
/* RTL'de ok kurali da gitti (ustteki nota bak) */

/* Ders listesindeki aktif isaret */
[dir="rtl"] .ders-satir.aktif { box-shadow: inset -3px 0 0 var(--sand); }
[dir="rtl"] .ders-satir .sure { margin-left: 0; margin-right: auto; }

/* Yonetim menusu */
[dir="rtl"] .yonetim-menu a.aktif { box-shadow: inset -3px 0 0 var(--sand); }
[dir="rtl"] .yonetim-yan { border-right: 0; border-left: 1px solid var(--line); }

/* WhatsApp yuzen butonu sol alta */
[dir="rtl"] .wa { right: auto; left: clamp(16px, 3vw, 28px); }

/* Avatar rozeti */
[dir="rtl"] .avatar-kamera { right: auto; left: -2px; }

/* Bildirim sol kenar cizgisi */
[dir="rtl"] .bildirim {
  border-left-width: 1px; border-right-width: 3px;
}
[dir="rtl"] .bildirim-basari { border-right-color: #6FA07A; border-left-color: var(--line); }
[dir="rtl"] .bildirim-hata   { border-right-color: #B4695F; border-left-color: var(--line); }
[dir="rtl"] .bildirim-bilgi  { border-right-color: var(--sand); border-left-color: var(--line); }

/* Mufredat ve cagri listesindeki isaretler */
[dir="rtl"] .randevu-cagri .cagri-liste li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .randevu-cagri .cagri-liste li::before { left: auto; right: 0; }

/* Randevu kutusundaki kose susu */
[dir="rtl"] .randevu-cagri::before { right: auto; left: -60px; transform: rotate(-14deg); }

/* Menu ogeleri soldan degil sagdan gelsin */
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .nav[data-open="true"] > a,
  [dir="rtl"] .nav[data-open="true"] > .nav-hesap {
    animation-name: menuOgeRtl;
  }
  @keyframes menuOgeRtl {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Arapcada rakamlar ve para tutarlari LTR kalsin ki 1.450 ₺ bozulmasin */
[dir="rtl"] .svc-price,
[dir="rtl"] .c-price,
[dir="rtl"] .ozet-toplam b,
[dir="rtl"] .olcum b,
[dir="rtl"] .hero-meta b,
[dir="rtl"] .ders-satir .sure,
[dir="rtl"] .saat-dugme,
[dir="rtl"] .takvim-gun {
  direction: ltr; unicode-bidi: embed;
}
[dir="rtl"] .svc-price, [dir="rtl"] .c-price { text-align: start; }

/* Arapca yazi tipi: Marcellus Arapca harf icermez, govde fontuna dus */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .svc-name, [dir="rtl"] .c-price, [dir="rtl"] .olcum b,
[dir="rtl"] .cagri-baslik, [dir="rtl"] .takvim-bas b {
  font-family: 'Noto Naskh Arabic', 'Segoe UI', var(--body);
  font-weight: 500;
  line-height: 1.4;
}

/* =====================================================================
   11) GALERI BOS DURUMU  (yalnizca yonetici gorur)
   ===================================================================== */

.galeri-bos {
  text-align: center;
  padding: clamp(40px, 6vw, 68px) clamp(22px, 4vw, 40px);
  border: 1px dashed var(--line);
  border-radius: 12px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(198,161,122,.07), transparent 62%),
    var(--coal);
}
.galeri-bos-ikon {
  display: inline-grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(198,161,122,.32);
  color: var(--sand);
}
.galeri-bos-ikon svg { width: 28px; height: 28px; }

.galeri-bos h3 {
  font-size: 22px; margin-bottom: 10px; color: var(--bone);
}
.galeri-bos p {
  color: var(--mute); font-size: 15px;
  max-width: 46ch; margin: 0 auto 24px;
}
.galeri-bos strong { color: var(--bone); font-weight: 400; }

/* =====================================================================
   12) BASLIK TASMASI
   Menu ogesi sayisi oturuma gore degisiyor: ziyaretcide 6, uyede 9,
   yoneticide 10. CSS icerige gore esik belirleyemedigi icin govdeye
   sinif basiyoruz ve hamburgere gecis esigini yukseltiyoruz.
   ===================================================================== */

/* Dar alanda menu araligi kademeli kissin */
@media (max-width: 1240px) { .nav { gap: 20px; } }
@media (max-width: 1080px) { .nav { gap: 14px; } .nav a { font-size: 14.5px; } }

/* Marka yazisi cok daralmasin; yer yoksa alt satira dusmek yerine gizlensin */
.brand-txt { white-space: nowrap; }
@media (max-width: 1180px) {
  .oturum-acik .brand-txt small { display: none; }
}
@media (max-width: 1020px) {
  .oturum-acik .brand-txt { display: none; }
}

/* Giris yapilmissa hamburger esigi yukselir */
@media (max-width: 1280px) {
  .oturum-acik .nav {
    position: fixed; inset: 78px 0 auto 0; background: var(--ink);
    flex-direction: column; gap: 0; padding: 12px 0 22px;
    border-bottom: 1px solid var(--line); display: none;
  }
  .oturum-acik .nav[data-open="true"] { display: flex; }
  .oturum-acik .nav a { width: 100%; padding: 15px var(--gutter); font-size: 16px; }
  .oturum-acik .nav .nav-randevu { display: block; color: var(--sand); }
  .oturum-acik .burger { display: flex; }
  .oturum-acik .head-cta { display: none; }

  .oturum-acik .nav-hesap {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 0; margin: 6px 0 0; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .oturum-acik .nav .nav-profil { width: auto; padding: 15px var(--gutter); }
  .oturum-acik .nav-cikis { padding: 15px var(--gutter); font-size: 16px; }
  .oturum-acik .dil-secim {
    width: auto; margin: 10px var(--gutter) 4px; align-self: flex-start;
  }
  .oturum-acik .dil-secim a { padding: 8px 14px; font-size: 13px; }
  .oturum-acik .nav .nav-yonetim { width: auto; margin: 6px var(--gutter); }
}

/* Yoneticide bir oge daha var, esik biraz daha yukarida */
@media (max-width: 1440px) {
  .yonetici-acik .nav {
    position: fixed; inset: 78px 0 auto 0; background: var(--ink);
    flex-direction: column; gap: 0; padding: 12px 0 22px;
    border-bottom: 1px solid var(--line); display: none;
  }
  .yonetici-acik .nav[data-open="true"] { display: flex; }
  .yonetici-acik .nav a { width: 100%; padding: 15px var(--gutter); font-size: 16px; }
  .yonetici-acik .nav .nav-randevu { display: block; color: var(--sand); }
  .yonetici-acik .burger { display: flex; }
  .yonetici-acik .head-cta { display: none; }
  .yonetici-acik .brand-txt small { display: none; }

  .yonetici-acik .nav-hesap {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 0; margin: 6px 0 0; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .yonetici-acik .nav .nav-profil { width: auto; padding: 15px var(--gutter); }
  .yonetici-acik .nav-cikis { padding: 15px var(--gutter); font-size: 16px; }
  .yonetici-acik .dil-secim {
    width: auto; margin: 10px var(--gutter) 4px; align-self: flex-start;
  }
  .yonetici-acik .nav .nav-yonetim { width: auto; margin: 6px var(--gutter); }
}

/* =====================================================================
   13) OJE RENKLERI — DUZELTME
   Sorun: .nail::after alttan gelen koyu gradyan (rgba(0,0,0,.34)) tum
   renkleri dipte grilestiriyordu; kromdaki konik gecis de yildiz
   patlamasi gibi sertti. Renkler gercek ojeye yaklastirildi.
   ===================================================================== */

/* Dipteki karartma cok azaltildi; yerine ince bir kenar golgesi */
.nail::after {
  background:
    /* uzerindeki cam parlamasi */
    linear-gradient(118deg,
      rgba(255,255,255,.34) 0 11%,
      rgba(255,255,255,.08) 22%,
      rgba(255,255,255,0)   38%),
    /* dipte yalnizca cok hafif bir oturma golgesi */
    linear-gradient(0deg, rgba(40,28,20,.14), rgba(0,0,0,0) 28%);
}
/* Kenarlarda yumusak hacim */
.nail {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 6px 0 14px -10px rgba(0,0,0,.45),
    inset -6px 0 14px -10px rgba(0,0,0,.45);
}

/* --- Sut beyazi: sicak, temiz, grilesmeyen ------------------------- */
.f-milky {
  background-image:
    radial-gradient(115% 78% at 32% 10%, rgba(255,255,255,.95), transparent 58%),
    linear-gradient(170deg, #FFFCF8 0%, #F7F0E7 55%, #EDE2D5 100%);
}

/* --- Nude: pembe-bej, canli --------------------------------------- */
.f-nude {
  background-image:
    radial-gradient(110% 72% at 32% 12%, rgba(255,248,240,.72), transparent 54%),
    linear-gradient(170deg, #F0D3BC 0%, #DFB393 55%, #C9926F 100%);
}

/* --- French: net beyaz uc, dogal pembe yatak ---------------------- */
.f-french {
  background-image:
    linear-gradient(180deg, #FFFFFF 0 24%, rgba(255,255,255,0) 25.5%),
    radial-gradient(100% 58% at 32% 46%, rgba(255,255,255,.4), transparent 62%),
    linear-gradient(170deg, #F8DED0 24%, #EFC3AE 68%, #E0AC95 100%);
}

/* --- Krom: yumusak metalik supurme (yildiz patlamasi degil) -------- */
.f-chrome {
  background-image:
    linear-gradient(112deg,
      #EFE6DC 0%, #FBF7F2 14%, #C5B2A2 30%, #FFFFFF 44%,
      #B9A493 58%, #F2E8DE 72%, #CDBAA9 86%, #EFE6DC 100%);
}

/* --- Bakir krom: ayni yumusak supurme, sicak ton ------------------- */
.f-bakir {
  background-image:
    linear-gradient(112deg,
      #E8B992 0%, #FFE6CC 14%, #A9683E 30%, #FFF1E2 44%,
      #96552F 58%, #E5B48B 72%, #B8763F 86%, #E8B992 100%);
}

/* --- Kakao: zengin espresso, siyaha dusmeyen ---------------------- */
.f-choco {
  background-image:
    radial-gradient(100% 60% at 34% 12%, rgba(226,182,140,.42), transparent 56%),
    linear-gradient(170deg, #7A5440 0%, #543725 58%, #3A2418 100%);
}

/* --- Inci: sedef, yumusak ------------------------------------------ */
.f-inci {
  background-image:
    linear-gradient(126deg,
      #FEF9F5 0%, #F1E3EC 26%, #E2EAF1 50%, #F6EADC 74%, #FEF9F5 100%);
}

/* =====================================================================
   14) GALERI YUKLEME ARAYUZU
   ===================================================================== */

.birakma-alani {
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: clamp(30px, 5vw, 46px) 24px;
  text-align: center;
  background: var(--coal-2);
  transition: border-color .25s ease, background-color .25s ease;
}
.birakma-alani.birakmaya-hazir {
  border-color: var(--sand);
  background: rgba(198,161,122,.08);
}
.birakma-alani.dolu { padding: 20px 24px; }

.birakma-ikon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid rgba(198,161,122,.34);
  color: var(--sand);
}
.birakma-ikon svg { width: 24px; height: 24px; }
.birakma-alani.dolu .birakma-ikon { display: none; }

.birakma-metin { color: var(--mute); font-size: 15.5px; margin-bottom: 10px; }
.birakma-metin .btn { margin-top: 10px; }

/* --- Onizleme kartlari --------------------------------------------- */
.yukleme-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.yukleme-izgara:not(:empty) { margin-top: 20px; }

.yukleme-kart {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; background: var(--coal-2);
  animation: kartGir .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes kartGir {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.yukleme-kart.hatali { border-color: rgba(180,105,95,.5); }

.yukleme-gorsel {
  position: relative; aspect-ratio: .82;
  border-radius: 7px; overflow: hidden;
  margin-bottom: 10px; background: var(--ink);
  display: grid; place-items: center;
  color: var(--mute-dark); font-size: 26px;
}
.yukleme-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yukleme-sil {
  position: absolute; top: 7px; inset-inline-end: 7px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; cursor: pointer; line-height: 1;
  background: rgba(19,20,22,.78); color: var(--bone);
  font-size: 17px; display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: background-color .2s ease, transform .2s ease;
}
.yukleme-sil:hover { background: #B4695F; transform: scale(1.08); }

.yukleme-kart input[type="text"],
.yukleme-kart select {
  width: 100%; margin-bottom: 7px;
  padding: 9px 11px; font-size: 13.5px;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: 5px; color: var(--bone);
  font-family: var(--body);
}
.yukleme-kart input:focus, .yukleme-kart select:focus {
  outline: none; border-color: var(--sand);
}

.yukleme-bilgi { font-size: 12px; color: var(--mute-dark); }
.yukleme-hata {
  font-size: 12.5px; color: #D08A80; margin: 0; text-align: center;
}

.yukleme-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 20px;
}
.yukleme-alt .form-ipucu { margin: 0; }

/* [hidden] normalde display:none verir ama .btn gibi display tanimlayan
   siniflar bunu ezer. Guvenlik icin kesinlestiriyoruz. */
[hidden] { display: none !important; }

/* =====================================================================
   15) CIRO PANOSU
   ===================================================================== */

.ciro-toplam {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: 10px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(198,161,122,.18), transparent 60%),
    linear-gradient(160deg, var(--coal-2), var(--ink));
  border: 1px solid rgba(198,161,122,.24);
}
.ciro-toplam span { color: var(--mute); font-size: 14px; letter-spacing: .08em; }
.ciro-toplam b {
  font-family: var(--display); font-size: clamp(30px, 4vw, 44px);
  color: var(--sand); line-height: 1;
}

/* --- Dagilim cubugu ------------------------------------------------- */
.ciro-cubuk {
  display: flex; height: 10px; border-radius: 99px; overflow: hidden;
  background: var(--coal-2);
}
.ciro-cubuk .parca { display: block; height: 100%; }
.parca.egitim,   .ciro-anahtar i.egitim   { background: var(--sand); }
.parca.randevu,  .ciro-anahtar i.randevu  { background: #8C9BC4; }

.ciro-anahtar {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px;
  font-size: 13px; color: var(--mute);
}
.ciro-anahtar span { display: inline-flex; align-items: center; gap: 7px; }
.ciro-anahtar i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- 12 aylik sutun grafigi ----------------------------------------- */
.ciro-grafik {
  display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 12px);
  height: 220px; margin-top: 22px;
  padding-bottom: 4px; overflow-x: auto;
}
.ciro-sutun {
  flex: 1; min-width: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; position: relative;
}
.ciro-deger {
  font-size: 11.5px; color: var(--mute-dark); margin-bottom: 6px;
  white-space: nowrap;
}
.ciro-bar {
  width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px;
  background: var(--coal-2); overflow: hidden;
  display: flex; flex-direction: column-reverse;
  transition: filter .25s ease;
  min-height: 3px;
}
.ciro-sutun:hover .ciro-bar { filter: brightness(1.25); }

/* Sutun ici dilimler. Bu dilimlerin rengi BIR ZAMANLAR hic tanimlanmamisti
   (.parca.egitim vardi ama .ciro-bar i.egitim yoktu) — sutunlar duz gri
   cikiyor, kirilim gorunmuyordu. Artik her kalem kendi renginde. */
.ciro-bar i { display: block; width: 100%; }
.ciro-bar i.k-online  { background: var(--k-online); }
.ciro-bar i.k-birebir { background: var(--k-birebir); }
.ciro-bar i.k-hizmet  { background: var(--k-hizmet); }
.ciro-bar i.k-diger   { background: var(--k-diger); }
.ciro-etiket {
  font-size: 11px; color: var(--mute-dark); margin-top: 8px;
  white-space: nowrap; letter-spacing: .03em;
}

@media (max-width: 640px) {
  .ciro-grafik { height: 170px; }
  .ciro-etiket { font-size: 10px; }
}

/* =====================================================================
   16) ABONELIK
   ===================================================================== */

.plan-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 24px;
}
.plan-kart {
  position: relative;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 24px; background: var(--coal);
  display: flex; flex-direction: column;
}
.plan-kart.one-cikan {
  border-color: rgba(198,161,122,.45);
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(198,161,122,.12), transparent 60%),
    var(--coal);
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
}
.plan-rozet {
  position: absolute; top: -11px; left: 50%; translate: -50% 0;
  background: var(--sand); color: var(--ink);
  font-size: 11.5px; letter-spacing: .08em;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-kart h3 { font-size: 21px; margin-bottom: 6px; }
.plan-kart .plan-alt { font-size: 14px; color: var(--mute); min-height: 40px; }
.plan-fiyat {
  font-family: var(--display); font-size: 34px; color: var(--sand);
  margin: 18px 0 2px; line-height: 1;
}
.plan-aylik { font-size: 13px; color: var(--mute-dark); }
.plan-kart p.plan-aciklama {
  font-size: 14.5px; color: var(--mute); margin: 18px 0 0;
  padding-top: 16px; border-top: 1px solid rgba(49,53,58,.7); flex: 1;
}
.plan-kart .btn { width: 100%; margin-top: 20px; }

/* Abonelik durum serit */
.abone-serit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 10px; margin-bottom: 20px;
  border: 1px solid rgba(127,169,138,.34);
  background: rgba(127,169,138,.07);
}
.abone-serit.bitiyor {
  border-color: rgba(214,168,95,.4); background: rgba(214,168,95,.07);
}
.abone-serit b { color: var(--bone); font-weight: 400; }
.abone-serit span { color: var(--mute); font-size: 14.5px; }

/* =====================================================================
   17) SITE METINLERI EKRANI
   ===================================================================== */

.metin-liste { display: grid; gap: 2px; }

.metin-satir {
  display: grid; grid-template-columns: minmax(200px, 38%) 1fr;
  gap: 18px; align-items: start;
  padding: 14px 14px; border-radius: 8px;
  border-inline-start: 2px solid transparent;
}
.metin-satir:nth-child(odd) { background: rgba(33,36,41,.45); }
.metin-satir.degisti { border-inline-start-color: var(--sand); }

.metin-bilgi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.metin-bilgi code {
  font-size: 11.5px; color: var(--mute-dark);
  background: none; padding: 0; letter-spacing: .02em;
}
.metin-varsayilan {
  font-size: 13.5px; color: var(--mute); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.metin-alan input, .metin-alan textarea {
  width: 100%; padding: 10px 12px; font-size: 14.5px;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; color: var(--bone); font-family: var(--body);
  line-height: 1.5;
}
.metin-alan input:focus, .metin-alan textarea:focus {
  outline: none; border-color: var(--sand);
}

@media (max-width: 760px) {
  .metin-satir { grid-template-columns: 1fr; gap: 8px; }
  .metin-varsayilan { -webkit-line-clamp: 2; }
}

/* --- Iki bolmeli duzen: solda liste, sagda canli site --- */
.metin-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
  gap: 22px;
  align-items: start;
}
.metin-sol { min-width: 0; }

.metin-sag { position: sticky; top: 18px; min-width: 0; }

/* Dar bolmede satirlar alt alta */
.metin-liste.tek-sutun .metin-satir { grid-template-columns: 1fr; gap: 7px; }
.metin-liste.tek-sutun .metin-bilgi { flex-direction: row; align-items: center; gap: 9px; }

.metin-satir { transition: background .25s ease, border-color .25s ease; }
.metin-satir.secili {
  background: rgba(198,161,122,.14) !important;
  border-inline-start-color: var(--sand);
}
.metin-satir .metin-varsayilan { margin-top: 6px; }

.metin-nerede {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand); opacity: .75; white-space: nowrap;
}

.metin-kaydet-serit {
  position: sticky; bottom: 0; z-index: 3;
  margin: 18px calc(clamp(20px, 3vw, 30px) * -1) calc(clamp(20px, 3vw, 30px) * -1);
  padding: 16px clamp(20px, 3vw, 30px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(to top, var(--coal) 62%, transparent);
  border-radius: 0 0 10px 10px;
}
.metin-kaydet-serit .form-ipucu { color: var(--sand); }

/* --- Onizleme cercevesi --- */
.onizleme {
  border: 1px solid var(--line); border-radius: 10px;
  background: #0E1013; overflow: hidden;
}
.onizleme-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-bottom: 1px solid var(--line);
  background: rgba(33,36,41,.7);
}
.onizleme-bar select {
  flex: 1 1 auto; min-width: 0; max-width: 260px;
  padding: 7px 10px; font-size: 13.5px;
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--line); border-radius: 6px;
}
.onizleme-araclar { display: flex; gap: 4px; flex: 0 0 auto; }
.onizleme-araclar button,
.onizleme-araclar a {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--mute); cursor: pointer; font-size: 14px; line-height: 1;
  text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.onizleme-araclar button:hover,
.onizleme-araclar a:hover { color: var(--sand); border-color: var(--line); }
.onizleme-araclar button[aria-pressed="true"] { color: var(--sand); border-color: var(--sand); }

.onizleme-govde {
  height: calc(100vh - 210px); min-height: 460px;
  display: flex; justify-content: center;
  background: #0E1013;
}
.onizleme-govde iframe {
  width: 100%; height: 100%; border: 0; display: block;
  background: var(--ink);
  transition: width .3s ease;
}
.onizleme-govde[data-genislik-kutu="telefon"] iframe {
  width: 390px; max-width: 100%;
  border-inline: 1px solid var(--line);
}

.onizleme-not {
  padding: 9px 12px; font-size: 12.5px; color: var(--mute-dark);
  border-top: 1px solid var(--line); margin: 0;
}
.onizleme-not strong { color: var(--mute); font-weight: 400; }

@media (max-width: 1180px) {
  .metin-duzen { grid-template-columns: 1fr; }
  .metin-sag { position: static; order: -1; }
  .onizleme-govde { height: 60vh; min-height: 360px; }
}

/* =====================================================================
   18) UYE KARTI — ban ve hediye
   ===================================================================== */

.uye-banli { opacity: .6; }
.uye-ban-notu {
  margin-top: 12px; padding: 11px 14px; border-radius: 6px;
  background: rgba(180,105,95,.1);
  border-inline-start: 3px solid #B4695F;
  font-size: 13.5px; color: #D8B0AA;
}
.hediye-kutu {
  margin-top: 14px; padding: 16px; border-radius: 8px;
  border: 1px dashed rgba(198,161,122,.34);
  background: rgba(198,161,122,.05);
}
.hediye-kutu h4 {
  font-size: 15px; color: var(--sand); margin-bottom: 4px;
  font-family: var(--body); font-weight: 400; letter-spacing: .04em;
}

/* =====================================================================
   19) INDIRIM KODU — yonetim etiketi ve odeme kutusu
   ===================================================================== */

.kod-etiket {
  display: inline-block;
  font-family: var(--mono, 'SFMono-Regular', Consolas, 'Courier New', monospace);
  font-size: 19px; letter-spacing: .14em; font-weight: 500;
  color: var(--bone);
  padding: 7px 15px; border-radius: 6px;
  background: rgba(198,161,122,.11);
  border: 1px dashed rgba(198,161,122,.45);
  user-select: all;
}

/* --- Odeme sayfasindaki kod alani --- */
.kod-kutu {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.kod-ac {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--sand);
  letter-spacing: .02em; text-align: start;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s ease;
}
.kod-ac:hover { color: var(--bone); }
.kod-ac::after {
  content: '+'; font-size: 16px; line-height: 1;
  transition: transform .25s ease;
}
.kod-ac[aria-expanded="true"]::after { transform: rotate(45deg); }

.kod-satir { display: flex; gap: 9px; margin-top: 13px; }
.kod-satir input {
  flex: 1 1 auto; min-width: 0;
  text-transform: uppercase; letter-spacing: .12em;
  font-family: var(--mono, 'SFMono-Regular', Consolas, monospace);
}
.kod-satir .btn { flex: 0 0 auto; white-space: nowrap; }

.kod-basarili {
  margin-top: 13px; padding: 13px 15px; border-radius: 7px;
  background: rgba(125,155,120,.12);
  border: 1px solid rgba(125,155,120,.36);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  animation: kodGir .3s ease both;
}
.kod-basarili b {
  font-family: var(--mono, Consolas, monospace);
  letter-spacing: .1em; color: var(--bone); font-weight: 500;
}
.kod-basarili small { display: block; color: #9CB897; font-size: 13px; margin-top: 2px; }
.kod-basarili button {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--mute); text-decoration: underline;
  text-underline-offset: 3px; padding: 2px;
}
.kod-basarili button:hover { color: #D8A29A; }

.kod-hata {
  margin-top: 11px; font-size: 13.5px; color: #D8A29A;
  animation: kodGir .3s ease both;
}

@keyframes kodGir {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* --- Tutar dokumu --- */
.tutar-dokum { margin-top: 18px; }
.tutar-dokum .satir {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 15px; color: var(--mute);
}
.tutar-dokum .satir.indirimli { color: #9CB897; }
.tutar-dokum .satir.toplam {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 23px; color: var(--bone);
}
.tutar-dokum .ustu-cizili {
  text-decoration: line-through; opacity: .55;
  margin-inline-end: 9px; font-size: 16px; font-family: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .kod-basarili, .kod-hata { animation: none; }
  .kod-ac::after { transition: none; }
}

/* --- Randevu: "Geldi" + alinan ucret --- */
.geldi-form {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.geldi-form input[name="tutar"] {
  width: 118px; padding: 8px 11px; font-size: 14px;
  background: var(--ink); border: 0; color: var(--bone);
  font-family: var(--body); text-align: end;
}
.geldi-form input[name="tutar"]:focus { outline: none; background: rgba(198,161,122,.08); }
.geldi-form .btn { border-radius: 0; border: 0; border-inline-start: 1px solid var(--line); }

/* =====================================================================
   20) INSTAGRAM — gercek isler serit halinde, yoksa sade davet
   ===================================================================== */

/* Eski sahte "story" baloncuklari kaldirildi. */
.hl-row, .hl { display: none !important; }

.ig-serit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 46px;
}

/* Fotograf sayisi azken izgara bos sutun ayirmasin */
.ig-serit[data-adet="1"] { grid-template-columns: minmax(0, 1fr); max-width: 430px; }
.ig-serit[data-adet="2"] { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
.ig-serit[data-adet="3"] { grid-template-columns: repeat(3, 1fr); }
.ig-serit[data-adet="4"] { grid-template-columns: repeat(4, 1fr); }
.ig-kare {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--coal-2);
}
/* Ilk kare buyuk: tek tip izgara yerine editoryal bir ritim.
   Yalnizca bes kare varken; azinda izgarayi bozar. */
.ig-serit[data-adet="5"] .ig-kare:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.ig-kare img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.94);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.ig-ort {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,20,22,.5), transparent 55%);
  opacity: 0;
  transition: opacity .45s ease;
}
.ig-kare:hover img,
.ig-kare:focus-visible img { transform: scale(1.06); filter: saturate(1.06); }
.ig-kare:hover .ig-ort,
.ig-kare:focus-visible .ig-ort { opacity: 1; }

.ig-cta { margin-top: 34px; }

/* --- Galeri bosken: uydurma gorsel yok, sade davet --- */
.ig-davet {
  margin-top: 46px;
  padding: clamp(40px, 7vw, 74px) 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(198,161,122,.07), transparent 62%);
}
.ig-davet-cizgi {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--sand));
  opacity: .55;
}
.ig-kulp {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  color: var(--bone);
  letter-spacing: .01em;
}

@media (max-width: 860px) {
  .ig-serit[data-adet="4"],
  .ig-serit[data-adet="5"] { grid-template-columns: repeat(3, 1fr); }
  .ig-serit[data-adet="5"] .ig-kare:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
  .ig-serit { grid-template-columns: repeat(2, 1fr) !important; max-width: none; }
  .ig-serit .ig-kare:first-child { grid-column: span 2; grid-row: auto; }
  .ig-serit .ig-kare:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-kare img { transition: none; }
  .ig-kare:hover img { transform: none; }
}

/* Panel icindeki indirim kodu bolumunun basligi */
.kod-baslik {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 12px;
}

/* =====================================================================
   21) MUSTERI YORUMU — durum seridi
   ===================================================================== */

.yorum-durum {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 7px;
  border-inline-start: 3px solid var(--sand);
  background: rgba(198,161,122,.09);
  display: flex; flex-direction: column; gap: 4px;
}
.yorum-durum b { color: var(--bone); font-weight: 400; font-size: 15.5px; }
.yorum-durum span { font-size: 14px; color: var(--mute); }
.yorum-durum-onaylandi  { border-inline-start-color: #7D9B78; background: rgba(125,155,120,.10); }
.yorum-durum-onaylandi b { color: #9CB897; }
.yorum-durum-reddedildi { border-inline-start-color: #B4695F; background: rgba(180,105,95,.10); }
.yorum-durum-reddedildi b { color: #D8A29A; }

/* Yorum reddetme: sebep + dugme tek parca */
.reddet-form { display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.reddet-form input[name="sebep"] {
  width: 230px; padding: 8px 11px; font-size: 13.5px;
  background: var(--ink); border: 0; color: var(--bone); font-family: var(--body);
}
.reddet-form input[name="sebep"]:focus { outline: none; background: rgba(198,161,122,.08); }
.reddet-form .btn { border-radius: 0; border: 0; border-inline-start: 1px solid var(--line); }

/* =====================================================================
   22) HERO — esit boyutlu, tek renk tirnak dizisi
   ===================================================================== */


/* =====================================================================
   23) VITRIN DUGMESI — "Egitimlere bak"
   ===================================================================== */

.btn-vitrin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(198,161,122,.55);
  color: var(--bone);
  background: linear-gradient(180deg, rgba(198,161,122,.12), rgba(198,161,122,.04));
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn-vitrin .ok {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  color: var(--sand);
}

/* Uzerinden gecen isik — dikkati ceker ama gurultu yapmaz */
.btn-vitrin::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: vitrinIsik 4.5s ease-in-out 1.6s infinite;
  pointer-events: none;
}
@keyframes vitrinIsik {
  0%, 62%  { left: -60%; }
  86%      { left: 130%; }
  100%     { left: 130%; }
}

.btn-vitrin:hover,
.btn-vitrin:focus-visible {
  color: #1A1512;
  background: var(--sand);
  border-color: var(--sand);
}
.btn-vitrin:hover .ok,
.btn-vitrin:focus-visible .ok { transform: translateX(5px); color: #1A1512; }

@media (prefers-reduced-motion: reduce) {
  .btn-vitrin::before { animation: none; }
  .btn-vitrin .ok { transition: none; }
}

/* =====================================================================
   24) YONETIM DUGMESI — hap seklinde, altinda cizgi yok
   .nav a::after tum menu ogelerine alt cizgi ciziyordu; hap seklindeki
   bu dugmede cizgi kutunun icinden gecip kirik gorunuyordu.
   ===================================================================== */

.nav .nav-yonetim::after { content: none !important; }

.nav .nav-yonetim {
  position: relative;
  isolation: isolate;
  border-color: rgba(198,161,122,.42);
  background: linear-gradient(180deg, rgba(198,161,122,.10), rgba(198,161,122,.03));
  overflow: hidden;
  transition: color .28s ease, border-color .28s ease,
              background .28s ease, box-shadow .28s ease, transform .18s ease;
}

/* Icerden disari vuran isik — hover ve odakta acilir */
.nav .nav-yonetim::before {
  content: '';
  position: absolute; inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(198,161,122,.5), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.nav .nav-yonetim:hover,
.nav .nav-yonetim:focus-visible {
  color: #FFF4E6;
  border-color: var(--sand);
  background: linear-gradient(180deg, rgba(198,161,122,.22), rgba(198,161,122,.08));
  box-shadow: 0 0 0 1px rgba(198,161,122,.28),
              0 6px 22px -6px rgba(198,161,122,.55);
}
.nav .nav-yonetim:hover::before,
.nav .nav-yonetim:focus-visible::before { opacity: .55; }

/* Basildigi an: kisa ve net bir parlama */
.nav .nav-yonetim:active {
  transform: translateY(1px) scale(.985);
  color: #1A1512;
  background: var(--sand);
  border-color: var(--sand);
  box-shadow: 0 0 0 3px rgba(198,161,122,.30),
              0 0 26px 2px rgba(198,161,122,.65);
}
.nav .nav-yonetim:active::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav .nav-yonetim,
  .nav .nav-yonetim::before { transition: none; }
  .nav .nav-yonetim:active { transform: none; }
}

/* =====================================================================
   25) HERO TIRNAKLARI — her biri DUZ tek renk
   Bir arada durabilsinler diye hepsi ayni doygunluk ve parlaklikta
   secildi; koyu zeminde birbirini bastirmiyorlar.
   ===================================================================== */

.fan .nail { background-image: none; }          /* gradyanlar kapali */

.d-pudra   { background-color: #E7BFC2; }       /* pudra pembe */
.d-nude    { background-color: #DCBB9B; }       /* sicak nude   */
.d-mavi    { background-color: #A9C0CE; }       /* buz mavisi   */
.d-bordo   { background-color: #9C5B63; }       /* soluk bordo  */
.d-adacayi { background-color: #A7B49E; }       /* adacayi      */

/* Duz renkte parlama cok sert kalmasin */
.fan .nail::after {
  background:
    linear-gradient(116deg,
      rgba(255,255,255,.26) 0 12%,
      rgba(255,255,255,.06) 24%,
      rgba(255,255,255,0)   40%),
    linear-gradient(0deg, rgba(30,20,14,.12), rgba(0,0,0,0) 26%);
}

/* =====================================================================
   26) HERO SAG SUTUN — logo + tirnak dizisi
   Tirnaklarin ustundeki bosluga marka monogrami oturur; sayfa acilirken
   once o gorunur, tirnaklar ardindan tek tek yukselir.
   ===================================================================== */

.hero-sag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
}
/* .fan bir izgara; flex icinde genisligini kaybedip cokuyordu */
.hero-sag > .fan { width: 100%; align-self: stretch; }

.hero-marka {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(112px, 15vw, 168px);
  aspect-ratio: 1;
  opacity: 0;
  animation: markaGir 1.1s cubic-bezier(.2,.75,.3,1) .15s forwards;
}
.hero-marka img {
  position: relative;
  z-index: 1;
  width: 72%;
  height: auto;
  display: block;
  animation: markaSuzul 7s ease-in-out 1.4s infinite;
}

@keyframes markaGir {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes markaSuzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Tirnaklar logodan sonra, soldan saga tek tek yukselsin.
   Animasyon SARMALAYICIYA degil tirnagin kendisine veriliyor: aksi
   halde "forwards" sarmalayicinin transform unu kilitliyor ve
   hover/dokunma yukselmesi calismiyor. */
.fan .nail-bag .nail {
  opacity: 0;
  animation: tirnakGir .7s cubic-bezier(.2,.8,.3,1) forwards;
}
.fan .nail-bag:nth-child(1) .nail { animation-delay: .55s; }
.fan .nail-bag:nth-child(2) .nail { animation-delay: .65s; }
.fan .nail-bag:nth-child(3) .nail { animation-delay: .75s; }
.fan .nail-bag:nth-child(4) .nail { animation-delay: .85s; }
.fan .nail-bag:nth-child(5) .nail { animation-delay: .95s; }

@keyframes tirnakGir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Hover hala calissin — animasyon bitince transform serbest kalir */
.fan .nail-bag:hover,
.fan .nail-bag:focus-visible { transform: translateY(-12px); }

@media (max-width: 760px) {
  .hero-marka { width: clamp(88px, 22vw, 120px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marka,
  .hero-marka img,
  .fan .nail-bag .nail { animation: none; opacity: 1; }
}

/* =====================================================================
   27) DOKUNMATIKTE TIRNAKLAR — dokununca gitmez, yukselir
   Telefonda tirnaga basinca sayfa galeriye atliyordu. Artik dokunmak
   yalnizca o tirnagi kaldirip isiklandirir; tekrar dokununca iner.
   ===================================================================== */

@media (hover: none) {
  .fan .nail-bag {
    transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .35s ease;
  }

  /* Dokunmatikte hover yok sayilsin — parmak kalkinca takili kalmasin */
  .fan .nail-bag:hover { transform: none; filter: none; }
  .fan:hover .nail-bag:not(:hover) { filter: none; }

  /* Secili tirnak */
  .fan .nail-bag[aria-pressed="true"] {
    transform: translateY(-14px);
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.55))
            drop-shadow(0 0 16px rgba(198,161,122,.45));
  }
  .fan .nail-bag[aria-pressed="true"] .nail {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.34),
      0 0 0 2px rgba(198,161,122,.55);
  }

  /* Biri seciliyken digerleri geri cekilsin */
  .fan:has(.nail-bag[aria-pressed="true"]) .nail-bag:not([aria-pressed="true"]) {
    filter: brightness(.68) saturate(.85);
  }
}

@media (hover: none) and (prefers-reduced-motion: reduce) {
  .fan .nail-bag[aria-pressed="true"] { transform: none; }
}

/* =====================================================================
   28) MENU OGELERI DARALMASIN
   Menu sikisinca flex ogeleri buzuluyordu: "Tırnak hizmetleri" iki
   satira dusuyor, "Yönetim" hapinin icindeki yazi kirpiliyordu.
   ===================================================================== */

.nav > a,
.nav .nav-yonetim {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Hap seklindeki dugmede yazi asla kesilmesin */
.nav .nav-yonetim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: max-content;
}

/* Hamburger menusunde tam genislik alsin */
@media (max-width: 1440px) {
  .yonetici-acik .nav .nav-yonetim { justify-content: flex-start; }
}

/* Logo biraz daha yukarida dursun, cevresinde halka/daire yok */
.hero-sag { justify-content: flex-start; }
.hero-marka {
  margin-top: clamp(-52px, -4vw, -16px);
  margin-bottom: clamp(6px, 1.5vw, 18px);
}

/* Randevu adimlari: cipaya inince baslik basliga yapismasin */
#takvim, #saat, #bilgiler { scroll-margin-top: 96px; }

/* Egitim talebinde bicim secimi */
.bicim-secim { display: flex; gap: 10px; flex-wrap: wrap; }
.bicim-secim label {
  flex: 1 1 180px;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.bicim-secim label:hover { border-color: rgba(198,161,122,.5); }
.bicim-secim input { accent-color: var(--sand); }
.bicim-secim label:has(input:checked) {
  border-color: var(--sand);
  background: rgba(198,161,122,.08);
}
.bicim-secim span { font-size: 15px; color: var(--bone); }

/* Randevu iptali: sebep + dugme tek parca */
.iptal-form { display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.iptal-form input[name="sebep"] {
  width: 260px; max-width: 46vw; padding: 8px 11px; font-size: 13.5px;
  background: var(--ink); border: 0; color: var(--bone); font-family: var(--body);
}
.iptal-form input[name="sebep"]:focus { outline: none; background: rgba(180,105,95,.10); }
.iptal-form .btn { border-radius: 0; border: 0; border-inline-start: 1px solid var(--line); }

/* =====================================================================
   29) UST BAR — toparlandi
   Sorun: .head-in flex ogeleri daralabiliyordu. Marka yazisi menunun
   altina giriyor, menu ogeleri iki satira dusuyordu. Artik hicbiri
   daralmiyor; sigmadiginda hamburger devreye giriyor.
   ===================================================================== */

.head-in {
  gap: clamp(18px, 2.4vw, 36px);
  flex-wrap: nowrap;
}

/* Marka bloğu asla buzulmez, yazisi bolunmez */
.brand {
  flex: 0 0 auto;
  min-width: 0;
  margin-right: auto;
}
.brand img { flex: 0 0 auto; }
.brand-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-txt small { white-space: nowrap; }

/* Menu: sagda toplanir, ogeler tek satir kalir */
/* Menu DARALMAZ: daralinca ogeler kutudan tasip markanin uzerine
   biniyordu. Sigmadigi genislikte hamburger devreye girer. */
.nav {
  flex: 0 0 auto;
  gap: clamp(16px, 1.9vw, 30px);
  justify-content: flex-end;
}
.nav > a,
.nav > span { flex: 0 0 auto; white-space: nowrap; }

/* Hesap blogu ve dil secimi de sabit */
.nav-hesap, .dil-secim { flex: 0 0 auto; }
.nav-profil span {
  max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Randevu baglantisi menude vurgulu ama buton degil */
.nav .nav-randevu { color: var(--sand); }
.nav .nav-randevu:hover { color: var(--bone); }

.burger { flex: 0 0 auto; }

/* =====================================================================
   30) ZIYARETCI MENUSU — esik gercek olcume cekildi
   Ust bardaki "Randevu al" butonu kaldirilip menuye tasininca yatay
   menu 1127px istiyor; eski 1040 esigi arada marka yazisiyla cakisiyordu.
   ===================================================================== */

@media (max-width: 1160px) {
  .nav {
    position: fixed; inset: 78px 0 auto 0; background: var(--ink);
    flex-direction: column; gap: 0; padding: 12px 0 22px;
    border-bottom: 1px solid var(--line); display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { width: 100%; padding: 15px var(--gutter); font-size: 16px; }
  .nav .nav-randevu { display: block; color: var(--sand); }
  .burger { display: flex; }

  .nav-hesap {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 0; margin: 6px 0 0; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .nav .nav-profil { width: auto; padding: 15px var(--gutter); }
  .nav-cikis { padding: 15px var(--gutter); font-size: 16px; }
  .dil-secim { width: auto; margin: 10px var(--gutter) 4px; align-self: flex-start; }
  .dil-secim a { padding: 8px 14px; font-size: 13px; }
}

/* Yonetici girisliyken menude bir oge daha var ve icerik sutununa
   (1240px) sigmiyor. Yalnizca o durumda bar genisler; ziyaretcide
   logo hero yazisiyla ayni hizada kalir. */
.yonetici-acik .head-in {
  max-width: min(1560px, 100%);
  padding-inline: clamp(20px, 3.4vw, 48px);
}

/* =====================================================================
   31) HESABIM — ogrenci panosu
   Eskiden ust uste bos panellerdi. Artik ozet seridi, iki sutun ve
   kart tabanli listeler var.
   ===================================================================== */

.hesap { padding-block: clamp(30px, 4vw, 52px) clamp(50px, 7vw, 90px); }

/* --- Baslik --- */
.hesap-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.hesap-kimlik { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hesap-kimlik .kicker { display: block; margin-bottom: 6px; }
.hesap-kimlik h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 0; }
.hesap-kimlik .avatar { flex: 0 0 auto; }

/* Uyelik rozeti */
/* --- Ozet seridi --- */
.hesap-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: clamp(22px, 3vw, 30px) 0 clamp(26px, 3.5vw, 36px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.hesap-ozet > div { background: var(--coal); padding: 18px 20px; }
.hesap-ozet b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: 30px; line-height: 1.1; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.hesap-ozet b i { font-style: normal; font-size: 18px; color: var(--mute-dark); }
.hesap-ozet span { display: block; font-size: 13px; color: var(--mute); margin-top: 4px; }
.hesap-ozet .dikkat b { color: var(--sand); }

/* --- Iki sutun --- */
.hesap-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.hesap-sol, .hesap-sag { display: grid; gap: clamp(18px, 2.4vw, 24px); min-width: 0; }
.hesap-sag { position: sticky; top: 96px; }
.hesap .panel { margin: 0; }

.panel-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.panel-bas h2 { margin: 0; font-size: 21px; }
.panel-bas a { font-size: 13.5px; color: var(--mute); white-space: nowrap; transition: color .2s ease; }
.panel-bas a:hover { color: var(--sand); }

/* --- Bos durum --- */
.bos-hal {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: clamp(26px, 4vw, 44px) 20px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(198,161,122,.05), transparent 70%);
}
.bos-hal-ikon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--sand); opacity: .75;
}
.bos-hal-ikon svg { width: 22px; height: 22px; }
.bos-hal p { margin: 0; color: var(--mute); font-size: 15px; max-width: 34ch; }


/* --- Randevu kartlari --- */
.randevu-liste { display: grid; gap: 10px; }
.randevu-kart {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--coal-2);
}
.randevu-gun {
  flex: 0 0 auto; width: 52px; text-align: center;
  padding: 7px 0; border-radius: 8px;
  background: rgba(198,161,122,.10); border: 1px solid rgba(198,161,122,.22);
}
.randevu-gun b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 21px; line-height: 1; color: var(--bone);
}
.randevu-gun small {
  display: block; font-size: 11px; letter-spacing: .08em;
  color: var(--sand); margin-top: 3px; text-transform: uppercase;
}
.randevu-govde { flex: 1; min-width: 0; }
.randevu-govde b { display: block; font-size: 15.5px; color: var(--bone); font-weight: 400; }
.randevu-govde small { display: block; font-size: 13px; color: var(--mute); margin-top: 3px; }

/* --- Bekleyen siparisler --- */
.siparis-liste { display: grid; gap: 10px; }
.siparis-kart {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--coal-2);
  text-decoration: none;
  transition: border-color .25s ease;
}
.siparis-kart:hover { border-color: rgba(198,161,122,.5); }
.siparis-kart > span:first-child { flex: 1; min-width: 160px; }
.siparis-kart b { display: block; font-size: 15.5px; color: var(--bone); font-weight: 400; }
.siparis-kart small { display: block; font-size: 12.5px; color: var(--mute-dark); margin-top: 3px; }
.siparis-tutar { font-family: var(--display); font-size: 19px; color: var(--sand); white-space: nowrap; }

/* --- Hizli baglantilar --- */
.hizli form { display: block; }
.hizli-bag {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
  padding: 13px 2px; border: 0; background: none;
  border-bottom: 1px solid var(--line);
  color: var(--bone); font: inherit; font-size: 14.5px;
  text-align: start; text-decoration: none; cursor: pointer;
  transition: color .2s ease, padding-inline-start .2s ease;
}
.hizli-bag:last-child, .hizli form:last-child .hizli-bag { border-bottom: 0; }
.hizli-bag i {
  font-style: normal; color: var(--sand); opacity: .55;
  transition: opacity .2s ease, transform .2s ease;
}
.hizli-bag:hover { color: var(--sand); padding-inline-start: 6px; }
.hizli-bag:hover i { opacity: 1; transform: translateX(3px); }
.hizli-bag.cikis { color: var(--mute); }
.hizli-bag.cikis:hover { color: #D8A29A; }
.hizli-bag.cikis i { color: #D8A29A; }

@media (max-width: 900px) {
  .hesap-duzen { grid-template-columns: 1fr; }
  .hesap-sag { position: static; }
  .ders-kart { flex-wrap: wrap; }
  .ders-eylem { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hizli-bag:hover { padding-inline-start: 2px; }
}

/* =====================================================================
   32) EGITIM KARTI — yeniden tasarlandi
   Eskisi duz bir satirdi ve sayfanin en cansiz yeriydi. Artik kapak,
   ilerleme cizgisi, siradaki ders ve gercek bir dugme tasiyor.
   ===================================================================== */

.ders-liste { display: grid; gap: 14px; }

.ders-kart {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(198,161,122,.07), transparent 42%),
    var(--coal-2);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1),
              box-shadow .3s ease;
}

/* Sol kenarda ince altin fitil — uzerine gelince uzar */
.ders-kart::before {
  content: '';
  position: absolute; inset-inline-start: 0; top: 50%;
  width: 3px; height: 0; translate: 0 -50%;
  background: linear-gradient(180deg, transparent, var(--sand), transparent);
  transition: height .35s cubic-bezier(.2,.8,.3,1);
}
.ders-kart:hover, .ders-kart:focus-visible {
  border-color: rgba(198,161,122,.5);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.8);
}
.ders-kart:hover::before, .ders-kart:focus-visible::before { height: 72%; }

/* --- Kapak --- */
.ders-kapak {
  width: 76px; height: 76px;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 80% at 30% 20%, rgba(198,161,122,.30), transparent 65%),
    linear-gradient(160deg, #2A2520, #171412);
  border: 1px solid rgba(198,161,122,.22);
}
.ders-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ders-harf {
  font-family: var(--display);
  font-size: 26px; letter-spacing: .04em;
  color: var(--sand);
}

/* --- Govde --- */
.ders-govde { min-width: 0; display: grid; gap: 9px; }
.ders-govde > b {
  font-family: var(--display); font-weight: 400;
  font-size: 20px; line-height: 1.2; color: var(--bone);
}

/* Ilerleme cizgisi */
.ders-cizgi {
  display: block; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.ders-cizgi i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--sand-deep), var(--sand));
  border-radius: 99px;
}

.ders-alt {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; color: var(--mute);
}
.ders-alt em {
  font-style: normal;
  font-family: var(--display); font-size: 15px; color: var(--sand);
  font-variant-numeric: tabular-nums;
}

/* Siradaki ders — asil davet edici satir */
.ders-siradaki {
  display: block;
  font-size: 13.5px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ders-siradaki b { color: var(--bone); font-weight: 400; }
.ders-siradaki.bitti { color: #9CB897; }

.ders-erisim { display: block; font-size: 12px; color: var(--mute-dark); }

/* --- Dugme --- */
.ders-eylem { flex: 0 0 auto; }
.ders-eylem .btn {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, gap .25s ease;
}
.ders-eylem .btn i { font-style: normal; transition: transform .25s ease; }
.ders-kart:hover .ders-eylem .btn i { transform: translateX(3px); }

/* Tamamlanmis egitim: dugme sakin kalsin */
.ders-kart.tamam .ders-eylem .btn {
  background: none; border: 1px solid var(--line); color: var(--bone);
}
.ders-kart.tamam .ders-kapak { border-color: rgba(125,155,120,.4); }

@media (max-width: 720px) {
  .ders-kart {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px; padding: 16px 18px;
  }
  .ders-kapak { width: 56px; height: 56px; }
  .ders-harf { font-size: 20px; }
  .ders-eylem { grid-column: 1 / -1; }
  .ders-eylem .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ders-kart:hover { transform: none; }
  .ders-kart:hover .ders-eylem .btn i { transform: none; }
}

/* =====================================================================
   33) EGITIM KARTI — hizalama ve golge duzeltmesi
   - Kapak dikeyde ortada yuzuyordu; artik baslikla ayni hizada baslar.
   - "Sıradaki" satirindaki <b> baska bir kuraldan blok/19px aliyordu.
   - Hover golgesi 34px bulaniklikla fazla dagiliyordu.
   ===================================================================== */

.ders-kart {
  align-items: start;
  gap: 18px 20px;
  padding: 20px 22px;
}

/* Kapak basligin hizasinda dursun */
.ders-kapak { align-self: start; margin-top: 2px; }

/* Govde: satirlar birbirine daha yakin */
.ders-govde { gap: 7px; align-content: start; }

/* Siradaki ders tek satir — etiketi ve adi yan yana */
.ders-siradaki {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; color: var(--mute-dark);
  white-space: nowrap; overflow: hidden;
}
.ders-siradaki b {
  display: inline; min-width: 0;
  font-family: var(--body);
  font-size: 14px; font-weight: 400; color: var(--bone);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dugme dikeyde ortalansin ama kartin yuksekligini zorlamasin */
.ders-eylem { align-self: center; }

/* Hover: dagilan bulanik golge yerine toplu, kisa bir derinlik */
.ders-kart:hover,
.ders-kart:focus-visible {
  border-color: rgba(198,161,122,.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.65);
}

@media (max-width: 720px) {
  .ders-eylem { align-self: stretch; }
}

/* =====================================================================
   34) EGITIM KARTI SECIMI
   Ziyaretci bir karta tiklayinca hangisine baktigi belli olsun.
   Bolum acik zeminli (.academy), renkler ona gore.
   ===================================================================== */

.course {
  position: relative;
  cursor: pointer;
  transition: border-color .28s ease, box-shadow .28s ease,
              transform .28s cubic-bezier(.2,.8,.3,1);
}
.course:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

/* Uzerine gelince hafif bir isaret */
.course:hover { border-color: #C6BBA9; }

/* --- Secili kart --- */
.course.secili {
  border-color: var(--sand-deep);
  box-shadow:
    0 0 0 1px var(--sand-deep),
    0 10px 26px -14px rgba(31,28,24,.35);
  transform: translateY(-3px);
}

/* Ust kenarda altin serit */
.course.secili::before {
  content: '';
  position: absolute; inset-inline: -1px; top: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--sand-deep), var(--sand), var(--sand-deep));
}

/* Sag ustte onay isareti */
.course.secili::after {
  content: '✓';
  position: absolute; inset-inline-end: 16px; top: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand-deep); color: #FFF8EF;
  font-size: 14px; line-height: 1;
  animation: secimGir .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes secimGir {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* Secili olmayanlar SOLUKLASTIRILMAZ: opakligi dusurunce kartlar
   "tukenmis" gibi gorunuyordu. Secili kart zaten altin kenarlik,
   tik ve altin dugmeyle ayrisiyor. */

/* Secili karttaki satin alma dugmesi one ciksin */
.course.secili .btn-dark {
  background: var(--sand-deep);
  color: #FFF8EF;
}
.course.secili .btn-dark:hover { background: var(--ink); }

/* "En cok tercih edilen" rozeti secili halkayla catismasin */
.course.featured.secili::after { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .course, .course.secili { transition: none; transform: none; }
  .course.secili::after { animation: none; }
}

/* =====================================================================
   35) EGITIM KARTI — cerceve cizgisi kaldirildi
   Kart artik kenarlikla degil, zemin farkiyla ayrisiyor. Uzerine
   gelince zemin bir tik aciliyor ve soldaki altin fitil uzuyor.
   ===================================================================== */

.ders-kart {
  border: 0;
  background:
    linear-gradient(135deg, rgba(198,161,122,.07), transparent 46%),
    #23272C;
  transition: background .28s ease, transform .28s cubic-bezier(.2,.8,.3,1),
              box-shadow .28s ease;
}

.ders-kart:hover,
.ders-kart:focus-visible {
  border: 0;
  background:
    linear-gradient(135deg, rgba(198,161,122,.12), transparent 46%),
    #2A2F35;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.6);
}

/* Sol fitil kartin kenarina yapissin */
.ders-kart::before { inset-inline-start: 0; border-radius: 0 3px 3px 0; }

/* Kapak da cerceve tasimasin */
.ders-kapak { border: 0; }
.ders-kart.tamam .ders-kapak { border: 0; }

/* Tamamlanan egitimin dugmesi cerceve yerine zeminle ayrissin */
.ders-kart.tamam .ders-eylem .btn {
  border: 0;
  background: rgba(255,255,255,.07);
  color: var(--bone);
}
.ders-kart.tamam:hover .ders-eylem .btn { background: rgba(255,255,255,.12); }

/* =====================================================================
   36) DERS VIDEO OYNATICISI
   Kendi sunucumuzdaki videolar icin. Kontroller sitenin dilinde:
   kum rengi vurgu, ince cizgiler, yumusak gecisler.
   ===================================================================== */

.oynatici {
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  outline: none;
}
.oynatici:focus-visible { box-shadow: 0 0 0 2px var(--sand); }

@supports not (aspect-ratio: 1) {
  .oynatici { height: 0; padding-bottom: 56.25%; }
}

.oynatici-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #000;
  cursor: pointer;
}

/* --- Ortadaki buyuk oynat dugmesi --- */
.oynatici-buyuk {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34));
  border: 0; cursor: pointer;
  transition: opacity .25s ease;
}
.oynatici.oynuyor .oynatici-buyuk { opacity: 0; pointer-events: none; }

.oynatici-buyuk .ok-ikon {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(20,20,22,.58);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), background .26s ease;
}
.oynatici-buyuk .ok-ikon::before {
  content: '';
  width: 0; height: 0;
  margin-inline-start: 5px;
  border-inline-start: 19px solid var(--bone);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.oynatici-buyuk:hover .ok-ikon { transform: scale(1.07); background: rgba(198,161,122,.9); }
.oynatici-buyuk:hover .ok-ikon::before { border-inline-start-color: #15161a; }

/* --- Bekleme halkasi --- */
.oynatici-yukleniyor {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.oynatici-yukleniyor span {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--sand);
  animation: oynaticiDon .8s linear infinite;
}
@keyframes oynaticiDon { to { transform: rotate(360deg); } }

/* --- Kontrol seridi --- */
.oynatici-kontrol {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.oynatici:hover .oynatici-kontrol,
.oynatici.kontrol-acik .oynatici-kontrol,
.oynatici:focus-within .oynatici-kontrol { opacity: 1; transform: none; }

/* Video duruyorken kontroller hep acik */
.oynatici:not(.oynuyor) .oynatici-kontrol { opacity: 1; transform: none; }

/* --- Ilerleme cubugu --- */
.oynatici-cubuk {
  position: relative;
  padding: 7px 0;
  cursor: pointer;
  outline: none;
}
.cubuk-ray {
  position: relative;
  height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.2);
  transition: height .16s ease;
}
.oynatici-cubuk:hover .cubuk-ray,
.oynatici-cubuk:focus-visible .cubuk-ray { height: 7px; }

.cubuk-tampon, .cubuk-dolu {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 3px; width: 0;
}
.cubuk-tampon { background: rgba(255,255,255,.26); }
.cubuk-dolu   { background: var(--sand); }

.cubuk-topuz {
  position: absolute; top: 50%; inset-inline-start: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sand);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .16s ease;
  pointer-events: none;
}
.oynatici-cubuk:hover .cubuk-topuz,
.oynatici-cubuk:focus-visible .cubuk-topuz { transform: translate(-50%, -50%) scale(1); }

.cubuk-balon {
  position: absolute; bottom: 24px;
  transform: translateX(-50%);
  padding: 3px 8px; border-radius: 3px;
  background: rgba(12,13,15,.94);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--bone);
  font-size: 12px; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}

/* --- Alt sira --- */
.oynatici-alt {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.oynatici-bosluk { flex: 1 1 auto; }

.oynatici-dugme {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--bone); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.oynatici-dugme:hover { background: rgba(255,255,255,.12); }
.oynatici-dugme:focus-visible { outline: 2px solid var(--sand); outline-offset: -2px; }

/* Ikonlar — saf CSS, ek dosya yok */
.ikon-oynat {
  width: 0; height: 0;
  border-inline-start: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-inline-start: 3px;
}
.ikon-oynat.duraklat {
  width: 12px; height: 15px; margin: 0;
  border: 0;
  border-inline-start: 4px solid currentColor;
  border-inline-end: 4px solid currentColor;
}

.ikon-tam {
  width: 14px; height: 12px;
  border: 2px solid currentColor;
  border-inline-width: 5px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px transparent;
}
.ikon-tam {                      /* dort kose */
  width: 15px; height: 13px;
  border: 0;
  background:
    linear-gradient(currentColor,currentColor) 0 0/5px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/2px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/5px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/2px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/5px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/2px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/5px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/2px 5px no-repeat;
}

.ikon-pip {
  width: 15px; height: 12px;
  border: 1.8px solid currentColor; border-radius: 2px;
  position: relative;
}
.ikon-pip::after {
  content: '';
  position: absolute; inset-inline-end: 1px; bottom: 1px;
  width: 7px; height: 5px;
  background: currentColor; border-radius: 1px;
}

/* --- Ses --- */
.oynatici-ses { display: flex; align-items: center; }

.ses-kaydirak {
  width: 0; opacity: 0;
  margin-inline-start: 0;
  height: 4px;
  transition: width .22s ease, opacity .22s ease, margin .22s ease;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.26);
  border-radius: 3px; cursor: pointer;
}
.oynatici-ses:hover .ses-kaydirak,
.ses-kaydirak:focus-visible { width: 76px; opacity: 1; margin-inline-start: 4px; }

.ses-kaydirak::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sand); cursor: pointer; border: 0;
}
.ses-kaydirak::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sand); cursor: pointer; border: 0;
}

/* --- Sure --- */
.oynatici-sure {
  margin-inline-start: 8px;
  color: var(--bone);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oynatici-sure b { font-weight: 400; }
.oynatici-sure span { color: rgba(241,236,228,.62); }

/* --- Hiz --- */
.oynatici-hiz { position: relative; }
.hiz-dugme {
  width: auto; padding: 0 10px;
  font-size: 13px; font-family: var(--body);
  font-variant-numeric: tabular-nums;
}
.hiz-liste {
  position: absolute; bottom: 44px; inset-inline-end: 0;
  min-width: 96px; padding: 5px;
  background: rgba(14,15,17,.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 1px;
  z-index: 3;
}
.hiz-liste button {
  padding: 8px 12px;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--bone); font: 400 13px/1 var(--body);
  text-align: start; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.hiz-liste button:hover { background: rgba(255,255,255,.1); }
.hiz-liste button.secili { color: var(--sand); }

/* --- "Kaldigin yerden devam" seridi --- */
.oynatici-devam {
  position: absolute; inset-inline-start: 14px; bottom: 78px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(14,15,17,.93);
  border: 1px solid rgba(198,161,122,.4);
  border-radius: 4px;
  color: var(--bone); font-size: 13px;
  animation: devamGir .3s cubic-bezier(.2,.8,.3,1) both;
  transition: opacity .9s ease;
  max-width: calc(100% - 28px);
}
.oynatici-devam.solgun { opacity: 0; }
.oynatici-devam button {
  background: transparent; border: 0;
  color: var(--sand); font: 400 13px/1 var(--body);
  cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
@keyframes devamGir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Tam ekran --- */
.oynatici.tam-ekran { aspect-ratio: auto; height: 100%; border-radius: 0; }
.oynatici:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; }

@media (max-width: 560px) {
  .oynatici-sure { font-size: 12px; margin-inline-start: 4px; }
  .oynatici-dugme { width: 34px; height: 34px; }
  .oynatici-ses:hover .ses-kaydirak { width: 54px; }
  .oynatici-devam { bottom: 72px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .oynatici-kontrol, .cubuk-ray, .cubuk-topuz, .ses-kaydirak,
  .oynatici-buyuk .ok-ikon { transition: none; }
  .oynatici-devam { animation: none; }
  .oynatici-yukleniyor span { animation-duration: 2s; }
}


/* =====================================================================
   37) VIDEO YUKLEYICI (yonetim)
   Surukle-birak, gercek ilerleme, kapak onizlemesi.
   ===================================================================== */

.video-yukleyici { margin-bottom: 22px; }

.yukleyici-birak {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--coal-2);
  border: 1px dashed var(--line);
  border-radius: 4px;
  transition: border-color .2s ease, background .2s ease;
}
.yukleyici-birak.uzerinde {
  border-color: var(--sand);
  background: rgba(198,161,122,.07);
}

/* Kapak onizlemesi */
.yukleyici-onizleme {
  width: 104px; height: 59px;
  border-radius: 3px;
  background: var(--ink);
  overflow: hidden;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.yukleyici-onizleme:empty::after {
  content: '';
  width: 26px; height: 18px;
  border: 1.6px solid var(--mute-dark);
  border-radius: 2px;
}
.yukleyici-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yukleyici-orta { min-width: 0; }

.yukleyici-durum {
  margin: 0 0 8px;
  color: var(--bone); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yukleyici-durum.iyi  { color: #7FBF8F; }
.yukleyici-durum.kotu { color: #D98A80; white-space: normal; }

.yukleyici-ray {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.yukleyici-ray span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sand-deep), var(--sand));
  transition: width .25s ease;
}

.yukleyici-bilgi {
  margin: 7px 0 0;
  color: var(--mute); font-size: 12px;
  font-variant-numeric: tabular-nums;
  display: flex; gap: 10px;
}

.yukleyici-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.yukleyici-dugmeler label { cursor: pointer; margin: 0; }

/* Asamaya gore hangi dugme gorunsun */
.video-yukleyici[data-asama="bos"]        [data-iptal],
.video-yukleyici[data-asama="bos"]        [data-sil],
.video-yukleyici[data-asama="hazir"]      [data-iptal],
.video-yukleyici[data-asama="yukleniyor"] [data-sil],
.video-yukleyici[data-asama="yukleniyor"] label { display: none; }

.video-yukleyici[data-asama="bos"]   .yukleyici-ray,
.video-yukleyici[data-asama="bos"]   .yukleyici-bilgi { display: none; }
.video-yukleyici[data-asama="hazir"] .yukleyici-bilgi,
.video-yukleyici[data-asama="hazir"] .yukleyici-ray { display: none; }
/* Yuklu videoda durum yazisi tek basina yeter; dolu cubuk bosta duran
   bir alt cizgi gibi gorunuyordu. */
.video-yukleyici[data-asama="hazir"] .yukleyici-durum { margin-bottom: 0; }

@media (max-width: 680px) {
  .yukleyici-birak { grid-template-columns: 1fr; text-align: start; }
  .yukleyici-onizleme { width: 100%; height: 130px; }
}

/* =====================================================================
   38) DERS LISTESINDEN DOGRUDAN VIDEO YUKLEME
   Sirala tablosundaki ders adi ve video rozeti, o dersin formunu acar.
   ===================================================================== */

.ders-bag {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.ders-bag:hover { color: var(--sand); border-bottom-color: rgba(198,161,122,.5); }
.ders-bag:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Rozet baglanti oldugunda tiklanabilir gorunsun */
a.etiket { text-decoration: none; transition: filter .18s ease, transform .18s ease; }
a.etiket:hover { filter: brightness(1.18); }
a.etiket:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* "video yükle" eylem rozeti — bos rozetten ayirt edilsin */
.etiket-eylem {
  border-color: rgba(198,161,122,.55);
  color: var(--sand);
  white-space: nowrap;
}
.etiket-eylem:hover { background: rgba(198,161,122,.14); }

/* Listeden gelince acilan panel bir an vurgulansin ki goz kaybolmasin */
.panel:target { box-shadow: 0 0 0 1px rgba(198,161,122,.45); }
@media (prefers-reduced-motion: no-preference) {
  .panel:target { animation: panelVurgu 1.6s ease-out 1; }
  @keyframes panelVurgu {
    0%   { box-shadow: 0 0 0 1px rgba(198,161,122,.9); }
    100% { box-shadow: 0 0 0 1px rgba(198,161,122,.45); }
  }
}

/* Cipayla gelinen panel sayfanin en tepesine yapismasin */
.panel[id^="ders-"] { scroll-margin-top: 18px; }

/* =====================================================================
   39) SIRA TABLOSUNDAN HIZLI DERS EKLEME
   Ders sayisi arttikca alttaki tam form gozden kayboluyordu; liste
   artik kendi altindan uzuyor.
   ===================================================================== */

.hizli-ekle {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 190px auto;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Sira sutunundaki kutularla ayni hizada dursun */
.hizli-no {
  display: grid; place-items: center;
  height: 40px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  color: var(--mute-dark);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.hizli-ekle input[type="text"] { margin: 0; }
.hizli-ekle button { white-space: nowrap; }

@media (max-width: 720px) {
  .hizli-ekle { grid-template-columns: 1fr; }
  .hizli-no { display: none; }
}

/* =====================================================================
   40) OYNATICI — GORUNUR GERI BILDIRIM, FILIGRAN, BITTI DUGMESI
   Ses ve hiz degistiginde kullanicinin degisikligi GORMESI gerekiyor;
   kaydirak yalnizca fareyle ustune gelince aciliyordu.
   ===================================================================== */

/* --- Ortadaki kisa gosterge --- */
.oynatici-bildirim {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex; align-items: center; gap: 10px;
  min-width: 128px;
  padding: 14px 18px;
  background: rgba(12,13,15,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  color: var(--bone);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: oynaticiBildirimGir .18s ease-out both;
  transition: opacity .3s ease;
}
.oynatici-bildirim.solgun { opacity: 0; }

/* Ad benzersiz olmali: "bildirimGir" zaten site bildirimlerinin
 animasyonu. Ayni adi kullanmak onu eziyor ve yonetim bildirimini
 translate(-50%,-50%) ile ekranin disina kaydiriyordu. */
@keyframes oynaticiBildirimGir {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.bildirim-metin { white-space: nowrap; }

/* Gostergedeki kucuk ses cubugu */
.bildirim-ray {
  flex: 1 1 auto;
  height: 4px; min-width: 52px;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.bildirim-ray i {
  display: block; height: 100%; width: 0;
  background: var(--sand);
  transition: width .12s ease;
}

/* Gosterge ikonlari */
.bildirim-ikon { width: 20px; height: 16px; flex: 0 0 auto; position: relative; }

.bildirim-ikon.ikon-ses::before,
.bildirim-ikon.ikon-sessiz::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 10px; height: 12px; background: currentColor;
  clip-path: polygon(0 30%, 38% 30%, 100% 0, 100% 100%, 38% 70%, 0 70%);
}
.bildirim-ikon.ikon-ses::after {
  content: ''; position: absolute; left: 13px; top: 4px;
  width: 7px; height: 7px;
  border: 1.6px solid currentColor;
  border-inline-start-color: transparent; border-top-color: transparent;
  border-radius: 50%; transform: rotate(-45deg);
}
.bildirim-ikon.ikon-sessiz::after {
  content: ''; position: absolute; left: 12px; top: 7px;
  width: 9px; border-top: 1.8px solid currentColor;
  transform: rotate(-45deg);
}

/* Hiz ve sarma icin yazi yeter, ikon yerine bosluk birakma */
.bildirim-ikon.ikon-hiz,
.bildirim-ikon.ikon-ileri,
.bildirim-ikon.ikon-geri { display: none; }

/* --- Kaydirak: klavyeyle degistirilirken de acik kalsin --- */
.oynatici.ses-acik .ses-kaydirak { width: 76px; opacity: 1; margin-inline-start: 4px; }

/* --- Filigran --- */
.oynatici-filigran {
  position: absolute;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.42);
  font-size: 12px;
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: top .8s ease, left .8s ease, right .8s ease, bottom .8s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* --- Tamamlanmis ders dugmesi --- */
.btn-bitti {
  border-color: rgba(127,191,143,.45);
  color: #9BD3A8;
}
.btn-bitti:hover {
  border-color: rgba(127,191,143,.7);
  background: rgba(127,191,143,.1);
}

@media (prefers-reduced-motion: reduce) {
  .oynatici-bildirim { animation: none; }
  .oynatici-filigran { transition: none; }
}

/* =====================================================================
   41) DERS SAYFASI — calisma ortami
   Ogrencinin saatlerce oturacagi ekran. Sakin bir zemin, videonun
   etrafinda nefes, notlar elin altinda.
   ===================================================================== */

.ders-sayfa {
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(198,161,122,.07), transparent 62%),
    var(--ink);
  min-height: 100vh;
  padding-bottom: 64px;
}

/* --- Ust serit --- */
.ders-ust {
  position: sticky; top: 0; z-index: 20;
  background: rgba(19,20,22,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(49,53,58,.6);
}
.ders-ust-ic {
  display: flex; align-items: center; gap: 18px;
  padding-block: 13px;
}

.ders-geri {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--mute); font-size: 14px; text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, gap .2s ease;
}
.ders-geri:hover { color: var(--bone); gap: 11px; }

.ders-ust-egitim {
  flex: 1 1 auto; min-width: 0;
  color: var(--sand);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ilerleme halkasi */
.ders-ust-ilerleme {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--mute); font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.ders-ust-ilerleme b { color: var(--bone); font-weight: 400; }

.halka { width: 30px; height: 30px; transform: rotate(-90deg); }
.halka circle { fill: none; stroke-width: 3; }
.halka-zemin { stroke: rgba(255,255,255,.1); }
.halka-dolu {
  stroke: var(--sand);
  stroke-linecap: round;
  stroke-dasharray: 97.4;                      /* 2*pi*15.5 */
  stroke-dashoffset: 97.4;
  animation: halkaCiz 1.1s cubic-bezier(.2,.8,.3,1) .25s forwards;
}
@keyframes halkaCiz {
  to { stroke-dashoffset: calc(97.4 - (97.4 * var(--yuzde) / 100)); }
}

/* --- Duzen --- */
.ders-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 34px;
  align-items: start;
  padding-top: 30px;
}

/* --- Sahne: videonun etrafinda yumusak bir isik --- */
.ders-sahne { position: relative; }
.ders-sahne::before {
  content: '';
  position: absolute; inset: 14px 14px -18px;
  background: radial-gradient(60% 60% at 50% 60%, rgba(198,161,122,.16), transparent 72%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}
.ders-sahne .oynatici,
.ders-sahne .video-kilit,
.ders-sahne .video-kutu {
  border-radius: 6px;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.9);
}

/* --- Baslik ve eylemler --- */
.ders-baslik {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 26px; flex-wrap: wrap;
  margin-top: 26px;
}
.ders-etiket {
  display: block;
  color: var(--mute-dark);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 9px;
}
.ders-baslik h1 {
  margin: 0;
  font-size: clamp(25px, 3.1vw, 36px);
  line-height: 1.16;
  text-wrap: balance;
}

.ders-eylemler { display: flex; align-items: center; gap: 12px; }
.ders-eylemler form { margin: 0; }

.ders-gezinme { display: flex; gap: 6px; }
.gez-dugme {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--bone); font-size: 16px; text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.gez-dugme:hover { border-color: var(--sand); background: rgba(198,161,122,.1); }
.gez-dugme:active { transform: scale(.95); }
.gez-dugme.pasif { color: var(--mute-dark); border-color: rgba(49,53,58,.5); cursor: default; }

/* --- Panel ve sekmeler --- */
.ders-panel {
  margin-top: 30px;
  background: var(--coal);
  border-radius: 5px;
  overflow: hidden;
}

.ders-sekmeler {
  display: flex; gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid rgba(49,53,58,.7);
}
.ders-sekmeler button {
  position: relative;
  padding: 13px 18px 14px;
  background: transparent; border: 0;
  color: var(--mute); font: 400 14px/1 var(--body);
  cursor: pointer;
  transition: color .2s ease;
}
.ders-sekmeler button:hover { color: var(--bone); }
.ders-sekmeler button[aria-selected="true"] { color: var(--bone); }
.ders-sekmeler button[aria-selected="true"]::after {
  content: '';
  position: absolute; inset-inline: 10px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--sand);
  animation: sekmeCiz .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sekmeCiz { from { transform: scaleX(.3); opacity: 0; } to { transform: none; opacity: 1; } }

.sekme-sayi {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  margin-inline-start: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.09);
  color: var(--mute);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.ders-sekmeler button[aria-selected="true"] .sekme-sayi {
  background: rgba(198,161,122,.18); color: var(--sand);
}

.sekme-govde { padding: 22px 24px 26px; animation: govdeGir .26s ease-out both; }
@keyframes govdeGir { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* --- Not yazma --- */
.not-yazac {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
}

.not-an {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--mute); font: 400 13px/1 var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.not-an:hover { border-color: var(--sand); color: var(--bone); }
.not-an.sabit {
  border-color: var(--sand); color: var(--sand);
  background: rgba(198,161,122,.1);
}
.an-nokta {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mute-dark);
  transition: background .2s ease;
}
.not-an.sabit .an-nokta {
  background: var(--sand);
  animation: anNabiz 1.8s ease-in-out infinite;
}
@keyframes anNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,161,122,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(198,161,122,0); }
}

.not-yazac textarea {
  min-height: 42px; margin: 0;
  resize: none; overflow: hidden;
  line-height: 1.5;
}
.not-yazac .btn { height: 42px; }

.not-uyari {
  margin: 12px 0 0; padding: 10px 13px;
  background: rgba(217,138,128,.1);
  border-inline-start: 2px solid #D98A80;
  border-radius: 2px;
  color: #D98A80; font-size: 13px;
}

/* --- Not arama --- */
.not-arama { margin-top: 18px; }
.not-arama input { margin: 0; }

/* --- Not listesi --- */
.not-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }

.not-kart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  padding: 14px 16px;
  background: var(--coal-2);
  border-radius: 4px;
  position: relative;
  transition: background .2s ease, transform .2s ease;
  animation: notGir .3s cubic-bezier(.2,.8,.3,1) both;
}
.not-kart:hover { background: #272B31; }
.not-kart.yeni { box-shadow: inset 0 0 0 1px rgba(198,161,122,.55); }
.not-kart.gidiyor { opacity: 0; transform: translateX(-10px); }

@keyframes notGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.not-an-rozet {
  align-self: start;
  padding: 4px 9px;
  background: rgba(198,161,122,.12);
  border: 0; border-radius: 3px;
  color: var(--sand);
  font: 400 12px/1.4 var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease;
}
.not-an-rozet:hover { background: rgba(198,161,122,.24); }

.not-metin {
  color: var(--bone); font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.not-duzenle {
  grid-column: 2; margin: 0;
  font-size: 14.5px; line-height: 1.6;
}

.not-eylem {
  grid-column: 2;
  display: flex; gap: 14px;
  opacity: 0;
  transition: opacity .2s ease;
}
.not-kart:hover .not-eylem,
.not-kart:focus-within .not-eylem { opacity: 1; }

.not-eylem button {
  padding: 0; background: transparent; border: 0;
  color: var(--mute-dark); font: 400 12.5px/1 var(--body);
  cursor: pointer;
  transition: color .18s ease;
}
.not-eylem button:hover { color: var(--bone); }
.not-eylem button.tehlike:hover { color: #D98A80; }

.not-bulunamadi { color: var(--mute-dark); font-size: 14px; padding: 8px 2px; }

/* --- Bos durum --- */
.not-bos { padding: 34px 20px; text-align: center; }
.not-bos p { margin: 0 0 6px; color: var(--bone); font-size: 15px; }
.not-bos span { color: var(--mute-dark); font-size: 13.5px; line-height: 1.65; display: block; max-width: 400px; margin: 0 auto; }

.bos-ikon {
  display: block; width: 34px; height: 40px; margin: 0 auto 16px;
  border: 1.5px solid var(--line); border-radius: 2px;
  position: relative;
}
.bos-ikon::before, .bos-ikon::after {
  content: '';
  position: absolute; inset-inline: 8px;
  height: 1.5px; background: var(--line);
}
.bos-ikon::before { top: 12px; }
.bos-ikon::after  { top: 20px; inset-inline-end: 16px; }

/* --- Soru sor --- */
.ders-soru {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding: 16px 18px;
  background: rgba(198,161,122,.07);
  border-radius: 4px;
  color: var(--mute); font-size: 13.5px; line-height: 1.55;
  text-decoration: none;
  transition: background .22s ease;
}
.ders-soru:hover { background: rgba(198,161,122,.13); }
.ders-soru b { display: block; color: var(--bone); font-weight: 400; margin-bottom: 2px; }
.ders-soru span:nth-child(2) { flex: 1 1 auto; }
.soru-ok { color: var(--sand); font-size: 16px; transition: transform .22s ease; }
.ders-soru:hover .soru-ok { transform: translateX(4px); }

.soru-ikon {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(198,161,122,.16);
  display: grid; place-items: center;
  position: relative;
}
.soru-ikon::before {
  content: '?';
  color: var(--sand); font-size: 16px; font-family: var(--display);
}

/* --- Kisayollar --- */
.kisayol-liste { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 11px; }
.kisayol-liste li { display: flex; align-items: center; gap: 9px; color: var(--mute); font-size: 14px; }
.kisayol-liste span { color: var(--mute); }

kbd {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 26px; padding: 0 8px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--bone);
  font: 400 12px/1 var(--body);
}

/* --- Sag: ders listesi --- */
.ders-yan { position: sticky; top: 76px; }

.ders-liste {
  background: var(--coal);
  border-radius: 5px;
  overflow: hidden;
}

.ders-liste-bas { padding: 20px 20px 18px; border-bottom: 1px solid rgba(49,53,58,.7); }
.liste-bas-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.liste-bas-ust span {
  color: var(--mute-dark); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
.liste-bas-ust b {
  color: var(--bone); font-weight: 400; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.liste-kalan { display: block; margin-top: 11px; color: var(--mute-dark); font-size: 12.5px; }
.liste-kalan.bitti { color: var(--sand); }

.ders-liste-govde { max-height: min(56vh, 520px); overflow-y: auto; }
.ders-liste-govde::-webkit-scrollbar { width: 6px; }
.ders-liste-govde::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.ders-liste-alt {
  padding: 13px 20px;
  border-top: 1px solid rgba(49,53,58,.7);
  color: var(--mute-dark); font-size: 12.5px;
}

/* Satirlar */
.ders-satir {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 13px 20px;
  color: var(--mute); text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.ders-satir:hover { background: rgba(255,255,255,.035); color: var(--bone); }

.ders-satir .no {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--mute-dark); font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ders-satir .ad { min-width: 0; line-height: 1.45; }
.ders-satir .ad small { display: block; color: var(--mute-dark); font-size: 11.5px; margin-top: 2px; }
.ders-satir .sure {
  color: var(--mute-dark); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Aktif */
.ders-satir.aktif { background: rgba(198,161,122,.08); color: var(--bone); }
.ders-satir.aktif::before {
  content: '';
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 2px; background: var(--sand);
  animation: railGir .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes railGir { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.ders-satir.aktif .no { border-color: var(--sand); color: var(--sand); }

/* Yarim birakilmis */
.ders-satir.suruyor .no { border-color: rgba(198,161,122,.5); }

/* Tamamlanmis */
.ders-satir.bitti .no {
  background: rgba(127,191,143,.16);
  border-color: rgba(127,191,143,.4);
  color: #9BD3A8;
}

.ders-bolum {
  padding: 16px 20px 8px;
  color: var(--mute-dark);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

/* --- Giris animasyonu --- */
[data-giris] { animation: dersGir .5s cubic-bezier(.2,.8,.3,1) both; }
[data-giris="1"] { animation-delay: .02s; }
[data-giris="2"] { animation-delay: .10s; }
[data-giris="3"] { animation-delay: .18s; }
[data-giris="4"] { animation-delay: .08s; }

@keyframes dersGir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Dar ekran --- */
@media (max-width: 1080px) {
  .ders-duzen { grid-template-columns: minmax(0, 1fr); }
  .ders-yan { position: static; }
  .ders-liste-govde { max-height: none; }
}

@media (max-width: 620px) {
  .ders-ust-egitim { display: none; }
  .ders-baslik { align-items: flex-start; }
  .ders-eylemler { width: 100%; justify-content: space-between; }
  .not-yazac { grid-template-columns: 1fr; }
  .not-yazac .not-an { justify-self: start; }
  .sekme-govde { padding: 18px 16px 22px; }
  .ders-sekmeler button { padding: 12px 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-giris], .not-kart, .sekme-govde,
  .ders-satir.aktif::before, .ders-sekmeler button[aria-selected="true"]::after { animation: none; }
  .halka-dolu {
    animation: none;
    stroke-dashoffset: calc(97.4 - (97.4 * var(--yuzde) / 100));
  }
  .not-an.sabit .an-nokta { animation: none; }
}

/* --- uygulama.css'teki eski ders listesi kurallarini gecersiz kil ---
   Eski surumden kalan cerceve, kendi sticky'si ve inset golge yeni
   duzenle catisiyordu. */
.ders-liste {
  border: 0;
  position: static;
  max-height: none;
  overflow: hidden;
}
.ders-satir {
  border-top: 0;
  box-shadow: none;
}
.ders-satir.aktif { box-shadow: none; }
.ders-liste-bas { letter-spacing: normal; color: inherit; font-size: inherit; }

/* =====================================================================
   42) INSTAGRAM — tek gecit
   Fotograf seridi kaldirildi (calismalar zaten Galeri bolumunde).
   Burasi artik tek is yapiyor: Instagram'a gotursun.
   ===================================================================== */

.ig-gecit {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  max-width: 560px;
  margin-top: 40px;
  padding: 26px 30px;
  border-radius: 6px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(198,161,122,.10), rgba(198,161,122,0) 58%),
    var(--coal);
  transition: transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s ease;
}
.ig-gecit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -30px rgba(0,0,0,.9);
}
.ig-gecit:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

/* Uzerine gelince soldan saga gecen sicak isik */
.ig-gecit-isik {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg,
    transparent 30%, rgba(198,161,122,.16) 48%, transparent 66%);
  transform: translateX(-100%);
  transition: transform .9s cubic-bezier(.2,.8,.3,1);
}
.ig-gecit:hover .ig-gecit-isik { transform: translateX(100%); }

/* Ince altin cerceve */
.ig-gecit::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(198,161,122,.22);
  pointer-events: none;
  transition: border-color .34s ease;
}
.ig-gecit:hover::after { border-color: rgba(198,161,122,.52); }

.ig-gecit-ikon {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(198,161,122,.12);
  color: var(--sand);
  transition: background .34s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
.ig-gecit-ikon svg { width: 26px; height: 26px; }
.ig-gecit:hover .ig-gecit-ikon { background: rgba(198,161,122,.2); transform: scale(1.06); }

.ig-gecit-yazi { flex: 1 1 auto; min-width: 0; }
.ig-gecit-yazi b {
  display: block;
  color: var(--bone);
  font-family: var(--display);
  font-size: 21px; font-weight: 400;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.ig-gecit-yazi span {
  display: block;
  color: var(--mute);
  font-size: 14px;
}

.ig-gecit-ok {
  flex: 0 0 auto;
  color: var(--sand);
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
.ig-gecit-ok svg { width: 22px; height: 22px; display: block; }
.ig-gecit:hover .ig-gecit-ok { transform: translateX(6px); }

@media (max-width: 560px) {
  .ig-gecit { gap: 16px; padding: 20px 20px; }
  .ig-gecit-ikon { width: 46px; height: 46px; border-radius: 12px; }
  .ig-gecit-yazi b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-gecit, .ig-gecit-ikon, .ig-gecit-ok, .ig-gecit-isik { transition: none; }
  .ig-gecit:hover { transform: none; }
  .ig-gecit:hover .ig-gecit-isik { transform: translateX(-100%); }
}

/* =====================================================================
   43) HIZMET LISTESI — yeniden kuruldu
   Eski duzende ad sutunu "auto" idi; en uzun hizmet adi butun satiri
   eziyor, aciklama iki kelimelik seritlere dusuyordu. Artik ad ve
   aciklama solda tek blok, fiyat sagda kendi sutununda.
   ===================================================================== */

.svc-list {
  border-top: 0;
  display: grid;
  gap: 2px;
}

/* tasarim.css'teki eski izgarayi sifirla */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "bas   fiyat"
    "acik  acik"
    "git   git";
  column-gap: clamp(20px, 4vw, 54px);
  row-gap: 0;
  align-items: baseline;

  padding: clamp(20px, 2.4vw, 26px) clamp(16px, 2vw, 26px);
  border-bottom: 1px solid rgba(49,53,58,.55);
  border-radius: 4px;

  background: transparent;
  transition: background-color .34s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
.svc:last-child { border-bottom: 0; }

.svc:hover,
.svc:focus-visible {
  background-color: rgba(198,161,122,.05);
  background-image: none;
  transform: none;                       /* eski 4px kayma kaldirildi */
}
.svc:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* --- Ust satir: ad + sure --- */
.svc-bas {
  grid-area: bas;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  min-width: 0;
}

.svc-name {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.24;
  color: var(--bone);
  transition: color .3s ease;
}
.svc:hover .svc-name { color: #fff; }

/* Sure artik fiyatin altinda degil, adin yaninda kucuk bir etiket */
.svc-time {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  color: var(--mute-dark);
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-align: start;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.svc:hover .svc-time { background: rgba(198,161,122,.14); color: var(--sand); }

/* --- Fiyat --- */
.svc-price {
  grid-area: fiyat;
  justify-self: end;
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--sand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.svc:hover .svc-price { color: #E0C4A2; }

/* --- Aciklama: artik tam genislikte, okunur bir olcude --- */
.svc-desc {
  grid-area: acik;
  display: block;
  margin: 9px 0 0;
  max-width: 68ch;
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.62;
}

/* --- Alt: randevu daveti (yalnizca uzerine gelince) --- */
.svc-git {
  grid-area: git;
  display: block;
  margin-top: 12px;
  color: var(--sand);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.svc:hover .svc-git,
.svc:focus-visible .svc-git { opacity: 1; transform: none; }

/* Eski sag ok kaldirildi — yerini alttaki davet aldi.
   DIKKAT: ::after artik ARKA ISIK katmani (47. bolum). Buraya
   content:none yazilirsa isik hic basilmaz — a.svc::after (0-1-1)
   .svc::after'i (0-1-0) ezer. Ok yerine sag dolgu kaldirildi. */
a.svc { text-decoration: none; }

/* Sol kenardaki altin fitil kalsin ama kenara yapissin */
.svc::before {
  left: 0;
  border-radius: 0 2px 2px 0;
}

/* --- Dokunmatik: hover yok, davet hep gorunsun --- */
@media (hover: none) {
  .svc-git { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .svc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bas" "fiyat" "acik" "git";
    row-gap: 2px;
  }
  .svc-price { justify-self: start; margin-top: 8px; }
  .svc-desc { margin-top: 8px; }
}

.svc-note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(49,53,58,.5);
  font-size: 13.5px;
  color: var(--mute-dark);
}

@media (prefers-reduced-motion: reduce) {
  .svc, .svc-git, .svc-name, .svc-price, .svc-time { transition: none; }
}

/* =====================================================================
   44) ISIK
   Iki deneme de yanlisti: once hic gorunmuyordu, sonra ekranda bir sekil
   haline geldi (capraz huzme, parlayan cubuklar) ve hata gibi durdu.

   Dogrusu: isik SEKIL DEGILDIR. Gercek bir mekanda isigi gormezsin,
   isigin dusurdugu farki gorursun. Burada uc sey yapiyoruz:

     1) Vinyet — kenarlar koyulasir, orta yukselir. Icerik "aydinlatilmis"
        hisseder, ama ortada gorunur bir leke yoktur.
     2) Cok genis, cok yumusak sicaklik — o kadar buyuk ki kenari
        secilmez; bir gradyan gibi degil, ortam sicakligi gibi okunur.
     3) Yuzeyler isigi yakalar — panellerin ust kenarinda 1px'lik pah,
        gercek malzemenin isik alan kenari gibi.

   Huzme yok, parlayan ayrac yok, nabiz atan nokta yok, metinde hale yok.
   ===================================================================== */

section { position: relative; isolation: isolate; overflow: clip; }
section > .wrap { position: relative; z-index: 1; }

/* ---------- 1) Ortam sicakligi + vinyet ----------
   Tek katmanda ikisi birden: once genis sicak kaynak, ustune kenarlari
   koyulastiran vinyet. Ikisi de kenari secilmeyecek kadar yumusak. */
/* Zemin once bir tik yukseliyor.
   Siyaha yakin bir zeminde vinyet ise yaramaz — siyahi daha fazla
   karartamazsin. Once ton araligi acilir (ust acik, alt koyu), sonra
   sicak kaynak ustune biner. Isik ancak boyle "dusmus" gorunur. */
section[id] {
  background-image: linear-gradient(180deg, #17191C 0%, #121316 62%, #0F1012 100%);
}

/* DIKKAT — secici onceligi:
   section[id] = 0-1-1, .academy = 0-1-0. Yalniz sinif yazilirsa koyu
   gradyan acik zeminli akademi bolumunun ustune biner ve oradaki koyu
   metin okunmaz olur. Bu yuzden ayni seviyede yaziliyor. */
section[id].academy {
  background-image: none;
  background-color: var(--porcelain);
}

section[id]::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* ana kaynak — sol ustten, kenari secilmeyecek kadar genis */
    radial-gradient(1600px 1000px at 16% -8%, rgba(206,170,126,.17), transparent 56%),
    /* karsit isik — altinin altin gorunmesi icin serin bir dolgu */
    radial-gradient(1300px 900px at 96% 104%, rgba(142,126,158,.07), transparent 58%),
    /* yalnizca kenarlarda cok hafif koyulasma */
    radial-gradient(150% 120% at 50% 40%, transparent 62%, rgba(0,0,0,.38) 100%);
}

/* Akademi acik zeminli: orada vinyet koyu degil, sicak kagit golgesi */
section[id].academy::before {
  background:
    radial-gradient(1400px 900px at 14% 0%, rgba(168,129,90,.11), transparent 58%),
    radial-gradient(150% 120% at 50% 42%,   transparent 64%, rgba(120,104,86,.11) 100%);
}

/* ---------- 2) Bolum ayraci ----------
   Parlamaz. Ince, mimari bir cizgi; ortasi bir tik acik. */
section[id] + section[id]::after {
  content: '';
  position: absolute; top: 0; inset-inline: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(255,255,255,.02) 0%,
    rgba(198,161,122,.22) 50%,
    rgba(255,255,255,.02) 100%);
}

/* ---------- 3) Yuzeyler isigi yakalasin ----------
   Ust kenarda 1px'lik acik pah + altta derinlik. Panel, kart ve
   kutular artik duz bir dikdortgen degil, isik alan bir yuzey. */
.panel,
.hk-yan,
.ders-liste,
.ders-panel,
.ig-gecit,
.oynatici,
.not-kart,
.olcum {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.28),
    0 12px 28px -22px rgba(0,0,0,.7);
}

/* Acik zeminde pah beyaz degil, sicak ve cok hafif */
.academy .course {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(31,28,24,.06),
    0 14px 30px -24px rgba(31,28,24,.3);
}

/* ---------- 4) Imlecin altinda hafif bir parlaklik ----------
   Spot degil, sheen. Kucuk ve dusuk: fark edilir ama "isik topu" gibi
   durmaz. Konum JS'ten (--fx/--fy); JS yoksa sade hover kalir. */
.spot { position: relative; }
.spot::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(180px circle at var(--fx, 50%) var(--fy, 50%),
              rgba(226,190,146,.07), transparent 58%);
}
.spot:hover::after,
.spot:focus-visible::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

.academy .spot::after {
  background: radial-gradient(180px circle at var(--fx, 50%) var(--fy, 50%),
              rgba(168,129,90,.08), transparent 58%);
}

/* =====================================================================
   GORUNDUKCE ACILMA
   Gizleme sinifini JS ekliyor: JS kapaliysa hicbir sey gizlenmez ve
   ilk ekrandaki icerik beklemeden okunur.
   ===================================================================== */

.js-acilir {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.22,.7,.28,1),
              transform .8s cubic-bezier(.22,.7,.28,1);
  transition-delay: var(--gecikme, 0s);
  will-change: opacity, transform;
}
.js-acilir.gorundu { opacity: 1; transform: none; }
.js-acilir.sec-head { transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .js-acilir { opacity: 1; transform: none; transition: none; }
  .spot::after { transition: none; }
}


/* =====================================================================
   45) BUTONLAR — tek elden
   Her butonda ayni davranis: hafif yukselme, uzerinden gecen isik,
   net basma hissi ve gorunur klavye odagi.
   ===================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .22s cubic-bezier(.2,.8,.3,1),
    box-shadow .28s ease;
}

/* Uzerinden gecen isik */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.22) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .72s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }

.btn:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

/* Dolu buton: altin, uzerine gelince kemik + sicak golge */
.btn-solid:hover {
  background: var(--bone);
  box-shadow: 0 10px 26px -14px rgba(198,161,122,.75);
}

/* Cerceveli buton: kenar isinsin, iceri hafif dolgu gelsin */
.btn-ghost:hover {
  border-color: var(--sand);
  color: var(--sand);
  background: rgba(198,161,122,.08);
}

/* Acik zeminli bolumdeki koyu buton */
.btn-dark:hover {
  background: var(--sand-deep);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(31,28,24,.6);
}
/* Acik zeminde beyaz parilti fazla sert kaliyordu */
.academy .btn::after {
  background: linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.3) 50%, transparent 66%);
}

/* Kucuk butonlarda parilti dikkat dagitiyor */
.btn-kucuk::after { content: none; }
.btn-kucuk:hover  { transform: none; }

/* Devre disi buton hicbir sey yapmiyormus gibi dursun */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* =====================================================================
   47) HIZMET SATIRI — arkadan isik, iki asamali secim
   Ilk dokunusta satir havalanir ve arkasindan isik gelir; ikinci
   dokunus randevu sayfasini acar. Fareli cihazda uzerine gelmek zaten
   havalandirdigi icin tek tik yeter.
   ===================================================================== */

.svc {
  transition:
    background-color .34s ease,
    box-shadow .38s cubic-bezier(.2,.8,.3,1),
    transform .38s cubic-bezier(.2,.8,.3,1),
    border-color .34s ease;
}

/* Arka isik: satirin ARKASINDA duran, yayilmis sicak bir hale.
   .svc > * zaten konumlu oldugu icin yazi bu katmanin ustunde kalir. */
a.svc::after,
.svc::after {
  content: '';
  position: absolute;
  inset: -4px -14px;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(58% 130% at 50% 50%, rgba(214,172,122,.30), transparent 72%);
  filter: blur(16px);
  opacity: 0;
  transform: scaleY(.7);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);
}

.svc > * { position: relative; z-index: 1; }

/* --- Havalanmis satir --- */
.svc.havada {
  transform: translateY(-4px);
  border-bottom-color: transparent;
  border-radius: 8px;
  background-color: rgba(255,255,255,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 44px -28px rgba(0,0,0,.95);
}
.svc.havada::after { opacity: 1; transform: none; }

/* Soldaki altin fitil havalaninca uzasin */
.svc.havada::before { height: 72%; }

/* Metinler bir tik one ciksin */
.svc.havada .svc-name  { color: #fff; }
.svc.havada .svc-price { color: #E8CBA6; }
.svc.havada .svc-time  { background: rgba(198,161,122,.16); color: var(--sand); }
.svc.havada .svc-git   { opacity: 1; transform: none; }

/* Dokunmatikte "bir daha dokun" ipucu netlesir */
@media (hover: none) {
  .svc-git { opacity: 0; transform: translateY(-4px); }
  .svc.havada .svc-git { opacity: 1; transform: none; }
}

.svc:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .svc, .svc::after { transition: none; }
  .svc.havada { transform: none; }
  .svc::after { transform: none; }
}

/* =====================================================================
   48) HAKKIMDA
   Anlati tam genislikte DENGELI iki sutun; belgeler altinda yatay
   serit. Onceki duzende metin ve belge paneli yan yanaydi, farkli
   yuksekliklerde bitip altta bosluk birakiyordu.
   ===================================================================== */

/* Isik sag ustten — portre isigi gibi. Bicim 44. bolumdeki ortak
   duzenle ayni: genis, kenari secilmeyen sicaklik + kenar vinyeti. */
section[id].hakkinda::before {
  background:
    radial-gradient(1600px 1000px at 86% -8%, rgba(206,170,126,.17), transparent 56%),
    radial-gradient(1300px 900px at 4% 104%,  rgba(142,126,158,.07), transparent 58%),
    radial-gradient(150% 120% at 50% 40%, transparent 62%, rgba(0,0,0,.38) 100%);
}

/* --- Anlati: gercek iki sutun ---
   CSS "columns" ile :first-child yalnizca soldaki sutunun ilk
   paragrafina dusuyor, iki sutun esit durmuyordu. Artik izgara. */
.hk-yazi {
  margin-top: clamp(28px, 3.6vw, 46px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.hk-yazi p {
  margin: 0 0 18px;
  color: var(--mute);
  font-size: 15.5px;
  line-height: 1.78;
  break-inside: avoid;
}
.hk-yazi p:last-child { margin-bottom: 0; }

/* Her sutunun ilk paragrafi ayni vurguyu alsin — ikisi karsilikli esit */
.hk-sutun > p:first-child { color: var(--porcelain); font-size: 16.5px; }

@media (max-width: 860px) {
  .hk-yazi { grid-template-columns: minmax(0, 1fr); max-width: 66ch; }
}

/* --- Belge seridi --- */
.hk-belge-serit {
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 34px);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 1px 2px rgba(0,0,0,.3),
    0 20px 44px -32px rgba(0,0,0,.85);
}

.hk-serit-bas {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(198,161,122,.14);
}
.hk-serit-bas h3 {
  margin: 0;
  color: var(--mute-dark);
  font-family: var(--body);
  font-size: 11.5px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
}

.hk-rozet {
  display: inline-block;
  margin-inline-start: auto;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(198,161,122,.13);
  color: var(--sand);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}

/* Uc belge yan yana */
.hk-belgeler {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
}
.hk-belgeler li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
.hk-belgeler b {
  display: block;
  color: var(--bone);
  font-family: var(--display);
  font-size: 16px; font-weight: 400; line-height: 1.3;
  margin-bottom: 5px;
}
.hk-belgeler small {
  display: block;
  color: var(--mute-dark);
  font-size: 12.5px; line-height: 1.55;
}

/* Kucuk altin muhur */
.belge-muhur {
  width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%;
  border: 1px solid rgba(198,161,122,.45);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.belge-muhur::before {
  content: '';
  width: 8px; height: 5px;
  border-inline-start: 1.5px solid var(--sand);
  border-bottom: 1.5px solid var(--sand);
  transform: rotate(-45deg) translate(1px, -1px);
}

.hk-sertifika-not {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(49,53,58,.7);
  max-width: 88ch;
  color: var(--mute);
  font-size: 13.5px; line-height: 1.7;
}

@media (max-width: 860px) {
  .hk-belgeler { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hk-rozet { margin-inline-start: 0; }
}

/* --- Imza --- */
.hk-imza {
  margin: clamp(26px, 3vw, 38px) 0 0;
  color: var(--sand);
  font-family: var(--display);
  font-size: 20px; letter-spacing: .02em;
}
.hk-imza::before { content: '— '; color: var(--mute-dark); }

/* =====================================================================
   49) GALERI KARESI — arkadan isik, iki asamali acilis
   Hizmet satirlariyla ayni kural: once havalanir, sonra ekranda acilir.
   ===================================================================== */

.tile {
  transition:
    transform .38s cubic-bezier(.2,.8,.3,1),
    box-shadow .38s ease;
}

/* Arka isik: karenin ARKASINDA duran yayilmis sicak hale.
   Hale fotografin ARKASINDA kaliyor — fotograf opak oldugu icin
   yalnizca disari tasan kismi gorunur. Bu yuzden kutudan bol bol
   tasmasi sart; -10px'te bulanikligin altinda kayboluyordu. */
.tile::after {
  content: '';
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(52% 52% at 50% 44%, rgba(222,180,128,.85), transparent 70%);
  filter: blur(26px);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}

/* tasarim.css'teki duz hover yerine ortak "havada" durumu */
.tile:hover { transform: none; }

.tile.havada {
  transform: translateY(-7px);
  box-shadow: 0 26px 48px -28px rgba(0,0,0,.95);
}
.tile.havada::after { opacity: 1; transform: none; }
.tile.havada .nail { filter: brightness(1.07) saturate(1.06); }
.tile.havada figcaption { color: var(--bone); }

.tile:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

/* Dokunmatikte "bir daha dokun" ipucu */
@media (hover: none) {
  .tile.havada figcaption::after {
    content: ' · aç';
    color: var(--sand);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile::after { transition: none; }
  .tile.havada { transform: none; }
  .tile::after { transform: none; }
}

/* Buyutecte yuklenen fotograf: tirnak sekli degil, kendi orani.
   (.nail kurali 0.62 en/boy ve tirnak kavisi veriyordu.) */
.lb-inner:has(.lb-foto) { max-width: min(860px, 92vw); }

.lb-foto {
  width: 100%;
  max-height: 78vh;
  aspect-ratio: auto;
  min-height: 46vh;
  margin: 0 auto;
  border-radius: 6px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95);
}

/* :has desteklemeyen tarayicida da fotograf dar kutuya sikismasin */
@supports not selector(:has(*)) {
  .lb-inner { max-width: min(860px, 92vw); }
}

/* =====================================================================
   50) BUYUTEC — animasyonlu acilis
   Fotograf kendi yerinden ortaya dogru buyur (JS'te FLIP), zemin
   yumusak koyulasir, alt yazi arkasindan gelir.
   ===================================================================== */

.lb {
  background: rgba(10,11,12,0);
  backdrop-filter: blur(0px);
  /* Acilis yumusak, kapanis kisa: gorselin sonumlemesiyle ayni tempoda */
  transition: background .28s ease, backdrop-filter .28s ease;
}
.lb.acildi { transition: background .42s ease, backdrop-filter .42s ease; }
.lb.acildi {
  background: rgba(10,11,12,.92);
  backdrop-filter: blur(10px);
}

/* Buyutecte fotografin arkasinda ISIK YOK.
   Isik yalnizca birinci dokunusta, kare hala izgaradayken yanar
   (49. bolum). Acilan ekranda fotograf tek basina durur. */
.lb-inner { position: relative; }

/* Alt yazi gorselden sonra gelsin */
.lb p {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease .24s, transform .42s cubic-bezier(.16,.84,.26,1) .24s;
}
.lb.acildi p { opacity: 1; transform: none; }

/* Kapat dugmesi */
.lb-close {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .34s ease .2s, transform .34s ease .2s, color .2s ease;
  background: transparent; border: 0; cursor: pointer;
}
.lb.acildi .lb-close { opacity: 1; transform: none; }
.lb-close:hover { color: var(--bone); }

/* Gorselin kendisi JS ile ucuruluyor; buradan bir sey zorlanmiyor */
.lb-foto { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb p, .lb-close { transition: none; }
}

/* =====================================================================
   51) EK DERSLER — acilir kapanir bolum
   Ara ara acilip kapanan kisa dersler. Bolum bir <details>; kapak
   basliga tiklaninca acilir. Yukseklik animasyonu icin grid-template-rows
   0fr -> 1fr numarasi: icerigin yuksekligini bilmeden de yumusak acilir.
   ===================================================================== */

.ek-bolum { padding-block: clamp(56px, 6.5vw, 96px); }

.ek-katlanir {
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008));
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.3),
    0 22px 48px -34px rgba(0,0,0,.85);
  overflow: hidden;
}

/* --- Kapak --- */
.ek-kapak {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 34px);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background-color .34s ease;
}
.ek-kapak::-webkit-details-marker { display: none; }
.ek-kapak:hover { background-color: rgba(198,161,122,.05); }
.ek-kapak:focus-visible { outline: 2px solid var(--sand); outline-offset: -3px; }

.ek-kapak-yazi { flex: 1 1 auto; min-width: 0; }
.ek-kapak .kicker { display: block; margin-bottom: 8px; }

.ek-baslik {
  display: block;
  font-family: var(--display);
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.2;
  color: var(--bone);
  transition: color .3s ease;
}
.ek-kapak:hover .ek-baslik { color: #fff; }

.ek-kapak-sag { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

.ek-sayi {
  color: var(--mute);
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ek-sayi b {
  color: var(--sand);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Acilis oku */
.ek-ok {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(198,161,122,.35);
  display: grid; place-items: center;
  position: relative;
  transition: border-color .34s ease, background .34s ease, transform .42s cubic-bezier(.2,.8,.3,1);
}
.ek-ok::before {
  content: '';
  width: 9px; height: 9px;
  border-inline-end: 1.6px solid var(--sand);
  border-bottom: 1.6px solid var(--sand);
  transform: rotate(45deg) translate(-2px, -2px);
}
.ek-kapak:hover .ek-ok { border-color: var(--sand); background: rgba(198,161,122,.1); }
.ek-katlanir[open] .ek-ok { transform: rotate(180deg); }

/* --- Govde: yumusak acilma ---
   details[open] normalde bir anda zipliyor. grid-template-rows 0fr -> 1fr
   ile yukseklik bilinmeden de gecis yapilabiliyor. */
.ek-govde {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2,.8,.25,1);
}
.ek-katlanir[open] .ek-govde { grid-template-rows: 1fr; }

.ek-govde > * { min-height: 0; overflow: hidden; }

/* Ic bosluk govde acilirken de duzgun gorunsun */
.ek-govde > .ek-metin,
.ek-govde > .ek-izgara,
.ek-govde > .bos-durum {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease .12s, transform .42s cubic-bezier(.2,.8,.25,1) .12s;
}
.ek-katlanir[open] .ek-govde > * { opacity: 1; transform: none; }

.ek-metin {
  margin: 0;
  padding: 0 clamp(22px, 2.6vw, 34px) 4px;
  max-width: 72ch;
}
.ek-govde .bos-durum { margin: 18px clamp(22px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px); }

/* --- Kart izgarasi --- */
.ek-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* Kac ders olursa olsun butun kartlar ayni boyda: 1fr satirlar en
     uzun icerige gore esitlenir, kart da satirin tamamini kaplar. */
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px) clamp(24px, 2.8vw, 34px);
}

/* --- Kart --- */
.ek-kart {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  background: var(--coal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 2px rgba(0,0,0,.3);
  transition: transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .38s ease;

  /* Kartlar sirayla girsin */
  animation: ekKartGir .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay: calc(var(--sira, 0) * 70ms + 120ms);
}
@keyframes ekKartGir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Arkadan isik — hizmet satirlariyla ayni dil */
.ek-kart-isik {
  position: absolute; inset: -6px -8px;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(62% 80% at 50% 40%, rgba(214,172,122,.34), transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);
}
.ek-kart:hover .ek-kart-isik,
.ek-kart:focus-visible .ek-kart-isik { opacity: 1; transform: none; }

.ek-kart:hover,
.ek-kart:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 26px 46px -28px rgba(0,0,0,.95);
}
.ek-kart:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Kapak gorseli */
.ek-kart-gorsel {
  position: relative; z-index: 1;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.ek-kart-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}
.ek-kart:hover .ek-kart-gorsel img { transform: scale(1.06); filter: brightness(1.05); }

.ek-kart-govde {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 18px 16px;
  flex: 1 1 auto;
}

.ek-kart-ad {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--bone);
  transition: color .3s ease;
}
.ek-kart:hover .ek-kart-ad { color: #fff; }

/* Aciklama tam iki satir yer tutar: bos da olsa, uzun da olsa kartin
   boyu degismez. Uzunsa uc noktayla kesilir. */
.ek-kart-alt {
  color: var(--mute);
  font-size: 13.5px;
  line-height: 1.55;
  min-height: calc(13.5px * 1.55 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ek-kart-alt-sira {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.ek-kart-fiyat {
  font-family: var(--display);
  font-size: 19px;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}

.ek-kart-git {
  color: var(--mute-dark);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.ek-kart:hover .ek-kart-git { color: var(--sand); transform: translateX(3px); }

@media (max-width: 560px) {
  .ek-kapak { gap: 16px; }
  .ek-kapak-sag { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .ek-govde, .ek-govde > *, .ek-ok, .ek-kart, .ek-kart-isik,
  .ek-kart-gorsel img, .ek-kart-git { transition: none; }
  .ek-kart { animation: none; }
  .ek-kart:hover { transform: none; }
}

/* Kapanirken: details hala [open] ama kapali gorunume gecsin */
.ek-katlanir.kapaniyor .ek-govde { grid-template-rows: 0fr; }
.ek-katlanir.kapaniyor .ek-govde > * { opacity: 0; transform: translateY(10px); transition-delay: 0s; }
.ek-katlanir.kapaniyor .ek-ok { transform: none; }

/* --- Kapaksiz kart: gorsel alani yine de yer tutsun ------------------
   Kapak varsa videonun otomatik cikarilan karesi kullaniliyor. Yoksa
   dersin bas harfiyle sade bir yer tutucu — kartlar ayni boyda kalir. */
.ek-kart-gorsel.bos {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(198,161,122,.12), transparent 62%),
    var(--ink);
}
.ek-kart-harf {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
  color: rgba(198,161,122,.4);
  transition: color .4s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.ek-kart:hover .ek-kart-harf { color: rgba(198,161,122,.62); transform: scale(1.06); }

/* Baslik iki satiri gecmesin — yukseklik oynamasin */
.ek-kart-ad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ek-kart-harf { transition: none; }
  .ek-kart:hover .ek-kart-harf { transform: none; }
}

/* --- Yukleyicide kapak secimi ---------------------------------------
   Videodan otomatik cikan kare cogu zaman yeterli; ilk saniyeler bos
   ya da bulanik oldugunda buradan kendi gorselini yukleyebilirsin. */
.yukleyici-kapak {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px;
}

.kapak-dugme,
.kapak-sil {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--mute);
  font: 400 11.5px/1 var(--body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.kapak-dugme:hover { border-color: var(--sand); color: var(--sand); background: rgba(198,161,122,.08); }
.kapak-sil:hover   { border-color: rgba(217,138,128,.6); color: #D98A80; }

.kapak-dugme:focus-within { outline: 2px solid var(--sand); outline-offset: 2px; }

/* Onizleme ve kapak dugmeleri TEK izgara hucresinde.
   Ayri hucre olunca uc sutunluk izgara dorde cikip kayiyordu. */
.yukleyici-sol {
  display: flex; flex-direction: column; gap: 8px;
  align-self: start;
  flex: 0 0 auto;
}
.yukleyici-sol .yukleyici-onizleme { margin: 0; }
.yukleyici-kapak { margin-top: 0; }

@media (max-width: 680px) {
  .yukleyici-kapak { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .yukleyici-sol { width: 100%; }
  .yukleyici-sol .yukleyici-onizleme { width: 100%; height: 130px; }
}

/* =====================================================================
   52) HIZMET SATIRLARI — esit boy ve dar ekran guvenligi
   Kac hizmet olursa olsun satirlar ayni boyda. Aciklama sabit iki satir
   yer tutar; bos da olsa, uzun da olsa satirin boyu degismez.
   ===================================================================== */

.svc-list {
  /* Butun satirlar en uzun icerige gore esitlenir */
  grid-auto-rows: 1fr;
}
.svc { height: 100%; align-content: start; }

.svc-desc {
  min-height: calc(14.5px * 1.62 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ad iki satiri gecmesin — yukseklik oynamasin */
.svc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Dar ekran ---
   Satir hicbir kosulda kapsayicisindan tasmasin: nowrap tasiyan fiyat
   ve sure etiketi min-content'i buyutebiliyor. */
.svc, .svc-bas, .svc-name, .svc-desc, .svc-price { min-width: 0; }
.svc-bas { max-width: 100%; }

@media (max-width: 620px) {
  .svc { padding-inline: clamp(12px, 3vw, 18px); }
  .svc-price { font-size: 17px; }
  /* Dar ekranda da iki satir: satirlar esitlenirken bos alan buyumesin */
  .svc-desc { min-height: calc(14.5px * 1.62 * 2); -webkit-line-clamp: 2; }
}

/* Satirlar esitlenince artan bosluk altta toplaniyordu.
   "Devam / Randevu al" satiri dibe yaslansin, bosluk ona gitsin. */
.svc { grid-template-rows: auto auto 1fr; }
.svc-git { align-self: end; }

@media (max-width: 620px) {
  .svc { grid-template-rows: auto auto auto 1fr; }
}

/* =====================================================================
   53) EK DERSLER — gezen isiklar
   Bu bolume ozel: iki sicak isik kumesi bolumun arkasinda yavasca
   dolasir. Sayfanin geri kalaninda isik duruyor; burasi "ara ara acilan"
   bir alan oldugu icin canli durmasi isteniyor.

   Isiklar SEKIL olmasin diye genis ve yumusak; yollari birbirinden
   farkli, aralari uzun (34 ve 46 sn) — fark edilir ama yormaz.
   ===================================================================== */

.ek-bolum { position: relative; isolation: isolate; overflow: clip; }

.ek-bolum::before,
.ek-bolum::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

/* Sicak altin — genis yay cizerek dolasir */
.ek-bolum::before {
  width: 46%; aspect-ratio: 1;
  inset-inline-start: -6%; top: -18%;
  background: radial-gradient(circle, rgba(214,172,122,.30), transparent 68%);
  animation: ekIsikBir 34s ease-in-out infinite alternate;
}

/* Serin karsit isik — tersine dolasir, altin altin gorunsun */
.ek-bolum::after {
  width: 38%; aspect-ratio: 1;
  inset-inline-end: -4%; bottom: -16%;
  background: radial-gradient(circle, rgba(132,142,192,.20), transparent 68%);
  animation: ekIsikIki 46s ease-in-out infinite alternate;
}

@keyframes ekIsikBir {
  0%   { transform: translate(0, 0)        scale(1); }
  35%  { transform: translate(58%, 26%)    scale(1.16); }
  70%  { transform: translate(120%, -8%)   scale(.94); }
  100% { transform: translate(168%, 34%)   scale(1.1); }
}

@keyframes ekIsikIki {
  0%   { transform: translate(0, 0)         scale(1); }
  40%  { transform: translate(-72%, -30%)   scale(1.2); }
  100% { transform: translate(-150%, 10%)   scale(.96); }
}

/* Panel isigin ustunde dursun */
.ek-katlanir { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ek-bolum::before, .ek-bolum::after { animation: none; }
}

/* =====================================================================
   54) HERO SAYACLARI — dar ekran
   flex-wrap ile ucuncu sayac tek basina alt satira dusuyor, ustelik
   ikinci sayacin sag ayraci havada kaliyordu. Artik uc esit sutun.
   ===================================================================== */

@media (max-width: 760px) {
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    flex-wrap: nowrap;
  }
  .hero-meta div {
    padding-inline: 0 14px;
    margin-inline: 0;
    min-width: 0;
  }
  /* Ayraclar sutunlar arasinda kalsin, sonuncuda olmasin */
  .hero-meta div + div {
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--line);
    border-inline-end: 0;
  }
  .hero-meta div:not(:last-child) { border-inline-end: 0; }

  .hero-meta b { font-size: clamp(18px, 5.4vw, 24px); line-height: 1.15; }
  .hero-meta span { font-size: 11.5px; display: block; margin-top: 4px; }
}

/* Cok dar ekranda uc sutun sikisiyor — alt alta, ayraclar yatay */
@media (max-width: 380px) {
  .hero-meta { grid-template-columns: minmax(0, 1fr); }
  .hero-meta div + div {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 14px;
  }
  .hero-meta b { font-size: 22px; }
}

/* =====================================================================
   55) ACILIS VITRINI
   Sagdaki logo + tirnak dizilimi yerine donen kisa videolar.

   Tasarim: video bir "oynatici" gibi degil, sitenin kendi malzemesi
   gibi dursun. Bu yuzden kontrol yok, cerceve ince ve sicak, kenarlari
   yumusak; videonun arkasindan hafif bir isik vuruyor.
   ===================================================================== */

.vitrin {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Sagda dursun: ortalandiginda saginda genis bir bosluk kaliyordu.
     flex-end yon duyarli — arapcada sola yaslanir. */
  align-items: flex-end;
  gap: 20px;
  width: 100%;
}

/* --- Cerceve --- */
.vitrin-cerceve {
  position: relative;

  /* Genislik once, ama yukseklik ekrani asmasin: kisa bir dizustunde
     747px'lik bir cerceve hero'yu tek basina doldurup sayfanin geri
     kalanini asagi itiyordu. max-height devreye girince aspect-ratio
     genisligi kendisi kisiyor. */
  width: min(392px, 100%);
  max-height: min(68vh, 700px);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);

  /* Ust kenarda isik alan ince pah + altta derinlik */
  box-shadow:
    inset 0 0 0 1px rgba(198,161,122,.22),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 34px 70px -40px rgba(0,0,0,.95);
}

/* Videonun arkasindan vuran sicak isik */
.vitrin-hale {
  position: absolute;
  inset: -16% -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,172,122,.34), transparent 66%);
  filter: blur(54px);
  pointer-events: none;
}

/* --- Kareler ---
   Hepsi ust uste; yalnizca acik olan gorunur. */
.vitrin-kare {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;

  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
}
.vitrin-kare.acik {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vitrin-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--ink);
}

/* Alt kenarda yumusak koyulasma — etiket okunsun */
.vitrin-kare::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(10,11,12,.72));
  pointer-events: none;
}

/* --- Etiket --- */
.vitrin-etiket {
  position: absolute;
  inset-inline: 18px; bottom: 18px;
  z-index: 1;
  color: var(--bone);
  font-size: 13.5px;
  letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .35s, transform .6s cubic-bezier(.2,.8,.25,1) .35s;
}
.vitrin-kare.acik .vitrin-etiket { opacity: 1; transform: none; }

/* Baglantili kare: uzerine gelince bir tik yakinlasir */
a.vitrin-kare .vitrin-video { transition: transform 1.2s cubic-bezier(.2,.8,.3,1); }
a.vitrin-kare:hover .vitrin-video { transform: scale(1.05); }
a.vitrin-kare:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }

/* --- Sayac noktalari --- */
.vitrin-sayac {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Cerceveyle ayni genislikte olup ortalansin */
  width: min(392px, 100%);
  justify-content: center;
}

.vitrin-nokta {
  width: 26px; height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vitrin-nokta i {
  display: block;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.18);
  transition: background .4s ease, width .4s cubic-bezier(.2,.8,.3,1);
}
.vitrin-nokta:hover i { background: rgba(255,255,255,.34); }
.vitrin-nokta.acik i { background: var(--sand); }
.vitrin-nokta:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; border-radius: 3px; }

/* --- Dar ekran --- */
@media (max-width: 1040px) {
  /* Tek sutuna dusunce sagda degil ortada dursun */
  .vitrin { margin-top: 34px; align-items: center; }
  .vitrin-cerceve { width: min(340px, 80%); max-height: min(64vh, 600px); }
  .vitrin-sayac { width: auto; }
}

@media (max-width: 560px) {
  .vitrin-cerceve { width: min(320px, 86%); max-height: 64vh; border-radius: 12px; }
  .vitrin-etiket { font-size: 12.5px; inset-inline: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrin-kare, .vitrin-etiket, .vitrin-nokta i,
  a.vitrin-kare .vitrin-video { transition: none; }
  .vitrin-kare { transform: none; }
}

/* Yonetimde vitrin onizlemesi — uzerine gelince oynar */
.vitrin-onizleme {
  width: 132px;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  object-fit: cover;
  background: var(--ink);
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px -18px rgba(0,0,0,.8);
}

/* =====================================================================
   56) SECIM KARTLARI (randevu sayfasi)
   Randevu alirken hizmet secmek bir LISTE okumak degil, bir SECIM
   yapmak. Bu yuzden ana sayfadaki editoryal satir yerine kutu.
   Hizmetler ve birebir egitimler ayni dili konusuyor.
   ===================================================================== */

.secim-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1fr;          /* kac hizmet olursa olsun esit boy */
  gap: 12px;
}

.secim-kart {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 16px;
  border-radius: 6px;
  text-decoration: none;

  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 2px rgba(0,0,0,.28);

  transition: transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s ease;
}

.secim-kart:hover,
.secim-kart:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(198,161,122,.5),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 42px -28px rgba(0,0,0,.95);
}
.secim-kart:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Arkadan isik — sitenin geri kalaniyla ayni dil */
.secim-isik {
  position: absolute; inset: -6px -8px;
  z-index: -1;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(62% 80% at 50% 40%, rgba(214,172,122,.32), transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.secim-kart:hover .secim-isik,
.secim-kart:focus-visible .secim-isik { opacity: 1; transform: none; }

.secim-ad {
  font-family: var(--display);
  font-size: 17.5px;
  line-height: 1.28;
  color: var(--bone);
  transition: color .3s ease;
}
.secim-kart:hover .secim-ad { color: #fff; }

/* Aciklama sabit iki satir — kartlarin boyu icerige gore oynamasin */
.secim-aciklama {
  color: var(--mute);
  font-size: 13px;
  line-height: 1.55;
  min-height: calc(13px * 1.55 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.secim-alt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}

.secim-fiyat {
  font-family: var(--display);
  font-size: 21px;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .3s ease;
}
.secim-kart:hover .secim-fiyat { color: #E8CBA6; }

.secim-sure {
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  color: var(--mute-dark);
  font-size: 11.5px;
  letter-spacing: .05em;
  line-height: 1.5;
  /* "fiyat_notu" bir cumle olabiliyor ('Tirnak basi ve modele gore
     degisir'); nowrap birakilirsa etiketten tasip kesiliyor. */
  white-space: normal;
  max-width: 100%;
  transition: background .3s ease, color .3s ease;
}
.secim-kart:hover .secim-sure { background: rgba(198,161,122,.14); color: var(--sand); }

@media (max-width: 560px) {
  .secim-izgara { grid-template-columns: minmax(0, 1fr); }
  .secim-kart { padding: 16px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .secim-kart, .secim-isik, .secim-ad, .secim-fiyat, .secim-sure { transition: none; }
  .secim-kart:hover { transform: none; }
}

/* Ad + sure etiketi tek satirda; sure fiyatin yanina konunca dar
   kartta alt satira kayip kartlarin hizasini bozuyordu. */
.secim-bas {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}
.secim-bas .secim-ad { flex: 1 1 auto; min-width: 0; }

/* =====================================================================
   57) SES IKONU — SVG
   Onceki ikon CSS sekilleriyle ciziliyordu: kenarlar kiriliyor, sessize
   alma gecisi sicriyordu. Artik tek bir SVG; dalgalar ses duzeyine gore
   yumusakca beliriyor, sessizde carpi ciziliyor.
   ===================================================================== */

.ikon-ses {
  width: 21px;
  height: 21px;
  display: block;
  overflow: visible;
}

.ses-govde {
  transform-origin: 8px 12px;
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}

/* --- Dalgalar --- */
.ses-dalga {
  transform-origin: 12px 12px;
  transition: opacity .26s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.ses-dalga-1 { transition-delay: 0s; }
.ses-dalga-2 { transition-delay: .05s; }

/* Kisik: yalnizca ic dalga */
.ikon-ses.kisik .ses-dalga-2 { opacity: 0; transform: scale(.55); }

/* Kapali: iki dalga da gitsin, hoparlor bir tik kuculsun */
.ikon-ses.kapali .ses-dalga   { opacity: 0; transform: scale(.5); }
.ikon-ses.kapali .ses-govde   { transform: scale(.92); }

/* --- Carpi ---
   Cizgi kendini cizerek gelir; bir anda belirmez. */
.ses-carpi {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  opacity: 0;
  transition: stroke-dashoffset .28s cubic-bezier(.2,.8,.3,1),
              opacity .16s ease;
}
.ikon-ses.kapali .ses-carpi {
  opacity: 1;
  stroke-dashoffset: 0;
  transition-delay: .06s;
}

/* Gostergedeki ikon da ayni SVG'yi kullanabilsin diye olcu esit */
.bildirim-ikon .ikon-ses { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .ses-govde, .ses-dalga, .ses-carpi { transition: none; }
}

/* =====================================================================
   58) GEZEN ISIKLAR — site geneli
   Ek dersler bolumunde begenilen yontem butun bolumlere yayildi:
   yumusak isik kumeleri arkada yavasca dolasiyor.

   Daha once capraz bir HUZME denenmis ve "hata gibi" gorunmustu. Fark
   sudur: huzme ekranda bir SEKIL cizer, bu kumeler cizmez — genis,
   agir bulanik ve dusuk yogunluktalar; hareket fark edilir ama goz
   neye baktigini secemez. Dogru olan bu.

   Katman duzeni:
     section[id]::before      → ortam sicakligi + vinyet   (duragan)
     section > .wrap::before  → 1. isik kumesi (altin)     (gezer)
     section > .wrap::after   → 2. isik kumesi (serin)     (gezer)
     .wrap icerigi            → z-index 1, hep ustte
   ===================================================================== */

section[id] > .wrap::before,
section[id] > .wrap::after,
.hero > .wrap::before,
.hero > .wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  will-change: transform;
}

/* --- Altin kume: her bolumde ana kaynak --- */
section[id] > .wrap::before,
.hero > .wrap::before {
  width: 46%;
  aspect-ratio: 1;
  inset-inline-start: -8%;
  top: -14%;
  background: radial-gradient(circle, rgba(214,172,122,.26), transparent 68%);
  animation: isikGez1 38s ease-in-out infinite alternate;
}

/* --- Serin kume: altinin altin gorunmesi icin karsit --- */
section[id] > .wrap::after,
.hero > .wrap::after {
  width: 38%;
  aspect-ratio: 1;
  inset-inline-end: -6%;
  bottom: -12%;
  background: radial-gradient(circle, rgba(132,142,192,.17), transparent 68%);
  animation: isikGez2 52s ease-in-out infinite alternate;
}

/* .wrap konumlu olmali ki kumeler ona gore yerlessin */
.hero > .wrap { position: relative; }

@keyframes isikGez1 {
  0%   { transform: translate(0, 0)       scale(1); }
  35%  { transform: translate(62%, 22%)   scale(1.18); }
  70%  { transform: translate(128%, -6%)  scale(.92); }
  100% { transform: translate(176%, 30%)  scale(1.12); }
}

@keyframes isikGez2 {
  0%   { transform: translate(0, 0)       scale(1); }
  40%  { transform: translate(-78%, -26%) scale(1.22); }
  100% { transform: translate(-162%, 14%) scale(.94); }
}

/* --- Bolumler birbirini tekrar etmesin ---
   Ayni iki animasyon; farkli baslangic, hiz ve yon. Boylece yan yana
   iki bolum ayni anda ayni yerde parlamaz. */

.hero > .wrap::before        { animation-duration: 44s; animation-delay: -6s; }
.hero > .wrap::after         { animation-duration: 58s; }

#hizmetler > .wrap::before   { animation-duration: 36s; animation-delay: -14s; }
#hizmetler > .wrap::after    { animation-duration: 50s; animation-delay: -8s; }

#galeri > .wrap::before      { animation-duration: 42s; animation-delay: -22s;
                               inset-inline-start: 26%; top: -20%; }
#galeri > .wrap::after       { animation-duration: 56s; animation-delay: -16s; }

#hakkinda > .wrap::before    { animation-duration: 40s; animation-delay: -30s;
                               inset-inline-start: auto; inset-inline-end: -8%; top: -16%;
                               animation-name: isikGez2; }
#hakkinda > .wrap::after     { animation-duration: 54s; animation-delay: -4s;
                               inset-inline-end: auto; inset-inline-start: -6%;
                               animation-name: isikGez1; }

#instagram > .wrap::before   { animation-duration: 34s; animation-delay: -10s; }
#instagram > .wrap::after    { animation-duration: 48s; animation-delay: -26s; }

#yorumlar > .wrap::before    { animation-duration: 46s; animation-delay: -18s;
                               inset-inline-start: auto; inset-inline-end: -8%;
                               animation-name: isikGez2; }
#yorumlar > .wrap::after     { animation-duration: 52s; animation-delay: -12s; }

/* --- Akademi acik zeminli: beyazimsi isik orada sert kaliyor --- */
#akademi > .wrap::before {
  background: radial-gradient(circle, rgba(168,129,90,.20), transparent 68%);
  animation-duration: 40s; animation-delay: -12s;
}
#akademi > .wrap::after {
  background: radial-gradient(circle, rgba(146,120,94,.13), transparent 68%);
  animation-duration: 56s; animation-delay: -28s;
}

/* Ek dersler zaten kendi kumelerini tasiyor; ikinci kat gerekmiyor.
   Kimlikle yaziliyor — sinif secici section[id]'ye yeniliyor. */
#ek-dersler > .wrap::before,
#ek-dersler > .wrap::after { content: none; }

/* Gorseller ve paneller isigin ustunde kalsin */
section > .wrap > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  section[id] > .wrap::before,
  section[id] > .wrap::after,
  .hero > .wrap::before,
  .hero > .wrap::after { animation: none; }
}

/* =====================================================================
   59) HIZMET SATIRLARI — mobilde kutu
   Dar ekranda satirlar arasindaki ince cizgi yeterince ayirmiyor,
   satirlar birbirine akiyordu. Mobilde her hizmet kendi kutusunda.
   ===================================================================== */

@media (max-width: 620px) {
  .svc-list {
    background: none;
    box-shadow: none;
    padding-inline: 0;
    gap: 12px;
    grid-auto-rows: auto;          /* kutular kendi boyunu alsin */
  }

  .svc {
    height: auto;
    padding: 18px 18px 16px;
    border-bottom: 0;
    border-radius: 8px;

    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    box-shadow:
      inset 0 0 0 1px var(--line),
      inset 0 1px 0 rgba(255,255,255,.05),
      0 1px 2px rgba(0,0,0,.3);
  }

  /* Havalanma dar ekranda daha olculu */
  .svc.havada {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(198,161,122,.5),
      inset 0 1px 0 rgba(255,255,255,.09),
      0 16px 32px -22px rgba(0,0,0,.95);
  }

  /* Fiyat adin hemen altinda, goz once ona gitsin */
  .svc { grid-template-areas: "bas" "fiyat" "acik" "git"; }
  .svc-price { justify-self: start; margin-top: 6px; font-size: 19px; }
  .svc-desc  { margin-top: 10px; min-height: 0; -webkit-line-clamp: 3; }
  .svc-git   { margin-top: 12px; }
}

/* =====================================================================
   60) HESABIM — RANDEVU IPTALI VE BILDIRIMLER

   Iki asamali iptal: once "İptal et", sonra sebep + onay. Tek tikla
   iptal olmuyor, cunku yanlislikla basiliyor ve geri alinamiyor.

   Kart flex; iptal kutusu kartin ALTINA tam genislik acilsin diye
   kart wrap'e aciliyor ve kutu %100 aliyor.
   ===================================================================== */

.randevu-kart { flex-wrap: wrap; position: relative; }

/* --- Sag taraf: rozet + iptal dugmesi --- */
.randevu-sag {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  margin-inline-start: auto;
}

.randevu-iptal-ac {
  font: inherit; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
  color: var(--mute); background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.randevu-iptal-ac:hover {
  color: #E3A79E; border-color: rgba(217,138,128,.45);
  background: rgba(217,138,128,.07);
}
.randevu-iptal-ac:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.randevu-iptal-ac[aria-expanded="true"] {
  color: #E3A79E; border-color: rgba(217,138,128,.45);
}

/* --- Acilan kutu --- */
.randevu-iptal-kutu {
  flex: 0 0 100%;
  overflow: hidden;
}

/* JS varsa kapali baslar. JS yoksa form oldugu gibi gorunur ve duz POST
   olarak calisir — iptal hicbir kosulda erisilemez olmasin. */
html.js .randevu-iptal-kutu {
  height: 0;
  opacity: 0;
  transition: height .3s cubic-bezier(.2,.8,.25,1), opacity .3s ease;
}

.randevu-iptal-kutu > * { margin-top: 12px; }

.randevu-iptal-etiket {
  display: block;
  font-size: 12.5px; color: var(--mute);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.randevu-iptal-sebep {
  width: 100%;
  font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--bone); background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color .25s ease;
}
.randevu-iptal-sebep:focus {
  outline: none; border-color: rgba(198,161,122,.5);
}
.randevu-iptal-sebep::placeholder { color: rgba(255,255,255,.28); }

.randevu-iptal-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }

.randevu-iptal-uyari {
  font-size: 13px; color: #E3A79E;
  margin-top: 10px;
}
.randevu-iptal-uyari.carp { animation: iptalCarp .34s ease; }

@keyframes iptalCarp {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* --- Iptal edilmis kart --- */
.randevu-iptalli { opacity: .72; }
.randevu-iptalli .randevu-gun {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.randevu-iptalli .randevu-gun small { color: var(--mute); }
.randevu-iptalli .randevu-govde > b { text-decoration: line-through; text-decoration-thickness: 1px; }

.randevu-iptal-not {
  display: block;
  font-size: 12.5px; color: #C79A92; margin-top: 6px;
}

/* Yerinde iptal edildiginde kart bir kez nefes alir */
.randevu-kart.yeni-iptal { animation: iptalOldu .6s cubic-bezier(.2,.8,.25,1); }

@keyframes iptalOldu {
  0%   { transform: scale(1);    background: rgba(217,138,128,.10); }
  40%  { transform: scale(.985); }
  100% { transform: scale(1);    background: var(--coal-2); }
}

/* =====================================================================
   BILDIRIM PANELI
   ===================================================================== */

.bildirim-panel .panel-bas h2 { display: flex; align-items: center; gap: 9px; }

.bildirim-rozet {
  display: inline-grid; place-items: center;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px;
  font-family: var(--body); font-size: 11.5px; line-height: 1;
  color: var(--ink); background: var(--sand);
  animation: rozetGel .45s cubic-bezier(.2,.9,.3,1.3);
  transition: opacity .3s ease, transform .3s ease;
}
.bildirim-rozet.bos { opacity: 0; transform: scale(.6); }

@keyframes rozetGel {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}

.bildirim-okundu-dugme {
  font: inherit; font-size: 12.5px;
  color: var(--mute); background: transparent; border: 0;
  padding: 0; cursor: pointer;
  transition: color .25s ease;
}
.bildirim-okundu-dugme:hover { color: var(--sand); }
.bildirim-okundu-dugme:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 3px; }

[data-okundu-form] {
  transition: opacity .3s ease, transform .3s ease;
}
[data-okundu-form].bitti { opacity: 0; transform: translateY(-4px); }

.bildirim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.bildirim-satir {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--coal-2);

  /* Panel acilirken sirayla suzulsunler */
  animation: bildirimSuzul .5s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 55ms);
  transition: border-color .35s ease, background .35s ease;
}

@keyframes bildirimSuzul {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.bildirim-satir.yeni {
  border-color: rgba(198,161,122,.32);
  background: rgba(198,161,122,.055);
}

.bildirim-ikon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--sand);
  background: rgba(198,161,122,.12);
}
.bildirim-ikon svg { width: 17px; height: 17px; }

.bildirim-ikon-randevu_iptal,
.bildirim-ikon-siparis_iptal {
  color: #E3A79E; background: rgba(217,138,128,.13);
}

.bildirim-govde { flex: 1; min-width: 0; }
.bildirim-govde b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--bone);
}
.bildirim-govde small {
  display: block; font-size: 13px; color: var(--mute); margin-top: 3px;
  overflow-wrap: anywhere;
}
.bildirim-govde time {
  display: block; font-size: 11.5px; color: rgba(255,255,255,.34); margin-top: 5px;
}

.bildirim-yeni-etiket {
  flex: 0 0 auto;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sand);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(198,161,122,.3);
  transition: opacity .3s ease, transform .3s ease;
}
.bildirim-yeni-etiket.cikiyor { opacity: 0; transform: scale(.85); }

/* --- Dar ekran --- */
@media (max-width: 560px) {
  .randevu-sag { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .randevu-kart { row-gap: 10px; }
  .bildirim-satir { padding: 12px 13px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .randevu-iptal-kutu { transition: none; }
  .randevu-kart.yeni-iptal,
  .bildirim-satir,
  .bildirim-rozet { animation: none; }
  .randevu-iptal-uyari.carp { animation: none; }
}

/* =====================================================================
   61) YONETIM — CANLI SAYAÇLAR VE KOSE BILDIRIMI

   Rakam degistiginde balon bir kez ziplar; sifira dusunce kaybolur ama
   DOM'da kalir (JS'in sonradan olusturmasi gerekmesin).
   ===================================================================== */

.yonetim-menu .sayac {
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.yonetim-menu .sayac.bos {
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}
.yonetim-menu .sayac.zipla { animation: sayacZipla .55s cubic-bezier(.2,.9,.3,1.4); }

@keyframes sayacZipla {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.38); }
  55%  { transform: scale(.93); }
  100% { transform: scale(1); }
}

/* --- Kose bildirimi --- */
.sayac-bildirimler {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;   /* kartlarin kendisi tekrar aciyor */
}

.sayac-bildirim {
  pointer-events: auto;
  display: flex; align-items: center; gap: 13px;
  width: 268px;
  padding: 13px 15px;
  border-radius: 12px;
  text-decoration: none;

  color: var(--bone);
  background: var(--coal-2);
  border: 1px solid rgba(198,161,122,.28);
  box-shadow: 0 22px 46px -26px rgba(0,0,0,.95);

  opacity: 0;
  transform: translateX(22px) scale(.97);
  transition: opacity .38s ease,
              transform .42s cubic-bezier(.2,.8,.25,1),
              border-color .3s ease;
}
.sayac-bildirim.acik    { opacity: 1; transform: none; }
.sayac-bildirim.cikiyor { opacity: 0; transform: translateX(22px) scale(.97); }

.sayac-bildirim:hover { border-color: rgba(198,161,122,.55); }
.sayac-bildirim:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.sayac-bildirim-ikon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--sand);
  background: rgba(198,161,122,.13);
}
.sayac-bildirim-ikon svg {
  width: 18px; height: 18px;
  transform-origin: 50% 20%;
  animation: zilSalla 1.4s ease-in-out .25s 2;
}

/* Zil bir kac kez sallanip dursun — surekli sallanan ikon rahatsiz eder */
@keyframes zilSalla {
  0%, 62%, 100% { transform: rotate(0deg); }
  68%  { transform: rotate(11deg); }
  74%  { transform: rotate(-9deg); }
  80%  { transform: rotate(6deg); }
  86%  { transform: rotate(-4deg); }
}

.sayac-bildirim-govde { min-width: 0; }
.sayac-bildirim-govde b {
  display: block; font-size: 14px; font-weight: 400; color: var(--bone);
}
.sayac-bildirim-govde small {
  display: block; font-size: 12.5px; color: var(--sand); margin-top: 2px;
}

@media (max-width: 620px) {
  .sayac-bildirimler { inset-inline: 14px; inset-block-end: 14px; }
  .sayac-bildirim { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .yonetim-menu .sayac.zipla { animation: none; }
  .sayac-bildirim-ikon svg   { animation: none; }
  .sayac-bildirim { transition: opacity .2s ease; transform: none; }
  .sayac-bildirim.acik, .sayac-bildirim.cikiyor { transform: none; }
}

/* --- Bildirim sesi dugmesi ---
   Kutunun en altinda durur. Bildirim yokken soluk; uzerine gelince
   belirginlesir. Kapaliyken ustunde carpi cizilir. */
.sayac-ses {
  pointer-events: auto;
  align-self: flex-end;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;

  color: var(--mute);
  background: var(--coal-2);
  border: 1px solid var(--line);

  opacity: .45;
  transition: opacity .3s ease, color .3s ease, border-color .3s ease;
}
.sayac-ses:hover { opacity: 1; color: var(--sand); border-color: rgba(198,161,122,.4); }
.sayac-ses:focus-visible { opacity: 1; outline: 2px solid var(--sand); outline-offset: 2px; }

.sayac-ses svg { width: 17px; height: 17px; }

/* Dalga ve carpi cizgileri cizilerek girip cikar — anlik kaybolmaz */
.sayac-ses .ses-dalga,
.sayac-ses .ses-carpi {
  stroke-dasharray: 14;
  transition: stroke-dashoffset .3s cubic-bezier(.2,.8,.25,1);
}
.sayac-ses .ses-dalga { stroke-dashoffset: 0; }
.sayac-ses .ses-carpi { stroke-dashoffset: 14; }

.sayac-ses.kapali .ses-dalga { stroke-dashoffset: 14; }
.sayac-ses.kapali .ses-carpi { stroke-dashoffset: 0; }
.sayac-ses.kapali { color: var(--mute-dark); }

@media (prefers-reduced-motion: reduce) {
  .sayac-ses .ses-dalga, .sayac-ses .ses-carpi { transition: none; }
}


/* =====================================================================
   62) UYELERE MESAJ — yonetim ekrani

   Duzen: SOLDA yazma, SAGDA canli onizleme (yapiskan). Toplu gonderimin
   geri donusu olmadigi icin "kime gidiyor" ve "nasil gorunecek" ekranda
   hep gozukur.
   ===================================================================== */

.msj {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: start;
}

.msj-sol {
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}

/* --- Sekmeler --- */
.msj-sekmeler {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--line);
}

.msj-sekme {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px 16px;
  font: inherit;
  font-size: 13.5px;
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s ease;
}
.msj-sekme.aktif { color: var(--ink); }
.msj-sekme:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* Kayan arka plan: sekme degisince altin yastik kayar */
.msj-kaydirak {
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  border-radius: 999px;
  background: var(--sand);
  transition: transform .42s cubic-bezier(.2,.8,.25,1), width .42s cubic-bezier(.2,.8,.25,1);
}

/* --- Panolar --- */
.msj-form { display: none; }
.msj-form.aktif {
  display: grid;
  gap: 20px;
  animation: msjPanoGel .4s cubic-bezier(.2,.8,.25,1);
}

@keyframes msjPanoGel {
  from { opacity: 0; transform: translateY(6px); }
}

/* --- Alanlar --- */
.msj-alan { display: grid; gap: 8px; }
.msj-alan > label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; letter-spacing: .05em; color: var(--mute);
}
.msj-istege { font-size: 11.5px; color: var(--mute-dark); letter-spacing: 0; }

.msj-alan input[type="text"],
.msj-alan textarea,
.msj-alan select,
.msj-egitim-kutu select {
  width: 100%;
  padding: 13px 15px;
  font: inherit; font-size: 15px;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.msj-alan textarea { min-height: 104px; resize: vertical; line-height: 1.6; }

.msj-alan input:focus, .msj-alan textarea:focus,
.msj-alan select:focus, .msj-egitim-kutu select:focus {
  outline: none;
  border-color: rgba(198,161,122,.55);
  box-shadow: 0 0 0 3px rgba(198,161,122,.10);
}
.msj-alan ::placeholder { color: rgba(255,255,255,.25); }
.msj-ipucu { font-size: 12px; color: var(--mute-dark); }

/* --- Karakter sayaci --- */
.msj-sayac { display: flex; align-items: center; gap: 10px; }
.msj-sayac-ray {
  flex: 1;
  height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.msj-sayac-ray i {
  display: block; height: 100%; width: 0;
  border-radius: 3px;
  background: var(--sand);
  transition: width .25s ease, background .25s ease;
}
.msj-sayac small { font-size: 11.5px; color: var(--mute-dark); font-variant-numeric: tabular-nums; }
.msj-sayac.dolmak-uzere i     { background: #D98A80; }
.msj-sayac.dolmak-uzere small { color: #D98A80; }

/* --- Kime: secim kartlari --- */
.msj-kume-alan { border: 0; padding: 0; margin: 0; }
.msj-kume-alan legend {
  padding: 0; margin-bottom: 10px;
  font-size: 12.5px; letter-spacing: .05em; color: var(--mute);
}

.msj-kumeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
}
.msj-kume-genis { grid-column: 1 / -1; }

.msj-kume { cursor: pointer; }
.msj-kume input { position: absolute; opacity: 0; width: 0; height: 0; }

.msj-kume-ic {
  display: flex; align-items: center; gap: 12px;
  height: 100%;
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color .28s ease, background .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.msj-kume:hover .msj-kume-ic { border-color: rgba(198,161,122,.34); }

.msj-kume input:checked + .msj-kume-ic {
  border-color: rgba(198,161,122,.6);
  background: rgba(198,161,122,.08);
  transform: translateY(-1px);
}
.msj-kume input:focus-visible + .msj-kume-ic { outline: 2px solid var(--sand); outline-offset: 2px; }
.msj-kume input:disabled + .msj-kume-ic { opacity: .4; }

.msj-kume-sayi {
  flex: 0 0 auto;
  min-width: 34px; height: 34px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-family: var(--display); font-size: 16px; line-height: 1;
  color: var(--sand);
  background: rgba(198,161,122,.11);
  font-variant-numeric: tabular-nums;
}
.msj-kume input:checked + .msj-kume-ic .msj-kume-sayi {
  color: var(--ink); background: var(--sand);
}

.msj-kume-yazi { min-width: 0; }
.msj-kume-yazi b {
  display: block; font-size: 13.5px; font-weight: 400; color: var(--bone);
}
.msj-kume-yazi small {
  display: block; font-size: 11.5px; color: var(--mute-dark); margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Egitim listesi yalnizca o secim yapilinca acilir */
.msj-egitim-kutu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .36s cubic-bezier(.2,.8,.25,1),
              opacity .3s ease, margin-top .36s ease;
}
.msj-egitim-kutu > select { overflow: hidden; min-height: 0; }
.msj-egitim-kutu.acik { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }

.msj-gonder { justify-self: start; }
.msj-gonder:disabled { opacity: .4; cursor: not-allowed; }

/* =====================================================================
   SAG SUTUN — canli onizleme
   ===================================================================== */
.msj-sag { position: sticky; top: 22px; }

.msj-onizleme {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198,161,122,.07), transparent 62%),
    var(--coal-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.msj-onizleme-ust {
  display: block;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute-dark);
  margin-bottom: 14px;
}

/* Uye hesabinin kucuk bir maketi */
.msj-kutu {
  padding: 15px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.msj-kutu-bas {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px;
}
.msj-kutu-bas b {
  font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--bone);
}

[data-onizleme-baslik].bos { color: var(--mute-dark); font-style: italic; }

/* Yazdikca satir hafifce kipirdasin — degisiklik fark edilsin */
.bildirim-satir.kipirdadi { animation: msjKipir .4s ease; }
@keyframes msjKipir {
  0%   { transform: none; }
  40%  { transform: translateX(2px); }
  100% { transform: none; }
}

/* --- Kac kisiye gidecek --- */
.msj-hedef {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.msj-hedef-sayi {
  font-family: var(--display); font-size: 34px; line-height: 1; color: var(--sand);
  font-variant-numeric: tabular-nums;
}
.msj-hedef-sayi.degisti { animation: msjSayiZipla .5s cubic-bezier(.2,.9,.3,1.4); }

@keyframes msjSayiZipla {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  60%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

.msj-hedef-yazi { font-size: 13.5px; color: var(--mute); }

.msj-not {
  margin-top: 14px;
  font-size: 12px; line-height: 1.6; color: var(--mute-dark);
}

/* =====================================================================
   GECMIS — okunma halkasi
   ===================================================================== */
.msj-gecmis-kart { margin-top: 22px; }
.msj-gecmis-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.msj-gecmis-bas small { font-size: 12px; color: var(--mute-dark); }

.msj-gecmis { display: grid; gap: 10px; margin-top: 16px; }

.gecmis-satir {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--coal-2);
  border: 1px solid var(--line);

  animation: msjSatirGel .5s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 45ms);
  transition: border-color .3s ease;
}
.gecmis-satir:hover { border-color: rgba(198,161,122,.28); }

@keyframes msjSatirGel {
  from { opacity: 0; transform: translateY(7px); }
}

.gecmis-halka {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
}
.gecmis-halka svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);          /* dolum tepeden baslasin */
}
.gecmis-halka circle { fill: none; stroke-width: 3; }
.halka-zemin { stroke: rgba(255,255,255,.08); }
.halka-dolu  {
  stroke: var(--sand); stroke-linecap: round;
  animation: halkaDol 1.1s cubic-bezier(.2,.8,.25,1) backwards;
}
@keyframes halkaDol { from { stroke-dasharray: 0 100.5; } }

.gecmis-halka b {
  position: relative;
  font-size: 12px; color: var(--bone); font-variant-numeric: tabular-nums;
}
.gecmis-halka b i { font-style: normal; font-size: 9px; color: var(--mute); }

.gecmis-govde { flex: 1; min-width: 190px; }
.gecmis-govde b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--bone);
}
.gecmis-govde small {
  display: block; font-size: 12.5px; color: var(--mute); margin-top: 3px;
  overflow-wrap: anywhere;
}
.gecmis-govde time { display: block; font-size: 11.5px; color: var(--mute-dark); margin-top: 5px; }

.gecmis-rakam { flex: 0 0 auto; text-align: end; }
.gecmis-rakam b {
  display: block; font-family: var(--display); font-size: 19px; color: var(--bone);
  font-weight: 400; font-variant-numeric: tabular-nums;
}
.gecmis-rakam b i { font-style: normal; font-size: 13px; color: var(--mute-dark); }
.gecmis-rakam small { font-size: 11px; color: var(--mute-dark); }

/* --- Dar ekran --- */
@media (max-width: 1000px) {
  .msj { grid-template-columns: 1fr; }
  .msj-sag { position: static; }
}
@media (max-width: 560px) {
  .msj-sol { padding: 16px; }
  .gecmis-rakam { text-align: start; }
}

/* =====================================================================
   HESAP BILDIRIM PANELI — ek parcalar
   ===================================================================== */
.bildirim-araclar { display: flex; align-items: center; gap: 12px; }
.bildirim-araclar .sayac-ses { width: 28px; height: 28px; }
.bildirim-araclar .sayac-ses svg { width: 15px; height: 15px; }

.bildirim-bos { font-size: 14px; color: var(--mute); margin: 4px 0 0; }

/* Sayfa acikken gelen bildirim: yukaridan suzulup bir kez parlar */
.bildirim-satir.yeni-geldi { animation: bildirimDustu .7s cubic-bezier(.2,.8,.25,1); }

@keyframes bildirimDustu {
  0%   { opacity: 0; transform: translateY(-10px); border-color: rgba(198,161,122,.7); }
  55%  { border-color: rgba(198,161,122,.7); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msj-form.aktif, .gecmis-satir, .halka-dolu,
  .bildirim-satir.yeni-geldi, .bildirim-satir.kipirdadi,
  .msj-hedef-sayi.degisti { animation: none; }
  .msj-kaydirak, .msj-egitim-kutu { transition: none; }
}

/* =====================================================================
   63) UST MENUDE BILDIRIM ZILI

   Mesaj kutusu hesabin icindeydi; uye oraya girmeden yeni mesajdan
   haberi olmuyordu. Zil her sayfada duruyor ve okunmamis varsa uzerinde
   sayi tasiyor.
   ===================================================================== */

.nav-zil {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--mute);
  transition: color .28s ease;
}
.nav-zil:hover { color: var(--sand); }
.nav-zil:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 50%; }

.nav-zil svg {
  width: 19px; height: 19px;
  transform-origin: 50% 20%;
}

/* Okunmamis varsa zil bir kac kez sallanip dursun — surekli sallanmaz */
.nav-zil:has(.nav-zil-sayi:not(.bos)) svg {
  animation: navZilSalla 2.6s ease-in-out .6s 2;
}

@keyframes navZilSalla {
  0%, 72%, 100% { transform: rotate(0deg); }
  76% { transform: rotate(12deg); }
  81% { transform: rotate(-10deg); }
  86% { transform: rotate(7deg); }
  91% { transform: rotate(-4deg); }
}

.nav-zil-sayi {
  position: absolute;
  top: -1px; inset-inline-end: -1px;

  min-width: 17px; height: 17px; padding: 0 5px;
  display: grid; place-items: center;

  border-radius: 999px;
  font-size: 10.5px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--sand);
  border: 2px solid var(--coal);

  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.nav-zil-sayi.bos { opacity: 0; transform: scale(.5); }

@media (prefers-reduced-motion: reduce) {
  .nav-zil:has(.nav-zil-sayi:not(.bos)) svg { animation: none; }
}

/* Hakkinda basligi artik tek basina: giris paragrafi asagi, metnin
   icine alindi. Iki sutunlu sec-head kurali burada gecerli degil. */
.hk-bas { display: block; }
.hk-bas h2 { max-width: 18ch; }

/* =====================================================================
   64) BAKIM MODU

   a) Yonetim ozetindeki anahtar
   b) Ziyaretcinin gordugu bakim ekrani
   ===================================================================== */

/* --------------------------- a) ANAHTAR --------------------------- */
.bakim-kart {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  transition: border-color .4s ease, background .4s ease;
}
.bakim-kart.acik {
  border-color: rgba(217,138,128,.42);
  background: rgba(217,138,128,.06);
}

.bakim-kart-sol { display: flex; align-items: center; gap: 14px; }
.bakim-kart-sol b {
  display: block; font-size: 15px; font-weight: 400; color: var(--bone);
}
.bakim-kart-sol small {
  display: block; font-size: 12.5px; color: var(--mute); margin-top: 3px;
}

/* Yesil/kirmizi nokta yerine nefes alan bir fener */
.bakim-fener {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(126,176,140,.12);
}
.bakim-fener i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #7EB08C;
  box-shadow: 0 0 0 0 rgba(126,176,140,.45);
  animation: bakimNefes 2.8s ease-in-out infinite;
}
.bakim-kart.acik .bakim-fener   { background: rgba(217,138,128,.14); }
.bakim-kart.acik .bakim-fener i {
  background: #D98A80;
  box-shadow: 0 0 0 0 rgba(217,138,128,.5);
  animation-duration: 1.7s;      /* kapaliyken daha tedirgin atar */
}

@keyframes bakimNefes {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126,176,140,.4); }
  55%      { box-shadow: 0 0 0 9px rgba(126,176,140,0); }
}

/* --- Anahtar --- */
.bakim-kart-sag { display: flex; align-items: center; gap: 11px; }

.bakim-anahtar {
  position: relative;
  width: 52px; height: 29px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease;
}
.bakim-anahtar:hover { border-color: rgba(198,161,122,.4); }
.bakim-anahtar:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.bakim-anahtar-top {
  position: absolute;
  top: 50%; inset-inline-start: 3px;
  width: 21px; height: 21px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--mute);
  transition: transform .35s cubic-bezier(.2,.8,.25,1), background .35s ease;
}

.bakim-anahtar[aria-checked="true"] {
  background: rgba(217,138,128,.28);
  border-color: rgba(217,138,128,.5);
}
.bakim-anahtar[aria-checked="true"] .bakim-anahtar-top {
  transform: translateY(-50%) translateX(23px);
  background: #D98A80;
}

.bakim-anahtar-yazi { font-size: 13px; color: var(--mute); }

/* --- Mesaj alani --- */
.bakim-mesaj-form {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid rgba(217,138,128,.2);
  animation: bakimMesajAc .4s cubic-bezier(.2,.8,.25,1);
}
@keyframes bakimMesajAc {
  from { opacity: 0; transform: translateY(-6px); }
}

.bakim-mesaj-form label {
  display: block;
  font-size: 12.5px; color: var(--mute); margin-bottom: 8px;
}
.bakim-mesaj-satir { display: flex; gap: 10px; flex-wrap: wrap; }
.bakim-mesaj-satir input {
  flex: 1; min-width: 220px;
  padding: 11px 14px;
  font: inherit; font-size: 14.5px;
  color: var(--bone); background: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
.bakim-mesaj-satir input:focus {
  outline: none; border-color: rgba(198,161,122,.5);
}
.bakim-mesaj-form small {
  display: block; margin-top: 9px;
  font-size: 12px; color: var(--mute-dark); line-height: 1.6;
}
.bakim-mesaj-form small a { color: var(--sand); }

@media (max-width: 620px) {
  .bakim-kart { grid-template-columns: 1fr; }
  .bakim-kart-sag { justify-content: flex-start; }
}

/* ----------------------- b) BAKIM EKRANI ----------------------- */
.bakim-govde {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
}

.bakim {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #17191C, #121316 62%, #0F1012);
}

/* Sitenin geri kalaniyla ayni dil: arkada yavasca dolasan isik kumeleri.
   Bekleme ekrani oldugu icin hareket cok yavas. */
.bakim-isik {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.bakim-isik-1 {
  width: 54vmax; aspect-ratio: 1;
  inset-inline-start: -16%; top: -22%;
  background: radial-gradient(circle, rgba(214,172,122,.22), transparent 68%);
  animation: bakimIsik1 46s ease-in-out infinite alternate;
}
.bakim-isik-2 {
  width: 44vmax; aspect-ratio: 1;
  inset-inline-end: -14%; bottom: -20%;
  background: radial-gradient(circle, rgba(132,142,192,.15), transparent 68%);
  animation: bakimIsik2 62s ease-in-out infinite alternate;
}

@keyframes bakimIsik1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(38%, 22%) scale(1.16); }
}
@keyframes bakimIsik2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-32%, -18%) scale(1.12); }
}

.bakim-ic {
  position: relative;
  z-index: 1;
  max-width: 520px;
  text-align: center;
  animation: bakimGel .9s cubic-bezier(.2,.8,.25,1);
}

@keyframes bakimGel {
  from { opacity: 0; transform: translateY(14px); }
}

.bakim-logo {
  width: 86px; height: 86px;
  object-fit: contain;
  margin-bottom: 26px;
  opacity: .95;
}

.bakim-kicker {
  display: block;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 14px;
}

.bakim h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 44px);
  line-height: 1.16;
  color: var(--bone);
  margin: 0 0 16px;
  text-wrap: balance;
}

.bakim-mesaj {
  font-size: 15.5px; line-height: 1.75;
  color: var(--mute);
  margin: 0 auto;
  max-width: 42ch;
}

/* Uc nokta: "donuyor" degil "bekliyor" hissi */
.bakim-nokta {
  display: flex; justify-content: center; gap: 7px;
  margin: 28px 0 30px;
}
.bakim-nokta i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  opacity: .3;
  animation: bakimNokta 1.6s ease-in-out infinite;
}
.bakim-nokta i:nth-child(2) { animation-delay: .2s; }
.bakim-nokta i:nth-child(3) { animation-delay: .4s; }

@keyframes bakimNokta {
  0%, 100% { opacity: .22; transform: translateY(0); }
  40%      { opacity: .95; transform: translateY(-4px); }
}

.bakim-baglanti {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

.bakim-instagram {
  display: inline-block;
  margin-top: 22px;
  font-size: 13.5px; color: var(--mute);
  text-decoration: none;
  transition: color .28s ease;
}
.bakim-instagram:hover { color: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .bakim-isik, .bakim-ic, .bakim-nokta i,
  .bakim-fener i, .bakim-mesaj-form { animation: none; }
  .bakim-anahtar-top { transition: none; }
}

/* =====================================================================
   65) CIRO EKRANI

   Onceki hali tek rakam + tek cubuktu; "bu ay 6.400" yaziyordu ama bunun
   iyi mi kotu mu oldugu belli olmuyordu. Simdi: onceki donemle kiyas,
   donem ici seyir (alan grafigi), kaynak dagilimi (halka) ve neyin
   kazandirdigi (siralama).
   ===================================================================== */

:root {
  --k-toplam:  #DCCBB2;   /* tumu — birlesik seri */
  --k-online:  #C6A17A;   /* online egitim (sand) */
  --k-birebir: #C98FA6;   /* birebir egitim */
  --k-hizmet:  #848EC0;   /* tirnak hizmeti */
  --k-diger:   #7F7B76;   /* siniflanmamis */
}

.ciro-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 20px;
}

/* --- Donem secimi --- */
.ciro-donemler { display: flex; gap: 6px; flex-wrap: wrap; }

.ciro-donem {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--mute);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.ciro-donem:hover { color: var(--bone); border-color: rgba(198,161,122,.35); }
.ciro-donem.aktif {
  color: var(--ink); background: var(--sand); border-color: var(--sand);
}
.ciro-donem:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* --- Ust satir --- */
.ciro-ust {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.ciro-toplam-kutu {
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px;
  border-radius: 13px;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(198,161,122,.13), transparent 62%),
    var(--ink);
  border: 1px solid var(--line);
}

.ciro-etiket-ust {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute-dark);
}

.ciro-rakam {
  display: block;
  margin: 10px 0 12px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}

/* --- Onceki doneme gore degisim --- */
.ciro-degisim {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: var(--mute);
}
.ciro-degisim svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ciro-degisim b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ciro-degisim i { font-style: normal; color: var(--mute-dark); }

.ciro-degisim.artis      { color: #7EB08C; }
.ciro-degisim.dusus      { color: #D98A80; }
.ciro-degisim.dusus svg  { transform: rotate(180deg); }
.ciro-degisim.ayni svg   { display: none; }

/* --- Halka --- */
.ciro-halka-kutu {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: 13px;
  background: var(--ink);
  border: 1px solid var(--line);
}

.ciro-halka {
  position: relative;
  flex: 0 0 auto;
  width: 104px; height: 104px;
  display: grid; place-items: center;
}
.ciro-halka svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ciro-halka circle { fill: none; stroke-width: 4.2; }
.ciro-halka .halka-zemin  { stroke: rgba(255,255,255,.07); }

/* Her kalem bir dilim. Bitis degeri elemanin kendi dasharray'i oldugu
   icin tek keyframe hepsine yetiyor: "0 100"dan kendi uzunluguna buyur. */
.ciro-halka .halka-dilim {
  stroke-linecap: butt;
  animation: ciroHalkaDol 1.1s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 110ms);
}
@keyframes ciroHalkaDol { from { stroke-dasharray: 0 100; } }

.ciro-halka-ic { position: relative; text-align: center; }
.ciro-halka-ic b {
  display: block;
  font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.ciro-halka-ic b i { font-style: normal; font-size: 14px; color: var(--mute); }

/* Halkanin ic capi ~72px; "tirnak hizmeti" tek satira sigmiyor ve
   halkanin uzerine tasiyordu. Iki satira kirilsin, tasmasin. */
.ciro-halka-ic small {
  display: block; margin-top: 4px;
  max-width: 68px; margin-inline: auto;
  font-size: 9.5px; letter-spacing: .05em; line-height: 1.25;
  text-transform: uppercase;
  color: var(--mute-dark);
}

/* --- Anahtar listesi --- */
.ciro-anahtar-liste {
  flex: 1; min-width: 160px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 11px;
}
.ciro-anahtar-liste li { display: flex; align-items: flex-start; gap: 10px; }
.ciro-anahtar-liste b {
  display: block; font-size: 15px; font-weight: 400; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.ciro-anahtar-liste small {
  display: block; font-size: 11.5px; color: var(--mute-dark); margin-top: 2px;
}

.ciro-renk {
  flex: 0 0 auto;
  width: 9px; height: 9px; margin-top: 6px;
  border-radius: 2px;
}
.ciro-renk.egitim   { background: var(--sand); }
.ciro-renk.randevu  { background: #848EC0; }
.ciro-renk.bekleyen { background: rgba(255,255,255,.22); }

/* --- Kalem renkleri -------------------------------------------------
   Her is kolunun tek bir rengi var; halka dilimi, kart noktasi, grafik
   cizgisi, sutun dilimi ve siralama rayi hep ayni renkten okur. Renk
   degisecekse tek yer burasi. */
.ciro-renk.k-online  { background: var(--k-online); }
.ciro-renk.k-birebir { background: var(--k-birebir); }
.ciro-renk.k-hizmet  { background: var(--k-hizmet); }
.ciro-renk.k-diger   { background: var(--k-diger); }

.ciro-halka .halka-dilim.k-online  { stroke: var(--k-online); }
.ciro-halka .halka-dilim.k-birebir { stroke: var(--k-birebir); }
.ciro-halka .halka-dilim.k-hizmet  { stroke: var(--k-hizmet); }
.ciro-halka .halka-dilim.k-diger   { stroke: var(--k-diger); }

.ciro-anahtar-satir {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--mute);
}
.ciro-anahtar-satir span { display: inline-flex; align-items: center; gap: 7px; }
.ciro-anahtar-satir .ciro-renk { margin-top: 0; }

/* =====================================================================
   DONEM ICI SEYIR — alan grafigi
   ===================================================================== */
.ciro-seyir { margin-top: 26px; }

.ciro-seyir-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.ciro-seyir-bas h3 {
  font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--bone);
  margin: 0;
}
.ciro-seyir-tepe { font-size: 12px; color: var(--mute-dark); }

.ciro-alan {
  position: relative;
  height: 210px;
}
.ciro-alan svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

.ciro-kilavuz {
  stroke: rgba(255,255,255,.055);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ciro-alan-cizgi {
  fill: none;
  stroke: var(--sand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

  /* Cizgi soldan saga cizilerek gelsin */
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: ciroCizil 1.5s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes ciroCizil { to { stroke-dashoffset: 0; } }

.ciro-alan-dolgu {
  animation: ciroDolgu .9s ease .5s backwards;
}
@keyframes ciroDolgu { from { opacity: 0; } }

/* --- Noktalar: SVG disinda, yuzdeyle --- */
.ciro-noktalar { position: absolute; inset: 0; pointer-events: none; }

.ciro-nokta {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}
.ciro-nokta::after {
  content: '';
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.ciro-nokta.dolu::after { opacity: .28; transform: scale(.72); }
.ciro-nokta:hover::after,
.ciro-nokta.secili::after,
.ciro-nokta:focus-visible::after {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 0 4px rgba(198,161,122,.16);
}
.ciro-nokta:focus-visible { outline: none; }

/* --- Ipucu --- */
.ciro-ipucu {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 8px 11px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;

  background: var(--coal-2);
  border: 1px solid rgba(198,161,122,.32);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.95);

  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.25,1);
}
.ciro-ipucu.acik { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }

.ciro-ipucu b {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--mute);
}
.ciro-ipucu small {
  display: block; font-size: 14px; color: var(--bone); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.ciro-alan-etiket {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px; color: var(--mute-dark);
}

/* =====================================================================
   12 AYLIK SUTUNLAR — sirayla yukselsin
   ===================================================================== */
.ciro-bar {
  height: var(--yukseklik, 2%);
  animation: ciroSutunYuksel .8s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 55ms);
  transform-origin: bottom;
}
@keyframes ciroSutunYuksel { from { transform: scaleY(0); } }

/* =====================================================================
   SIRALAMA — ne kazandiriyor
   ===================================================================== */
/* Uc kalem dokumu yan yana sigsin: 320px'te genis ekranda bile iki
   sutun oluyor, ucuncusu tek basina asagida kaliyordu. */
.ciro-ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  align-items: start;
}

.ciro-siralama { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.ciro-siralama li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: center;

  animation: ciroSiraGel .5s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 60ms);
}
@keyframes ciroSiraGel { from { opacity: 0; transform: translateX(-8px); } }

.sira-bas { min-width: 0; }
.sira-bas b {
  display: block; font-size: 14px; font-weight: 400; color: var(--bone);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sira-bas small { display: block; font-size: 11.5px; color: var(--mute-dark); margin-top: 2px; }

.sira-tutar {
  font-family: var(--display); font-size: 16px; color: var(--sand);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.sira-ray {
  grid-column: 1 / -1;
  display: block;
  height: 5px; border-radius: 5px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.sira-ray i {
  display: block; height: 100%;
  width: var(--genislik, 0%);
  border-radius: 5px;
  animation: ciroRayDol 1s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 60ms + 120ms);
}
.sira-ray i.egitim  { background: var(--sand); }
.sira-ray i.randevu { background: #848EC0; }

.sira-ray i.k-online  { background: var(--k-online); }
.sira-ray i.k-birebir { background: var(--k-birebir); }
.sira-ray i.k-hizmet  { background: var(--k-hizmet); }
.sira-ray i.k-diger   { background: var(--k-diger); }

@keyframes ciroRayDol { from { width: 0; } }

/* =====================================================================
   KALEM KARTLARI — is kolu kolu ciro

   Tek bir "toplam ciro" rakami isin nereden kazandigini soylemiyordu:
   binlerce liralik birebir egitim ile yarim saatlik bakim ayni kovadaydi.
   Her is kolu artik kendi kartinda: tutar, adet, ortalama sepet,
   ciro icindeki payi ve onceki doneme gore yonu.
   ===================================================================== */
.kalem-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.kalem-kart {
  position: relative;
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 13px;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;

  animation: kalemGel .55s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 75ms);
  transition: border-color .3s ease, transform .3s ease;
}
@keyframes kalemGel { from { opacity: 0; transform: translateY(10px); } }

/* Ust kenarda kalemin kendi rengi — kart hangi kola ait, bakmadan belli */
.kalem-kart::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--kalem-renk, var(--line));
  transform: scaleX(0); transform-origin: left;
  animation: kalemCizgi .7s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 75ms + 140ms);
}
@keyframes kalemCizgi { to { transform: scaleX(1); } }
.kalem-kart::before { animation-fill-mode: both; }

.kalem-kart:hover { border-color: rgba(198,161,122,.3); transform: translateY(-2px); }

.kalem-kart.k-online  { --kalem-renk: var(--k-online); }
.kalem-kart.k-birebir { --kalem-renk: var(--k-birebir); }
.kalem-kart.k-hizmet  { --kalem-renk: var(--k-hizmet); }
.kalem-kart.k-diger   { --kalem-renk: var(--k-diger); }

/* Bos kalem silinmiyor — "bu ay hic birebir egitim olmamis" da bilgi.
   Yalnizca soluklasiyor ki dolu kalemler one ciksin. */
.kalem-kart.bos { opacity: .62; }

.kalem-bas { display: flex; gap: 9px; align-items: flex-start; }
.kalem-nokta {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px;
  border-radius: 2px; background: var(--kalem-renk, var(--line));
}
.kalem-bas b {
  display: block; font-size: 14px; font-weight: 400; color: var(--bone);
  line-height: 1.3;
}
.kalem-bas small {
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--mute-dark); line-height: 1.45;
}

.kalem-tutar {
  display: block; margin: 14px 0 8px;
  font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums;
}

.kalem-olcu {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11.5px; color: var(--mute-dark);
}
.kalem-olcu b { font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }

.kalem-pay {
  height: 4px; border-radius: 4px; margin: 13px 0 9px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.kalem-pay i {
  display: block; height: 100%; border-radius: 4px;
  width: var(--genislik, 0%);
  background: var(--kalem-renk, var(--line));
  animation: ciroRayDol .9s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 75ms + 200ms);
}

.kalem-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--mute-dark);
}
.ciro-degisim.kucuk { font-size: 11.5px; gap: 5px; }
.ciro-degisim.kucuk svg { width: 11px; height: 11px; }

.ciro-toplam-adet {
  margin-top: 14px; font-size: 12px; color: var(--mute-dark);
}

/* =====================================================================
   SERI SECIMI — hangi kalem hangi gunler kazandiriyor
   ===================================================================== */
/* Alt bosluk bilerek genis: en yuksek gunun ipucu grafigin ustune
   tasiyor, dugmelerin uzerine binmesin. */
.ciro-seri-tuslar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 34px;
}
.ciro-seri-tus {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font-size: 12.5px; font-family: inherit;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.ciro-seri-tus i {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--seri-renk, var(--k-toplam));
  transition: transform .25s ease;
}
.ciro-seri-tus.k-toplam  { --seri-renk: var(--k-toplam); }
.ciro-seri-tus.k-online  { --seri-renk: var(--k-online); }
.ciro-seri-tus.k-birebir { --seri-renk: var(--k-birebir); }
.ciro-seri-tus.k-hizmet  { --seri-renk: var(--k-hizmet); }
.ciro-seri-tus.k-diger   { --seri-renk: var(--k-diger); }

.ciro-seri-tus:hover { color: var(--bone); border-color: rgba(255,255,255,.2); }
.ciro-seri-tus.aktif {
  color: var(--bone);
  border-color: var(--seri-renk);
  background: color-mix(in srgb, var(--seri-renk) 14%, transparent);
}
.ciro-seri-tus.aktif i { transform: scale(1.35); }
.ciro-seri-tus:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* Seriler ust uste duruyor; yalnizca secili olan gorunur. Gecisi
   opaklik yapiyor — cizgi bir anda takla atmasin. */
.ciro-seri {
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.ciro-seri.aktif { opacity: 1; visibility: visible; }

.ciro-seri.k-toplam  { --seri-renk: var(--k-toplam); }
.ciro-seri.k-online  { --seri-renk: var(--k-online); }
.ciro-seri.k-birebir { --seri-renk: var(--k-birebir); }
.ciro-seri.k-hizmet  { --seri-renk: var(--k-hizmet); }
.ciro-seri.k-diger   { --seri-renk: var(--k-diger); }
.ciro-seri .ciro-alan-cizgi { stroke: var(--seri-renk, var(--sand)); }

.ciro-nokta-kume {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.ciro-nokta-kume.aktif { opacity: 1; visibility: visible; }

/* --- Dar ekran --- */
@media (max-width: 900px) {
  .ciro-ust { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ciro-halka-kutu { gap: 16px; padding: 18px; }
  .ciro-alan { height: 170px; }
  .kalem-izgara { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kalem-kart { padding: 15px 14px 13px; }
  .kalem-tutar { font-size: 22px; }
}
@media (max-width: 400px) {
  .kalem-izgara { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ciro-alan-cizgi, .ciro-alan-dolgu, .ciro-bar, .ciro-siralama li,
  .sira-ray i, .kalem-pay i, .kalem-kart, .kalem-kart::before,
  .ciro-halka .halka-dilim { animation: none; }
  .ciro-alan-cizgi { stroke-dashoffset: 0; }
  .kalem-kart::before { transform: scaleX(1); }
  .ciro-ipucu, .ciro-nokta::after, .ciro-seri, .ciro-nokta-kume { transition: none; }
}

/* =====================================================================
   BOLUM BOLUM DOKUM — kalem kartinin altini doldurur
   ===================================================================== */
.kalem-dokum { border-top: 2px solid var(--dokum-renk, var(--line)); }
.kalem-dokum.k-online  { --dokum-renk: var(--k-online); }
.kalem-dokum.k-birebir { --dokum-renk: var(--k-birebir); }
.kalem-dokum.k-hizmet  { --dokum-renk: var(--k-hizmet); }

.kalem-dokum-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.kalem-dokum-bas h2 { margin: 0; }
.kalem-dokum-bas b {
  font-family: var(--display); font-weight: 400; font-size: 19px;
  color: var(--dokum-renk, var(--sand)); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   66) SITE BOTU

   Sag altta duran yardimci. Kapaliyken tek dugme; acilinca sohbet
   paneli. WhatsApp yuzen dugmesi bot varken onun ustune kayiyor —
   ikisi ust uste binmesin.
   ===================================================================== */

.bot {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 70;
}

/* --- Acma dugmesi --- */
.bot-dugme {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;

  color: var(--ink);
  background: var(--sand);
  border: 0;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.9);

  transition: transform .32s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s ease;
}
.bot-dugme:hover { transform: translateY(-2px) scale(1.04); }
.bot-dugme:active { transform: scale(.96); }
.bot-dugme:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.bot-dugme-ikon { position: relative; width: 25px; height: 25px; }
.bot-dugme-ikon svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.25,1);
}
.bot-ikon-kapat { opacity: 0; transform: rotate(-90deg) scale(.7); }

.bot-acik .bot-ikon-sohbet { opacity: 0; transform: rotate(90deg) scale(.7); }
.bot-acik .bot-ikon-kapat  { opacity: 1; transform: none; }

/* Hic acmamis ziyaretci icin nabiz gibi bir nokta */
.bot-dugme-nokta {
  position: absolute;
  top: 3px; inset-inline-end: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #D98A80;
  border: 2px solid var(--coal);
  animation: botNabiz 2.4s ease-in-out infinite;
}
.bot-gorildi .bot-dugme-nokta,
.bot-acik .bot-dugme-nokta { display: none; }

@keyframes botNabiz {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: .75; }
}

/* --- Panel --- */
.bot-panel {
  position: absolute;
  inset-block-end: 70px;
  inset-inline-end: 0;

  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 16px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.96);

  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .3s ease, transform .34s cubic-bezier(.2,.8,.25,1);
}
.bot-panel.acik { opacity: 1; transform: none; }

/* --- Baslik --- */
.bot-bas {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(198,161,122,.05);
}

.bot-yuz {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(198,161,122,.12);
  overflow: hidden;
}
.bot-yuz img { width: 26px; height: 26px; object-fit: contain; }

.bot-kimlik { flex: 1; min-width: 0; }
.bot-kimlik b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--bone);
}
.bot-kimlik small {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--mute-dark); margin-top: 2px;
}
.bot-canli {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7EB08C;
  animation: botNabiz 2.6s ease-in-out infinite;
}

.bot-kapat {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  color: var(--mute); background: transparent;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.bot-kapat:hover { color: var(--bone); background: rgba(255,255,255,.06); }
.bot-kapat svg { width: 16px; height: 16px; }
.bot-kapat:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* --- Akis --- */
.bot-akis {
  flex: 1;
  overflow-y: auto;
  padding: 16px 15px;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin;
}
.bot-akis::-webkit-scrollbar { width: 6px; }
.bot-akis::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1); border-radius: 6px;
}

.bot-satir {
  display: flex;
  animation: botSatirGel .4s cubic-bezier(.2,.8,.25,1);
}
.bot-satir.bot-o   { justify-content: flex-start; }
.bot-satir.bot-ben { justify-content: flex-end; }

@keyframes botSatirGel {
  from { opacity: 0; transform: translateY(8px); }
}

.bot-baloncuk {
  max-width: 84%;
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.bot-o   .bot-baloncuk { border-start-start-radius: 4px; }
.bot-ben .bot-baloncuk {
  border-start-end-radius: 4px;
  color: var(--ink);
  background: var(--sand);
  border-color: var(--sand);
}

/* "Yazıyor…" */
.bot-nokta { display: inline-flex; gap: 4px; padding: 13px; }
.bot-nokta i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mute);
  animation: botYaziyor 1.3s ease-in-out infinite;
}
.bot-nokta i:nth-child(2) { animation-delay: .18s; }
.bot-nokta i:nth-child(3) { animation-delay: .36s; }

@keyframes botYaziyor {
  0%, 100% { opacity: .28; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-3px); }
}

/* --- Canli liste (fiyat, saat) --- */
.bot-liste {
  max-width: 92%;
  display: grid; gap: 1px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--line);
  overflow: hidden;
}
.bot-liste-satir {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--ink);
}
.bot-liste-satir b {
  font-size: 13px; font-weight: 400; color: var(--bone);
}
.bot-liste-satir i {
  font-style: normal; font-size: 12.5px; color: var(--sand);
  white-space: nowrap;
}

/* --- Baglanti --- */
.bot-bag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--sand);
  text-decoration: none;
  background: rgba(198,161,122,.09);
  border: 1px solid rgba(198,161,122,.34);
  transition: background .25s ease, color .25s ease;
}
.bot-bag::after { content: '→'; }
.bot-bag:hover { background: var(--sand); color: var(--ink); }

/* --- Oneri dugmeleri --- */
.bot-oneriler {
  display: flex; flex-wrap: wrap; gap: 7px;
  transition: opacity .25s ease, transform .25s ease;
}
.bot-oneriler.gitti { opacity: 0; transform: translateY(-4px); }

.bot-oneri {
  padding: 8px 13px;
  border-radius: 999px;
  font: inherit; font-size: 12.5px;
  color: var(--mute);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.bot-oneri:hover {
  color: var(--sand); border-color: rgba(198,161,122,.45);
  background: rgba(198,161,122,.07);
}
.bot-oneri:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* --- WhatsApp karti: cikmazda insana baglar --- */
.bot-whatsapp {
  display: flex; align-items: center; gap: 12px;
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 13px;
  text-decoration: none;

  background: rgba(37,211,102,.08);
  border: 1px solid rgba(37,211,102,.32);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.bot-whatsapp:hover {
  background: rgba(37,211,102,.14);
  border-color: rgba(37,211,102,.5);
  transform: translateY(-1px);
}

.bot-wa-ikon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #25D366;
  background: rgba(37,211,102,.14);
}
.bot-wa-ikon svg { width: 19px; height: 19px; }

.bot-wa-yazi b {
  display: block; font-size: 13.5px; font-weight: 400; color: var(--bone);
}
.bot-wa-yazi small {
  display: block; font-size: 11.5px; color: var(--mute-dark); margin-top: 2px;
}

/* --- Yazma alani --- */
.bot-yaz {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.18);
}
.bot-yaz input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  font: inherit; font-size: 14px;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .25s ease;
}
.bot-yaz input:focus { outline: none; border-color: rgba(198,161,122,.5); }
.bot-yaz input::placeholder { color: rgba(255,255,255,.26); }

.bot-yaz button {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 0; border-radius: 50%;
  color: var(--ink); background: var(--sand);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.3,1.2), opacity .25s ease;
}
.bot-yaz button:hover { transform: scale(1.06); }
.bot-yaz button:active { transform: scale(.94); }
.bot-yaz button svg { width: 18px; height: 18px; }
.bot-yaz button:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* --- Dar ekran --- */
@media (max-width: 480px) {
  .bot { inset-block-end: 16px; inset-inline-end: 16px; }
  .bot-panel {
    inset-block-end: 66px;
    width: calc(100vw - 32px);
    max-height: 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bot-panel, .bot-dugme, .bot-dugme-ikon svg { transition: none; }
  .bot-satir, .bot-dugme-nokta, .bot-canli, .bot-nokta i { animation: none; }
}

/* Bot paneli <section>; sitenin genel bolum dolgusunu (section{padding})
   yemesin — panelin kendi ic dolgusu parcalarinda. */
.bot-panel { padding: 0; }

/* =====================================================================
   67) BOT YONETIM EKRANI
   ===================================================================== */

/* Bot ayar karti bakim kartinin duzenini kullaniyor; renkleri ise
   tersi: bot ACIK olmasi iyi durum. */
.bakim-anahtar-etiket { display: inline-flex; cursor: pointer; }
.bakim-anahtar-etiket .bakim-anahtar { border: 1px solid var(--line); }

.bot-ayar-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* --- Yeni konu kutusu --- */
.bot-yeni {
  overflow: hidden;
  margin-top: 16px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--line);

  max-height: 0;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.2,.8,.25,1),
              opacity .3s ease, padding .35s ease;
}
.bot-yeni.acik {
  max-height: 900px;
  opacity: 1;
  padding: 18px;
}

/* --- Konu listesi --- */
.bot-konular { display: grid; gap: 10px; margin-top: 18px; }

.bot-konu {
  border-radius: 11px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  overflow: hidden;

  animation: botKonuGel .45s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--sira, 0) * 40ms);
  transition: border-color .3s ease;
}
.bot-konu:hover { border-color: rgba(198,161,122,.28); }
.bot-konu.acik  { border-color: rgba(198,161,122,.45); }
.bot-konu.pasif { opacity: .58; }

@keyframes botKonuGel {
  from { opacity: 0; transform: translateY(7px); }
}

.bot-konu-bas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
}

.bot-konu-ad { flex: 1; min-width: 180px; }
.bot-konu-ad b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--bone);
}
.bot-konu-ad small {
  display: block; font-size: 12px; color: var(--mute-dark); margin-top: 3px;
  overflow-wrap: anywhere;
}

.bot-konu-etiketler { display: flex; gap: 6px; flex-wrap: wrap; }

.bot-etiket {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--mute);
}
.bot-etiket.one    { color: var(--sand);  border-color: rgba(198,161,122,.34); }
.bot-etiket.kaynak { color: #848EC0;      border-color: rgba(132,142,192,.34); }
.bot-etiket.pasif  { color: var(--mute-dark); }

.bot-konu-ac {
  flex: 0 0 auto;
  font-size: 13px; color: var(--sand);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.bot-konu-ac:hover {
  border-color: rgba(198,161,122,.35);
  background: rgba(198,161,122,.07);
}

.bot-konu-govde {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--line);
  animation: botGovdeAc .4s cubic-bezier(.2,.8,.25,1);
}
@keyframes botGovdeAc {
  from { opacity: 0; transform: translateY(-6px); }
}

/* --- Form --- */
.bot-form-izgara {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
}
.bot-form-izgara .field + .field { margin-top: 0; }

.bot-form .field input,
.bot-form .field select,
.bot-form .field textarea {
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14.5px;
}
.bot-form .field label {
  font-size: 12.5px; letter-spacing: .04em;
}
.bot-form .field textarea { min-height: 96px; line-height: 1.65; }

.bot-form-secenek {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bot-form-secenek .field-onay { font-size: 13.5px; }

.bot-form-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.bot-sil-form { margin-top: 12px; }

@media (max-width: 680px) {
  .bot-form-izgara { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bot-konu, .bot-konu-govde { animation: none; }
  .bot-yeni { transition: none; }
}

/* =====================================================================
   68) ERISIM SURESI

   a) Yonetimde hazir sure secenekleri
   b) Musteriye dogru gorunen erisim satirlari
   ===================================================================== */

/* --------------------- a) YONETIM SECENEKLERI --------------------- */
.sure-secenek {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 9px;
}

.sure-dugme {
  padding: 7px 13px;
  font: inherit; font-size: 12.5px;
  color: var(--mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.sure-dugme:hover { color: var(--bone); border-color: rgba(198,161,122,.38); }
.sure-dugme.aktif {
  color: var(--ink);
  background: var(--sand);
  border-color: var(--sand);
}
.sure-dugme:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* --------------------- b) MUSTERI TARAFI --------------------- */

/* Akademi kartinda erisim satiri */
.c-erisim {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mute-dark);
}
.c-erisim b {
  font-weight: 400;
  color: var(--sand);
}

/* Ek ders kartinda */
.ek-kart-erisim {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--mute-dark);
}
.ek-kart-erisim b { font-weight: 400; color: var(--sand); }

/* Hesapta: erisim bitmek uzereyse dikkat cekmeli */
.ders-erisim.biterken {
  color: #D98A80;
}

/* =====================================================================
   69) ONAY PENCERESI

   window.confirm yerine. Tarayici iletisim kutularini engelledigi anda
   confirm sessizce false donuyor ve butun sil tuslari calismaz hale
   geliyordu; bu pencere engellenemez.
   ===================================================================== */

.onay-zemin {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;

  background: rgba(8, 9, 10, .72);
  backdrop-filter: blur(3px);

  opacity: 0;
  transition: opacity .26s ease;
}
.onay-zemin.acik { opacity: 1; }

.onay-kutu {
  width: min(400px, 100%);
  padding: 26px 24px 22px;
  text-align: center;

  border-radius: 16px;
  background: var(--coal-2);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .96);

  transform: translateY(12px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}
.onay-zemin.acik .onay-kutu { transform: none; }

.onay-ikon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  color: #D98A80;
  background: rgba(217, 138, 128, .12);
}
.onay-ikon svg { width: 23px; height: 23px; }

.onay-metin {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bone);
  text-wrap: balance;
}

.onay-dugmeler {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.onay-dugmeler .btn { min-width: 118px; }

@media (prefers-reduced-motion: reduce) {
  .onay-zemin, .onay-kutu { transition: none; }
  .onay-zemin.acik .onay-kutu { transform: none; }
}

/* =====================================================================
   70) GALERIDE RENKLI ISIKLAR

   "Calismalarim" bolumu isin RENGININ konusuldugu yer. Sitenin geri
   kalaninda isik altin ve serin griyle geziyor; burada galeride gercekten
   gorulen tonlar yaniyor sonuyor: lila, kobalt, gul, altin, adacayi.

   Kural ayni: isik bir SEKIL cizmez. Kumeler cok genis, agir bulanik ve
   dusuk yogunlukta — hareket ve renk fark edilir, ama goz neye baktigini
   secemez. Fotograflarin okunurlugu bozulmasin diye hepsi zeminde kaliyor
   ve icerik z-index ile ustte duruyor.
   ===================================================================== */

#galeri { position: relative; isolation: isolate; }

.galeri-isiklar {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.galeri-isiklar i {
  position: absolute;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1;

  /* Agir bulaniklik: kenar cizgisi kalmasin, leke gibi dursun */
  filter: blur(90px);
  will-change: transform, opacity;

  /* Iki ayri ritim: kume gezerken ayrica yanip sonuyor.
     Sureler birbirinin kati degil — desen tekrar etmesin. */
  animation-name: galeriGez, galeriNabiz;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

/* --- Renkler ve yerlesim ---
   Her kume ayri koseden baslar, ayri hizda gezer; boylece hicbir an
   hepsi ayni yerde toplanmaz. */

.gi-lila {
  width: 44%;
  inset-inline-start: -10%; top: -12%;
  background: radial-gradient(circle, rgba(168,132,214,.42), transparent 68%);
  animation-duration: 17s, 4.5s;
  animation-delay: -4s, 0s;
}

.gi-kobalt {
  width: 38%;
  inset-inline-end: -8%; top: 4%;
  background: radial-gradient(circle, rgba(92,124,216,.38), transparent 68%);
  animation-duration: 21s, 5.5s;
  animation-delay: -18s, -3s;
}

.gi-gul {
  width: 40%;
  inset-inline-start: 22%; bottom: -14%;
  background: radial-gradient(circle, rgba(222,128,158,.38), transparent 68%);
  animation-duration: 19s, 3.8s;
  animation-delay: -26s, -5s;
}

.gi-altin {
  width: 46%;
  inset-inline-end: 14%; bottom: -8%;
  background: radial-gradient(circle, rgba(214,172,122,.40), transparent 68%);
  animation-duration: 24s, 6.5s;
  animation-delay: -12s, -2s;
}

.gi-adacayi {
  width: 34%;
  inset-inline-start: 46%; top: 26%;
  background: radial-gradient(circle, rgba(126,176,140,.32), transparent 68%);
  animation-duration: 22s, 5s;
  animation-delay: -33s, -6s;
}

/* Gezinme: bolum boyunca dolasir. Ara adimlar sayesinde yol duz bir
   gidis-gelis degil — kumeler birbirinden bagimsiz sekilde suzuluyor. */
@keyframes galeriGez {
  0%   { transform: translate(0, 0)        scale(1); }
  25%  { transform: translate(26%, -14%)   scale(1.12); }
  50%  { transform: translate(44%, 22%)    scale(.95); }
  75%  { transform: translate(12%, 34%)    scale(1.18); }
  100% { transform: translate(-28%, 8%)    scale(1.02); }
}

/* Yanip sonme: tam sonmuyor — zemin bir anda kararmasin */
@keyframes galeriNabiz {
  0%   { opacity: .35; }
  100% { opacity: 1; }
}

/* Icerik her zaman isiklarin ustunde */
#galeri > .wrap { position: relative; z-index: 1; }

/* Bolumun kendi tonal zemini isiklarin altinda kalsin ki renkler
   uzerine binsin, altinda kaybolmasin. */
#galeri::before { z-index: -2; }

/* Acik zeminli akademi bolumunun hemen altindayiz; gecis sert olmasin */
.galeri-isiklar::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 50%, transparent 45%, rgba(12,13,14,.42));
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Telefonda bes kume hem kalabalik hem pahali; ucu yeter */
  .gi-adacayi, .gi-kobalt { display: none; }
  .galeri-isiklar i { filter: blur(70px); }
}

@media (prefers-reduced-motion: reduce) {
  .galeri-isiklar i { animation: none; opacity: .7; }
}

/* Oneri kumesinin basligi: "Sunlar da ilgini cekebilir" */
.bot-oneri-baslik {
  flex: 0 0 100%;
  font-size: 11.5px;
  color: var(--mute-dark);
  margin-bottom: 2px;
}

/* Bolume gelince yanma —  site.js "isik-bekliyor" sinifini ekliyor.
   JS yoksa bu sinif hic binmez ve isiklar bastan acik kalir. */
#galeri.isik-bekliyor .galeri-isiklar i {
  /* Animasyonu duraklatmak yetmiyor: duraklatilmis animasyon kendi
     0% karesini dayatip opacity'yi eziyor. Bekleme halinde animasyon
     hic tanimlanmiyor. */
  animation-name: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#galeri.isik-bekliyor.isik-yandi .galeri-isiklar i {
  animation-name: galeriGez, galeriNabiz;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #galeri.isik-bekliyor .galeri-isiklar i { opacity: .7; }
}

/* =====================================================================
   71) HARITA KUTUSU — GOMULU HARITA YOK

   Google haritasi artik iframe ile gomulmuyor (index.php'deki nota bak):
   her ziyaretcide ucuncu bir sunucuya istek gidiyordu. Ayni desenli kutu
   adresi gosteriyor ve tiklaninca yol tarifini yeni sekmede aciyor.
   ===================================================================== */
.map-bag { color: var(--bone); font-size: 15px; line-height: 1.5; padding: 0 20px;
           transition: border-color .25s ease; }
.map-bag:hover,
.map-bag:focus-visible { border-color: var(--sand); }
/* .pin bir <span>: satir ici ogeye width/height islemez, igne hic
   gorunmuyordu (eski "Harita buraya gomulecek" kutusunda da). */
.map .pin { display: block; }
.map-bag .pin { transition: transform .25s ease; }
.map-bag:hover .pin { transform: rotate(-45deg) translate(2px, -2px); }

/* =====================================================================
   72) SIK SORULAN SORULAR (sss.php)

   Sorular botun konularindan geliyor. Her soru kendi H2'si ve kendi
   cipasiyla: bir asistan ya da arama sonucu dogrudan o soruya baglanabilir.
   ===================================================================== */
.sss-icindekiler { margin: 6px 0 34px; padding: 18px 22px; border: 1px solid var(--line); }
.sss-icindekiler ul { margin: 0; padding-left: 18px; columns: 2 260px; column-gap: 32px; }
.sss-icindekiler li { margin: 4px 0; break-inside: avoid; }
.sss-icindekiler a { color: var(--mute); }
.sss-icindekiler a:hover,
.sss-icindekiler a:focus-visible { color: var(--sand); }
.sss-madde { scroll-margin-top: 96px; }
.sss-madde + .sss-madde { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 4px; }
.sss-bag { color: var(--sand); }