/* =====================================================================
   SALON FETHAN DEMİRTAŞ — TASARIM SİSTEMİ  (v2)
   ---------------------------------------------------------------------
   Tek dosya: token'lar + temel + bileşenler + vitrin + sihirbaz + panel.
   Kod agent'ları bu dosyayı css/ altına kopyalayıp (ör. css/tasarim.css)
   doğrudan kullanabilir. Build yok, saf CSS. Hedef: son 2 yıl tarayıcıları,
   iOS Safari 14+. color-mix() / :has() KULLANILMAZ (eski Safari).

   KURUMSAL KİMLİK: MONOKROM (siyah/beyaz + nötr griler). Altın/pirinç/krem KULLANILMAZ.

   Fontlar (HTML <head> içine):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Manrope:wght@400..800&display=swap">

   İÇİNDEKİLER
   1. Token'lar — vitrin (koyu, varsayılan)
   2. Token'lar — panel (açık + koyu)
   3. Temel / reset
   4. Tipografi
   5. Düzen yardımcıları
   6. Bileşenler (buton, rozet, kart, form, berber kartı, hizmet satırı,
      adım göstergesi, gün şeridi, saat slotu, toast, modal, özet çubuğu,
      logo işlemleri, ikon)
   7. Vitrin bölümleri (duyuru, üst bar, hero, hakkımızda, menü, ekip,
      galeri, yorumlar, saatler, iletişim, alt bilgi, mobil CTA)
   8. Randevu sihirbazı
   9. Panel (kabuk, yan menü, üst bar, arama, KPI, tablo, takvim, grafik)
   10. Hareket & erişilebilirlik
   11. CANLILIK & HAREKET (v3) — kelime girişi, şerit (marquee), spot ışığı,
       foto işleme, buton dolgu kayması, KPI parıltısı, nabız, kayan sekme,
       iskelet, boş durum çizimleri, takvim durum desenleri, avatar halkası
   12. GRAFİK SİSTEMİ (v3) — ipucu kartı, nabız noktası, radyal gösterge,
       ısı haritası, sparkline, halka lejantı/desenler (grafikler.js ile)
   ===================================================================== */

/* =====================================================================
   1. TOKEN'LAR — VİTRİN (müşteri ön yüzü; kurumsal MONOKROM: siyah zemin + beyaz)
   Kurumsal renkler logodaki gibi SİYAH ve BEYAZ. Altın/pirinç/krem YOK.
   Vurgu = beyaz/siyah kontrast. Renk yalnız durum göstergelerinde (yeşil/kırmızı, küçük).
   tema_ana_renk  (vars. #111111) → --zemin (+ türevleri temaUygula() ile)
   tema_vurgu_renk (vars. #FFFFFF) → --vurgu (+ --vurgu-acik/-koyu/-metin/-uzeri/-zemin/-rgb)
   ===================================================================== */
:root{
  color-scheme: dark;

  /* Zemin & yüzeyler (antrasit/siyah) */
  --zemin:        #111111;
  --zemin-rgb:    17,17,17;  /* yarı saydam çubuklar için (üst bar, özet çubuğu) */
  --zemin-2:      #0B0B0B;   /* ardışık bölüm zemini (daha derin siyah) */
  --yuzey:        #1A1A1A;   /* kart */
  --yuzey-rgb:    26,26,26;
  --yuzey-2:      #202020;   /* yükseltilmiş kart / hover */
  --yuzey-3:      #2A2A2A;   /* seçili olmayan kontrol zemini */
  --cizgi:        rgba(255,255,255,.10);
  --cizgi-guclu:  rgba(255,255,255,.22);

  /* Metin (beyaz + nötr griler) */
  --metin:        #FFFFFF;
  --metin-2:      #BDBDBD;
  --metin-3:      #929292;   /* en soluk okunur metin (yüzey üstünde ≥4.5:1) */

  /* Vurgu — BEYAZ (koyu zeminde en güçlü kontrast) */
  --vurgu:        #FFFFFF;
  --vurgu-rgb:    255,255,255;
  --vurgu-acik:   #E6E6E6;   /* beyaz butonun hover'ı (hafif griye iner) */
  --vurgu-koyu:   #BFBFBF;
  --vurgu-metin:  #FFFFFF;   /* vurgu renginde METİN */
  --vurgu-uzeri:  #0B0B0B;   /* beyaz dolgu üstündeki metin */
  --vurgu-zemin:  rgba(255,255,255,.08);

  /* Birincil buton (vitrinde beyaz dolgu, siyah yazı) */
  --birincil:       var(--vurgu);
  --birincil-hover: var(--vurgu-acik);
  --birincil-uzeri: var(--vurgu-uzeri);

  /* Kâğıt (BEYAZ) bölümler — fiyat menüsü: siyah sayfadan beyaz sayfaya ritim */
  --kagit:        #FFFFFF;
  --kagit-2:      #F2F2F2;
  --murekkep:     #0B0B0B;
  --murekkep-2:   #555555;
  --vurgu-kagit:  #0B0B0B;

  /* Durum — YALNIZ küçük göstergeler (nokta, rozet). Uyarı/bilgi nötr griye bağlandı. */
  --basari:       #6FCF97;  --basari-zemin: rgba(111,207,151,.12);
  --hata:         #F07B6E;  --hata-zemin:   rgba(240,123,110,.12);
  --uyari:        #D4D4D4;  --uyari-zemin:  rgba(255,255,255,.08);
  --bilgi:        #FFFFFF;  --bilgi-zemin:  rgba(255,255,255,.10);

  --odak:         0 0 0 3px rgba(255,255,255,.55);

  /* Tipografi */
  --font-baslik: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-govde:  'Manrope', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs:  .75rem;    /* 12 */
  --fs-sm:  .875rem;   /* 14 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);    /* 28→40 */
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);    /* 36→56 */
  --fs-5xl: clamp(2.75rem, 1.3rem + 5.6vw, 5.25rem);   /* 44→84 hero */

  /* Boşluk ölçeği (4px tabanlı) */
  --b-1: 4px;  --b-2: 8px;  --b-3: 12px; --b-4: 16px; --b-5: 20px;
  --b-6: 24px; --b-8: 32px; --b-10: 40px; --b-12: 48px; --b-16: 64px;
  --b-20: 80px; --b-24: 96px; --b-32: 128px;
  --bolum-dikey: clamp(64px, 5vw + 40px, 128px);
  --kenar: 16px;              /* mobil yan boşluk; 640px+ 24px, 1200px+ 32px */
  --kap-genislik: 1200px;

  /* Köşe yarıçapları */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-tam: 999px;

  /* Gölgeler (koyu zeminde gölge az; kenar çizgisi + iç ışık kullanılır) */
  --golge-1: 0 1px 2px rgba(0,0,0,.4);
  --golge-2: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --golge-3: 0 24px 64px -16px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.35);
  --isik-ust: inset 0 1px 0 rgba(255,255,255,.05);

  /* Hareket */
  --sure-hizli: 140ms;
  --sure:       240ms;
  --sure-yavas: 480ms;
  --egri:       cubic-bezier(.2,.7,.2,1);

  --z-yapiskan: 40; --z-ust: 50; --z-modal: 80; --z-toast: 90;
}
@media (min-width:640px){ :root{ --kenar: 24px; } }
@media (min-width:1200px){ :root{ --kenar: 32px; } }

/* =====================================================================
   2. TOKEN'LAR — PANEL  (<body class="panel" data-tema="acik|koyu">)
   Aynı token ADLARI yeniden tanımlanır → bileşenler iki alanda da çalışır.
   Açık tema: beyaz yüzey + siyah vurgu.  Koyu tema: siyah yüzey + beyaz vurgu.
   ===================================================================== */
.panel{
  color-scheme: light;
  --zemin:        #F5F5F5;
  --zemin-2:      #EFEFEF;
  --yuzey:        #FFFFFF;
  --yuzey-2:      #FAFAFA;
  --yuzey-3:      #F0F0F0;
  --cizgi:        #E5E5E5;
  --cizgi-guclu:  #D4D4D4;

  --metin:        #111111;
  --metin-2:      #525252;
  --metin-3:      #6B6B6B;

  --vurgu:        #111111;
  --vurgu-rgb:    17,17,17;
  --vurgu-acik:   #3A3A3A;
  --vurgu-koyu:   #000000;
  --vurgu-metin:  #111111;
  --vurgu-uzeri:  #FFFFFF;
  --vurgu-zemin:  #EDEDED;

  --birincil:       #111111;
  --birincil-hover: #2E2E2E;
  --birincil-uzeri: #FFFFFF;

  --basari: #1E7A4C; --basari-zemin: #E6F4EC;
  --hata:   #B3362B; --hata-zemin:   #FBE9E7;
  --uyari:  #525252; --uyari-zemin:  #F0F0F0;   /* nötr */
  --bilgi:  #111111; --bilgi-zemin:  #E8E8E8;   /* nötr */

  --odak: 0 0 0 3px rgba(17,17,17,.25);
  --golge-1: 0 1px 2px rgba(0,0,0,.05);
  --golge-2: 0 6px 20px -6px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  --golge-3: 0 24px 60px -16px rgba(0,0,0,.25);
  --isik-ust: none;

  /* Yan menü her iki temada da siyah */
  --yan-zemin:   #0B0B0B;
  --yan-metin:   #F5F5F5;
  --yan-metin-2: #A3A3A3;
  --yan-aktif:   rgba(255,255,255,.08);
  --yan-cizgi:   rgba(255,255,255,.08);

  /* Grafik: monokrom. Tek seri = mürekkep. Çok seri (berberler) = nötr basamaklar
     + HER ZAMAN doğrudan etiket/lejant (renk tek başına kimlik taşımaz). */
  --seri-1:#111111; --seri-2:#6B6B6B; --seri-3:#A8A8A8;
  --seri-4:#3D3D3D; --seri-5:#8A8A8A; --seri-6:#C4C4C4;
  --grafik-izgara: #EEEEEE;
  --grafik-eksen:  #6B6B6B;
}
.panel[data-tema="koyu"]{
  color-scheme: dark;
  --zemin:        #0B0B0B;
  --zemin-2:      #111111;
  --yuzey:        #161616;
  --yuzey-2:      #1C1C1C;
  --yuzey-3:      #242424;
  --cizgi:        #2A2A2A;
  --cizgi-guclu:  #3A3A3A;

  --metin:        #F5F5F5;
  --metin-2:      #B3B3B3;
  --metin-3:      #8C8C8C;

  --vurgu:        #FFFFFF;
  --vurgu-rgb:    255,255,255;
  --vurgu-acik:   #E6E6E6;
  --vurgu-koyu:   #BFBFBF;
  --vurgu-metin:  #FFFFFF;
  --vurgu-uzeri:  #0B0B0B;
  --vurgu-zemin:  rgba(255,255,255,.08);

  --birincil:       #FFFFFF;
  --birincil-hover: #E6E6E6;
  --birincil-uzeri: #0B0B0B;

  --basari: #6FCF97; --basari-zemin: #142A1E;
  --hata:   #F07B6E; --hata-zemin:   #2E1A17;
  --uyari:  #BDBDBD; --uyari-zemin:  #242424;
  --bilgi:  #F5F5F5; --bilgi-zemin:  #2A2A2A;

  --odak: 0 0 0 3px rgba(255,255,255,.4);
  --golge-1: 0 1px 2px rgba(0,0,0,.5);
  --golge-2: 0 8px 24px -8px rgba(0,0,0,.7);
  --golge-3: 0 24px 60px -16px rgba(0,0,0,.8);
  --isik-ust: inset 0 1px 0 rgba(255,255,255,.04);

  --yan-zemin: #000000;

  --seri-1:#F5F5F5; --seri-2:#A8A8A8; --seri-3:#6E6E6E;
  --seri-4:#D4D4D4; --seri-5:#7A7A7A; --seri-6:#4A4A4A;
  --grafik-izgara: #222222;
  --grafik-eksen:  #8C8C8C;
}

/* =====================================================================
   3. TEMEL / RESET
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--font-govde);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
ul,ol{ list-style:none; }
::selection{ background: rgba(var(--vurgu-rgb),.35); color: var(--metin); }
:focus-visible{ outline:none; box-shadow: var(--odak); border-radius: var(--r-sm); }
.ekran-okuyucu{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.atla-link{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--vurgu); color:var(--vurgu-uzeri); padding:10px 16px; border-radius:var(--r-sm); font-weight:700; }
.atla-link:focus{ top:8px; }
[hidden],.gizli{ display:none!important; }

/* =====================================================================
   4. TİPOGRAFİ
   ===================================================================== */
.ust-baslik{               /* eyebrow — logodaki "S A L O N" aralığını yankılar */
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-govde);
  font-size: var(--fs-xs); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--vurgu-metin);
}
.ust-baslik::before{ content:""; width:28px; height:1px; background: currentColor; opacity:.7; }
.ust-baslik--orta::after{ content:""; width:28px; height:1px; background: currentColor; opacity:.7; }

.baslik-hero,.baslik-1,.baslik-2,.baslik-3{
  font-family: var(--font-baslik);
  font-optical-sizing:auto;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.08;
  color: var(--metin);
  text-wrap: balance;
}
.baslik-hero{ font-size: var(--fs-5xl); font-weight:500; line-height:1.02; letter-spacing:-.025em; }
.baslik-1{ font-size: var(--fs-4xl); }
.baslik-2{ font-size: var(--fs-3xl); }
.baslik-3{ font-size: var(--fs-2xl); line-height:1.2; }
.baslik-hero em,.baslik-1 em,.baslik-2 em{ font-style:italic; font-weight:400; color: var(--metin-2); }
.baslik-4{ font-family:var(--font-govde); font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.govde-buyuk{ font-size: var(--fs-lg); line-height:1.7; color: var(--metin-2); max-width: 60ch; }
.soluk{ color: var(--metin-2); }
.cok-soluk{ color: var(--metin-3); }
.sayi{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
.fiyat-yazi{ font-family:var(--font-baslik); font-weight:600; font-variant-numeric: lining-nums tabular-nums; }

/* =====================================================================
   5. DÜZEN YARDIMCILARI
   ===================================================================== */
.kap{ width:100%; max-width: calc(var(--kap-genislik) + var(--kenar)*2); margin:0 auto; padding:0 var(--kenar); }
.kap--dar{ max-width: calc(760px + var(--kenar)*2); }
.bolum{ padding: var(--bolum-dikey) 0; position:relative; }
.bolum--alt{ background: var(--zemin-2); }
.bolum-bas{ display:flex; flex-direction:column; gap: var(--b-3); margin-bottom: var(--b-12); max-width: 680px; }
.bolum-bas--orta{ align-items:center; text-align:center; margin-left:auto; margin-right:auto; }
.yigin{ display:flex; flex-direction:column; gap: var(--b-4); }
.sira{ display:flex; align-items:center; gap: var(--b-3); flex-wrap:wrap; }
.ayrac{ height:1px; background: var(--cizgi); border:0; }

/* =====================================================================
   6. BİLEŞENLER
   ===================================================================== */

/* ---- 6.1 İkon (inline SVG, stroke tabanlı, 24 grid, 1.75 kalınlık) ---- */
.ikon{ width:20px; height:20px; flex:none; stroke: currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ikon--sm{ width:16px; height:16px; }
.ikon--lg{ width:24px; height:24px; }
.ikon--xl{ width:32px; height:32px; stroke-width:1.5; }

/* ---- 6.2 Butonlar ---- */
.btn{
  --btn-y: 48px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: var(--btn-y); padding: 0 22px;
  border-radius: var(--r-tam);
  font-family: var(--font-govde); font-size: var(--fs-md); font-weight:700; letter-spacing:.005em;
  line-height:1; white-space:nowrap; text-align:center;
  border:1px solid transparent;
  transition: background-color var(--sure-hizli) var(--egri), color var(--sure-hizli) var(--egri),
              border-color var(--sure-hizli) var(--egri), transform var(--sure-hizli) var(--egri), box-shadow var(--sure) var(--egri);
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn[disabled],.btn.devre-disi{ opacity:.45; pointer-events:none; }
.btn--birincil{ background: var(--birincil); color: var(--birincil-uzeri); box-shadow: 0 6px 20px -6px rgba(var(--vurgu-rgb),.5); }
.btn--birincil:hover{ background: var(--birincil-hover); }
.panel .btn--birincil{ box-shadow: var(--golge-1); }
.btn--vurgu{ background: var(--vurgu); color: var(--vurgu-uzeri); }
.btn--vurgu:hover{ background: var(--vurgu-acik); }
.btn--ikincil{ background: transparent; color: var(--metin); border-color: var(--cizgi-guclu); }
.btn--ikincil:hover{ border-color: var(--metin-2); background: rgba(255,255,255,.04); }
.panel .btn--ikincil{ background: var(--yuzey); }
.panel .btn--ikincil:hover{ background: var(--yuzey-2); border-color: var(--cizgi-guclu); }
.btn--hayalet{ background: transparent; color: var(--metin-2); padding: 0 14px; }
.btn--hayalet:hover{ color: var(--metin); background: var(--yuzey-2); }
.btn--tehlike{ background: var(--hata); color:#fff; }
.panel[data-tema="koyu"] .btn--tehlike{ color:#1A0F0D; }
.btn--metin{ min-height:auto; padding:0; border-radius:0; color: var(--vurgu-metin); font-weight:700; gap:6px; }
.btn--metin:hover{ text-decoration: underline; text-underline-offset:4px; }
.btn--buyuk{ --btn-y: 56px; padding: 0 30px; font-size: var(--fs-lg); }
.btn--kucuk{ --btn-y: 36px; padding: 0 14px; font-size: var(--fs-sm); gap:6px; }
.btn--tam{ width:100%; }
.btn--ikon{ width: var(--btn-y); padding:0; }
.btn--kare{ border-radius: var(--r-md); }
.panel .btn{ --btn-y: 40px; border-radius: var(--r-sm); font-size: var(--fs-sm); padding: 0 16px; gap:8px; }
.panel .btn--kucuk{ --btn-y: 32px; padding: 0 12px; font-size: var(--fs-xs); }
.panel .btn--ikon{ padding:0; width: var(--btn-y); }

/* ---- 6.3 Rozetler / çipler ---- */
.rozet{
  display:inline-flex; align-items:center; gap:6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-tam);
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.01em; white-space:nowrap;
  background: var(--yuzey-3); color: var(--metin-2);
}
.rozet .nokta{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.rozet--vurgu{ background: var(--vurgu-zemin); color: var(--vurgu-metin); }
.rozet--basari{ background: var(--basari-zemin); color: var(--basari); }
.rozet--uyari{ background: var(--uyari-zemin); color: var(--uyari); }
.rozet--hata{ background: var(--hata-zemin); color: var(--hata); }
.rozet--bilgi{ background: var(--bilgi-zemin); color: var(--bilgi); }
.rozet--cerceve{ background: transparent; border:1px solid var(--cizgi-guclu); }
.rozet--canli .nokta{ box-shadow: 0 0 0 0 currentColor; animation: nabiz 2s infinite; }
@keyframes nabiz{ 0%{ box-shadow:0 0 0 0 rgba(111,207,151,.6);} 70%{ box-shadow:0 0 0 8px rgba(111,207,151,0);} 100%{ box-shadow:0 0 0 0 rgba(111,207,151,0);} }

.cip{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px;
  border-radius: var(--r-tam); border:1px solid var(--cizgi-guclu);
  font-size: var(--fs-sm); font-weight:600; color: var(--metin-2); background: transparent;
  transition: all var(--sure-hizli) var(--egri); white-space:nowrap;
}
.cip:hover{ color: var(--metin); border-color: var(--metin-3); }
.cip[aria-pressed="true"],.cip.aktif{ background: var(--metin); color: var(--zemin); border-color: var(--metin); }
.cip .adet{ font-size: var(--fs-2xs); opacity:.7; }

/* ---- 6.4 Kartlar ---- */
.kart{
  background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-lg);
  padding: var(--b-6); box-shadow: var(--isik-ust);
}
.kart--yukseltilmis{ background: var(--yuzey-2); box-shadow: var(--golge-2), var(--isik-ust); }
.kart--etkilesimli{ transition: border-color var(--sure) var(--egri), transform var(--sure) var(--egri), background var(--sure) var(--egri); cursor:pointer; }
.kart--etkilesimli:hover{ border-color: rgba(var(--vurgu-rgb),.45); transform: translateY(-2px); }
.kart-bas{ display:flex; align-items:center; justify-content:space-between; gap: var(--b-3); margin-bottom: var(--b-4); }
.kart-baslik{ font-size: var(--fs-md); font-weight:700; letter-spacing:-.005em; }
.kart-alt{ font-size: var(--fs-sm); color: var(--metin-3); }
.panel .kart{ border-radius: var(--r-md); padding: var(--b-5); box-shadow: var(--golge-1); }

/* ---- 6.5 Form alanları ---- */
.alan{ display:flex; flex-direction:column; gap:8px; }
.alan-etiket{ font-size: var(--fs-sm); font-weight:600; color: var(--metin-2); }
.alan-etiket .zorunlu{ color: var(--vurgu-metin); }
.girdi,.secim-kutu,.metin-alani{
  width:100%; min-height:52px; padding: 0 16px;
  background: var(--yuzey); color: var(--metin);
  border:1px solid var(--cizgi-guclu); border-radius: var(--r-md);
  font-size: 16px; /* iOS zoom'u önler — 16'nın altına İNMEYİN */
  transition: border-color var(--sure-hizli) var(--egri), box-shadow var(--sure-hizli) var(--egri);
  -webkit-appearance:none; appearance:none;
}
.metin-alani{ padding:14px 16px; min-height:110px; resize:vertical; line-height:1.5; }
.girdi::placeholder,.metin-alani::placeholder{ color: var(--metin-3); }
.girdi:hover,.secim-kutu:hover{ border-color: var(--metin-3); }
.girdi:focus,.secim-kutu:focus,.metin-alani:focus{ outline:none; border-color: var(--vurgu); box-shadow: var(--odak); }
.alan--hata .girdi{ border-color: var(--hata); }
.alan-yardim{ font-size: var(--fs-xs); color: var(--metin-3); }
.alan--hata .alan-yardim{ color: var(--hata); }
.girdi-ikonlu{ position:relative; }
.girdi-ikonlu .ikon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color: var(--metin-3); pointer-events:none; }
.girdi-ikonlu .girdi{ padding-left:46px; }
.secim-kutu{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23929292' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; padding-right:40px; }
.panel .girdi,.panel .secim-kutu{ min-height:40px; border-radius: var(--r-sm); font-size: var(--fs-sm); padding:0 12px; }
.panel .girdi-ikonlu .girdi{ padding-left:40px; }
.panel .girdi-ikonlu .ikon{ left:13px; }
.panel .secim-kutu{ padding-right:34px; background-position: right 12px center; }
.panel .metin-alani{ border-radius: var(--r-sm); font-size: var(--fs-sm); }
@media (max-width:640px){ .panel .girdi,.panel .secim-kutu,.panel .metin-alani{ font-size:16px; min-height:44px; } }

/* Anahtar (toggle) — admin aç/kapa ayarlarının tamamı bununla */
.anahtar{ position:relative; display:inline-flex; width:44px; height:26px; flex:none; }
.anahtar input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; z-index:1; }
.anahtar span{ position:absolute; inset:0; background: var(--cizgi-guclu); border-radius: var(--r-tam); transition: background var(--sure) var(--egri); }
.anahtar span::after{ content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--sure) var(--egri); }
.anahtar input:checked + span{ background: var(--vurgu); }
.anahtar input:checked + span::after{ transform: translateX(18px); }
.anahtar input:focus-visible + span{ box-shadow: var(--odak); }

/* Onay kutusu / radyo (özel) */
.kutu{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size: var(--fs-sm); color: var(--metin-2); }
.kutu input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none; margin-top:1px; border:1.5px solid var(--cizgi-guclu); border-radius:6px; background: var(--yuzey); display:grid; place-items:center; transition: all var(--sure-hizli); }
.kutu input:checked{ background: var(--vurgu); border-color: var(--vurgu); }
.kutu input:checked::after{ content:""; width:10px; height:6px; border:2px solid var(--vurgu-uzeri); border-top:0; border-right:0; transform: rotate(-45deg) translate(1px,-1px); }

/* ---- 6.6 Berber kartı (sihirbaz adım 1 + ana sayfa ekip) ---- */
.berber-kart{
  position:relative; display:flex; align-items:center; gap: var(--b-4);
  padding: var(--b-4); border-radius: var(--r-lg);
  background: var(--yuzey); border:1px solid var(--cizgi);
  cursor:pointer; text-align:left; width:100%;
  transition: border-color var(--sure) var(--egri), background var(--sure) var(--egri), transform var(--sure) var(--egri);
}
.berber-kart:hover{ border-color: rgba(var(--vurgu-rgb),.45); }
.berber-kart[aria-checked="true"],.berber-kart.secili{ border-color: var(--vurgu); background: linear-gradient(180deg, rgba(var(--vurgu-rgb),.10), rgba(var(--vurgu-rgb),.04)); box-shadow: 0 0 0 1px var(--vurgu) inset; }
.berber-kart .isaret{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--cizgi-guclu); display:grid; place-items:center; flex:none; transition: all var(--sure-hizli); }
.berber-kart .isaret .ikon{ width:14px; height:14px; stroke-width:2.5; opacity:0; color: var(--vurgu-uzeri); }
.berber-kart[aria-checked="true"] .isaret,.berber-kart.secili .isaret{ background: var(--vurgu); border-color: var(--vurgu); }
.berber-kart[aria-checked="true"] .isaret .ikon,.berber-kart.secili .isaret .ikon{ opacity:1; }
.berber-ad{ font-weight:700; font-size: var(--fs-md); line-height:1.3; }
.berber-unvan{ font-size: var(--fs-sm); color: var(--metin-3); }
.berber-bilgi{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.berber-ek{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size: var(--fs-xs); color: var(--metin-2); }

.avatar{
  --av: 56px;
  width: var(--av); height: var(--av); border-radius:50%; flex:none;
  display:grid; place-items:center; position:relative; overflow:hidden;
  font-family: var(--font-baslik); font-size: calc(var(--av) * .38); font-weight:500; letter-spacing:.02em;
  color: var(--metin);
  background: radial-gradient(120% 120% at 30% 20%, #2E2E2E 0%, #111111 70%);
  box-shadow: 0 0 0 1px rgba(var(--vurgu-rgb),.45), 0 0 0 4px var(--yuzey), 0 0 0 5px rgba(var(--vurgu-rgb),.18);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar--lg{ --av: 96px; }
.avatar--sm{ --av: 36px; box-shadow: 0 0 0 1px rgba(var(--vurgu-rgb),.4); }
.avatar--fark-etmez{ background: transparent; border:1.5px dashed rgba(var(--vurgu-rgb),.6); box-shadow:none; color: var(--vurgu); }
.panel[data-tema="koyu"] .avatar{ color:#0B0B0B; }  /* koyu temada seri dolguları açık gri → siyah harf */
.panel[data-tema="koyu"] .avatar--koyu-dolgu{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.panel .avatar{ color:#fff; background: var(--berber-renk, #404040); box-shadow:none; font-family: var(--font-govde); font-weight:700; }

/* ---- 6.7 Hizmet satırı (sihirbaz adım 2, çoklu seçim) ---- */
.hizmet-satir{
  display:flex; align-items:center; gap: var(--b-4); width:100%; text-align:left;
  padding: 16px; border-radius: var(--r-md);
  background: var(--yuzey); border:1px solid var(--cizgi);
  cursor:pointer; transition: border-color var(--sure-hizli) var(--egri), background var(--sure-hizli) var(--egri);
}
.hizmet-satir + .hizmet-satir{ margin-top: var(--b-2); }
.hizmet-satir:hover{ border-color: rgba(var(--vurgu-rgb),.4); }
.hizmet-satir .onay{ width:22px; height:22px; border-radius:7px; flex:none; border:1.5px solid var(--cizgi-guclu); display:grid; place-items:center; transition: all var(--sure-hizli); }
.hizmet-satir .onay .ikon{ width:14px; height:14px; stroke-width:2.75; color: var(--vurgu-uzeri); opacity:0; }
.hizmet-satir[aria-checked="true"]{ border-color: var(--vurgu); background: linear-gradient(90deg, rgba(var(--vurgu-rgb),.12), rgba(var(--vurgu-rgb),.03)); }
.hizmet-satir[aria-checked="true"] .onay{ background: var(--vurgu); border-color: var(--vurgu); }
.hizmet-satir[aria-checked="true"] .onay .ikon{ opacity:1; }
.hizmet-govde{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hizmet-ad{ font-weight:700; font-size: var(--fs-md); line-height:1.35; }
.hizmet-aciklama{ font-size: var(--fs-sm); color: var(--metin-3); line-height:1.45; }
.hizmet-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; }
.hizmet-fiyat{ font-family: var(--font-baslik); font-size: var(--fs-lg); font-weight:600; color: var(--metin); font-variant-numeric: lining-nums tabular-nums; }
.hizmet-fiyat .eski{ font-family: var(--font-govde); font-size: var(--fs-xs); color: var(--metin-3); text-decoration: line-through; margin-right:6px; font-weight:500; }
.hizmet-sure{ display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-xs); color: var(--metin-3); }
.hizmet-sure .ikon{ width:13px; height:13px; }
.kategori-baslik{ display:flex; align-items:baseline; justify-content:space-between; margin: var(--b-8) 0 var(--b-3); }
.kategori-baslik:first-child{ margin-top:0; }
.kategori-baslik h3{ font-family: var(--font-baslik); font-size: var(--fs-xl); font-weight:500; }
.kategori-baslik span{ font-size: var(--fs-xs); color: var(--metin-3); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }

/* ---- 6.8 Adım göstergesi ---- */
.adimlar{ display:flex; align-items:center; gap: 0; counter-reset: adim; }
.adim{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; /* auto taban: bağlantı çizgileri etiket uzunluğundan bağımsız eşit */ font-size: var(--fs-sm); color: var(--metin-3); font-weight:600; }
.adim:last-child{ flex:none; }
.adim .no{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-size: var(--fs-xs); font-weight:800; border:1.5px solid var(--cizgi-guclu); color: var(--metin-3); transition: all var(--sure); }
.adim .no .ikon{ width:14px; height:14px; stroke-width:2.75; }
.adim .ad{ white-space:nowrap; }
.adim:not(:last-child)::after{ content:""; flex:1; height:1px; background: var(--cizgi-guclu); margin: 0 12px; min-width:12px; }
.adim--tamam{ color: var(--metin-2); }
.adim--tamam .no{ background: var(--vurgu-zemin); border-color: transparent; color: var(--vurgu-metin); }
.adim--tamam:not(:last-child)::after{ background: rgba(var(--vurgu-rgb),.5); }
.adim--aktif{ color: var(--metin); }
.adim--aktif .no{ background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-uzeri); box-shadow: 0 0 0 4px rgba(var(--vurgu-rgb),.18); }
@media (max-width:760px){
  .adim .ad{ display:none; }  /* mobilde etiket yok — sayfa başlığı adımı söyler */
  .adim:not(:last-child)::after{ margin:0 6px; min-width:6px; }
  .adim{ gap:6px; }
  .adim .no{ width:26px; height:26px; }
}
.adim-ilerleme{ height:3px; background: var(--cizgi); border-radius:3px; overflow:hidden; }
.adim-ilerleme span{ display:block; height:100%; background: linear-gradient(90deg, var(--vurgu-koyu), var(--vurgu-acik)); border-radius:3px; transition: width var(--sure-yavas) var(--egri); }

/* ---- 6.9 Gün şeridi (yatay kaydırmalı tarih seçici) ---- */
.gun-serit-sar{ position:relative; }
.gun-serit{
  display:flex; gap: var(--b-2); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding: 4px 2px 8px; margin: 0 calc(var(--kenar) * -1); padding-left: var(--kenar); padding-right: var(--kenar);
  -webkit-overflow-scrolling: touch;
}
.gun-serit::-webkit-scrollbar{ display:none; }
.gun{
  flex: 0 0 auto; width: 68px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding: 12px 4px 10px;
  border-radius: var(--r-md); border:1px solid var(--cizgi); background: var(--yuzey);
  cursor:pointer; transition: all var(--sure-hizli) var(--egri);
}
.gun:hover{ border-color: rgba(var(--vurgu-rgb),.45); }
.gun .gun-ad{ font-size: var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--metin-3); }
.gun .gun-no{ font-family: var(--font-baslik); font-size: 1.625rem; font-weight:500; line-height:1.1; font-variant-numeric: lining-nums; }
.gun .gun-ay{ font-size: var(--fs-2xs); color: var(--metin-3); }
.gun .gun-durum{ width:5px; height:5px; border-radius:50%; background: var(--basari); margin-top:4px; }
.gun--az .gun-durum{ background: var(--uyari); }
.gun--secili{ background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.gun--secili .gun-ad,.gun--secili .gun-ay{ color: rgba(0,0,0,.62); }
.gun--secili .gun-durum{ background: var(--vurgu-koyu); }
.gun--kapali{ opacity:.38; cursor:not-allowed; background: transparent; }
.gun--kapali .gun-no{ text-decoration: line-through; text-decoration-thickness:1px; }
.gun--kapali .gun-durum{ background: transparent; }
.gun--bugun .gun-ad{ color: var(--vurgu-metin); }
.gun--bugun.gun--secili .gun-ad{ color: var(--zemin); }
@media (min-width:960px){ .gun-serit{ margin:0; padding-left:2px; padding-right:2px; } .gun{ flex:1 0 64px; width:auto; } }

/* ---- 6.10 Saat slotu ---- */
.saat-grup{ margin-top: var(--b-6); }
.saat-grup-bas{ display:flex; align-items:center; gap:8px; font-size: var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--metin-3); margin-bottom: var(--b-3); }
.saat-grup-bas .ikon{ width:16px; height:16px; }
.saat-izgara{ display:grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: var(--b-2); }
@media (max-width:420px){ .saat-izgara{ grid-template-columns: repeat(4, 1fr); } }
.saat{
  height:48px; border-radius: var(--r-sm); border:1px solid var(--cizgi-guclu); background: var(--yuzey);
  font-size: var(--fs-md); font-weight:700; font-variant-numeric: tabular-nums; color: var(--metin);
  transition: all var(--sure-hizli) var(--egri); position:relative;
}
.saat:hover{ border-color: var(--vurgu); color: var(--vurgu-metin); }
.saat[aria-pressed="true"],.saat--secili{ background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-uzeri); box-shadow: 0 8px 20px -8px rgba(var(--vurgu-rgb),.7); }
.saat[disabled],.saat--dolu{ background: transparent; border-style:dashed; border-color: var(--cizgi); color: var(--metin-3); opacity:.55; text-decoration: line-through; cursor:not-allowed; }
.saat--son::after{ content:"son"; position:absolute; top:-7px; right:6px; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background: var(--metin); color: var(--zemin); padding:1px 5px; border-radius:4px; }

/* ---- 6.11 Toast ---- */
.toast-alani{ position:fixed; z-index: var(--z-toast); left:50%; transform:translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; width: min(420px, calc(100% - 32px)); pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:12px; padding: 14px 16px;
  background: #FFFFFF; color: #0B0B0B; border-radius: var(--r-md);
  box-shadow: var(--golge-3); font-size: var(--fs-sm); font-weight:600;
  animation: toast-gir var(--sure) var(--egri);
}
.toast .ikon{ margin-top:1px; }
.toast--basari .ikon{ color:#1E7A4C; } .toast--hata .ikon{ color:#B3362B; } .toast--uyari .ikon{ color:#525252; }
.panel .toast{ background: var(--metin); color: var(--yuzey); }
@keyframes toast-gir{ from{ opacity:0; transform: translateY(12px) scale(.98);} to{ opacity:1; transform:none; } }

/* ---- 6.12 Modal (mobilde alt sayfa / bottom sheet) ---- */
.modal-ort{ position:fixed; inset:0; z-index: var(--z-modal); background: rgba(0,0,0,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; padding: var(--b-4); animation: sol var(--sure) var(--egri); }
.modal{ width: min(520px, 100%); max-height: calc(100vh - 32px); overflow:auto; background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-xl); box-shadow: var(--golge-3); animation: modal-gir var(--sure) var(--egri); }
.modal-bas{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 20px 24px; border-bottom:1px solid var(--cizgi); }
.modal-bas h2{ font-size: var(--fs-lg); font-weight:700; }
.modal-govde{ padding: 24px; display:flex; flex-direction:column; gap: var(--b-4); }
.modal-alt{ padding: 16px 24px; border-top:1px solid var(--cizgi); display:flex; justify-content:flex-end; gap: var(--b-2); }
@media (max-width:640px){
  .modal-ort{ align-items:flex-end; padding:0; }
  .modal{ width:100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); animation: alt-sayfa var(--sure) var(--egri); }
  .modal::before{ content:""; display:block; width:40px; height:4px; border-radius:4px; background: var(--cizgi-guclu); margin: 10px auto 0; }
  .modal-alt .btn{ flex:1; }
}
@keyframes sol{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-gir{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none; } }
@keyframes alt-sayfa{ from{ transform: translateY(100%);} to{ transform:none; } }

/* ---- 6.13 Alt yapışkan özet çubuğu (sihirbaz, mobil) ---- */
.ozet-cubuk{
  position:fixed; left:0; right:0; bottom:0; z-index: var(--z-yapiskan);
  padding: 12px var(--kenar) calc(12px + env(safe-area-inset-bottom));
  background: rgba(var(--zemin-rgb),.92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top:1px solid var(--cizgi);
  display:flex; align-items:center; gap: var(--b-4);
  transform: translateY(0); transition: transform var(--sure) var(--egri);
}
.ozet-cubuk--gizli{ transform: translateY(110%); }
.ozet-cubuk-bilgi{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.ozet-cubuk-ust{ font-size: var(--fs-xs); color: var(--metin-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ozet-cubuk-tutar{ font-family: var(--font-baslik); font-size: var(--fs-xl); font-weight:600; font-variant-numeric: lining-nums tabular-nums; }
.ozet-cubuk .btn{ flex:none; }
@media (min-width:960px){ .ozet-cubuk--mobil{ display:none; } }

/* ---- 6.14 Logo işlemleri (logo PNG'si beyaz zeminli, siyah çizimli) ----
   .logo-ters     : koyu zeminde ORİJİNAL logo beyaz olarak (invert + screen → beyaz arka plan kaybolur) — varsayılan
   .logo-boyali   : (isteğe bağlı) logoyu --vurgu renginde boyar; monokrom kimlikte KULLANILMAZ
   .logo-murekkep : açık/kâğıt zeminde siyah logo (multiply → beyaz arka plan kaybolur)
   Not: Hepsi şeffaf PNG/SVG yüklense de çalışır.
   ÖNEMLİ: mix-blend-mode, en yakın yığın bağlamının (stacking context) zeminiyle karışır.
   Logoyu içeren sticky/z-index/isolation'lı ebeveynin OPAK bir background'u olmalı
   (yoksa logonun siyah kutusu görünür). .hero, .ust-bar, .p-yan bunu sağlar. */
.logo-kap{ display:inline-block; line-height:0; flex:none; mix-blend-mode: screen; }  /* karışım SARMALAYICIDA: sarmalayıcıya filter/transform verilse de siyah kutu çıkmaz */
.logo-kap .logo-ters{ mix-blend-mode: normal; }
.logo-kap img{ display:block; width:100%; height:auto; }
.logo-ters{ filter: invert(1) grayscale(1); mix-blend-mode: screen; }  /* VARSAYILAN: koyu zeminde orijinal logo, beyaz */
.logo-murekkep{ mix-blend-mode: multiply; filter: grayscale(1); }
.logo-boyali{ display:inline-block; position:relative; background: var(--vurgu); mix-blend-mode: screen; isolation:isolate; line-height:0; }
.logo-boyali img{ display:block; width:100%; height:auto; filter: invert(1) grayscale(1) contrast(1.15); mix-blend-mode: multiply; }

/* ---- 6.15 Berber direği imza şeridi (küçük detay) ---- */
.direk{ height:3px; width:72px; border-radius:3px; background: repeating-linear-gradient(-45deg, var(--metin) 0 5px, transparent 5px 10px); opacity:.6; }  /* küçük imza: başlık üstü vb. ASLA tam genişlik şerit değil */
.susleme{ display:flex; align-items:center; justify-content:center; gap: var(--b-4); color: var(--vurgu); padding: 0 var(--kenar); }
.susleme::before,.susleme::after{ content:""; height:1px; flex:1; max-width: 520px; background: linear-gradient(90deg, transparent, rgba(var(--vurgu-rgb),.45)); }
.susleme::after{ background: linear-gradient(270deg, transparent, rgba(var(--vurgu-rgb),.45)); }
.susleme .ikon{ width:40px; height:40px; stroke-width:1.1; }

/* ---- 6.16 Boş durum & iskelet ---- */
.bos-durum{ text-align:center; padding: var(--b-12) var(--b-6); color: var(--metin-3); display:flex; flex-direction:column; align-items:center; gap: var(--b-3); }
.bos-durum .ikon{ width:40px; height:40px; stroke-width:1.25; color: var(--metin-3); }
.iskelet{ background: linear-gradient(90deg, var(--yuzey-2) 0%, var(--yuzey-3) 50%, var(--yuzey-2) 100%); background-size: 200% 100%; animation: iskelet 1.4s infinite linear; border-radius: var(--r-sm); }
@keyframes iskelet{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }

/* =====================================================================
   7. VİTRİN BÖLÜMLERİ
   ===================================================================== */

/* ---- 7.1 Duyuru bandı (admin: duyuru_aktif, duyuru_metin, duyuru_link) ---- */
.duyuru{ position:relative; background: var(--vurgu); color: var(--vurgu-uzeri); font-size: var(--fs-sm); font-weight:600; }
.duyuru .kap{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding-top:8px; padding-bottom:8px; padding-right:48px; padding-left:48px; text-align:center; flex-wrap:wrap; }
@media (max-width:640px){ .duyuru .kap{ justify-content:flex-start; text-align:left; padding-left: var(--kenar); font-size: var(--fs-xs); gap:4px 8px; } .duyuru .kap > .ikon{ display:none; } }
.duyuru a{ text-decoration: underline; text-underline-offset:3px; font-weight:800; }
.duyuru-kapat{ position:absolute; right: 8px; top:50%; transform: translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color: inherit; }
.duyuru-kapat:hover{ background: rgba(0,0,0,.1); }

/* ---- 7.2 Üst bar (yapışkan, kaydırınca camlaşır) ---- */
.ust-bar{ position:sticky; top:0; z-index: var(--z-ust); background: var(--zemin); transition: background var(--sure) var(--egri), border-color var(--sure) var(--egri); border-bottom:1px solid transparent; }
.ust-bar--cam{ background: rgba(var(--zemin-rgb),.82); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--cizgi); }
.ust-bar .kap{ display:flex; align-items:center; justify-content:space-between; gap: var(--b-6); height:72px; }
.marka{ display:flex; align-items:center; gap:12px; }
.marka-logo{ width:44px; height:44px; }
.marka-ad{ display:flex; flex-direction:column; line-height:1.1; }
.marka-ad b{ font-family: var(--font-baslik); font-size: 1.1875rem; font-weight:600; letter-spacing:.01em; }
.marka-ad span{ font-size: 10px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color: var(--metin-3); }
.ana-menu{ display:none; align-items:center; gap: var(--b-8); }
.ana-menu a{ font-size: var(--fs-sm); font-weight:600; color: var(--metin-2); transition: color var(--sure-hizli); position:relative; padding: 6px 0; }
.ana-menu a:hover{ color: var(--metin); }
.ana-menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--vurgu); transform: scaleX(0); transform-origin:left; transition: transform var(--sure) var(--egri); }
.ana-menu a:hover::after{ transform: scaleX(1); }
.ust-bar-eylem{ display:flex; align-items:center; gap: var(--b-2); }
.ust-bar-eylem .btn--ikincil{ display:none; }
.menu-dugme{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--cizgi-guclu); }
@media (min-width:960px){
  .ana-menu{ display:flex; }
  .menu-dugme{ display:none; }
  .ust-bar-eylem .btn--ikincil{ display:inline-flex; }
}
@media (max-width:420px){ .marka-ad{ display:none; } .alt-bilgi .marka-ad{ display:flex; } }
.ust-bar .btn{ --btn-y:44px; padding:0 18px; font-size: var(--fs-sm); }

/* Mobil menü çekmecesi */
.cekmece{ position:fixed; inset:0; z-index: var(--z-modal); background: var(--zemin); display:flex; flex-direction:column; padding: 88px var(--kenar) calc(24px + env(safe-area-inset-bottom)); }
.cekmece a.cekmece-link{ font-family: var(--font-baslik); font-size: 2rem; padding: 12px 0; border-bottom:1px solid var(--cizgi); display:flex; justify-content:space-between; align-items:center; }

/* ---- 7.3 Hero ---- */
.hero{ position:relative; overflow:hidden; isolation:isolate; background: var(--zemin); padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 120px); }
.hero::before{ /* sıcak ışık */
  content:""; position:absolute; z-index:-2; width: 1100px; height:1100px; right:-260px; top:-300px;
  background: radial-gradient(closest-side, rgba(255,255,255,.075), rgba(255,255,255,.02) 45%, transparent 72%);
}
.hero::after{ /* film greni */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.07; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hero ızgarası: alanlar → mobil: amblem / metin / bugün ; masaüstü: metin | amblem (+bugün kartı amblemin altına biner) */
.hero-izgara{ display:grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "amblem" "metin" "bugun"; gap: var(--b-8); align-items:center; }
.hero-metin{ grid-area: metin; display:flex; flex-direction:column; gap: var(--b-6); align-items:flex-start; position:relative; z-index:1; }
.hero-metin .govde-buyuk{ max-width: 46ch; }
.hero-eylem{ display:flex; gap: var(--b-3); flex-wrap:wrap; width:100%; }
.hero-guven{ display:flex; align-items:center; gap: var(--b-8); flex-wrap:wrap; padding-top: var(--b-6); margin-top: var(--b-2); border-top:1px solid var(--cizgi); width:100%; }
.guven-oge{ display:flex; flex-direction:column; gap:4px; }
.guven-oge b{ font-family: var(--font-baslik); font-size: var(--fs-2xl); font-weight:500; line-height:1; display:flex; align-items:center; gap:6px; font-variant-numeric: lining-nums; }
.guven-oge span{ font-size: var(--fs-xs); color: var(--metin-3); font-weight:600; letter-spacing:.02em; }
.yildizlar{ display:inline-flex; gap:2px; color: var(--vurgu); }
.yildizlar .ikon{ width:16px; height:16px; fill: currentColor; stroke:none; }

.hero-gorsel{ grid-area: amblem; position:relative; display:grid; place-items:center; justify-self:center; width: min(72vw, 340px); aspect-ratio: 1/1; }
.hero-halka{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--vurgu-rgb),.22); }
.hero-halka--2{ inset: 7%; border-style: dashed; border-color: rgba(var(--vurgu-rgb),.18); animation: don 120s linear infinite; }
.hero-halka--3{ inset: -7%; border-color: rgba(var(--vurgu-rgb),.08); }
.hero-logo{ width: 76%; }
@keyframes don{ to{ transform: rotate(360deg); } }

.bugun-kart{
  grid-area: bugun; position:relative; z-index:2; width:100%;
  background: rgba(var(--yuzey-rgb),.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--cizgi-guclu); border-radius: var(--r-lg); padding: var(--b-4);
  box-shadow: var(--golge-3), var(--isik-ust);
  display:flex; flex-direction:column; gap: var(--b-3);
}
.bugun-kart-bas{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bugun-kart-bas .kart-alt{ font-size: var(--fs-xs); }
.bugun-kart-baslik{ font-weight:700; font-size: var(--fs-sm); }
.yakin-slotlar{ display:flex; gap: 6px; flex-wrap:wrap; }
.yakin-slotlar a{ height:36px; padding:0 14px; border-radius: var(--r-tam); border:1px solid var(--cizgi-guclu); display:inline-flex; align-items:center; font-size: var(--fs-sm); font-weight:700; font-variant-numeric: tabular-nums; transition: all var(--sure-hizli); }
.yakin-slotlar a:hover{ border-color: var(--vurgu); background: var(--vurgu); color: var(--vurgu-uzeri); }
.yakin-slotlar a small{ font-weight:600; color: var(--metin-3); margin-left:6px; font-size: var(--fs-2xs); }
.yakin-slotlar a:hover small{ color: inherit; }

@media (max-width:959px){
  .hero{ padding-top: var(--b-8); }
  .hero-metin{ align-items:center; text-align:center; }
  .hero-metin .ust-baslik::before{ display:none; }
  .hero-eylem .btn{ flex:1 1 100%; }
  .hero-guven{ justify-content:center; gap: var(--b-6); }
  .hero::before{ right:auto; left:50%; transform: translateX(-50%); top:-460px; width:900px; height:900px; }
}
@media (min-width:960px){
  .hero-izgara{ grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); grid-template-areas: "metin amblem"; column-gap: var(--b-16); }
  .hero-gorsel{ width: 100%; max-width: 520px; }
  /* Aynı ızgara alanına bindirilir: amblemin sağ-alt köşesinin ALTINA oturur, logoyu örtmez */
  .bugun-kart{ grid-area: amblem; align-self:end; justify-self:end; width: 356px; transform: translate(6%, 34%); }
  .hero{ padding-bottom: clamp(120px, 10vw, 160px); }
}
/* ---- 7.4 Hakkımızda ---- */
.hakkimizda{ display:grid; gap: var(--b-12); align-items:center; }
.hakkimizda-gorsel{ position:relative; aspect-ratio: 4/5; border-radius: var(--r-xl); background: var(--yuzey); }
.hakkimizda-gorsel img,.hakkimizda-gorsel .yer-tutucu{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: inherit; overflow:hidden; }
.hakkimizda-gorsel::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(var(--vurgu-rgb),.28); border-radius: calc(var(--r-xl) - 8px); pointer-events:none; }
@media (max-width:640px){ .hakkimizda-gorsel{ aspect-ratio: 4/3.4; } .hakkimizda-damga{ right:12px!important; width:104px!important; height:104px!important; } .hakkimizda-damga b{ font-size:2rem!important; } }
.hakkimizda-damga{ position:absolute; right: -18px; bottom: 28px; width:132px; height:132px; border-radius:50%; background: var(--vurgu); color: var(--vurgu-uzeri); display:grid; place-items:center; text-align:center; box-shadow: var(--golge-3); transform: rotate(-8deg); }
.hakkimizda-damga b{ display:block; font-family: var(--font-baslik); font-size: 2.5rem; line-height:1; font-weight:600; }
.hakkimizda-damga span{ font-size: 10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.istatistikler{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-4); margin-top: var(--b-8); padding-top: var(--b-8); border-top:1px solid var(--cizgi); }
.istatistik b{ display:block; font-family: var(--font-baslik); font-size: var(--fs-3xl); font-weight:500; line-height:1; color: var(--metin); font-variant-numeric: lining-nums; }
.istatistik b sup{ font-size: .5em; color: var(--vurgu-metin); vertical-align: top; position:relative; top:.2em; }
.istatistik span{ display:block; margin-top:8px; font-size: var(--fs-sm); color: var(--metin-3); }
.alinti{ font-family: var(--font-baslik); font-style:italic; font-size: var(--fs-xl); line-height:1.5; color: var(--metin); border-left: 2px solid var(--vurgu); padding-left: var(--b-5); }
.alinti cite{ display:block; margin-top: 8px; font-family: var(--font-govde); font-style:normal; font-size: var(--fs-sm); color: var(--metin-3); font-weight:600; }
@media (min-width:960px){ .hakkimizda{ grid-template-columns: .9fr 1.1fr; gap: var(--b-20); } }

/* Görsel yer tutucu (fotoğraf yüklenene kadar — yine de şık görünür) */
.yer-tutucu{ position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(var(--vurgu-rgb),.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #242424, #0E0E0E);
  color: rgba(var(--vurgu-rgb),.55);
}
.yer-tutucu .ikon{ width:64px; height:64px; stroke-width:1; }
.galeri-oge:nth-child(2n) .yer-tutucu{ background: radial-gradient(70% 60% at 25% 80%, rgba(var(--vurgu-rgb),.16), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px), linear-gradient(200deg, #222222, #0D0D0D); }
.galeri-oge:nth-child(3n) .yer-tutucu{ background: radial-gradient(60% 60% at 50% 50%, rgba(var(--vurgu-rgb),.14), transparent 70%), linear-gradient(180deg, #1C1C1C, #0C0C0C); }
.galeri-oge .yer-tutucu::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(var(--vurgu-rgb),.16); border-radius: calc(var(--r-md) - 4px); }

/* ---- 7.5 Hizmetler & fiyat menüsü (beyaz "kâğıt" bölüm) ---- */
.bolum--kagit{ background: var(--kagit); color: var(--murekkep);
  --metin: var(--murekkep); --metin-2: var(--murekkep-2); --metin-3: var(--murekkep-2);
  --vurgu-metin: var(--vurgu-kagit); --cizgi: rgba(0,0,0,.12); --cizgi-guclu: rgba(0,0,0,.22);
  --yuzey: #FAFAFA; --yuzey-2: #FFFFFF; --yuzey-3: var(--kagit-2);
  color-scheme: light;
}
.bolum--kagit::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bolum--kagit .cip[aria-pressed="true"],.bolum--kagit .cip.aktif{ background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.bolum--kagit .btn--birincil{ background: var(--murekkep); color: var(--kagit); box-shadow:none; }
.bolum--kagit .btn--birincil:hover{ background: #2E2E2E; }
.menu-sekmeler{ display:flex; gap: var(--b-2); overflow-x:auto; scrollbar-width:none; margin-bottom: var(--b-10); padding-bottom:4px; }
.menu-sekmeler::-webkit-scrollbar{ display:none; }
/* Menü kartı: basılı berber menüsü hissi — çift ince çerçeve */
.menu-kart{ position:relative; }
@media (min-width:960px){
  .menu-kart{ padding: var(--b-12) var(--b-16); background: rgba(255,255,255,.45); border:1px solid rgba(0,0,0,.14); border-radius: var(--r-xs); box-shadow: 0 30px 60px -30px rgba(0,0,0,.14); }
  .menu-kart::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(0,0,0,.10); pointer-events:none; border-radius: 2px; }
}
.menu-izgara{ display:grid; grid-template-columns: 1fr; gap: var(--b-10) var(--b-16); }
@media (min-width:960px){ .menu-izgara{ grid-template-columns: 1fr 1fr; } }
.menu-grup h3{ font-family: var(--font-baslik); font-size: var(--fs-2xl); font-weight:500; display:flex; align-items:baseline; gap:12px; margin-bottom: var(--b-4); }
.menu-grup h3 small{ font-family: var(--font-govde); font-size: var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color: var(--vurgu-metin); font-weight:800; }
.menu-oge{ padding: var(--b-4) 0; border-bottom: 1px solid var(--cizgi); }
.menu-oge-ust{ display:flex; align-items:baseline; gap: var(--b-3); }
.menu-oge-ad{ font-weight:700; font-size: var(--fs-lg); letter-spacing:-.005em; }
.menu-oge-cizgi{ flex:1; border-bottom: 1.5px dotted rgba(0,0,0,.35); transform: translateY(-5px); min-width: 24px; }
.menu-oge-fiyat{ font-family: var(--font-baslik); font-size: var(--fs-xl); font-weight:600; font-variant-numeric: lining-nums tabular-nums; white-space:nowrap; }
.menu-oge-alt{ display:flex; justify-content:space-between; gap: var(--b-4); margin-top: 4px; font-size: var(--fs-sm); color: var(--metin-2); }
.menu-oge-alt .sure{ white-space:nowrap; display:inline-flex; gap:4px; align-items:center; }
.menu-not{ margin-top: var(--b-8); font-size: var(--fs-sm); color: var(--metin-2); display:flex; gap:8px; align-items:center; }

/* ---- 7.6 Ekip ---- */
.ekip-izgara{ display:grid; grid-template-columns: 1fr; gap: var(--b-4); }
@media (min-width:640px){ .ekip-izgara{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .ekip-izgara{ grid-template-columns: repeat(3,1fr); gap: var(--b-6); } }
.ekip-kart{ position:relative; border-radius: var(--r-xl); overflow:hidden; background: var(--yuzey); border:1px solid var(--cizgi); display:flex; flex-direction:column; transition: border-color var(--sure) var(--egri), transform var(--sure) var(--egri); }
.ekip-kart:hover{ border-color: rgba(var(--vurgu-rgb),.4); transform: translateY(-3px); }
.ekip-foto{ position:relative; aspect-ratio: 16/10; overflow:hidden; background: #141414; }
.ekip-foto img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.25) contrast(1.05); transition: transform var(--sure-yavas) var(--egri); }
.ekip-kart:hover .ekip-foto img{ transform: scale(1.04); }
.ekip-foto .avatar{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
.ekip-foto::after{ content:""; position:absolute; inset:auto 0 0 0; height:50%; background: linear-gradient(to top, var(--yuzey), transparent); }
.ekip-govde{ padding: var(--b-5) var(--b-6) var(--b-6); display:flex; flex-direction:column; gap: var(--b-3); margin-top: -36px; position:relative; z-index:1; }
.ekip-govde h3{ font-family: var(--font-baslik); font-size: var(--fs-2xl); font-weight:500; line-height:1.15; }
.ekip-uzmanlik{ display:flex; gap:6px; flex-wrap:wrap; }
.ekip-alt{ display:flex; align-items:center; justify-content:space-between; gap: var(--b-3); padding-top: var(--b-4); border-top:1px solid var(--cizgi); margin-top: var(--b-2); }

/* ---- 7.7 Galeri ---- */
.galeri{ display:grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: var(--b-2); }
.galeri-oge{ position:relative; border-radius: var(--r-md); overflow:hidden; background: var(--yuzey); }
.galeri-oge img{ width:100%; height:100%; object-fit:cover; transition: transform var(--sure-yavas) var(--egri); }
.galeri-oge:hover img{ transform: scale(1.05); }
.galeri-oge--genis{ grid-column: span 2; }
.galeri-oge--uzun{ grid-row: span 2; }
.galeri-oge figcaption{ position:absolute; left:12px; bottom:12px; font-size: var(--fs-xs); font-weight:700; background: rgba(var(--zemin-rgb),.7); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: var(--r-tam); }
@media (min-width:960px){ .galeri{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--b-3); } }

/* ---- 7.8 Yorumlar ---- */
.yorum-izgara{ display:grid; grid-template-columns: 1fr; gap: var(--b-4); }
@media (min-width:960px){ .yorum-izgara{ grid-template-columns: repeat(3,1fr); gap: var(--b-6); } }
.yorum{ display:flex; flex-direction:column; gap: var(--b-4); padding: var(--b-8) var(--b-6) var(--b-6); background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-xl); position:relative; }
.yorum::before{ content:"\201C"; position:absolute; top: 4px; right: 22px; font-family: var(--font-baslik); font-size: 6rem; line-height:1; color: rgba(var(--vurgu-rgb),.18); }
.yorum p{ font-size: var(--fs-md); line-height:1.7; color: var(--metin); flex:1; }
.yorum-kisi{ display:flex; align-items:center; gap: var(--b-3); }
.yorum-kisi b{ display:block; font-size: var(--fs-sm); }
.yorum-kisi span{ font-size: var(--fs-xs); color: var(--metin-3); }
.puan-ozet{ display:flex; align-items:center; gap: var(--b-4); }
.puan-ozet b{ font-family: var(--font-baslik); font-size: 3rem; font-weight:500; line-height:1; }

/* ---- 7.9 Çalışma saatleri + iletişim ---- */
.bilgi-izgara{ display:grid; gap: var(--b-6); }
@media (min-width:960px){ .bilgi-izgara{ grid-template-columns: 1fr 1fr; gap: var(--b-8); } }
.saat-tablo{ width:100%; border-collapse: collapse; }
.saat-tablo tr{ border-bottom:1px solid var(--cizgi); }
.saat-tablo tr:last-child{ border-bottom:0; }
.saat-tablo th,.saat-tablo td{ padding: 14px 0; text-align:left; font-size: var(--fs-md); }
.saat-tablo th{ font-weight:600; color: var(--metin-2); }
.saat-tablo td{ text-align:right; font-weight:700; font-variant-numeric: tabular-nums; }
.saat-tablo tr.bugun th,.saat-tablo tr.bugun td{ color: var(--vurgu-metin); }
.saat-tablo tr.bugun th::after{ content:"Bugün"; margin-left:10px; font-size: 10px; letter-spacing:.12em; text-transform:uppercase; background: var(--vurgu-zemin); color: var(--vurgu-metin); padding: 3px 8px; border-radius: var(--r-tam); vertical-align: middle; }
.saat-tablo tr.kapali td{ color: var(--metin-3); font-weight:600; }
.iletisim-liste{ display:flex; flex-direction:column; }
.iletisim-oge{ display:flex; align-items:center; gap: var(--b-4); padding: var(--b-4) 0; border-bottom:1px solid var(--cizgi); }
.iletisim-oge:last-child{ border-bottom:0; }
.iletisim-ikon{ width:44px; height:44px; border-radius: var(--r-md); display:grid; place-items:center; background: var(--vurgu-zemin); color: var(--vurgu-metin); flex:none; }
.iletisim-oge small{ display:block; font-size: var(--fs-xs); color: var(--metin-3); font-weight:600; letter-spacing:.04em; }
.iletisim-oge b{ font-size: var(--fs-md); font-weight:700; }
.iletisim-oge .btn{ margin-left:auto; }
.harita{ position:relative; border-radius: var(--r-xl); overflow:hidden; aspect-ratio: 16/10; border:1px solid var(--cizgi); background: #161616; }
.harita iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter: grayscale(1) invert(.92) contrast(.9) sepia(.15); }

.saat-not{ display:flex; align-items:center; gap: var(--b-3); margin-top: var(--b-5); padding: var(--b-4); border-radius: var(--r-md); background: var(--vurgu-zemin); border:1px solid rgba(var(--vurgu-rgb),.22); }
.saat-not > .ikon{ color: var(--vurgu-metin); flex:none; }
.saat-not div{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.saat-not b{ font-size: var(--fs-sm); }
.saat-not span{ font-size: var(--fs-xs); color: var(--metin-3); }
@media (max-width:480px){ .saat-not{ flex-wrap:wrap; } .saat-not .btn{ width:100%; } }

/* ---- 7.10 Kapanış CTA ---- */
.kapanis{ position:relative; overflow:hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  background: radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.09), transparent 60%), linear-gradient(135deg, #1C1C1C, #0E0E0E);
  border:1px solid rgba(var(--vurgu-rgb),.25); display:grid; gap: var(--b-6); align-items:center; }
@media (min-width:960px){ .kapanis{ grid-template-columns: 1fr auto; } }

/* ---- 7.11 Alt bilgi ---- */
.alt-bilgi{ border-top:1px solid var(--cizgi); padding: var(--b-16) 0 calc(var(--b-8) + env(safe-area-inset-bottom)); background: var(--zemin); }
.alt-bilgi-izgara{ display:grid; gap: var(--b-10); grid-template-columns: 1fr; }
@media (max-width:639px){ .alt-bilgi-izgara{ grid-template-columns: 1fr 1fr; gap: var(--b-8) var(--b-6); } .alt-bilgi-izgara > :first-child, .alt-bilgi-izgara > :last-child:nth-child(even){ grid-column: 1 / -1; } }
@media (min-width:640px){ .alt-bilgi-izgara{ grid-template-columns: 1fr 1fr; } }
@media (min-width:960px){ .alt-bilgi-izgara{ grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.alt-bilgi h4{ font-size: var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color: var(--metin-3); margin-bottom: var(--b-4); font-weight:800; }
.alt-bilgi ul{ display:flex; flex-direction:column; gap: 10px; }
.alt-bilgi ul a{ color: var(--metin-2); font-size: var(--fs-sm); transition: color var(--sure-hizli); }
.alt-bilgi ul a:hover{ color: var(--vurgu-metin); }
.sosyal{ display:flex; gap: var(--b-2); }
.sosyal a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--cizgi-guclu); display:grid; place-items:center; color: var(--metin-2); transition: all var(--sure-hizli); }
.sosyal a:hover{ color: var(--vurgu-uzeri); background: var(--vurgu); border-color: var(--vurgu); }
.alt-bilgi-son{ margin-top: var(--b-12); padding-top: var(--b-6); border-top:1px solid var(--cizgi); display:flex; flex-wrap:wrap; gap: var(--b-3); justify-content:space-between; font-size: var(--fs-xs); color: var(--metin-3); }

/* ---- 7.12 Mobil yapışkan CTA (ana sayfa) ---- */
.mobil-cta{ position:fixed; left:12px; right:12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-yapiskan); display:flex; gap:8px; padding:8px; border-radius: var(--r-tam);
  background: rgba(var(--yuzey-rgb),.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border:1px solid var(--cizgi-guclu); box-shadow: var(--golge-3); }
.mobil-cta .btn{ --btn-y: 48px; }
.mobil-cta .btn--birincil{ flex:1; }
@media (min-width:960px){ .mobil-cta{ display:none; } }
@media (max-width:959px){ body.vitrin{ padding-bottom: 88px; } }

/* =====================================================================
   8. RANDEVU SİHİRBAZI
   ===================================================================== */
.sihirbaz-ust{ position:sticky; top:0; z-index: var(--z-ust); background: var(--zemin); /* opak: logo karışımı (screen) yarı saydam zeminde bozulmasın — TASARIM §7 */ border-bottom:1px solid var(--cizgi); }
.sihirbaz-ust .kap{ display:flex; align-items:center; gap: var(--b-4); height:64px; }
.sihirbaz-ust .adimlar{ flex:1; max-width: 680px; margin: 0 auto; }
.sihirbaz{ display:grid; grid-template-columns: minmax(0,1fr); gap: var(--b-8); padding: var(--b-8) 0 140px; }
@media (min-width:960px){ .sihirbaz{ grid-template-columns: minmax(0,1fr) 360px; gap: var(--b-12); padding: var(--b-12) 0 var(--b-24); align-items:start; } }
.sihirbaz-bas{ display:flex; flex-direction:column; gap: var(--b-2); margin-bottom: var(--b-8); }
.sihirbaz-bas .baslik-2{ font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); }
.sihirbaz-alt-eylem{ display:none; justify-content:space-between; gap: var(--b-3); margin-top: var(--b-10); padding-top: var(--b-6); border-top:1px solid var(--cizgi); }
@media (min-width:960px){ .sihirbaz-alt-eylem{ display:flex; } }
.arama-sar{ margin-bottom: var(--b-6); }
.kategori-filtre{ display:flex; gap: var(--b-2); overflow-x:auto; scrollbar-width:none; margin: 0 calc(var(--kenar) * -1) var(--b-6); padding: 0 var(--kenar) 2px; }
.kategori-filtre::-webkit-scrollbar{ display:none; }
@media (min-width:960px){ .kategori-filtre{ margin-left:0; margin-right:0; padding-left:0; flex-wrap:wrap; } }

/* Sağ özet kartı (masaüstü yapışkan) */
.ozet-kart{ display:none; }
@media (min-width:960px){
  .ozet-kart{ display:flex; flex-direction:column; position:sticky; top: 96px; background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--golge-2), var(--isik-ust); }
}
.ozet-kart-bas{ padding: var(--b-5) var(--b-6); border-bottom:1px solid var(--cizgi); display:flex; align-items:center; gap: var(--b-3); background: linear-gradient(180deg, rgba(var(--vurgu-rgb),.08), transparent); }
.ozet-kart-govde{ padding: var(--b-2) var(--b-6); }
.ozet-satir{ display:flex; justify-content:space-between; align-items:flex-start; gap: var(--b-4); padding: 12px 0; border-bottom:1px dashed var(--cizgi); font-size: var(--fs-sm); }
.ozet-satir:last-child{ border-bottom:0; }
.ozet-satir dt{ color: var(--metin-3); flex:none; }
.ozet-satir dd{ font-weight:600; text-align:right; }
.ozet-satir dd small{ font-family: var(--font-govde); display:block; color: var(--metin-3); font-weight:500; font-size: var(--fs-xs); }
.ozet-hizmet{ display:flex; justify-content:space-between; gap:12px; font-size: var(--fs-sm); padding: 4px 0; }
.ozet-hizmet span:last-child{ font-variant-numeric: tabular-nums; color: var(--metin-2); }
.ozet-toplam{ padding: var(--b-5) var(--b-6); border-top:1px solid var(--cizgi); background: var(--yuzey-2); display:flex; flex-direction:column; gap: var(--b-4); }
.ozet-toplam-satir{ display:flex; justify-content:space-between; align-items:baseline; }
.ozet-toplam-satir b{ font-family: var(--font-baslik); font-size: var(--fs-3xl); font-weight:600; line-height:1; font-variant-numeric: lining-nums tabular-nums; }
.ozet-toplam-satir b.bos{ font-family: var(--font-govde, inherit); font-size: var(--fs-lg); font-weight:500; color: var(--metin-3); }

/* Seçili berber şeridi (saat adımında berber değiştirme) */
.berber-serit{ display:flex; gap: var(--b-2); overflow-x:auto; scrollbar-width:none; margin: 0 calc(var(--kenar) * -1) var(--b-6); padding: 2px var(--kenar); }
.berber-serit::-webkit-scrollbar{ display:none; }
.berber-cip{ display:flex; align-items:center; gap:10px; height:48px; padding: 0 16px 0 6px; border-radius: var(--r-tam); border:1px solid var(--cizgi-guclu); white-space:nowrap; font-size: var(--fs-sm); font-weight:700; color: var(--metin-2); transition: all var(--sure-hizli); flex:none; }
.berber-cip .avatar{ --av: 36px; box-shadow:none; }
.berber-cip[aria-pressed="true"]{ border-color: var(--vurgu); color: var(--metin); background: var(--vurgu-zemin); }
@media (min-width:960px){ .berber-serit{ margin-left:0; margin-right:0; padding-left:2px; } }

.berber-izgara{ display:grid; grid-template-columns: 1fr; gap: var(--b-3); }
@media (min-width:640px){ .berber-izgara{ grid-template-columns: 1fr 1fr; } }
.oneri{ display:flex; align-items:center; gap: var(--b-3); padding: 14px 16px; margin-bottom: var(--b-6); border-radius: var(--r-md); background: linear-gradient(90deg, rgba(var(--vurgu-rgb),.14), rgba(var(--vurgu-rgb),.04)); border:1px solid rgba(var(--vurgu-rgb),.3); }
.oneri > .ikon{ color: var(--vurgu-metin); flex:none; }
.oneri div{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.oneri b{ font-size: var(--fs-sm); }
.oneri span{ font-size: var(--fs-xs); color: var(--metin-3); }
@media (max-width:480px){ .oneri{ flex-wrap:wrap; } .oneri .btn{ margin-left: 32px; } }
.gun-lejant{ display:flex; gap: var(--b-4); flex-wrap:wrap; margin-top: var(--b-2); font-size: var(--fs-xs); color: var(--metin-3); }
.gun-lejant span{ display:inline-flex; align-items:center; gap:6px; }
.gun-lejant i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
@media (max-width:640px){ .ust-denge{ display:none; } .sihirbaz-ust .marka{ display:none; } }

/* Başarı / takip kodu */
.basari{ text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--b-4); padding: var(--b-8) 0; }
.basari-muhur{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; background: var(--vurgu); color: var(--vurgu-uzeri); box-shadow: 0 0 0 10px rgba(var(--vurgu-rgb),.12), 0 0 0 22px rgba(var(--vurgu-rgb),.06); animation: muhur var(--sure-yavas) var(--egri); }
.basari-muhur .ikon{ width:44px; height:44px; stroke-width:2.25; }
@keyframes muhur{ from{ transform: scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.takip-kodu{ display:flex; gap:6px; justify-content:center; margin: var(--b-2) 0; }
.takip-kodu span{ width:48px; height:60px; border-radius: var(--r-md); background: var(--yuzey-2); border:1px solid var(--cizgi-guclu); display:grid; place-items:center; font-family: var(--font-baslik); font-size: 1.875rem; font-weight:600; color: var(--vurgu-metin); }
.bilet{ width:100%; max-width: 460px; background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-xl); text-align:left; position:relative; }
.bilet::before,.bilet::after{ content:""; position:absolute; top: 50%; width:24px; height:24px; border-radius:50%; background: var(--zemin); border:1px solid var(--cizgi); transform: translateY(-50%); }
.bilet::before{ left:-13px; clip-path: inset(0 0 0 50%); }
.bilet::after{ right:-13px; clip-path: inset(0 50% 0 0); }

/* =====================================================================
   9. PANEL (admin)
   ===================================================================== */
.panel{ background: var(--zemin); font-size: var(--fs-sm); line-height:1.5; }
.p-kabuk{ display:grid; grid-template-columns: 1fr; min-height:100vh; }
@media (min-width:1024px){ .p-kabuk{ grid-template-columns: 256px minmax(0,1fr); } }

/* Yan menü */
.p-yan{ position:fixed; inset:0 auto 0 0; width: 280px; z-index: var(--z-modal); background: var(--yan-zemin); color: var(--yan-metin); display:flex; flex-direction:column; transform: translateX(-100%); transition: transform var(--sure) var(--egri); }
.p-yan.acik{ transform:none; box-shadow: var(--golge-3); }
@media (min-width:1024px){ .p-yan{ position:sticky; top:0; height:100vh; width:auto; transform:none; } }
.p-yan-marka{ display:flex; align-items:center; gap:12px; padding: 18px 20px; border-bottom:1px solid var(--yan-cizgi); }
.p-yan-marka .logo-kap{ width:38px; flex:none; }
.p-yan-marka b{ display:block; font-family: var(--font-baslik); font-size: 1rem; font-weight:600; line-height:1.15; }
.p-yan-marka span{ font-size: 10px; letter-spacing:.2em; text-transform:uppercase; color: var(--yan-metin-2); font-weight:700; }
.p-yan nav{ flex:1; overflow-y:auto; padding: 12px 12px 24px; scrollbar-width:thin; scrollbar-color: #2A2A2A transparent; }
.p-yan-grup{ padding: 16px 12px 6px; font-size: 10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color: #8A8A8A; }
.p-yan-link{ display:flex; align-items:center; gap:12px; height:38px; padding: 0 12px; border-radius: var(--r-sm); color: var(--yan-metin-2); font-weight:600; font-size: var(--fs-sm); transition: background var(--sure-hizli), color var(--sure-hizli); position:relative; }
.p-yan-link .ikon{ width:18px; height:18px; }
.p-yan-link:hover{ color: var(--yan-metin); background: rgba(255,255,255,.05); }
.p-yan-link.aktif{ color: #FFFFFF; background: var(--yan-aktif); }
.p-yan-link.aktif::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius: 0 3px 3px 0; background: #FFFFFF; }
.p-yan-link.aktif .ikon{ color:#FFFFFF; }
.p-yan-link .sayac{ margin-left:auto; font-size: 11px; font-weight:800; min-width: 22px; height:20px; padding: 0 6px; border-radius: var(--r-tam); background: rgba(255,255,255,.08); display:grid; place-items:center; color: var(--yan-metin); font-variant-numeric: tabular-nums; }
.p-yan-link.aktif .sayac{ background:#FFFFFF; color:#0B0B0B; }
.p-yan-alt{ padding: 12px; border-top:1px solid var(--yan-cizgi); }
@media (min-width:1024px) and (max-height:1000px){ .p-yan-marka{ padding:14px 20px; } .p-yan nav{ padding:6px 12px 12px; } .p-yan-grup{ padding:10px 12px 4px; } .p-yan-grup:first-child{ padding-top:6px; } .p-yan-link{ height:31px; } .p-yan-link.aktif::before{ top:7px; bottom:7px; } .p-yan-alt{ padding:8px 12px; } }
.p-kullanici{ display:flex; align-items:center; gap:10px; padding: 8px; border-radius: var(--r-sm); }
.p-kullanici:hover{ background: rgba(255,255,255,.05); }
.p-kullanici b{ display:block; font-size: var(--fs-sm); color: var(--yan-metin); }
.p-kullanici span{ font-size: 11px; color: var(--yan-metin-2); }
.p-perde{ position:fixed; inset:0; background: rgba(0,0,0,.5); z-index: calc(var(--z-modal) - 1); }

/* Üst bar */
.p-ust{ position:sticky; top:0; z-index: var(--z-ust); height:64px; display:flex; align-items:center; gap: var(--b-3); padding: 0 var(--b-4); background: rgba(245,245,245,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--cizgi); }
.panel[data-tema="koyu"] .p-ust{ background: rgba(11,11,11,.85); }
@media (min-width:1024px){ .p-ust{ padding: 0 var(--b-8); } .p-menu-dugme{ display:none!important; } }
.p-ust-sag{ margin-left:auto; display:flex; align-items:center; gap: var(--b-2); }
.p-ikon-dugme{ width:40px; height:40px; display:grid; place-items:center; border-radius: var(--r-sm); color: var(--metin-2); position:relative; transition: background var(--sure-hizli), color var(--sure-hizli); }
.p-ikon-dugme:hover{ background: var(--yuzey-3); color: var(--metin); }
.p-ikon-dugme .bildirim-nokta{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background: var(--hata); box-shadow: 0 0 0 2px var(--zemin); }
.kasa-durum{ display:none; align-items:center; gap:8px; height:36px; padding: 0 12px 0 10px; border-radius: var(--r-tam); background: var(--basari-zemin); color: var(--basari); font-size: var(--fs-xs); font-weight:700; }
.kasa-durum--kapali{ background: var(--hata-zemin); color: var(--hata); }
@media (min-width:768px){ .kasa-durum{ display:inline-flex; } }

/* Global arama */
.p-arama{ position:relative; flex:1; max-width: 520px; }
.p-arama .girdi{ padding-left: 40px; padding-right: 64px; background: var(--yuzey); height:40px; text-overflow: ellipsis; }
.p-arama .girdi::placeholder{ text-overflow: ellipsis; }
.p-arama > .ikon{ position:absolute; left:12px; top:50%; transform: translateY(-50%); color: var(--metin-3); width:18px; height:18px; pointer-events:none; }
.kisayol{ position:absolute; right:8px; top:50%; transform: translateY(-50%); display:flex; gap:3px; pointer-events:none; }
kbd{ font-family: var(--font-govde); font-size: 11px; font-weight:700; min-width:22px; height:22px; padding: 0 6px; display:inline-grid; place-items:center; border-radius:5px; background: var(--yuzey-3); border:1px solid var(--cizgi); border-bottom-width:2px; color: var(--metin-3); }
@media (max-width:640px){ .kisayol{ display:none; } .p-arama .girdi{ padding-right:12px; } }
.arama-sonuc{ position:absolute; top: calc(100% + 8px); left:0; right:0; min-width: min(560px, calc(100vw - 32px)); background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-md); box-shadow: var(--golge-3); overflow:hidden; z-index: var(--z-modal); }
.arama-sekme{ display:flex; gap:4px; padding: 8px 8px 0; border-bottom:1px solid var(--cizgi); }
.arama-sekme button{ padding: 8px 10px 10px; font-size: var(--fs-xs); font-weight:700; color: var(--metin-3); border-bottom:2px solid transparent; margin-bottom:-1px; }
.arama-sekme button.aktif{ color: var(--metin); border-color: var(--vurgu); }
.arama-grup{ padding: 6px; }
.arama-grup-bas{ padding: 8px 10px 4px; font-size: 10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--metin-3); }
.arama-oge{ display:flex; align-items:center; gap:12px; padding: 10px; border-radius: var(--r-sm); cursor:pointer; }
.arama-oge:hover,.arama-oge.aktif{ background: var(--yuzey-3); }
.arama-oge .ana{ flex:1; min-width:0; }
.arama-oge b{ display:block; font-size: var(--fs-sm); font-weight:700; }
.arama-oge small{ display:block; font-size: var(--fs-xs); color: var(--metin-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arama-oge mark{ background: rgba(var(--vurgu-rgb),.22); color: inherit; border-radius:3px; padding: 0 1px; }
.arama-alt{ display:flex; gap: var(--b-4); padding: 10px 14px; border-top:1px solid var(--cizgi); font-size: 11px; color: var(--metin-3); background: var(--yuzey-2); }
.arama-alt span{ display:inline-flex; align-items:center; gap:6px; }

@media (max-width:640px){
  .arama-sonuc{ position:fixed; top:64px; left:8px; right:8px; min-width:0; max-height: calc(100vh - 140px); overflow:auto; }
  .arama-alt{ display:none; }
}

/* Mobil alt sekme çubuğu (panel, <1024px) */
.p-alt-menu{ position:fixed; left:0; right:0; bottom:0; z-index: var(--z-yapiskan); display:grid; grid-template-columns: repeat(5,1fr); background: var(--yuzey); border-top:1px solid var(--cizgi); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.18); }
.p-alt-menu a,.p-alt-menu button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:60px; font-size: 10.5px; font-weight:700; color: var(--metin-3); }
.p-alt-menu .ikon{ width:22px; height:22px; }
.p-alt-menu .aktif{ color: var(--vurgu-metin); }
.p-alt-menu .orta span.daire{ width:44px; height:44px; border-radius:50%; background: var(--birincil); color: var(--birincil-uzeri); display:grid; place-items:center; margin-top:-18px; box-shadow: var(--golge-2); }
@media (min-width:1024px){ .p-alt-menu{ display:none; } }
@media (max-width:1023px){ .panel .p-icerik{ padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* İçerik alanı */
.p-icerik{ padding: var(--b-6) var(--b-4) var(--b-16); max-width: 1440px; width:100%; margin: 0 auto; }
@media (min-width:1024px){ .p-icerik{ padding: var(--b-8) var(--b-8) var(--b-16); } }
.p-sayfa-bas{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: var(--b-4); margin-bottom: var(--b-6); }
.p-sayfa-bas h1{ font-family: var(--font-govde); font-size: 1.625rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.p-sayfa-bas p{ color: var(--metin-3); margin-top:4px; }
.p-sayfa-eylem{ display:flex; gap: var(--b-2); flex-wrap:wrap; }
.p-izgara{ display:grid; gap: var(--b-4); grid-template-columns: 1fr; }
@media (min-width:1024px){ .p-izgara{ gap: var(--b-5); } }
.p-izgara--kpi{ grid-template-columns: repeat(2, 1fr); }
@media (min-width:1200px){ .p-izgara--kpi{ grid-template-columns: repeat(4, 1fr); } }
.p-izgara--2-1{ grid-template-columns: 1fr; }
@media (min-width:1200px){ .p-izgara--2-1{ grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.p-izgara--1-1{ grid-template-columns: 1fr; }
@media (min-width:1024px){ .p-izgara--1-1{ grid-template-columns: 1fr 1fr; } }

/* Segment kontrol (dönem seçici: Gün / Ay / Yıl) */
.segment{ display:inline-flex; padding:3px; border-radius: var(--r-sm); background: var(--yuzey-3); border:1px solid var(--cizgi); }
.segment button{ height:30px; padding: 0 12px; border-radius:6px; font-size: var(--fs-xs); font-weight:700; color: var(--metin-3); transition: all var(--sure-hizli); }
.segment button[aria-pressed="true"]{ background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-1); }
.panel[data-tema="koyu"] .segment button[aria-pressed="true"]{ background: var(--yuzey-2); }

/* KPI kartı */
.kpi{ position:relative; background: var(--yuzey); border:1px solid var(--cizgi); border-radius: var(--r-md); padding: var(--b-5); display:flex; flex-direction:column; gap: 10px; box-shadow: var(--golge-1), var(--isik-ust); overflow:hidden; }
.kpi-bas{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi-etiket{ font-size: var(--fs-xs); font-weight:700; color: var(--metin-3); letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.kpi-ikon{ width:32px; height:32px; border-radius: var(--r-sm); display:grid; place-items:center; background: var(--vurgu-zemin); color: var(--vurgu-metin); }
.kpi-ikon .ikon{ width:16px; height:16px; }
.kpi-deger{ font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; font-variant-numeric: tabular-nums; }
.kpi-deger small{ font-size: .55em; font-weight:700; color: var(--metin-3); margin-left:2px; letter-spacing:0; }
.kpi-alt{ display:flex; align-items:center; gap:8px; font-size: var(--fs-xs); color: var(--metin-3); flex-wrap:wrap; }
.degisim{ display:inline-flex; align-items:center; gap:2px; font-weight:800; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: var(--r-xs); }
.degisim .ikon{ width:12px; height:12px; stroke-width:2.5; }
.degisim--artis{ color: var(--basari); background: var(--basari-zemin); }
.degisim--azalis{ color: var(--hata); background: var(--hata-zemin); }
.kpi-minigrafik{ height:36px; margin-top:2px; }
.kpi-minigrafik svg{ width:100%; height:100%; overflow:visible; }
.kpi--vurgu{ background: #0B0B0B; border-color: #0B0B0B; color: #FFFFFF; --metin: #FFFFFF; --metin-3: #A3A3A3; --vurgu-zemin: rgba(255,255,255,.12); --vurgu-metin: #FFFFFF; --basari:#6FCF97; --basari-zemin: rgba(111,207,151,.14); --yuzey-3:#2A2A2A; }
.panel[data-tema="koyu"] .kpi--vurgu{ background: #F5F5F5; border-color: #F5F5F5; color:#0B0B0B; --metin:#0B0B0B; --metin-3:#525252; --vurgu-zemin: rgba(0,0,0,.07); --vurgu-metin:#0B0B0B; --basari:#1E7A4C; --basari-zemin:#E6F4EC; --yuzey-3:#E0E0E0; }
.kpi-minigrafik{ color: var(--metin); }

/* Hesap bakiyesi mini kartları (Nakit / Banka-IBAN / POS) */
.hesap-liste{ display:flex; flex-direction:column; gap: var(--b-2); }
.hesap{ display:flex; align-items:center; gap:12px; padding: 12px; border-radius: var(--r-sm); background: var(--yuzey-2); border:1px solid var(--cizgi); }
.hesap-ikon{ width:36px; height:36px; border-radius: var(--r-sm); display:grid; place-items:center; flex:none; color:#fff; }
.hesap-ikon .ikon{ width:18px; height:18px; }
.hesap-ikon{ background: var(--metin)!important; color: var(--yuzey)!important; }  /* monokrom: hesap türünü ikon + ad ayırt eder */
.hesap .ana{ flex:1; min-width:0; }
.hesap b{ display:block; font-size: var(--fs-sm); }
.hesap small{ font-size: var(--fs-xs); color: var(--metin-3); }
.hesap .tutar{ font-weight:800; font-variant-numeric: tabular-nums; font-size: var(--fs-md); text-align:right; }

/* Tablo */
.tablo-sar{ overflow-x:auto; border:1px solid var(--cizgi); border-radius: var(--r-md); background: var(--yuzey); }
.kart .tablo-sar{ border:0; border-radius:0; margin: 0 calc(var(--b-5) * -1); }
.tablo{ width:100%; border-collapse:separate; border-spacing:0; font-size: var(--fs-sm); }
.tablo th{ position:sticky; top:0; text-align:left; font-size: 11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--metin-3); padding: 10px 16px; background: var(--yuzey-2); border-bottom:1px solid var(--cizgi); white-space:nowrap; }
.tablo td{ padding: 12px 16px; border-bottom:1px solid var(--cizgi); vertical-align:middle; }
.kart .tablo th:first-child,.kart .tablo td:first-child{ padding-left: var(--b-5); }
.kart .tablo th:last-child,.kart .tablo td:last-child{ padding-right: var(--b-5); }
.tablo tr:last-child td{ border-bottom:0; }
.tablo tbody tr{ transition: background var(--sure-hizli); }
.tablo tbody tr:hover{ background: var(--yuzey-2); }
.tablo .sag{ text-align:right; }
.tablo .sayi{ font-variant-numeric: tabular-nums; font-weight:700; }
.tablo-kisi{ display:flex; align-items:center; gap:10px; }
.tablo-kisi b{ display:block; font-weight:700; }
.tablo-kisi small{ display:block; color: var(--metin-3); font-size: var(--fs-xs); }
.saat-hucre{ font-weight:800; font-variant-numeric: tabular-nums; }
.saat-hucre small{ display:block; font-weight:600; color: var(--metin-3); font-size: 11px; }
@media (max-width:767px){
  /* Mobilde tablo → kart listesi: <td data-etiket="..."> */
  .tablo--duyarli thead{ display:none; }
  .tablo--duyarli, .tablo--duyarli tbody, .tablo--duyarli tr, .tablo--duyarli td{ display:block; width:100%; }
  .tablo--duyarli tr{ padding: 12px 16px; border-bottom:1px solid var(--cizgi); }
  /* Etiket solda, hücre içeriği (birden çok parça olsa da: "70 ₺" + "−30 ₺ ind.") sağda bitişik durur */
  .tablo--duyarli td{ border:0; padding: 4px 0!important; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 8px; text-align:right; }
  .tablo--duyarli td::before{ content: attr(data-etiket); color: var(--metin-3); font-size: var(--fs-xs); font-weight:600; margin-right:auto; padding-right:8px; text-align:left; }
  .tablo--duyarli td.tablo-ana{ justify-content:flex-start; text-align:left; }
  .tablo--duyarli td.tablo-ana::before{ display:none; }
  .tablo--duyarli td:not(.tablo-ana) > small{ flex-basis:100%; }
}

/* Durum rozetleri (randevu) — renk + ikon/nokta + metin; asla yalnız renk */
.durum{ display:inline-flex; align-items:center; gap:6px; height:24px; padding: 0 9px; border-radius: var(--r-tam); font-size: 11px; font-weight:800; letter-spacing:.01em; white-space:nowrap; }
.durum::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.durum--bekliyor{ background: transparent; color: var(--metin-2); box-shadow: inset 0 0 0 1px var(--cizgi-guclu); }
.durum--onayli{ background: var(--metin); color: var(--yuzey); }
.durum--geldi{ background: var(--yuzey-3); color: var(--metin); }
.durum--tamamlandi{ background: var(--basari-zemin); color: var(--basari); }
.durum--iptal{ background: var(--hata-zemin); color: var(--hata); }
.durum--gelmedi{ background: var(--yuzey-3); color: var(--metin-3); }

/* Takvim ızgarası (gün görünümü: sütun = berber, satır = 15 dk) */
.takvim{ --satir: 22px; display:grid; grid-template-columns: 56px repeat(var(--sutun, 3), minmax(160px, 1fr)); overflow:auto; border:1px solid var(--cizgi); border-radius: var(--r-md); background: var(--yuzey); position:relative; }
.takvim-bas{ position:sticky; top:0; z-index:2; background: var(--yuzey); border-bottom:1px solid var(--cizgi); padding: 10px 12px; display:flex; align-items:center; gap:10px; font-weight:700; }
.takvim-bas small{ display:block; font-size: 11px; color: var(--metin-3); font-weight:600; }
.takvim-bas:first-child{ position:sticky; left:0; z-index:3; }
.takvim-saatler{ position:sticky; left:0; z-index:1; background: var(--yuzey); border-right:1px solid var(--cizgi); }
.takvim-saatler div{ height: calc(var(--satir) * 4); font-size: 11px; color: var(--metin-3); font-weight:700; text-align:right; padding: 0 8px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.takvim-sutun{ position:relative; border-right:1px solid var(--cizgi); background-image: repeating-linear-gradient(to bottom, var(--cizgi) 0 1px, transparent 1px calc(var(--satir) * 4)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--satir) * 2), var(--yuzey-3) calc(var(--satir) * 2), transparent calc(var(--satir) * 2 + 1px)); }
.takvim-sutun:last-child{ border-right:0; }
.takvim-blok{ position:absolute; left:4px; right:4px; border-radius: 6px; padding: 5px 8px; font-size: 11px; line-height:1.3; overflow:hidden; cursor:pointer;
  background: var(--blok-zemin, var(--vurgu-zemin)); border-left: 3px solid var(--blok-renk, var(--vurgu)); color: var(--metin); transition: transform var(--sure-hizli), box-shadow var(--sure-hizli); }
.takvim-blok:hover{ box-shadow: var(--golge-2); z-index:2; }
.takvim-blok b{ display:block; font-size: 12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.takvim-blok span{ color: var(--metin-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.takvim-blok--mola{ background: repeating-linear-gradient(135deg, var(--yuzey-3) 0 6px, transparent 6px 12px); border-left-color: var(--cizgi-guclu); color: var(--metin-3); }
.takvim-simdi{ position:absolute; left:0; right:0; height:2px; background: var(--hata); z-index:1; pointer-events:none; }
.takvim-simdi::before{ content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background: var(--hata); }

/* Doluluk çubuğu (KPI içinde) */
.doluluk{ margin-top:2px; display:flex; flex-direction:column; gap:6px; }
.doluluk-bas{ display:flex; justify-content:space-between; font-size: var(--fs-xs); color: var(--metin-3); font-weight:600; }
.doluluk-bas b{ color: var(--metin); }
.doluluk .cubuk{ height:8px; border-radius:4px; background: var(--yuzey-3); overflow:hidden; }
.doluluk .cubuk i{ display:block; height:100%; border-radius:4px; background: linear-gradient(90deg, var(--vurgu-koyu), var(--vurgu)); }
/* Kasa mini özet (3 sütun) */
.kasa-ozet{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--b-2); margin-top: var(--b-4); padding-top: var(--b-4); border-top:1px solid var(--cizgi); }
.kasa-ozet div{ display:flex; flex-direction:column; gap:2px; }
.kasa-ozet span{ font-size: 11px; color: var(--metin-3); font-weight:600; }
.kasa-ozet b{ font-size: var(--fs-sm); font-weight:800; }
@media (max-width:640px){ .yeni-randevu span{ display:none; } .yeni-randevu{ width:40px; padding:0!important; } }

/* Grafik kabı */
.grafik{ position:relative; height: 260px; }
.grafik svg{ width:100%; height:100%; overflow:visible; }
.grafik-lejant{ display:flex; gap: var(--b-4); flex-wrap:wrap; font-size: var(--fs-xs); color: var(--metin-2); font-weight:600; }
.grafik-lejant span{ display:inline-flex; align-items:center; gap:6px; }
.grafik-lejant i{ width:10px; height:10px; border-radius:3px; background: var(--renk); display:inline-block; }
.grafik-ipucu{ position:absolute; top:0; left:0; pointer-events:none; background: var(--metin); color: var(--yuzey); padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); box-shadow: var(--golge-2); white-space:nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity:0; transition: opacity var(--sure-hizli); z-index:5; }
.grafik-ipucu b{ display:block; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.grafik-ipucu.gorunur{ opacity:1; }

/* Berber performans çubuğu */
.perf-satir{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; align-items:center; padding: 10px 0; border-bottom:1px solid var(--cizgi); }
.perf-satir:last-child{ border-bottom:0; }
.perf-satir .cubuk{ grid-column: 1 / -1; height:8px; border-radius: 4px; background: var(--yuzey-3); overflow:hidden; }
.perf-satir .cubuk i{ display:block; height:100%; border-radius:4px; background: var(--renk); }
.perf-satir .tutar{ font-weight:800; font-variant-numeric: tabular-nums; text-align:right; }
.perf-satir .tutar small{ display:block; font-weight:600; color: var(--metin-3); font-size: 11px; }

/* Ayar satırı (Ön Yüz / Ayarlar sayfalarında aç-kapa listeleri) */
.ayar-satir{ display:flex; align-items:center; gap: var(--b-4); padding: 14px 0; border-bottom:1px solid var(--cizgi); }
.ayar-satir:last-child{ border-bottom:0; }
.ayar-satir .ana{ flex:1; min-width:0; }
.ayar-satir b{ display:block; font-weight:700; }
.ayar-satir small{ color: var(--metin-3); font-size: var(--fs-xs); }
.surukle{ color: var(--metin-3); cursor:grab; }

/* Hızlı eylem kartı (Günü kapat vb.) */
.hizli-eylemler{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--b-2); }
.hizli-eylem{ display:flex; flex-direction:column; align-items:flex-start; gap: 8px; padding: 14px; border-radius: var(--r-sm); border:1px solid var(--cizgi); background: var(--yuzey-2); font-weight:700; font-size: var(--fs-sm); text-align:left; transition: all var(--sure-hizli); }
.hizli-eylem:hover{ border-color: rgba(var(--vurgu-rgb),.5); background: var(--vurgu-zemin); }
.hizli-eylem .ikon{ color: var(--vurgu-metin); }
.hizli-eylem small{ font-weight:500; color: var(--metin-3); font-size: 11px; }

/* Aktivite akışı */
.akis{ display:flex; flex-direction:column; }
.akis-oge{ display:flex; gap: 12px; padding: 10px 0; position:relative; }
.akis-oge:not(:last-child)::before{ content:""; position:absolute; left: 15px; top: 42px; bottom: -2px; width:1px; background: var(--cizgi); }
.akis-ikon{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; background: var(--yuzey-3); color: var(--metin-2); }
.akis-ikon .ikon{ width:15px; height:15px; }
.akis-oge p{ font-size: var(--fs-sm); line-height:1.45; }
.akis-oge small{ color: var(--metin-3); font-size: 11px; }

/* =====================================================================
   10. HAREKET & ERİŞİLEBİLİRLİK
   ===================================================================== */
.js-hareket .belir{ opacity:0; transform: translateY(16px); transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri); }
.js-hareket .belir.gorundu{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .js-hareket .belir{ opacity:1; transform:none; }
}
@media (forced-colors: active){
  .btn,.saat,.gun,.hizmet-satir,.berber-kart{ border:1px solid CanvasText; }
  .saat[aria-pressed="true"],.gun--secili,.hizmet-satir[aria-checked="true"]{ outline: 3px solid Highlight; }
}
@media print{
  .ust-bar,.mobil-cta,.ozet-cubuk,.p-yan,.p-ust,.duyuru{ display:none!important; }
  body,.panel{ background:#fff; color:#000; }
}

/* =====================================================================
   11. CANLILIK & HAREKET (v3)
   Kural: yalnız transform/opacity animasyonu; renk paleti DEĞİŞMEZ (monokrom).
   Hepsi prefers-reduced-motion'da kapanır (bölüm sonu), mobilde hafifletilir.
   JS tarafı: js/hareket.js (Hareket.baslat otomatik).
   ===================================================================== */
:root{
  --egri-yay:  cubic-bezier(.16,1,.3,1);     /* uzun, yumuşak çıkış (giriş animasyonları) */
  --egri-zipla: cubic-bezier(.34,1.56,.64,1); /* küçük taşmalı "pop" */
  --gren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gren-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 11.1 Kaydırınca belirme varyantları + kademeli grup ---- */
.js-hareket .belir{ transition-delay: calc(var(--i, 0) * 90ms); transition-duration: 700ms; transition-timing-function: var(--egri-yay); }
.js-hareket .belir--sol{ transform: translateX(-28px); }
.js-hareket .belir--sag{ transform: translateX(28px); }
.js-hareket .belir--olcek{ transform: scale(.96); }
.js-hareket .belir--sol.gorundu,.js-hareket .belir--sag.gorundu,.js-hareket .belir--olcek.gorundu{ transform:none; }

/* ---- 11.2 Kelime kelime başlık ([data-kelime]) ---- */
.kelimeli .kelime{ display:inline-block; overflow:hidden; vertical-align:top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.kelimeli .kelime > span{ display:inline-block; transform: translateY(108%); opacity:0; transition: transform 1s var(--egri-yay), opacity .7s var(--egri); will-change: transform; }
.kelimeli.kelime-gorundu .kelime > span{ transform:none; opacity:1; }

/* ---- 11.3 Kaydırdıkça aydınlanan büyük söz ([data-kaydir-yazi]) ---- */
.ky{ opacity:.16; transition: opacity .5s var(--egri); }
.ky--acik{ opacity:1; }
.buyuk-soz{ padding: clamp(72px, 9vw, 150px) 0; background: var(--zemin-2); position:relative; overflow:hidden; }
.buyuk-soz p{ font-family: var(--font-baslik); font-weight:400; font-size: clamp(2.1rem, 1rem + 4.6vw, 5rem); line-height:1.08; letter-spacing:-.025em; max-width: 17ch; margin: 0 auto; text-align:center; text-wrap: balance; }
.buyuk-soz em{ font-style:italic; color: var(--metin-2); }
.buyuk-soz .ust-baslik{ display:flex; justify-content:center; margin-bottom: var(--b-8); }

/* ---- 11.4 Hero: spot ışığı, ışık süzmesi, yörünge halkası, derinlik ---- */
.hero-spot{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(640px circle at var(--mx, 72%) var(--my, 34%), rgba(255,255,255,.075), transparent 62%); }
.hero-isinlar{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hero-isinlar i{ position:absolute; top:-30%; height:150%; width:18%; left:52%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055) 50%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 78%); mask-image: linear-gradient(180deg, #000 10%, transparent 78%);
  transform: rotate(22deg); transform-origin: 50% 0; animation: isin-kay 16s ease-in-out infinite alternate; }
.hero-isinlar i:nth-child(2){ left:66%; width:9%; animation-duration: 21s; animation-delay:-6s; opacity:.8; }
.hero-isinlar i:nth-child(3){ left:38%; width:6%; animation-duration: 26s; animation-delay:-11s; opacity:.6; }
@keyframes isin-kay{ 0%{ transform: rotate(22deg) translateX(-6%); opacity:.55; } 50%{ opacity:1; } 100%{ transform: rotate(16deg) translateX(14%); opacity:.7; } }

.hero-yorunge{ position:absolute; inset:-11%; width:122%; height:122%; max-width:none; pointer-events:none; color: rgba(var(--vurgu-rgb),.5); animation: don 110s linear infinite; }
.hero-yorunge .cetvel{ fill:none; stroke: rgba(var(--vurgu-rgb),.28); stroke-width:3; stroke-dasharray: .35 5.65; }
.hero-yorunge .cetvel--ana{ stroke: rgba(var(--vurgu-rgb),.55); stroke-width:6; stroke-dasharray: .5 29.5; }
.hero-yorunge .yol{ fill:none; stroke: rgba(var(--vurgu-rgb),.10); stroke-width:1; }
.hero-yorunge .makas-zemin{ fill: var(--zemin); }
.hero-yorunge .makas{ fill:none; stroke: rgba(var(--vurgu-rgb),.85); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.hero-halka--2{ animation-duration: 160s; animation-direction: reverse; }
.hero-logo{ transform: translate3d(calc(var(--dx, 0) * -12px), calc(var(--dy, 0) * -10px), 0); transition: transform .9s var(--egri-yay); }
.js-hareket .hero-logo{ animation: logo-gir 1.6s var(--egri-yay) both .15s; }
@keyframes logo-gir{ from{ opacity:0; transform: scale(.9); } to{ opacity:1; } }
.js-hareket .hero-yorunge{ animation: yorunge-gir 1.8s var(--egri-yay) both .3s, don 110s linear infinite 2.1s; }
@keyframes yorunge-gir{ from{ opacity:0; transform: rotate(-40deg) scale(.94); } to{ opacity:1; transform:none; } }
.js-hareket .bugun-kart{ animation: sol .9s var(--egri) both .9s; }
.js-hareket .hero-metin .ust-baslik,.js-hareket .hero-metin .govde-buyuk,.js-hareket .hero-eylem,.js-hareket .hero-guven{ animation: yukari-gir .9s var(--egri-yay) both; }
.js-hareket .hero-metin .ust-baslik{ animation-delay: .05s; }
.js-hareket .hero-metin .govde-buyuk{ animation-delay: .55s; }
.js-hareket .hero-eylem{ animation-delay: .7s; }
.js-hareket .hero-guven{ animation-delay: .85s; }
@keyframes yukari-gir{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
.hero-kaydir{ display:none; }
@media (min-width:960px){
  .hero-kaydir{ position:absolute; left:50%; bottom: 22px; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color: var(--metin-3); }
  .hero-kaydir i{ width:1px; height:36px; background: linear-gradient(var(--metin-3), transparent); position:relative; overflow:hidden; }
  .hero-kaydir i::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background: var(--metin); animation: kaydir-ipucu 2.2s var(--egri) infinite; }
}
@keyframes kaydir-ipucu{ to{ transform: translateY(350%); } }

/* ---- 11.5 Akan bant (marquee) ---- */
.serit{ position:relative; overflow:hidden; background: var(--zemin); border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi); padding: clamp(18px, 2.4vw, 30px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.serit-iz{ display:flex; width:max-content; animation: serit-ak 42s linear infinite; will-change: transform; }
.serit:hover .serit-iz{ animation-play-state: paused; }
.serit-oge{ display:inline-flex; align-items:center; gap: clamp(20px, 2.6vw, 40px); padding-right: clamp(20px, 2.6vw, 40px); flex:none;
  font-family: var(--font-baslik); font-size: clamp(1.9rem, 1rem + 3.4vw, 3.9rem); font-weight:400; line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.serit-oge em{ font-style:italic; }
.serit-oge .bos{ color: transparent; -webkit-text-stroke: 1px rgba(var(--vurgu-rgb),.6); }
.serit-oge .ikon{ width: clamp(22px, 2.2vw, 34px); height: clamp(22px, 2.2vw, 34px); stroke-width:1.2; color: var(--metin-3); }
.serit--ters .serit-iz{ animation-direction: reverse; }
.serit--kagit{ background: var(--kagit); color: var(--murekkep); border-color: rgba(0,0,0,.1); }
.serit--kagit .bos{ -webkit-text-stroke-color: rgba(0,0,0,.55); }
@keyframes serit-ak{ to{ transform: translate3d(-50%,0,0); } }

/* ---- 11.6 Fotoğraf işleme (siyah-beyaz) + yer tutucu ---- */
.foto-mono{ filter: grayscale(1) contrast(1.12) brightness(.9); }
.foto-kap{ position:absolute; inset:0; overflow:hidden; border-radius: inherit; }
.foto-kap img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; }
.hakkimizda-gorsel .foto-kap::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)), radial-gradient(90% 70% at 30% 10%, rgba(255,255,255,.08), transparent 60%); }
.galeri-oge > img{ position:absolute; inset:0; filter: grayscale(1) contrast(1.12) brightness(.86); transition: transform 1.1s var(--egri-yay), filter .6s var(--egri); }
.galeri-oge:hover > img{ transform: scale(1.06); filter: grayscale(1) contrast(1.2) brightness(1); }
.galeri-oge::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); pointer-events:none; transition: opacity .5s; }
.galeri-oge figcaption{ z-index:1; transition: transform .5s var(--egri-yay), background .3s, color .3s; }
.galeri-oge:hover figcaption{ transform: translateY(-4px); background: var(--vurgu); color: var(--vurgu-uzeri); }
.galeri-oge .galeri-buyut{ position:absolute; z-index:1; right:12px; top:12px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: rgba(var(--zemin-rgb),.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity:0; transform: scale(.8); transition: all .4s var(--egri-yay); }
.galeri-oge:hover .galeri-buyut{ opacity:1; transform:none; }
.prototip-not{ font-size: var(--fs-2xs); color: var(--metin-3); letter-spacing:.02em; margin-top: var(--b-3); }

/* ---- 11.7 Butonlar: dolgu kayması (vitrin), basma dalgası ---- */
.vitrin .btn--ikincil,.sihirbaz-sayfa .btn--ikincil{ position:relative; overflow:hidden; isolation:isolate; transition: color .38s var(--egri), border-color .38s var(--egri), transform var(--sure-hizli) var(--egri); }
.vitrin .btn--ikincil::before,.sihirbaz-sayfa .btn--ikincil::before{ content:""; position:absolute; inset:-1px; z-index:-1; background: var(--vurgu); border-radius: inherit; transform: translateY(102%); transition: transform .42s var(--egri-yay); }
.vitrin .btn--ikincil:hover,.sihirbaz-sayfa .btn--ikincil:hover{ color: var(--vurgu-uzeri); border-color: var(--vurgu); background: transparent; }
.vitrin .btn--ikincil:hover::before,.sihirbaz-sayfa .btn--ikincil:hover::before{ transform:none; }
.bolum--kagit .btn--ikincil::before{ background: var(--murekkep); }
.bolum--kagit .btn--ikincil:hover{ color: var(--kagit); border-color: var(--murekkep); }
.vitrin .btn--birincil,.sihirbaz-sayfa .btn--birincil{ position:relative; overflow:hidden; isolation:isolate; }
.vitrin .btn--birincil::after,.sihirbaz-sayfa .btn--birincil::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; background: linear-gradient(100deg, transparent, rgba(0,0,0,.09), transparent); transform: skewX(-18deg); transition: transform .7s var(--egri-yay); }
.vitrin .btn--birincil:hover,.sihirbaz-sayfa .btn--birincil:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(var(--vurgu-rgb),.45); }
.vitrin .btn--birincil:hover::after,.sihirbaz-sayfa .btn--birincil:hover::after{ transform: translateX(420%) skewX(-18deg); }
.btn .ikon{ transition: transform .35s var(--egri-yay); }
.btn:hover .ikon:last-child:not(:first-child){ transform: translateX(3px); }
.btn--metin:hover .ikon{ transform: translateX(3px); }
.btn--birincil,.btn--vurgu,.hizli-eylem,.cip{ position:relative; overflow:hidden; }
.dalga{ position:absolute; border-radius:50%; background: currentColor; opacity:.16; transform: scale(0); animation: dalga .65s var(--egri) forwards; pointer-events:none; }
@keyframes dalga{ to{ transform: scale(1); opacity:0; } }

/* ---- 11.8 Vitrin kartları: ekip (hover'da bilgi açılır), yorum, menü ---- */
.ekip-kart{ transition: border-color var(--sure) var(--egri), transform .5s var(--egri-yay), box-shadow .5s var(--egri-yay); }
.ekip-kart:hover{ transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--vurgu-rgb),.14); }
.ekip-foto img{ position:absolute; inset:0; filter: grayscale(1) contrast(1.1) brightness(.88); transition: transform 1.1s var(--egri-yay), filter .6s; }
.ekip-kart:hover .ekip-foto img{ transform: scale(1.06); filter: grayscale(1) contrast(1.18) brightness(.98); }
.ekip-acilir{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(var(--zemin-rgb),.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border:1px solid var(--cizgi-guclu);
  font-size: var(--fs-xs); font-weight:700; color: var(--metin-2); opacity:0; transform: translateY(14px); transition: opacity .4s var(--egri), transform .5s var(--egri-yay); }
.ekip-acilir b{ color: var(--metin); margin-right:2px; }
.ekip-acilir a{ height:28px; padding:0 10px; border-radius: var(--r-tam); border:1px solid var(--cizgi-guclu); display:inline-flex; align-items:center; color: var(--metin); font-variant-numeric: tabular-nums; transition: all var(--sure-hizli); }
.ekip-acilir a:hover{ background: var(--vurgu); color: var(--vurgu-uzeri); border-color: var(--vurgu); }
.ekip-kart:hover .ekip-acilir,.ekip-kart:focus-within .ekip-acilir{ opacity:1; transform:none; }
@media (hover:none){ .ekip-acilir{ display:none; } }
.ekip-foto .avatar{ transition: transform .6s var(--egri-yay); }
.ekip-kart:hover .ekip-foto .avatar{ transform: translate(-50%,-50%) scale(1.06); }
.yorum{ transition: transform .5s var(--egri-yay), border-color .3s, box-shadow .5s var(--egri-yay); }
.yorum:hover{ transform: translateY(-4px); border-color: rgba(var(--vurgu-rgb),.22); box-shadow: 0 30px 60px -36px rgba(0,0,0,.9); }
.yorum::before{ transition: color .4s; }
.yorum:hover::before{ color: rgba(var(--vurgu-rgb),.32); }
.menu-oge-ad{ transition: transform .35s var(--egri-yay); }
.menu-oge-cizgi{ transition: border-color .3s; }
.menu-oge:hover .menu-oge-ad{ transform: translateX(4px); }
.menu-oge:hover .menu-oge-cizgi{ border-bottom-color: rgba(0,0,0,.75); }
.istatistik b{ font-variant-numeric: lining-nums tabular-nums; }
.hakkimizda-damga{ animation: damga-don 30s linear infinite; }
@keyframes damga-don{ from{ transform: rotate(-8deg); } to{ transform: rotate(352deg); } }
.hakkimizda-damga div{ animation: damga-don-ters 30s linear infinite; }
@keyframes damga-don-ters{ from{ transform: rotate(8deg); } to{ transform: rotate(-352deg); } }

/* Kapanış: spot + dev çizgisel yazı */
.kapanis{ isolation:isolate; }
.kapanis::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(520px circle at var(--mx, 85%) var(--my, 10%), rgba(255,255,255,.10), transparent 60%); }
.kapanis-dev{ position:absolute; z-index:-1; right:-2%; bottom:-.22em; font-family: var(--font-baslik); font-style:italic; font-size: clamp(6rem, 3rem + 12vw, 15rem); line-height:1; letter-spacing:-.04em; color: transparent; -webkit-text-stroke: 1px rgba(var(--vurgu-rgb),.12); white-space:nowrap; pointer-events:none; user-select:none; }

/* ---- 11.9 Sihirbaz mikro etkileşimleri ---- */
.ekran:not([hidden]){ animation: ekran-gir .55s var(--egri-yay) both; }
@keyframes ekran-gir{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
.hizmet-satir[aria-checked="true"] .onay,.berber-kart[aria-checked="true"] .isaret,.berber-kart.secili .isaret{ animation: pop .38s var(--egri-zipla); }
@keyframes pop{ 0%{ transform: scale(.6); } 100%{ transform: scale(1); } }
.berber-kart{ transition: border-color var(--sure) var(--egri), background var(--sure) var(--egri), transform .4s var(--egri-yay), box-shadow .4s var(--egri); }
.berber-kart:hover{ transform: translateY(-2px); }
.berber-kart .avatar{ transition: box-shadow .45s var(--egri-yay), transform .45s var(--egri-yay); }
.berber-kart[aria-checked="true"] .avatar:not(.avatar--fark-etmez),.berber-kart.secili .avatar:not(.avatar--fark-etmez){ box-shadow: 0 0 0 2px var(--vurgu), 0 0 0 6px var(--yuzey), 0 0 0 7px rgba(var(--vurgu-rgb),.35); transform: scale(1.04); }
.saat:not([disabled]):hover{ transform: translateY(-2px); }
.saat[aria-pressed="true"]{ animation: pop .32s var(--egri-zipla); }
.gun:not([disabled]):hover{ transform: translateY(-2px); }
.adim-ilerleme span{ position:relative; overflow:hidden; }
.adim-ilerleme span::after{ content:""; position:absolute; top:0; bottom:0; width:60px; left:-60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); animation: ilerleme-parla 2.6s var(--egri) infinite 1s; }
@keyframes ilerleme-parla{ to{ transform: translateX(1400px); } }
.adim--aktif .no{ animation: pop .45s var(--egri-zipla); }
.basari-muhur{ position:relative; }
.basari-muhur::before,.basari-muhur::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--vurgu-rgb),.6); animation: muhur-dalga 1.6s var(--egri) both .25s; }
.basari-muhur::after{ animation-delay: .55s; }
@keyframes muhur-dalga{ from{ transform: scale(1); opacity:.9; } to{ transform: scale(2.3); opacity:0; } }
.basari-muhur .ikon{ stroke-dasharray: 24; stroke-dashoffset: 24; animation: tik-ciz .6s var(--egri) forwards .35s; }
@keyframes tik-ciz{ to{ stroke-dashoffset:0; } }
.takip-kodu span{ animation: kod-gir .6s var(--egri-yay) both; }
.takip-kodu span:nth-child(1){ animation-delay:.45s } .takip-kodu span:nth-child(2){ animation-delay:.52s } .takip-kodu span:nth-child(3){ animation-delay:.59s }
.takip-kodu span:nth-child(4){ animation-delay:.66s } .takip-kodu span:nth-child(5){ animation-delay:.73s } .takip-kodu span:nth-child(6){ animation-delay:.8s }
@keyframes kod-gir{ from{ opacity:0; transform: translateY(14px) rotateX(70deg); } to{ opacity:1; transform:none; } }

/* ---- 11.10 Nabız noktası (canlı durum) — currentColor, transform/opacity ---- */
.nabiz{ position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background: currentColor; flex:none; }
.nabiz::after,.rozet--canli .nokta::after{ content:""; position:absolute; inset:0; border-radius:50%; background: currentColor; animation: nabiz-halka 1.9s var(--egri) infinite; }
.rozet--canli .nokta{ position:relative; animation:none; box-shadow:none; }
@keyframes nabiz-halka{ 0%{ transform: scale(1); opacity:.55; } 80%,100%{ transform: scale(3.2); opacity:0; } }
.durum--canli{ position:relative; }
.durum--canli::before{ animation: nabiz-golge 1.9s var(--egri) infinite; }
@keyframes nabiz-golge{ 0%{ box-shadow: 0 0 0 0 currentColor; } 80%,100%{ box-shadow: 0 0 0 5px transparent; } }

/* ---- 11.11 Panel: KPI kartları — kalkış, parıltı, öne çıkan koyu kart ---- */
.kpi{ transition: transform .45s var(--egri-yay), box-shadow .45s var(--egri-yay), border-color .3s; }
.kpi:hover{ transform: translateY(-3px); box-shadow: var(--golge-2), var(--isik-ust); border-color: var(--cizgi-guclu); }
.kpi::before{ content:""; position:absolute; left:16px; right:16px; top:0; height:1px; background: linear-gradient(90deg, transparent, var(--metin), transparent); opacity:0; transition: opacity .45s; pointer-events:none; }
.kpi:hover::before{ opacity:.35; }
.kpi .kpi-ikon{ transition: transform .45s var(--egri-zipla); }
.kpi:hover .kpi-ikon{ transform: rotate(-8deg) scale(1.08); }
.kpi--vurgu{ --kart-zemin: #0B0B0B; border-color:#0B0B0B;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.17), transparent 52%),
    repeating-radial-gradient(circle at 112% -14%, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
    radial-gradient(80% 70% at 0% 110%, rgba(255,255,255,.07), transparent 60%);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.kpi--vurgu::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image: var(--gren); opacity:.10; mix-blend-mode: overlay; }
.kpi--vurgu::before{ left:0; right:0; top:0; bottom:0; height:auto; opacity:1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1.1s var(--egri-yay); }
.kpi--vurgu:hover::before{ transform: translateX(120%); opacity:1; }
.kpi--vurgu .kpi-ikon{ background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.kpi--vurgu > *{ position:relative; z-index:1; }
.panel[data-tema="koyu"] .kpi--vurgu{ --kart-zemin: #F5F5F5;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,1), transparent 55%),
    repeating-radial-gradient(circle at 112% -14%, rgba(0,0,0,.06) 0 1px, transparent 1px 16px),
    radial-gradient(80% 70% at 0% 110%, rgba(0,0,0,.05), transparent 60%);
  box-shadow: 0 18px 50px -18px rgba(255,255,255,.18); }
.panel[data-tema="koyu"] .kpi--vurgu::after{ background-image: var(--gren-koyu); opacity:.12; mix-blend-mode: multiply; }
.panel[data-tema="koyu"] .kpi--vurgu::before{ background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); }
.panel[data-tema="koyu"] .kpi--vurgu .kpi-ikon{ background: rgba(0,0,0,.07); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.kpi-govde{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.kpi-govde > div:first-child{ display:flex; flex-direction:column; gap:10px; min-width:0; }

/* ---- 11.12 İlerleme çubukları: dolarak gelir ---- */
.doluluk .cubuk i,.perf-satir .cubuk i,.g-lejant-liste .pay span{ transform-origin: left center; animation: cubuk-dol 1.3s var(--egri-yay) both; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }
@keyframes cubuk-dol{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.perf-satir:nth-child(2){ --i:0 } .perf-satir:nth-child(3){ --i:1 } .perf-satir:nth-child(4){ --i:2 } .perf-satir:nth-child(5){ --i:3 }
.perf-satir:hover .cubuk i{ filter: brightness(1.15); }

/* ---- 11.13 Kayan seçim işareti (segment hapı, sekme alt çizgisi) ---- */
.segment.kayan,.arama-sekme.kayan,[data-kayan].kayan{ position:relative; }
.segment.kayan button{ position:relative; z-index:1; transition: color .3s var(--egri); }
.segment.kayan button[aria-pressed="true"]{ background: transparent!important; box-shadow:none; }
.kayan-isaret{ position:absolute; left:0; pointer-events:none; transition: transform .45s var(--egri-yay), width .45s var(--egri-yay), opacity .2s; }
.kayan-isaret--hap{ top:3px; z-index:0; border-radius:6px; background: var(--yuzey); box-shadow: var(--golge-1), 0 0 0 1px var(--cizgi); }
.panel[data-tema="koyu"] .kayan-isaret--hap{ background: var(--yuzey-2); }
.kayan-isaret--cizgi{ bottom:-1px; height:2px; border-radius:2px; background: var(--vurgu); }
.arama-sekme.kayan button.aktif,[data-kayan].kayan .aktif{ border-color: transparent; }

/* ---- 11.14 Panel mikro etkileşimleri ---- */
.panel .btn:active{ transform: scale(.97); }
.anahtar span::after{ transition: transform var(--sure) var(--egri-zipla), width var(--sure) var(--egri); }
.anahtar input:active + span::after{ width:25px; }
.anahtar input:checked:active + span::after{ transform: translateX(13px); }
.hesap{ transition: transform .35s var(--egri-yay), border-color .3s, background .3s; }
.hesap:hover{ transform: translateX(3px); border-color: var(--cizgi-guclu); background: var(--yuzey); }
.hesap-ikon{ transition: transform .4s var(--egri-zipla); }
.hesap:hover .hesap-ikon{ transform: rotate(-6deg) scale(1.06); }
.hizli-eylem{ transition: transform .35s var(--egri-yay), border-color .3s, background .3s; }
.hizli-eylem:hover{ transform: translateY(-2px); }
.hizli-eylem .ikon{ transition: transform .4s var(--egri-zipla); }
.hizli-eylem:hover .ikon{ transform: translateY(-2px) rotate(-8deg); }
.p-yan-link .ikon{ transition: transform .3s var(--egri-yay); }
.p-yan-link:hover .ikon{ transform: translateX(2px); }
.akis-oge{ animation: yukari-gir .6s var(--egri-yay) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
.akis-oge:nth-child(1){ --i:0 } .akis-oge:nth-child(2){ --i:1 } .akis-oge:nth-child(3){ --i:2 } .akis-oge:nth-child(4){ --i:3 } .akis-oge:nth-child(5){ --i:4 } .akis-oge:nth-child(6){ --i:5 }
.p-icerik > .p-sayfa-bas,.p-icerik > section{ animation: yukari-gir .7s var(--egri-yay) both; }
.p-icerik > section:nth-of-type(1){ animation-delay:.05s } .p-icerik > section:nth-of-type(2){ animation-delay:.12s } .p-icerik > section:nth-of-type(3){ animation-delay:.19s }
.p-icerik > section:nth-of-type(4){ animation-delay:.26s } .p-icerik > section:nth-of-type(5){ animation-delay:.33s }
.tablo tbody tr{ transition: background var(--sure-hizli), box-shadow var(--sure-hizli); }
.tablo tbody tr:hover{ box-shadow: inset 2px 0 0 var(--metin); }

/* ---- 11.15 Avatar halkası (doluluk) — panel berber avatarları ---- */
.avatar-halka{ position:relative; display:inline-grid; place-items:center; padding:4px; border-radius:50%; flex:none; }
.avatar-halka-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.avatar-halka-svg .iz{ fill:none; stroke: var(--cizgi); stroke-width:2; }
.avatar-halka-svg .deger{ fill:none; stroke: var(--metin); stroke-width:2.4; stroke-linecap:round; transition: stroke-dashoffset 1.5s var(--egri-yay) .2s; }
.avatar-halka .avatar{ box-shadow:none; }

/* ---- 11.16 Takvim blokları: durum = desen + ton (renk değil) ---- */
.takvim-blok{ animation: blok-gir .55s var(--egri-yay) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }
@keyframes blok-gir{ from{ opacity:0; transform: translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.takvim-blok:hover{ transform: translateY(-1px); }
.takvim-blok--onayli{ background: var(--yuzey-3); border-left: 3px solid var(--metin); }
.takvim-blok--bekliyor{ background: var(--yuzey); border: 1px dashed var(--cizgi-guclu); border-left: 3px dashed var(--metin-3); }
.takvim-blok--bekliyor span{ color: var(--metin-3); }
.takvim-blok--geldi{ background: var(--metin); color: var(--yuzey); border-left: 3px solid var(--metin); box-shadow: var(--golge-2); }
.takvim-blok--geldi span{ color: inherit; opacity:.72; }
.takvim-blok--geldi b{ display:flex; align-items:center; gap:6px; }
.takvim-blok--geldi .nabiz{ width:6px; height:6px; color: #6FCF97; }
.panel[data-tema="koyu"] .takvim-blok--geldi .nabiz{ color:#1E7A4C; }
.takvim-blok--tamamlandi{ background: var(--yuzey-2); border-left: 3px solid var(--cizgi-guclu); color: var(--metin-3); }
.takvim-blok--tamamlandi b{ color: var(--metin-2); }
.takvim-blok--tamamlandi b::before{ content:""; display:inline-block; width:8px; height:4px; border: solid var(--basari); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px,-2px); margin-right:6px; }
.takvim-blok--iptal{ background: repeating-linear-gradient(-45deg, var(--yuzey-2) 0 5px, var(--yuzey) 5px 10px); border-left: 3px solid var(--cizgi); color: var(--metin-3); }
.takvim-blok--iptal b{ text-decoration: line-through; text-decoration-thickness:1px; color: var(--metin-3); }
.takvim-lejant{ display:flex; flex-wrap:wrap; gap: 6px 14px; margin-top: var(--b-3); font-size: 11px; font-weight:700; color: var(--metin-3); }
.takvim-lejant span{ display:inline-flex; align-items:center; gap:6px; }
.takvim-lejant i{ width:14px; height:10px; border-radius:3px; display:inline-block; }
.takvim-lejant .l-onayli{ background: var(--yuzey-3); box-shadow: inset 3px 0 0 var(--metin); }
.takvim-lejant .l-bekliyor{ border:1px dashed var(--metin-3); }
.takvim-lejant .l-geldi{ background: var(--metin); }
.takvim-lejant .l-tamamlandi{ background: var(--yuzey-2); box-shadow: inset 3px 0 0 var(--cizgi-guclu), inset 0 0 0 1px var(--cizgi); }
.takvim-lejant .l-iptal{ background: repeating-linear-gradient(-45deg, var(--cizgi-guclu) 0 2px, transparent 2px 4px); }
.takvim-simdi::before{ animation: nabiz-golge 1.9s var(--egri) infinite; color: var(--hata); }
.takvim-simdi::after{ content: attr(data-saat); position:absolute; left:8px; top:-9px; font-size:10px; font-weight:800; padding: 1px 6px; border-radius: var(--r-tam); background: var(--hata); color:#fff; font-variant-numeric: tabular-nums; }
.panel[data-tema="koyu"] .takvim-simdi::after{ color:#1A0F0D; }

/* ---- 11.17 İskelet (shimmer) + yükleniyor grafik ---- */
.iskelet{ position:relative; overflow:hidden; background: var(--yuzey-3); animation:none; }
.iskelet::after{ content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: parilti 1.5s var(--egri) infinite; }
.panel[data-tema="koyu"] .iskelet::after,.vitrin .iskelet::after,.sihirbaz-sayfa .iskelet::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes parilti{ to{ transform: translateX(100%); } }
.iskelet--metin{ height:12px; border-radius:6px; }
.iskelet--baslik{ height:26px; width:60%; border-radius:8px; }
.iskelet--daire{ border-radius:50%; }
.grafik--yukleniyor::before{ content:""; position:absolute; left:40px; right:0; bottom:26px; height:62%; border-radius:6px;
  background: linear-gradient(90deg, var(--yuzey-3), var(--yuzey-2), var(--yuzey-3)); background-size: 200% 100%; animation: iskelet 1.5s linear infinite;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 24px); mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 24px); }
.kart-iskelet{ display:flex; flex-direction:column; gap:12px; }

/* ---- 11.18 Boş durum çizimleri (inline SVG, çizgisel monokrom) ---- */
.bos-durum--panel{ padding: var(--b-8) var(--b-4); }
.bos-cizim{ width:148px; height:112px; color: var(--metin-3); overflow:visible; }
.bos-cizim .c{ fill:none; stroke: currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bos-cizim .c-ince{ fill:none; stroke: currentColor; stroke-width:1; stroke-dasharray: 3 4; opacity:.6; }
.bos-cizim .d{ fill: var(--yuzey-3); }
.bos-cizim .vurgu{ stroke: var(--metin); }
.bos-cizim .yuz{ animation: bos-suz 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bos-cizim .kivilcim{ animation: kivilcim 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin:center; }
.bos-cizim .kivilcim + .kivilcim{ animation-delay: .8s; }
@keyframes bos-suz{ 50%{ transform: translateY(-4px); } }
@keyframes kivilcim{ 0%,100%{ opacity:.2; transform: scale(.7); } 50%{ opacity:1; transform: scale(1); } }
.bos-durum h3{ font-size: var(--fs-md); font-weight:800; color: var(--metin); }
.bos-durum p{ font-size: var(--fs-sm); max-width: 34ch; }

/* =====================================================================
   12. GRAFİK SİSTEMİ (v3) — grafikler.js ile birlikte
   ===================================================================== */
.grafik canvas{ display:block; width:100%!important; }
.grafik--uzun{ height: 300px; }
.grafik--halka{ height: 220px; }

/* İpucu kartı: açık temada siyah, koyu temada beyaz (ters kontrast) */
.g-ipucu{ position:absolute; left:0; top:0; z-index:6; pointer-events:none; min-width:150px; padding: 10px 14px 11px; border-radius: 12px;
  background:#0B0B0B; color:#FFFFFF; white-space:nowrap; opacity:0;
  box-shadow: 0 22px 44px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition: opacity .16s var(--egri), transform .24s var(--egri-yay); will-change: transform; }
.g-ipucu.gorunur{ opacity:1; }
.g-ipucu-ust{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.g-ipucu-deger{ font-size: 26px; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-top:3px; font-variant-numeric: tabular-nums; }
.g-ipucu-deger small{ font-size:.54em; font-weight:700; color: rgba(255,255,255,.6); margin-left:4px; letter-spacing:0; }
.g-ipucu-alt{ display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:600; color: rgba(255,255,255,.72); }
.g-trend{ display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:800; padding:2px 6px 2px 4px; border-radius:5px; font-variant-numeric: tabular-nums; }
.g-trend svg,.grafik .g-trend svg{ width:11px; height:11px; fill:none; stroke: currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.g-trend--artis{ color:#6FCF97; background: rgba(111,207,151,.15); }
.g-trend--azalis{ color:#F07B6E; background: rgba(240,123,110,.15); }
.panel[data-tema="koyu"] .g-ipucu{ background:#FFFFFF; color:#0B0B0B; box-shadow: 0 22px 44px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.panel[data-tema="koyu"] .g-ipucu-ust,.panel[data-tema="koyu"] .g-ipucu-deger small{ color: rgba(0,0,0,.55); }
.panel[data-tema="koyu"] .g-ipucu-alt{ color: rgba(0,0,0,.65); border-top-color: rgba(0,0,0,.1); }
.panel[data-tema="koyu"] .g-ipucu .g-trend--artis{ color:#1E7A4C; background:#E6F4EC; }
.panel[data-tema="koyu"] .g-ipucu .g-trend--azalis{ color:#B3362B; background:#FBE9E7; }

/* Son nokta nabzı (çizgi grafiği) */
.g-nabiz{ position:absolute; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; pointer-events:none; opacity:0; transition: opacity .3s; z-index:1; }
.g-nabiz.gorunur{ opacity:1; }
.g-nabiz::before,.g-nabiz::after{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--seri-1); animation: nabiz-halka 2.2s var(--egri) infinite; }
.g-nabiz::after{ animation-delay:1.1s; }

/* Lejant örnekleri (çubuk / hayalet / kesik çizgi) */
.grafik-lejant i.l-dolu{ background: linear-gradient(180deg, var(--seri-1), rgba(0,0,0,.25)); }
.panel[data-tema="koyu"] .grafik-lejant i.l-dolu{ background: linear-gradient(180deg, var(--seri-1), rgba(255,255,255,.2)); }
.grafik-lejant i.l-hayalet{ background: var(--yuzey-3); box-shadow: inset 0 1.5px 0 var(--cizgi-guclu); }
.grafik-lejant i.l-kesik{ width:18px; height:0; border-radius:0; background:none; border-top:2px dashed var(--metin-3); }
.grafik-lejant i.l-cizgi{ width:18px; height:2.5px; border-radius:2px; background: var(--seri-1); }

/* Radyal doluluk göstergesi */
.g-radyal{ position:relative; display:inline-grid; place-items:center; flex:none; }
.g-radyal svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.g-radyal-iz{ fill:none; stroke: var(--yuzey-3); }
.g-radyal-cetvel{ fill:none; stroke: var(--metin-3); stroke-width:1; stroke-dasharray: .35 4.65; opacity:.5; }
.g-radyal-deger{ fill:none; stroke: var(--metin); stroke-linecap:round; transition: stroke-dashoffset 1.4s var(--egri-yay); }
.g-radyal-metin{ position:relative; display:flex; flex-direction:column; align-items:center; line-height:1; }
.g-radyal-metin b{ font-size: 18px; font-weight:800; letter-spacing:-.02em; }
.g-radyal-metin small{ font-size: 9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--metin-3); margin-top:4px; }
.kpi--vurgu .g-radyal-iz{ stroke: rgba(255,255,255,.14); }
.panel[data-tema="koyu"] .kpi--vurgu .g-radyal-iz{ stroke: rgba(0,0,0,.1); }

/* Isı haritası (gün × saat) */
.g-isi{ position:relative; }
.g-isi-izgara{ display:grid; gap:4px; align-items:center; }
.g-isi-sutun{ font-size:10.5px; font-weight:700; color: var(--metin-3); text-align:center; font-variant-numeric: tabular-nums; padding-bottom:2px; }
.g-isi-satir{ font-size:11px; font-weight:700; color: var(--metin-3); }
.g-isi-hucre{ height:28px; border-radius:6px; background: var(--yuzey-3); font-size:10px; font-weight:800; color: var(--metin); font-variant-numeric: tabular-nums; cursor:default; position:relative;
  transition: transform .25s var(--egri-zipla), box-shadow .2s; }
.g-isi-hucre--koyu{ color: var(--yuzey); }
.g-isi-hucre--kapali{ background: repeating-linear-gradient(-45deg, var(--yuzey-3) 0 3px, transparent 3px 6px)!important; box-shadow: inset 0 0 0 1px var(--cizgi); }
.g-isi-hucre:hover,.g-isi-hucre.aktif,.g-isi-hucre:focus-visible{ transform: scale(1.14); z-index:2; box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 3.5px var(--metin), var(--golge-2); border-radius:6px; }
.g-isi:not(.g-isi--gorundu) .g-isi-hucre{ opacity:0; transform: scale(.5); }
.g-isi--gorundu .g-isi-hucre{ animation: hucre-gir .5s var(--egri-yay) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes hucre-gir{ from{ opacity:0; transform: scale(.5); } to{ opacity:1; transform:none; } }
.g-isi-lejant{ display:flex; align-items:center; gap:8px; margin-top: var(--b-4); font-size:11px; font-weight:700; color: var(--metin-3); }
.g-isi-lejant > i{ width:120px; height:8px; border-radius:4px; display:block; }
.g-isi-lejant-kapali{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.g-isi-lejant-kapali i{ width:14px; height:10px; border-radius:3px; display:inline-block; background: repeating-linear-gradient(-45deg, var(--cizgi-guclu) 0 2px, transparent 2px 4px); }
.g-isi .g-ipucu{ min-width:170px; }
@media (max-width:640px){ .g-isi-hucre{ height:22px; border-radius:4px; font-size:0; } .g-isi-izgara{ gap:3px; } .g-isi-sutun:nth-child(odd){ visibility:hidden; } }

/* Sparkline */
.g-spark{ position:relative; }
.g-spark svg{ width:100%; height:100%; overflow:visible; }
.js-hareket .g-spark:not(.g-spark--hazir) svg{ clip-path: inset(0 100% 0 0); }
.g-spark--ciz svg{ animation: spark-ac 1.4s var(--egri-yay) forwards .2s; }
@keyframes spark-ac{ to{ clip-path: inset(0 0 0 0); } }
.g-spark-nokta{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background: currentColor; box-shadow: 0 0 0 2.5px var(--kart-zemin, var(--yuzey)); opacity:0; transform: scale(0); }
.g-spark-nokta::after{ content:""; position:absolute; inset:0; border-radius:50%; background: currentColor; animation: nabiz-halka 2.2s var(--egri) infinite 1.6s; }
.g-spark--ciz .g-spark-nokta,.g-spark--hazir .g-spark-nokta{ animation: nokta-gir .5s var(--egri-zipla) forwards 1.4s; }
.g-spark--hazir .g-spark-nokta{ animation-delay:0s; }
@keyframes nokta-gir{ to{ opacity:1; transform: scale(1); } }

/* Halka (donut) lejantı + desen örnekleri (canvas desenleriyle eşleşir) */
.g-halka-izgara{ display:grid; grid-template-columns: 1fr; gap: var(--b-4); align-items:center; }
.g-halka-izgara .grafik{ width:100%; max-width:240px; margin:0 auto; }
@media (min-width:640px) and (max-width:1199px){ .g-halka-izgara{ grid-template-columns: 220px minmax(0,1fr); } }
.g-lejant-liste{ display:flex; flex-direction:column; gap:4px; }
.g-lejant-liste li{ display:grid; grid-template-columns: 16px minmax(0,1fr) auto 40px; gap: 2px 10px; align-items:center; padding: 8px; border-radius: var(--r-sm); cursor:default; transition: background .2s, opacity .25s; }
.g-lejant-liste li.aktif{ background: var(--yuzey-3); }
.g-lejant-liste li.soluk{ opacity:.45; }
.g-lejant-liste .ad{ font-weight:700; font-size: var(--fs-sm); min-width:0; }
.g-lejant-liste .ad small{ display:block; font-size:11px; color: var(--metin-3); font-weight:600; }
.g-lejant-liste b{ font-weight:800; font-size: var(--fs-sm); text-align:right; }
.g-lejant-liste em{ font-style:normal; font-weight:800; font-size: 11px; color: var(--metin-3); text-align:right; }
.g-lejant-liste .pay{ grid-column: 2 / -1; height:4px; border-radius:2px; background: var(--yuzey-3); overflow:hidden; }
.g-lejant-liste .pay span{ display:block; height:100%; border-radius:2px; background: var(--metin); }
.g-lejant-liste li:nth-child(2) .pay span{ background: var(--seri-2); --i:1; }
.g-lejant-liste li:nth-child(3) .pay span{ background: var(--seri-3); --i:2; }
.desen{ width:16px; height:16px; border-radius:5px; display:block; box-shadow: inset 0 0 0 1px var(--cizgi-guclu); }
.desen--duz{ background: var(--seri-1); box-shadow:none; }
.desen--cizgi{ background: repeating-linear-gradient(-45deg, var(--seri-1) 0 1.6px, var(--yuzey-3) 1.6px 4.4px); }
.desen--nokta{ background: radial-gradient(circle, var(--seri-2) 1.1px, transparent 1.5px) 0 0 / 5px 5px, var(--yuzey-2); }
.desen--capraz{ background: repeating-linear-gradient(45deg, var(--seri-2) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, var(--seri-2) 0 1px, var(--yuzey-2) 1px 4px); }

/* Mini trend oku (tablo/listelerde) */
.trend-ok{ display:inline-flex; align-items:center; gap:2px; font-size: 11px; font-weight:800; font-variant-numeric: tabular-nums; }
.trend-ok svg{ width:11px; height:11px; fill:none; stroke: currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round; }
.trend-ok--artis{ color: var(--basari); } .trend-ok--azalis{ color: var(--hata); }

/* ---- Mobil hafifletme ---- */
@media (max-width:959px){
  .hero-isinlar i:nth-child(n+2){ display:none; }
  .hero-isinlar i{ animation:none; opacity:.7; }
  .hero-spot{ background: radial-gradient(420px circle at 50% 22%, rgba(255,255,255,.07), transparent 62%); }
  .kapanis-dev{ font-size: 7rem; }
  .kpi:hover,.ekip-kart:hover,.yorum:hover{ transform:none; }
}
@media (hover:none){ .kpi:hover,.hesap:hover,.hizli-eylem:hover,.berber-kart:hover,.saat:not([disabled]):hover,.gun:not([disabled]):hover{ transform:none; } }

/* ---- Hareket azaltma: v3 animasyonlarının tamamı ---- */
@media (prefers-reduced-motion: reduce){
  .serit-iz,.hero-yorunge,.hero-isinlar i,.hero-halka--2,.hakkimizda-damga,.hakkimizda-damga div,.adim-ilerleme span::after,
  .nabiz::after,.rozet--canli .nokta::after,.g-nabiz::before,.g-nabiz::after,.g-spark-nokta::after,.bos-cizim .yuz,.bos-cizim .kivilcim,
  .hero-kaydir i::after,.takvim-simdi::before,.durum--canli::before,.iskelet::after{ animation:none!important; }
  .kelimeli .kelime > span{ transform:none!important; opacity:1!important; }
  .ky{ opacity:1!important; }
  .js-hareket .g-spark:not(.g-spark--hazir) svg{ clip-path:none; }
  .g-spark-nokta{ opacity:1; transform:none; }
  .g-isi:not(.g-isi--gorundu) .g-isi-hucre{ opacity:1; transform:none; }
  .hero-logo{ transform:none!important; }
  .basari-muhur .ikon{ stroke-dashoffset:0; }
  .kpi:hover,.ekip-kart:hover,.yorum:hover,.hesap:hover,.hizli-eylem:hover{ transform:none; }
}

/* Izgara taşma koruması (takvim/ısı haritası gibi geniş içerikler kart içinde kayar, sayfayı genişletmez) */
.p-izgara > *{ min-width:0; }
.kpi-govde .g-radyal{ width:72px!important; height:72px!important; }
@media (min-width:1200px){ .kpi-govde .g-radyal{ width:84px!important; height:84px!important; } }
.guven-oge b [data-sayac]{ font: inherit; color: inherit; letter-spacing: inherit; }
.istatistik b [data-sayac],.puan-ozet b [data-sayac]{ font: inherit; color: inherit; letter-spacing: inherit; display:inline; margin:0; }
@media (max-width:640px){
  .kpi-govde{ align-items:flex-start; }
  .kpi-govde .g-radyal{ width:58px!important; height:58px!important; margin-top:-4px; }
  .kpi-govde .g-radyal-metin b{ font-size:14px; }
  .kpi-govde .g-radyal-metin small{ display:none; }
}
@media (max-width:959px){ .hero-yorunge{ inset:-6%; width:112%; height:112%; } .hero{ padding-top: var(--b-10); } }
.bos-durum .btn .ikon{ width:16px; height:16px; stroke-width:1.75; color:inherit; }