/* =====================================================================
   Berber Sistemi — tek tasarim dosyasi
   ---------------------------------------------------------------------
   Bolumler:
     1. Degiskenler ve temalar
     2. Temel
     3. Duzen (kapsayici, izgara, kenar cubugu)
     4. Bilesenler (dugme, kart, alan, tablo, rozet, uyari)
     5. Tanitim sitesi
     6. Randevu akisi
     7. Panel
     8. Mobil
   ===================================================================== */

/* --- 1. Degiskenler -------------------------------------------------- */

:root {
    /* Lacivert — varsayilan */
    --ana:          #1d3f73;
    --ana-koyu:     #142c52;
    --ana-acik:     #7d9cc9;
    --ana-parlak:   #2b5698;

    /* Altin vurgu: lacivertle klasik esleşme. Fiyat ve one cikan
       rozetlerde kullanilir. */
    --altin:        #c7a469;

    --zemin:        #f5f7fb;
    --yuzey:        #ffffff;
    --yuzey-2:      #f0f3f9;
    --yuzey-3:      #e1e7f0;

    --metin:        #141d23;
    --metin-2:      #4a5560;
    --metin-3:      #8b95a3;

    --cizgi:        #e1e7f0;
    --cizgi-koyu:   #c8d2e0;

    --ok:           #059669;
    --ok-zemin:     #d1fae5;
    --uyari:        #d97706;
    --uyari-zemin:  #fef3c7;
    --hata:         #dc2626;
    --hata-zemin:   #fee2e2;

    /* Katmanli golge: tek buyuk golge yerine ust uste uc kucuk golge
       daha gercekci derinlik verir. */
    --golge-1: 0 1px 4px rgba(20,29,35,.05);
    --golge-2: 0 2px 4px rgba(20,29,45,.05), 0 6px 18px rgba(20,29,45,.06);
    --golge-3: 0 4px 8px rgba(20,29,45,.05), 0 14px 34px rgba(20,29,45,.09);
    --golge-4: 0 24px 70px rgba(20,29,45,.13);
    --golge-ana: 0 6px 16px rgba(29,63,115,.26), 0 2px 4px rgba(29,63,115,.18);

    --r-k: 8px;    /* kucuk */
    --r-o: 10px;   /* orta  */
    --r-b: 12px;   /* buyuk */
    --r-t: 16px;   /* tam   */

    /* Yazi tipleri ortak.php icinde Google Fonts'tan yuklenir.
       Yuklenemezse listedeki sistem yazi tipine duser; sayfa yine
       okunur kalir, yalnizca karakteri degisir. */
    --yazi: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --yazi-tek: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --yazi-baslik: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
    --yay:   420ms cubic-bezier(.34, 1.56, .64, 1);

    --kenar-genislik: 264px;
}

/* =====================================================================
   SEÇKİN TEMA PALETİ
   ---------------------------------------------------------------------
   safir          : Modern, temiz ve nötr kurumsal safir mavi (Varsayılan & Gece Modu Uyumlu)
   pudra_rose     : Zarif rose pembe, güzellik ve kadın kuaförü
   ===================================================================== */

/* --- 1. Safir (Varsayılan) --- */
:root {
    --ana:        #1d3f73;
    --ana-koyu:   #142c52;
    --ana-acik:   #4068a3;
    --ana-parlak: #2563eb;

    --zemin:      #f5f7fb;
    --yuzey:      #ffffff;
    --yuzey-2:    #eef2f8;
    --yuzey-3:    #dfe6f1;

    --metin:      #0f172a;
    --metin-2:    #475569;
    --metin-3:    #94a3b8;

    --cizgi:      #e2e8f0;
    --cizgi-koyu: #cbd5e1;

    --kenar-zemin:   #101f3a;
    --kenar-zemin-2: #16305c;

    --r-k: 8px;  --r-o: 12px;  --r-b: 16px;  --r-t: 20px;
    --golge-1: 0 1px 3px rgba(15,23,42,.04);
    --golge-2: 0 4px 12px rgba(15,23,42,.06);
    --golge-3: 0 12px 30px rgba(15,23,42,.08);
    --golge-4: 0 20px 50px rgba(15,23,42,.12);
    --golge-ana: 0 6px 18px rgba(29,63,115,.25);
    --yazi-baslik: var(--yazi);
}

[data-tema="safir"] {
    --ana:        #1d3f73;
    --ana-koyu:   #142c52;
    --ana-acik:   #4068a3;
    --ana-parlak: #2563eb;

    --zemin:      #f5f7fb;
    --yuzey:      #ffffff;
    --yuzey-2:    #eef2f8;
    --yuzey-3:    #dfe6f1;

    --metin:      #0f172a;
    --metin-2:    #475569;
    --metin-3:    #94a3b8;

    --cizgi:      #e2e8f0;
    --cizgi-koyu: #cbd5e1;

    --kenar-zemin:   #101f3a;
    --kenar-zemin-2: #16305c;
}

/* --- 2. Pembe Kuvars (Güzellik Salonu ve Kadın Kuaförü) ------------ */
[data-tema="pudra_rose"] {
    --ana:        #ec4899;
    --ana-koyu:   #db2777;
    --ana-acik:   #f472b6;
    --ana-parlak: #f472b6;

    --zemin:      #fdf2f8;
    --yuzey:      #ffffff;
    --yuzey-2:    #fce7f3;
    --yuzey-3:    #fbcfe8;

    --metin:      #371b28;
    --metin-2:    #704456;
    --metin-3:    #9d6e82;

    --cizgi:      #fbcfe8;
    --cizgi-koyu: #f472b6;

    --kenar-zemin:   #4a0e2e;
    --kenar-zemin-2: #6b1d44;

    --r-k: 12px;  --r-o: 18px;  --r-b: 24px;  --r-t: 30px;
    --golge-1: 0 2px 8px rgba(236,72,153,.05);
    --golge-2: 0 6px 20px rgba(236,72,153,.08);
    --golge-3: 0 14px 40px rgba(236,72,153,.11);
    --golge-4: 0 24px 70px rgba(236,72,153,.15);
    --golge-ana: 0 8px 24px rgba(236,72,153,.25);
    --yazi-baslik: var(--yazi);
}

/* =====================================================================
   YONETIM PANELI
   ---------------------------------------------------------------------
   Kendi koyu paletini kullanir; salonun sectigi tema super admin
   ekranini degistirmemeli.

   Yazi olculeri urunun geri kalanindan bir tik BUYUKTUR: burada uzun
   tablolar ve rakamlar okunur, gun boyu bakilan bir ekrandir.
   ===================================================================== */
.yonetim {
    --kenar-genislik: 260px;
    font-size: 0.95rem;
}

.yonetim .kenar__bag   { font-size: 0.98rem; padding: 12px 14px; gap: 12px; }
.yonetim .kenar__bag svg { width: 19px; height: 19px; }
.yonetim .kenar__marka { padding-bottom: 16px; }
.yonetim .marka        { font-size: 1.15rem; }

.yonetim .tepe         { min-height: 60px; font-size: 0.95rem; }
.yonetim .sayfa-basligi { margin-bottom: 20px; }
.yonetim .sayfa-basligi p { font-size: 0.98rem; }

.yonetim table         { font-size: 0.92rem; }
.yonetim thead th      { font-size: 0.85rem; padding: 12px 16px; }
.yonetim tbody td      { padding: 12px 16px; }

.yonetim .rozet        { font-size: 0.82rem; padding: 4px 10px; }
.yonetim .olcum__deger { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.yonetim .olcum__etiket { font-size: 0.88rem; }
.yonetim .olcum__alt   { font-size: 0.92rem; }
.yonetim .uyari        { font-size: 0.95rem; padding: 14px 16px; }
.yonetim .dugme        { font-size: 0.95rem; min-height: 44px; }
.yonetim .dugme--kucuk { font-size: 0.88rem; min-height: 36px; }
.yonetim .alan > span  { font-size: 0.92rem; }
.yonetim .alan input,
.yonetim .alan select,
.yonetim .alan textarea,
.yonetim .girdi        { font-size: 0.95rem; min-height: 46px; }
.yonetim .secim__ad    { font-size: 0.98rem; }
.yonetim .secim__alt   { font-size: 0.88rem; }
.yonetim h2            { font-size: 1.2rem; }

/* Koyu zeminde ana renk lacivert degil ACIK mavi olmali; lacivert
   lacivertin ustunde okunmaz. */
.yonetim {
    --zemin:      #0b1220;
    --yuzey:      #111c33;
    --yuzey-2:    #162341;
    --yuzey-3:    #1e2f52;
    --metin:      #f1f5f9;
    --metin-2:    #94a3b8;
    --metin-3:    #64748b;
    --cizgi:      #1e2f52;
    --cizgi-koyu: #2b4372;
    --ana:        #38bdf8;
    --ana-koyu:   #0ea5e9;
    --ana-acik:   #7dd3fc;
    --golge-1: 0 1px 2px rgba(0,0,0,.30);
    --golge-2: 0 2px 8px rgba(0,0,0,.35);
    --golge-3: 0 8px 24px rgba(0,0,0,.40);
    --golge-4: 0 16px 48px rgba(0,0,0,.50);
    --golge-ana: 0 6px 18px rgba(56,189,248,.30);
    --ok-zemin:    rgba(5,150,105,.18);
    --uyari-zemin: rgba(217,119,6,.18);
    --hata-zemin:  rgba(220,38,38,.18);
}

/* --- 2. Temel -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    font-size: 93.75%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--yazi);
    background: var(--zemin);
    color: var(--metin);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--yazi-baslik);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Akiskan baslik boyutlari: ayri mobil kurallari gerekmez. */
h1 { font-size: clamp(1.95rem, 1.45rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem,  1.08rem + .55vw, 1.5rem); }

p { color: var(--metin-2); font-size: 1.02rem; }

:focus-visible {
    outline: 3px solid var(--ana-acik);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hareketi azaltilmis cihazlarda tum animasyonlar durur. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ekran okuyucuya gorunur, goze gorunmez */
.gizli-metin {
    position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* --- 3. Duzen -------------------------------------------------------- */

/*
 * Icerik genisligi.
 *
 * 1200px darsi: 1920px ekranda ekranin %38'i bos kaliyordu, sayfa
 * ortada sikismis gorunuyordu. 1440'a cikarildi.
 *
 * Sinirsiz genisletilmez: metin satiri cok uzarsa goz satir basini
 * bulmakta zorlanir. Uzun metin bloklari ayrica ch birimiyle
 * daraltilir (bkz. .vitrin__alt, .bolum__baslik p).
 */
.kapsayici { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: 24px; }
.kapsayici--dar { max-width: 860px; }
.kapsayici--genis { max-width: 1840px; }

.izgara { display: grid; gap: 20px; }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.satir--ara { justify-content: space-between; }
.itele { margin-left: auto; }

/* --- 4. Bilesenler --------------------------------------------------- */

/* Dugme */
.dugme {
    --dugme-zemin: var(--yuzey);
    --dugme-metin: var(--metin);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 52px;
    padding: 0 24px;

    font: inherit;
    font-weight: 650;
    font-size: 1.02rem;
    line-height: 1;

    color: var(--dugme-metin);
    background: var(--dugme-zemin);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r-o);

    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--golge-1);

    transition: transform var(--gecis), box-shadow var(--gecis),
                background var(--gecis), border-color var(--gecis);
}

.dugme:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--golge-2); }
.dugme:active { transform: translateY(0); box-shadow: var(--golge-1); }
.dugme[disabled], .dugme--pasif {
    opacity: .5; pointer-events: none; transform: none;
}

.dugme--birincil {
    --dugme-metin: #fff;
    background: linear-gradient(140deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
    border-color: transparent;
    box-shadow: var(--golge-ana);
}
.dugme--birincil:hover { box-shadow: 0 10px 24px rgba(37,99,235,.34); }

.dugme--hata { --dugme-metin:#fff; background: var(--hata); border-color: transparent; }
.dugme--ok   { --dugme-metin:#fff; background: var(--ok);   border-color: transparent; }
.dugme--sade { background: transparent; border-color: transparent; box-shadow: none; }
.dugme--sade:hover { background: var(--yuzey-2); box-shadow: none; }

.dugme--kucuk { min-height: 42px; padding: 0 16px; font-size: .93rem; border-radius: var(--r-k); }
.dugme--buyuk { min-height: 60px; padding: 0 32px; font-size: 1.12rem; }
.dugme--tam   { width: 100%; }

/* Kart */
.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    padding: 22px;
    box-shadow: var(--golge-1);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.kart--tikla { cursor: pointer; }
.kart--tikla:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-3);
    border-color: var(--ana-acik);
}

/* 3B egilme.
   Kapsayiciya perspektif verilir; kart fareyle uzerine gelindiginde
   hafifce one egilir. Buyuk aci mide bulandirir, 4 derece yeterli. */
.uc-boyut { perspective: 1000px; }
.uc-boyut > .kart {
    transform-style: preserve-3d;
    transition: transform var(--yay), box-shadow var(--gecis);
}
.uc-boyut:hover > .kart {
    transform: translateY(-6px) rotateX(4deg) rotateY(-4deg) scale(1.015);
    box-shadow: var(--golge-4);
}
/* Kartin icindeki simge, kartin biraz onunde durur. */
.uc-boyut .kart__simge { transform: translateZ(28px); }

/* Cam etkisi — ustteki serit ve acilir katmanlarda. */
.cam {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.5);
}
.yonetim .cam {
    background: rgba(17,28,51,.76);
    border-color: rgba(255,255,255,.08);
}

/* Form alani */
.alan { display: block; margin-bottom: 18px; }

.alan > span,
.alan__etiket {
    display: block;
    margin-bottom: 8px;
    font-size: .96rem;
    font-weight: 650;
    color: var(--metin-2);
}

.alan input,
.alan select,
.alan textarea,
.girdi {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;

    font: inherit;
    font-size: 1.05rem;
    color: var(--metin);

    background: var(--yuzey);
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--r-o);

    transition: border-color var(--gecis), box-shadow var(--gecis);
    /* iOS 16px altinda alana dokununca sayfayi yakinlastirir. */
    font-size: max(1rem, 16px);
}

.alan textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.alan input:focus,
.alan select:focus,
.alan textarea:focus,
.girdi:focus {
    outline: none;
    border-color: var(--ana);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ana) 16%, transparent);
}

.alan__yardim { display:block; margin-top:7px; font-size:.9rem; color: var(--metin-3); }

/* Bildirim ekraninda betik.js bu iki sinifi ekliyor: islem sonucunun
   yesil mi turuncu mu oldugu tek bakista anlasilsin. */
.alan__yardim--ok    { color: var(--ok); }
.alan__yardim--uyari { color: var(--uyari); }
.alan__yardim:empty  { display: none; }
.alan--hata input, .alan--hata select, .alan--hata textarea { border-color: var(--hata); }

/* Secim kutusu — buyuk, parmakla basilabilir */
.secim {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 17px 19px;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--r-o);
    cursor: pointer;

    transition: border-color var(--gecis), background var(--gecis),
                transform var(--gecis), box-shadow var(--gecis);
}
.secim:hover { border-color: var(--ana-acik); transform: translateY(-2px); box-shadow: var(--golge-2); }
.secim input { width: 22px; height: 22px; accent-color: var(--ana); flex: none; }
.secim__govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.secim__ad  { font-weight: 650; font-size: 1.05rem; }
.secim__alt { font-size: .92rem; color: var(--metin-3); }
.secim--secili { border-color: var(--ana); background: color-mix(in srgb, var(--ana) 6%, var(--yuzey)); }

/* Rozet */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-k);
    font-size: .83rem;
    font-weight: 700;
    line-height: 1;
    background: var(--yuzey-2);
    color: var(--metin-2);
    white-space: nowrap;
    border: 1px solid transparent;
}
.rozet--ok    { background: var(--ok-zemin);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.rozet--uyari { background: var(--uyari-zemin); color: var(--uyari); border-color: color-mix(in srgb, var(--uyari) 25%, transparent); }
.rozet--hata  { background: var(--hata-zemin);  color: var(--hata);  border-color: color-mix(in srgb, var(--hata) 25%, transparent); }
.rozet--ana   { background: color-mix(in srgb, var(--ana) 14%, transparent); color: var(--ana); border-color: color-mix(in srgb, var(--ana) 25%, transparent); }

/* Uyari kutusu */
.uyari {
    display: flex;
    gap: 13px;
    padding: 17px 19px;
    margin-bottom: 20px;
    background: var(--yuzey-2);
    border-left: 4px solid var(--metin-3);
    border-radius: var(--r-k);
    font-size: 1.01rem;
    color: var(--metin-2);
}
.uyari strong { display: block; color: var(--metin); margin-bottom: 3px; }
.uyari--ok    { background: var(--ok-zemin);    border-color: var(--ok); }
.uyari--uyari { background: var(--uyari-zemin); border-color: var(--uyari); }
.uyari--hata  { background: var(--hata-zemin);  border-color: var(--hata); }

/* Tablo */
.tablo-sar {
    /* Genis tablo kendi icinde kayar; sayfa yatay kaymaz. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    box-shadow: var(--golge-1);
}

table { width: 100%; border-collapse: collapse; font-size: 1.01rem; }

thead th {
    padding: 15px 18px;
    text-align: left;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--metin-3);
    background: var(--yuzey-2);
    border-bottom: 1px solid var(--cizgi);
    white-space: nowrap;
}

tbody td { padding: 16px 18px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--gecis), border-color var(--gecis); }
tbody tr:hover { background: color-mix(in srgb, var(--ana) 4%, var(--yuzey-2)); }

.sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* Bos durum */
.bos {
    padding: 52px 24px;
    text-align: center;
    color: var(--metin-3);
}
.bos svg { width: 46px; height: 46px; margin: 0 auto 14px; opacity: .4; }
.bos strong { display: block; color: var(--metin-2); font-size: 1.05rem; margin-bottom: 5px; }

/* Olcum karti */
.olcum {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    box-shadow: var(--golge-1);
    backdrop-filter: blur(12px);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.olcum:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.18), 0 0 20px color-mix(in srgb, var(--ana) 15%, transparent);
    border-color: color-mix(in srgb, var(--ana) 30%, var(--cizgi));
}

/* Ust kenardaki renk seridi */
.olcum::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
}

.olcum__etiket { font-size: .89rem; font-weight: 650; color: var(--metin-3);
                 text-transform: uppercase; letter-spacing: .05em; }
.olcum__deger  { font-size: clamp(1.9rem, 1.55rem + 1.3vw, 2.6rem); font-weight: 800;
                 letter-spacing: -.03em; margin: 7px 0 3px; font-variant-numeric: tabular-nums; }
.olcum__alt    { font-size: .93rem; color: var(--metin-3); }
.olcum__simge  { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px;
                 display: grid; place-items: center; border-radius: var(--r-k);
                 background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana); }
.olcum__simge svg { width: 22px; height: 22px; }

/* --- 5. Tanitim sitesi ----------------------------------------------- */

.ust-serit {
    position: sticky; top: 0; z-index: 50;
    padding: 14px 0;
    border-bottom: 1px solid var(--cizgi);
}

.marka { display: flex; align-items: center; gap: 10px; font-weight: 800;
         font-size: 1.12rem; letter-spacing: -.02em; color: var(--metin); }
.marka:hover { text-decoration: none; }
.marka__simge {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
    color: #fff;
    box-shadow: var(--golge-ana);
}
.marka__simge svg { width: 21px; height: 21px; }

/* Vitrin */
.vitrin {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 9vw, 108px) 0;
    text-align: center;
}

/* Arka plandaki yumusak isik lekeleri — derinlik hissi verir. */
.vitrin::before {
    content: '';
    position: absolute; inset: -40% -10% auto -10%; height: 130%;
    background:
        radial-gradient(46% 42% at 22% 18%, color-mix(in srgb, var(--ana) 20%, transparent), transparent 70%),
        radial-gradient(40% 38% at 80% 12%, color-mix(in srgb, var(--ana-parlak, var(--ana)) 18%, transparent), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}
.vitrin > * { position: relative; }

.vitrin h1 { max-width: 16ch; margin-inline: auto; }
.vitrin__alt { max-width: 54ch; margin: 18px auto 30px; font-size: clamp(1rem, .95rem + .4vw, 1.18rem); }
.vitrin__dugmeler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.etiket-serit {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 15px; margin-bottom: 22px;
    font-size: .85rem; font-weight: 650;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ana) 12%, transparent);
    color: var(--ana);
}

.bolum { padding: clamp(48px, 7vw, 88px) 0; }
.bolum__baslik { text-align: center; margin-bottom: 42px; }
.bolum__baslik p { max-width: 56ch; margin: 12px auto 0; }

/* Ozellik karti */
.ozellik { height: 100%; }
.ozellik__simge {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    margin-bottom: 16px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
    color: #fff;
    box-shadow: var(--golge-ana);
}
.ozellik__simge svg { width: 25px; height: 25px; }
.ozellik h3 { margin-bottom: 7px; }
.ozellik p { font-size: .95rem; }

/* Paket karti */
.paket { display: flex; flex-direction: column; height: 100%; }
.paket--one-cikan { border-color: var(--ana); box-shadow: var(--golge-3); }
.paket__fiyat { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 4px; }
.paket__fiyat small { font-size: .95rem; font-weight: 600; color: var(--metin-3); }
.paket ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 11px; }
.paket li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--metin-2); }
.paket li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok); }
.paket .dugme { margin-top: auto; }

/* SSS */
.sss { border: 1px solid var(--cizgi); border-radius: var(--r-o); background: var(--yuzey);
       margin-bottom: 11px; overflow: hidden; }
.sss summary { padding: 17px 20px; font-weight: 650; cursor: pointer; list-style: none;
               display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; font-size: 1.4rem; color: var(--metin-3); flex: none;
                      transition: transform var(--gecis); }
.sss[open] summary::after { transform: rotate(45deg); }
.sss__govde { padding: 0 20px 19px; color: var(--metin-2); font-size: .95rem; }

/* Alt bilgi */
.alt-bilgi { padding: 44px 0 32px; border-top: 1px solid var(--cizgi); color: var(--metin-3);
             font-size: .9rem; }

/* --- 6. Randevu akisi ------------------------------------------------ */

.adimlar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 30px;
}

.adim { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.adim__no {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1rem; font-weight: 700;
    background: var(--yuzey-2); color: var(--metin-3);
    border: 2px solid var(--cizgi);
    transition: all var(--gecis);
}
.adim__ad { font-size: .97rem; font-weight: 650; color: var(--metin-3);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adim__cizgi { flex: 1; height: 2px; background: var(--cizgi); border-radius: 2px; min-width: 12px; }

.adim--etkin .adim__no { background: var(--ana); border-color: var(--ana); color: #fff;
                         box-shadow: var(--golge-ana); }
.adim--etkin .adim__ad { color: var(--metin); }
.adim--bitti .adim__no { background: var(--ok); border-color: var(--ok); color: #fff; }
.adim--bitti .adim__ad { color: var(--metin-2); }

/* Saat izgarasi */
.saatler { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 11px; }
.saat {
    min-height: 56px;
    display: grid; place-items: center;
    font-weight: 650;
    font-size: 1.06rem;
    font-variant-numeric: tabular-nums;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--r-o);
    cursor: pointer;
    transition: all var(--gecis);
}
.saat:hover { border-color: var(--ana); transform: translateY(-2px); box-shadow: var(--golge-2); }
.saat--secili { background: var(--ana); border-color: var(--ana); color: #fff; box-shadow: var(--golge-ana); }
.saat--dolu { opacity: .35; pointer-events: none; text-decoration: line-through; }

/* Gun secici */
.gunler { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.gun {
    flex: none; width: 86px; padding: 13px 7px;
    text-align: center;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--r-o);
    cursor: pointer;
    transition: all var(--gecis);
}
.gun:hover { border-color: var(--ana); transform: translateY(-2px); }
.gun--secili { background: var(--ana); border-color: var(--ana); color: #fff; box-shadow: var(--golge-ana); }
.gun--secili .gun__ay, .gun--secili .gun__ad { color: rgba(255,255,255,.85); }
.gun__ad  { font-size: .81rem; font-weight: 650; color: var(--metin-3); text-transform: uppercase; }
.gun__no  { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.gun__ay  { font-size: .81rem; color: var(--metin-3); }
.gun--kapali { opacity: .35; pointer-events: none; }

/* Iki sutunlu akis: solda adimlar, sagda kalici ozet.
   Ozet her adimda gorunur; musteri ne sectigini ve ne odeyecegini
   surekli onunde tutar. */
.akis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}

.akis__govde { min-width: 0; }

.akis__ozet { position: sticky; top: 86px; }

.ozet-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    padding: 20px;
    box-shadow: var(--golge-2);
}
.ozet-kart h2 {
    font-size: 1.05rem;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi);
}
.ozet-kart dd { margin: 0; }

.soluk { color: var(--metin-3); font-weight: 400; }

/* Secilemeyen secim karti */
.secim--kapali { opacity: .45; pointer-events: none; }

/* Ozet kutusu */
.ozet { background: var(--yuzey-2); border-radius: var(--r-b); padding: 20px; }
.ozet__satir { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
               border-bottom: 1px dashed var(--cizgi-koyu); font-size: 1.01rem; }
.ozet__satir:last-child { border-bottom: 0; }
.ozet__satir dt { color: var(--metin-3); }
.ozet__satir dd { font-weight: 650; text-align: right; }
.ozet__toplam { font-size: 1.15rem; font-weight: 800; }

/* --- 7. Panel -------------------------------------------------------- */

.panel-duzen { display: flex; min-height: 100vh; }

.kenar {
    width: var(--kenar-genislik);
    flex: none;
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column;
    padding: 20px 14px;
    background: var(--yuzey);
    border-right: 1px solid var(--cizgi);
    overflow-y: auto;
}
.yonetim .kenar { background: var(--yuzey); }

.kenar__marka { padding: 0 10px 20px; margin-bottom: 8px; border-bottom: 1px solid var(--cizgi); }
.kenar__marka .marka { font-family: var(--yazi-baslik); font-size: 1.25rem; }

.kenar__baslik { padding: 18px 12px 8px; font-size: .79rem; font-weight: 700;
                 text-transform: uppercase; letter-spacing: .07em; color: var(--metin-3); }

.kenar__bag {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; margin-bottom: 3px;
    border-radius: var(--r-k);
    color: var(--metin-2);
    font-weight: 600; font-size: 1.04rem;
    transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.kenar__bag:hover { background: var(--yuzey-2); color: var(--metin); text-decoration: none;
                    transform: translateX(2px); }
.kenar__bag svg { width: 21px; height: 21px; flex: none; opacity: .8; }
.kenar__bag--etkin {
    background: color-mix(in srgb, var(--ana) 12%, transparent);
    color: var(--ana);
}
.kenar__bag--etkin svg { opacity: 1; }

/* "Telefona kur" dugmesi: menudeki diger baglantilardan ayrilsin ama
   dikkat dagitmasin. hidden ozniteligi betik.js tarafindan kaldirilir;
   display kurali olmasaydi hidden bir dugme flex icinde yine gorunurdu. */
.kenar__bag--kur[hidden] { display: none; }
.kenar__bag--kur         { color: var(--ana); }
.kenar__bag--kur svg     { opacity: 1; }

.kenar__alt { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cizgi); }

.ana-alan { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tepe {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    min-height: 66px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--cizgi);
}

.icerik { flex: 1; padding: 26px 24px 48px; }

/* Sayfa basligi randevu akisiyla ayni dilde: ustte kucuk etiket,
   altinda Playfair baslik. */
.sayfa-basligi {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cizgi);
}
.sayfa-basligi h1 {
    font-family: var(--yazi-baslik);
    font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
    margin: 0;
}
.sayfa-basligi p { margin-top: 7px; max-width: 70ch; }
.sayfa-basligi .bk-etiket { margin-bottom: 6px; }

/* Panel icindeki bolum basliklari da serif olsun; ekranlar arasi
   tutarlilik icin h2/h3 tek yerden yonetilir. */
.icerik h2, .icerik h3 { font-family: var(--yazi-baslik); }

/* Kart icindeki bolum basligi: ustte ince ayirici */
.kart > h2:first-child,
.kart > h3:first-child { margin-top: 0; }

/* Menu dugmesi — yalnizca mobilde gorunur */
.menu-dugme { display: none; }

/* Randevu satiri (takvim) */
.randevu-satir {
    display: flex; align-items: center; gap: 15px;
    padding: 15px 17px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--metin-3);
    border-radius: var(--r-o);
    margin-bottom: 10px;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.randevu-satir:hover { transform: translateX(3px); box-shadow: var(--golge-2); }
.randevu-satir--bekliyor   { border-left-color: var(--ana); }
.randevu-satir--geldi      { border-left-color: var(--uyari); }
.randevu-satir--tamamlandi { border-left-color: var(--ok); }
.randevu-satir--gelmedi    { border-left-color: var(--hata); }
.randevu-satir--iptal      { border-left-color: var(--metin-3); opacity: .55; }

.randevu-saat { font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums;
                min-width: 70px; }
.randevu-govde { flex: 1; min-width: 0; }
.randevu-ad { font-weight: 650; font-size: 1.06rem; }
.randevu-alt { font-size: .94rem; color: var(--metin-3); }

/* --- 8. Mobil -------------------------------------------------------- */

@media (max-width: 1024px) {
    :root { --kenar-genislik: 240px; }
}

@media (max-width: 860px) {
    /* Kenar cubugu ekranin disina cikar, dugmeyle iceri kayar. */
    .kenar {
        position: fixed; inset: 0 auto 0 0;
        z-index: 100;
        width: 280px;
        transform: translateX(-100%);
        transition: transform var(--gecis);
        box-shadow: var(--golge-4);
    }
    .kenar--acik { transform: translateX(0); }

    .menu-dugme {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: none;
        background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
        border-radius: var(--r-k); cursor: pointer; color: var(--metin);
    }
    .menu-dugme svg { width: 21px; height: 21px; }

    .perde {
        position: fixed; inset: 0; z-index: 90;
        background: rgba(15,23,42,.5);
        backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none;
        transition: opacity var(--gecis);
    }
    .perde--acik { opacity: 1; pointer-events: auto; }

    .icerik { padding: 20px 16px 40px; }
    .tepe   { padding: 10px 16px; }
    .kapsayici { padding-inline: 16px; }

    /* Ozet dar ekranda sag sutun olmaktan cikip icerigin ALTINA
       gecer. Ustte birakilsaydi, hizmet listesine ulasmak icin her
       seferinde ozeti kaydirmak gerekirdi. */
    .akis { grid-template-columns: 1fr; }
    .akis__ozet { position: static; order: 2; }

    /* 3B egilme dokunmatikte anlamsiz; kapatilir. */
    .uc-boyut:hover > .kart { transform: none; box-shadow: var(--golge-2); }
}

@media (max-width: 560px) {
    .izgara { gap: 14px; }
    .kart { padding: 18px; border-radius: var(--r-o); }
    .dugme--tam-mobil { width: 100%; }

    /* Adim adlari dar ekrana sigmaz; yalnizca numaralar kalir. */
    .adim__ad { display: none; }
    .adim { flex: 0 0 auto; }

    .saatler { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }

    /* Tablo satirlari karta doner. */
    .tablo-kart thead { display: none; }
    .tablo-kart tbody tr {
        display: block; padding: 14px;
        border: 1px solid var(--cizgi); border-radius: var(--r-o);
        margin-bottom: 10px; background: var(--yuzey);
    }
    .tablo-kart tbody td {
        display: flex; justify-content: space-between; gap: 14px;
        padding: 6px 0; border: 0; text-align: right;
    }
    .tablo-kart tbody td::before {
        content: attr(data-etiket);
        font-weight: 650; color: var(--metin-3); text-align: left;
    }
    .tablo-sar { border: 0; background: transparent; box-shadow: none; }
}

/* =====================================================================
   9. RANDEVU VITRINI
   ---------------------------------------------------------------------
   Referans alinan randevu akisinin duzeni: ust serit + baslik, dort
   adimli ilerleme cubugu, solda icerik / sagda sabit ozet.
   Olculer referanstan alindi; renkler lacivert palete cevrildi.
   ===================================================================== */

.bk-ustserit {
    background: var(--yuzey);
    box-shadow: 0 1px 4px rgba(20,29,35,.05);
    padding: 14px 0 18px;
    margin-bottom: 24px;
}

.bk-ustserit__satir {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
}

.bk-geri, .bk-site {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 0 14px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-k);
    color: var(--metin-2);
    font-size: .92rem; font-weight: 600;
    background: var(--yuzey);
    transition: all var(--gecis);
}
.bk-geri {
    width: 42px; height: 42px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--cizgi);
    background: var(--yuzey);
    color: var(--metin-2);
    box-shadow: var(--golge-1);
    transition: all var(--gecis);
}
.bk-geri:hover {
    text-decoration: none; border-color: var(--ana); color: var(--ana);
    transform: scale(1.05);
}
.bk-site {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 999px;
    border: 1px solid var(--cizgi);
    background: var(--yuzey);
    color: var(--metin-2);
    font-size: 0.88rem; font-weight: 600;
    box-shadow: var(--golge-1);
    transition: all var(--gecis);
}
.bk-site:hover {
    text-decoration: none; border-color: var(--ana); color: var(--ana);
}

.bk-marka { flex: 1; display: flex; justify-content: center; align-items: center; }
.bk-marka img {
    max-height: 56px;
    max-width: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.bk-marka__ad {
    font-family: var(--yazi-baslik);
    font-size: 1.35rem; font-weight: 700; color: var(--metin);
    letter-spacing: -.01em;
}
.bk-marka a:hover { text-decoration: none; }

.bk-ustserit__baslik { text-align: left; padding-top: 14px; margin-bottom: 20px; }

/* Basligin ustundeki kucuk etiket: "— ONLINE RANDEVU —" */
.bk-etiket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ana);
    margin-bottom: 8px;
}
.bk-etiket::before, .bk-etiket::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: var(--ana);
    opacity: 0.6;
}

.bk-ustserit__baslik h1 {
    font-family: var(--yazi-baslik);
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0;
    color: var(--metin);
}

.bk-kapsayici {
    max-width: 1220px;
    width: 100%;
    margin-inline: auto;
    padding: 0 20px 60px;
    flex: 1;
}

/* --- 4 Kartli Ilerleme Cubugu (Gorsel 5 ile Birebir) ----------------- */

.bk-adim-kartlar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.bk-adim-kart {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: var(--golge-1);
    text-decoration: none;
    transition: all var(--gecis);
}
.bk-adim-kart__simge {
    width: 32px; height: 32px; min-width: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 0.88rem; font-weight: 700;
    background: var(--yuzey-2);
    color: var(--metin-3);
}
.bk-adim-kart__metin {
    font-size: 0.92rem; font-weight: 600;
    color: var(--metin-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bk-adim-kart--bitti {
    border-color: #10b981;
    background: #ffffff;
}
.bk-adim-kart--bitti .bk-adim-kart__simge {
    background: #10b981;
    color: #ffffff;
}
.bk-adim-kart--bitti .bk-adim-kart__metin {
    color: #065f46;
    font-weight: 700;
}

.bk-adim-kart--etkin {
    border-color: var(--ana);
    background: #ffffff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ana) 20%, transparent);
}
.bk-adim-kart--etkin .bk-adim-kart__simge {
    background: var(--ana);
    color: #ffffff;
}
.bk-adim-kart--etkin .bk-adim-kart__metin {
    color: var(--ana);
    font-weight: 800;
}

@media (max-width: 768px) {
    .bk-adim-kartlar {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .bk-adim-kart {
        padding: 10px 12px;
    }
    .bk-adim-kart__metin {
        font-size: 0.84rem;
    }
}

/* --- Yapiskan Alt Cubuk (Gorsel 4 & Modern Büyütülmüş) ---------------- */

.bk-yapiskan-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(140px);
    width: calc(100% - 32px);
    max-width: 960px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    padding: 18px 28px;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
}
.bk-yapiskan-bar--gorunur {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}
.bk-yapiskan-metin {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bk-yapiskan-baslik {
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.bk-yapiskan-alt {
    font-size: 1.02rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk-yapiskan-dugme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--ana);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 1.12rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    min-height: 52px;
}
.bk-yapiskan-dugme:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45);
}
.bk-yapiskan-dugme:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 640px) {
    .bk-yapiskan-bar {
        padding: 14px 18px;
        bottom: 16px;
        border-radius: 18px;
    }
    .bk-yapiskan-baslik {
        font-size: 1.15rem;
    }
    .bk-yapiskan-alt {
        font-size: 0.88rem;
    }
    .bk-yapiskan-dugme {
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* Gecmise donuk uyumluluk */
.bk-ilerleme { display: none; }

/* --- Iki sutunlu duzen ----------------------------------------------- */

.bk-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.bk-govde { min-width: 0; }

/* Fiyat bilgilendirme seridi (Her temada %100 net ve okunur) */
.bk-bilgi {
    padding: 14px 20px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--ana) 12%, var(--yuzey));
    border: 1px solid color-mix(in srgb, var(--ana) 28%, var(--cizgi));
    border-radius: var(--r-k);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--metin);
    line-height: 1.55;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* --- Hizmet / usta secim satirlari ----------------------------------- */

.bk-liste { display: grid; gap: 12px; margin-bottom: 24px; }

.bk-secenek {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-o);
    cursor: pointer;
    transition: all 0.2s ease;
}
.bk-secenek:hover { border-color: var(--ana-acik); box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }

.bk-secenek input { width: 22px; height: 22px; accent-color: var(--ana); cursor: pointer; }

.bk-secenek__ad  { font-weight: 700; font-size: 1.08rem; color: var(--metin); }
.bk-secenek__alt { display: block; font-size: 0.92rem; color: var(--metin-3); margin-top: 3px; }

.bk-secenek__fiyat {
    font-weight: 800; font-size: 1.15rem; white-space: nowrap;
    color: var(--ana);
}

.bk-secenek--secili {
    border-color: var(--ana);
    background: color-mix(in srgb, var(--ana) 6%, var(--yuzey));
    box-shadow: 0 0 0 2px var(--ana);
}
.bk-secenek--kapali { opacity: .45; pointer-events: none; }

/* --- Modernize Edilmiş Randevu Özeti Paneli -------------------------- */

.bk-ozet {
    position: sticky;
    top: 24px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.bk-ozet__baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ana) 6%, var(--yuzey)), var(--yuzey));
    border-bottom: 1px solid var(--cizgi);
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--metin);
}

.bk-ozet__adim-rozet {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--ana);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
}

.bk-ozet dl {
    margin: 0;
    padding: 16px 24px 22px;
}

.bk-ozet__satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
    font-size: 1rem;
}
.bk-ozet__satir:last-child { border-bottom: 0; }
.bk-ozet__satir dt {
    color: var(--metin-2);
    font-weight: 700;
    font-size: 0.95rem;
    flex: none;
}
.bk-ozet__satir dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--metin);
    font-size: 1rem;
}

.bk-ozet-bos {
    color: var(--metin-3);
    font-size: 0.88rem;
    font-weight: 600;
    font-style: italic;
}

.bk-ozet-hizmetler-liste {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.bk-ozet-hizmet-tag {
    display: inline-block;
    background: color-mix(in srgb, var(--ana) 10%, var(--yuzey));
    border: 1px solid color-mix(in srgb, var(--ana) 25%, transparent);
    color: var(--ana);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
}

.bk-ozet__toplam-kutu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: color-mix(in srgb, var(--ana) 8%, var(--yuzey));
    border: 1px solid color-mix(in srgb, var(--ana) 20%, transparent);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 18px;
}

.bk-ozet__toplam-etiket {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--metin-2);
    text-transform: uppercase;
}

.bk-ozet__toplam-fiyat {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--ana);
    line-height: 1.1;
    margin-top: 2px;
}

.bk-ozet__odeme-rozet {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--metin-2);
    background: color-mix(in srgb, var(--metin) 8%, var(--yuzey));
    border: 1px solid var(--cizgi);
    padding: 5px 10px;
    border-radius: 8px;
}

.bk-ozet__not {
    padding: 0 24px 20px;
    font-size: 0.85rem;
    color: var(--metin-3);
    line-height: 1.5;
}

/* --- Buyuk gonder dugmesi -------------------------------------------- */

.bk-gonder {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 52px; padding: 0 26px;
    font: inherit; font-size: 1.02rem; font-weight: 700;
    color: #fff;
    background: var(--ana);
    border: 0; border-radius: var(--r-o);
    cursor: pointer;
    transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.bk-gonder:hover { background: var(--ana-koyu); transform: translateY(-1px);
                   box-shadow: var(--golge-ana); text-decoration: none; }
.bk-gonder[disabled] { opacity: .45; pointer-events: none; }

.bk-alt-satir { display: flex; gap: 12px; align-items: center; }
.bk-alt-satir .bk-gonder { width: auto; flex: 1; }

/* --- Tek kart duzeni (sorgulama, onay) ------------------------------- */

.bk-kart {
    max-width: 640px; margin-inline: auto;
    padding: 48px 32px;
    background: var(--yuzey);
    border-radius: var(--r-b);
    box-shadow: var(--golge-4);
    text-align: center;
}
.bk-kart h1 {
    font-family: var(--yazi-baslik);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    margin-bottom: 12px;
}
.bk-kart > p { margin-bottom: 26px; }
.bk-kart form, .bk-kart dl { text-align: left; }

.bk-alan { display: block; margin-bottom: 18px; text-align: left; }
.bk-alan > span {
    display: block; margin-bottom: 8px;
    font-size: .92rem; font-weight: 600; color: var(--metin-2);
}
.bk-alan input, .bk-alan textarea {
    width: 100%; min-height: 52px; padding: 14px 16px;
    font: inherit; font-size: max(1rem, 16px);
    border: 1px solid var(--cizgi-koyu); border-radius: var(--r-o);
    background: var(--yuzey); color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.bk-alan textarea { min-height: 96px; resize: vertical; }
.bk-alan input:focus, .bk-alan textarea:focus {
    outline: none; border-color: var(--ana);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 16%, transparent);
}

/* --- Mobil ----------------------------------------------------------- */

@media (max-width: 900px) {
    .bk-duzen { grid-template-columns: 1fr; gap: 22px; }
    .bk-ozet  { position: static; order: 2; }
}

@media (max-width: 560px) {
    .bk-ilerleme { gap: 5px; }
    .bk-adim small { display: none; }
    .bk-adim { padding: 8px 2px; }
    .bk-kart { padding: 30px 20px; }
    .bk-marka__ad { font-size: 1.1rem; }
    .bk-secenek { grid-template-columns: auto 1fr; row-gap: 6px; }
    .bk-secenek__fiyat { grid-column: 2; text-align: right; }
}



/* =====================================================================
   10b. TANITIM — YENI VITRIN
   ---------------------------------------------------------------------
   Sayfanin ust bandi (menu + hero) buradan biciimleniyor.

   Bolum 10 tamamen degistirildi; kalan tek eski parca iletisim
   bolumu (adim 8).
   ===================================================================== */

/*
 * Vitrin bandinin zemini AYRI bir degisken.
 *
 * --ana-koyu kullanilsaydi antrasit temada bant koyu ALTIN olurdu
 * (o temada --ana altin renktir) ve uzerindeki beyaz yazi okunmazdi.
 */
:root {
    --vitrin-zemin:   #0f2447;
    --vitrin-zemin-2: #1b3a68;
    --vitrin-metin:   #ffffff;
    --vitrin-alt:     #b9c8e0;
    --vitrin-cizgi:   rgba(255, 255, 255, .14);
}

[data-tema="buz"] {
    --vitrin-zemin:   #1e3a8a;
    --vitrin-zemin-2: #2563eb;
    --vitrin-alt:     #bfdbfe;
}

[data-tema="gece"] {
    --vitrin-zemin:   #090d16;
    --vitrin-zemin-2: #151b28;
    --vitrin-alt:     #c4b5fd;
}

[data-tema="kahve_deri"] {
    --vitrin-zemin:   #211a17;
    --vitrin-zemin-2: #332720;
    --vitrin-alt:     #fed7aa;
}

[data-tema="pudra_rose"] {
    --vitrin-zemin:   #881337;
    --vitrin-zemin-2: #be123c;
    --vitrin-alt:     #fecdd3;
}

.tn-etiket {
    display: inline-block;
    font-size: .74rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--altin);
    margin-bottom: 16px;
}

/* --- Bant ------------------------------------------------------------ */

.tn-vitrin {
    background:
        radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--altin) 16%, transparent) 0%, transparent 58%),
        linear-gradient(168deg, var(--vitrin-zemin) 0%, var(--vitrin-zemin-2) 100%);
    color: var(--vitrin-metin);
    position: relative; overflow: hidden;
    padding: 0;
}
.tn-vitrin::before { content: none; }

/* Ince altin cizgi: berber direginin sarmal seridine gonderme */
.tn-vitrin::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--altin) 22%, var(--altin) 78%, transparent);
    opacity: .75;
}
.tn-vitrin > * { position: relative; }

.tn-tepe {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 0; border-bottom: 1px solid var(--vitrin-cizgi);
}
.tn-tepe .marka {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.tn-tepe .marka:hover {
    transform: translateY(-1px);
}
.tn-tepe .marka__simge {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 14px;
    color: #fbbf24;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}
.tn-tepe .marka__yazi-grup {
    display: flex;
    flex-direction: column;
}
.tn-tepe .marka__ana-yazi {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 40%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}
.tn-tepe .marka-alt-etiket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}
.tn-tepe .marka-alt-etiket b {
    color: #f59e0b;
    font-weight: 900;
}

.tn-tepe nav {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.tn-menu {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 1.12rem;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 12px;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tn-menu:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transform: translateY(-1px);
}
.tn-menu.etkin {
    color: var(--altin);
    background: rgba(217, 119, 6, 0.12);
}

.tn-tepe__butonlar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 14px;
}

/*
 * Vitrin izgarasi.
 *
 * Hero sayfanin tam genisligini kullaniyor.
 */
/* Hero Slide-in Animations */
@keyframes tn-giris-sol {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes tn-giris-sag {
    from { opacity: 0; transform: translateX(70px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.tn-vitrin__izgara {
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: clamp(32px, 5vw, 64px); align-items: center;
    padding: clamp(56px, 7vw, 88px) 0 clamp(74px, 9vw, 118px);
}
.tn-vitrin__izgara > div:first-child {
    animation: tn-giris-sol 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tn-vitrin__izgara .tn-sahne {
    animation: tn-giris-sag 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/*
 * Tanitim basliklari Roboto.
 *
 * --yazi-baslik degiskeni temaya gore serif olabiliyor (safir'de
 * Playfair, gul'de Georgia). Tanitim sayfasi tek bir marka yuzu
 * gostermeli; salon sayfalari kendi temasinin basligini kullanmaya
 * devam ediyor.
 */
.tn-vitrin h1,
.tn-vitrin h2,
.tn-vitrin h3 { font-family: var(--yazi); }

.tn-vitrin h1 {
    color: #fff;
    font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.1rem);
    line-height: 1.02; letter-spacing: -.03em; font-weight: 900;
    margin-bottom: 22px;
}

/*
 * Altin gecis yalnizca vurgu kelimesinde.
 * color once yaziliyor: background-clip desteklenmezse kelime kaybolmaz.
 */
.tn-vitrin h1 em {
    font-style: normal;
    color: var(--altin);
    background: linear-gradient(96deg, #e9d1a3 0%, var(--altin) 46%, #a8813f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tn-vitrin__alt {
    font-size: clamp(1.1rem, 1rem + .5vw, 1.36rem);
    line-height: 1.62;
    color: var(--vitrin-alt); max-width: 46ch; margin-bottom: 34px;
}
.tn-vitrin__alt strong { color: #fff; }
.tn-vitrin__dugmeler { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.tn-vitrin__not { font-size: 1rem; color: var(--vitrin-alt); opacity: .82; }

.dugme--altin { background: var(--altin); color: #17233a; font-weight: 700; border-color: var(--altin); }
.dugme--altin:hover { background: color-mix(in srgb, var(--altin) 82%, #fff); color: #17233a; }

.tn-vitrin .dugme--sade {
    border: 1px solid var(--vitrin-cizgi); color: var(--vitrin-metin); background: none;
}
.tn-vitrin .dugme--sade:hover { border-color: var(--altin); color: #fff; }

/* --- Sahne: tarayici + telefon + rozetler ---------------------------- */

/*
 * Cihazlarin arkasindaki acik zemin.
 *
 * Koyu bant uzerinde tarayici ve telefon dogrudan yuzuyordu; nereye
 * ait olduklari belirsizdi. Arkalarindaki hafif panel ikisini tek bir
 * "sahne" haline getiriyor ve maketleri zeminden ayiriyor.
 */
.tn-sahne { position: relative; }

.tn-sahne::before {
    content: ''; position: absolute; z-index: 0;
    inset: 0 8px 14px -14px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 30px;
}

@media (min-width: 941px) {
    .tn-sahne { padding: 34px 46px 58px 30px; }
}

/* --- Guven satiri ----------------------------------------------------- */

.tn-guven {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-bottom: 26px; font-size: 1rem; color: var(--vitrin-alt);
}
.tn-guven span { display: inline-flex; align-items: center; gap: 8px; }
.tn-guven svg { color: var(--altin); flex: none; }

.tn-pencere {
    background: var(--yuzey); border-radius: 14px;
    box-shadow: 0 30px 70px rgba(4, 12, 28, .5);
    overflow: hidden; border: 1px solid rgba(255, 255, 255, .1);
    position: relative; z-index: 2;
}
.tn-pencere__cubuk {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi);
}
.tn-pencere__nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--cizgi-koyu); }
.tn-pencere__adres {
    margin-left: 8px; font-size: .78rem; font-weight: 500; color: var(--metin-3);
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 5px;
    padding: 6px 11px; flex: 1;
}
.tn-pencere__adres b { color: var(--metin); }
.tn-pencere__govde { padding: 20px; }

.tn-adimlar { display: flex; gap: 6px; margin-bottom: 20px; }
.tn-adim { flex: 1; text-align: center; font-size: .72rem; font-weight: 500; color: var(--metin-3); }
.tn-adim i { display: block; height: 3px; border-radius: 2px; background: var(--cizgi); margin-bottom: 8px; }
.tn-adim--etkin { color: var(--metin); font-weight: 700; }
.tn-adim--etkin i { background: var(--altin); }

.tn-secim {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-o);
    margin-bottom: 9px; background: var(--yuzey);
}
.tn-secim--acik { border-color: var(--altin); background: color-mix(in srgb, var(--altin) 9%, var(--yuzey)); }
.tn-secim__kutu {
    width: 19px; height: 19px; border-radius: 5px; border: 2px solid var(--cizgi-koyu);
    flex: none; display: grid; place-items: center;
}
.tn-secim--acik .tn-secim__kutu { background: var(--altin); border-color: var(--altin); }
.tn-secim__kutu svg { color: #17233a; opacity: 0; }
.tn-secim--acik .tn-secim__kutu svg { opacity: 1; }
.tn-secim__ad { display: block; font-size: 1.02rem; font-weight: 500; color: var(--metin); }
.tn-secim__alt { display: block; font-size: .9rem; color: var(--metin-3); }
.tn-secim__fiyat { margin-left: auto; font-size: 1.02rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

/*
 * Toplam satiri SAGA yaslanir; sola yaslansaydi telefon maketi
 * "2 hizmet · 50 dakika" yazisinin ustune binerdi -- coklu hizmet
 * secilebildigini anlatan tek satir odur.
 */
.tn-toplam {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
    margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--cizgi);
    font-size: .88rem; color: var(--metin-3);
}
.tn-toplam b { font-size: 1.3rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

/* --- Ustanin telefonu ------------------------------------------------
   Tarayici musterinin gordugunu, telefon ustanin gordugunu anlatiyor.
   Ikisi yan yana durunca cumle tamamlaniyor. */

.tn-telefon {
    position: absolute; z-index: 3;
    left: 2px; bottom: -20px; width: 196px;
    background: var(--yuzey); border-radius: 22px;
    border: 5px solid #0b1424;
    box-shadow: 0 28px 58px rgba(4, 12, 28, .58);
    overflow: hidden;
}
.tn-telefon__centik { height: 18px; display: grid; place-items: center; background: #0b1424; }
.tn-telefon__centik i { width: 44px; height: 4px; border-radius: 3px; background: #33425c; display: block; }
.tn-telefon__tepe {
    background: var(--ana); color: #fff;
    padding: 10px 12px; display: flex; align-items: center; gap: 7px;
}
.tn-telefon__tepe strong { font-size: .7rem; font-weight: 500; }
.tn-telefon__tepe em { margin-left: auto; font-style: normal; font-size: .62rem; opacity: .82; }
.tn-telefon__govde { padding: 11px; }
.tn-telefon__ozet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.tn-telefon__ozet div { background: var(--yuzey-2); border-radius: 7px; padding: 7px 8px; }
.tn-telefon__ozet small { display: block; font-size: .54rem; letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3); }
.tn-telefon__ozet b { font-size: .82rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

.tn-tb { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--metin-3); margin: 2px 0 9px; }

.tn-ts {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; border-radius: 8px; margin-bottom: 6px;
    background: var(--yuzey-2); border-left: 3px solid var(--ana-parlak, var(--ana));
}
.tn-ts--altin { border-left-color: var(--altin); background: color-mix(in srgb, var(--altin) 14%, var(--yuzey)); }
.tn-ts b { display: block; font-size: .84rem; font-weight: 500; color: var(--metin); }
.tn-ts small { font-size: .75rem; color: var(--metin-3); }
.tn-ts .sag { margin-left: auto; font-size: .84rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

/* --- Suzulen rozetler (Cam & Isikli Animasyon) ------------------------ */

.tn-rozetler { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.tn-suzulen {
    position: absolute;
    display: flex; align-items: center; gap: 11px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px; padding: 12px 16px;
    box-shadow: 0 16px 36px rgba(4, 12, 28, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.2);
    font-size: .95rem; font-weight: 600; line-height: 1.25; color: #16223a;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: tn-suzul 6s ease-in-out infinite alternate;
}
.tn-suzulen small { display: block; font-size: .78rem; color: #64748b; font-weight: 500; }
.tn-suzulen b { font-variant-numeric: tabular-nums; }
.tn-suzulen__simge {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tn-canli-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: tn-pulse-dot 2s infinite cubic-bezier(0.66, 0, 0, 1);
    margin-right: 4px;
    vertical-align: middle;
}

@keyframes tn-pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.tn-suzulen--1 { top: -6px;    right: -12px; animation-duration: 6.2s; animation-delay: 0s; }
.tn-suzulen--2 { top: 42%;     right: -28px; animation-duration: 7.4s; animation-delay: -2s; }
.tn-suzulen--3 { bottom: 12px; right: 8px;   animation-duration: 6.8s; animation-delay: -4s; }

.tn-suzulen--1 .tn-suzulen__simge { background: linear-gradient(135deg, var(--vitrin-zemin-2), #2563eb); }
.tn-suzulen--2 .tn-suzulen__simge { background: linear-gradient(135deg, #10b981, #059669); }
.tn-suzulen--3 .tn-suzulen__simge { background: linear-gradient(135deg, var(--altin), #d97706); color: #17233a; }

@keyframes tn-suzul {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -14px, 0); }
}

/* --- Mobil ----------------------------------------------------------- */

@media (max-width: 940px) {
    .tn-vitrin__izgara { grid-template-columns: 1fr; }
    .tn-vitrin__alt { max-width: none; }

    /* Telefon maketi tarayicinin ustune biner, ikisi de okunmaz olur. */
    .tn-telefon { display: none; }

    /* Rozetler gizlenmiyor, akisa aliniyor: bilgileri duruyor. */
    .tn-rozetler {
        position: static; display: flex; flex-wrap: wrap; gap: 10px;
        margin-top: 18px; pointer-events: auto;
    }
    .tn-suzulen { position: static; animation: none; box-shadow: var(--golge-2); }

    .tn-tepe nav .tn-menu { display: none; }
}

@media (max-width: 560px) {
    .tn-adimlar { gap: 3px; }
    .tn-adim { font-size: .62rem; }
    .tn-pencere__govde { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .tn-suzulen { animation: none; }
}

/* =====================================================================
   10c. TANITIM — BOLUM ISKELETI VE UC ADIM
   ---------------------------------------------------------------------
   .tn-bolum, .tn-baslik ve .tn-alt sonraki adimlarda da kullanilacak;
   burada bir kez tanimlaniyor.
   ===================================================================== */

.tn-bolum { padding: clamp(64px, 8vw, 100px) 0; }
.tn-bolum--yuzey { background: var(--yuzey); border-block: 1px solid var(--cizgi); }

/*
 * Tanitim kapsayicisi: 1560px (sayfanin tam genisligi).
 *
 * Bolumler tam genislikte duruyor; paragraflarin uzamasi ise
 * .tn-alt uzerindeki max-width: 58ch ile sinirlaniyor. Kapsayiciyi
 * daraltmak yerine METNI sinirlamak, gorsellerin genis kalmasini
 * sagliyor.
 *
 * Kendi ic bosluguyla birlikte tanimlaniyor ve .kapsayici ile BIRLIKTE
 * kullanilmiyor. Ikisi ust uste bindiginde ic boslugun hangi kutuya
 * uygulandigi degisiyor; baslik ile altindaki izgara 24px kayiyordu.
 */
.tn-dar {
    width: 100%; max-width: 1560px;
    margin-inline: auto; padding-inline: 24px;
}

.tn-baslik {
    font-family: var(--yazi);
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem);
    font-weight: 900; letter-spacing: -.025em;
    margin-bottom: 14px;
}
.tn-alt { font-size: 1.16rem; max-width: 58ch; color: var(--metin-2); }

/* --- Uc adim ---------------------------------------------------------
   Kartlar arasindaki 1px'lik bosluk zemin renginden geliyor; ayri ayri
   kenarlik cizilseydi ortadaki cizgiler cift kalinlikta gorunurdu. */

/*
 * Izgara, bolum basligiyla AYNI genislikte.
 *
 * Once kartlar kenardan kenara, baslik ise kapsayicinin icindeydi.
 * Ikisi hizalanmayinca kayma kasitli degil, hata gibi gorunuyordu.
 */
.tn-adim-izgara {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--cizgi);
    border: 1px solid var(--cizgi); border-radius: var(--r-b);
    overflow: hidden;
}
.tn-adim-kart { background: var(--yuzey); padding: 32px 28px; }
.tn-adim-kart__no {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
    color: var(--altin); margin-bottom: 14px;
}
.tn-adim-kart h3 {
    font-family: var(--yazi); font-weight: 900; letter-spacing: -.018em;
    font-size: 1.38rem; margin-bottom: 9px;
}
.tn-adim-kart p { font-size: 1.06rem; color: var(--metin-2); }

@media (max-width: 900px) {
    .tn-adim-izgara { grid-template-columns: 1fr; }
}

/* --- Fark: kendi alan adiniz ------------------------------------------ */

.tn-fark { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

.tn-adresler { display: grid; gap: 14px; }

.tn-adres {
    padding: 18px 20px; border-radius: var(--r-b);
    border: 1px solid var(--cizgi); background: var(--yuzey);
    font-size: 1.1rem; font-weight: 500;
    display: flex; align-items: center; gap: 13px;
    /* Uzun adres dar ekranda kutuyu tasirmasin. */
    overflow-wrap: anywhere;
}
.tn-adres small { display: block; font-size: .88rem; font-weight: 400; color: var(--metin-3); margin-top: 3px; }
.tn-adres__isaret { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }

.tn-adres--kotu { opacity: .72; }
.tn-adres--kotu .tn-adres__isaret { background: var(--hata-zemin); color: var(--hata); }

.tn-adres--iyi { border-color: var(--altin); box-shadow: 0 8px 24px color-mix(in srgb, var(--altin) 22%, transparent); }
.tn-adres--iyi .tn-adres__isaret { background: var(--altin); color: #17233a; }
.tn-adres--iyi b { color: var(--metin); }

@media (max-width: 900px) {
    .tn-fark { grid-template-columns: 1fr; }
}


/* =====================================================================
   10d. TANITIM — OZELLIK SIRALARI VE TELEFON MAKETI
   ---------------------------------------------------------------------
   Telefon ekranlarinin icerigi uydurma degil; panelin gercek
   ekranlarinin sadelestirilmis hali. Olmayan bir ozelligi maket yapmak
   satisi kapatir ama ilk hafta iade getirir.
   ===================================================================== */

.tn-sira {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
    overflow: visible;
}
.tn-sira + .tn-sira { margin-top: clamp(56px, 7vw, 92px); }

/* Sol Metin & Sag Gorsel Giris Hareketleri */
.tn-sira > div:first-child {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.tn-sira .tn-sira__gorsel {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: opacity, transform;
}

/* Ters Sira: Gorsel Solda, Metin Sagda */
.tn-sira--ters .tn-sira__gorsel {
    order: -1;
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.tn-sira--ters > div:first-child {
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ekrana Girince (Scroll Reveal) */
.tn-sira.tn-gorundu > div:first-child,
.tn-sira.tn-gorundu .tn-sira__gorsel {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================================================
   KUAFÖRÜM YANIMDA & PRO SAAS TASARIM SİSTEMİ
   ===================================================================== */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #4f46e5;
    background: #eef2ff;
    padding: 6px 16px;
    border-radius: 9999px;
    margin-bottom: 14px;
}
.section-label--indigo  { color: #4f46e5; background: #eef2ff; }
.section-label--emerald { color: #059669; background: #ecfdf5; }
.section-label--blue    { color: #2563eb; background: #eff6ff; }
.section-label--orange  { color: #d97706; background: #fffbeb; }

.section-title {
    font-family: var(--yazi);
    font-size: clamp(1.85rem, 1.4rem + 1.2vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--metin, #0f172a);
    margin: 0 0 14px 0;
}
.section-desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--metin-2, #64748b);
    margin: 0 0 20px 0;
}

.feature-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 16px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.feature-icon-wrap--indigo  { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.feature-icon-wrap--emerald { background: linear-gradient(135deg, #059669, #10b981); }
.feature-icon-wrap--blue    { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.feature-icon-wrap--orange  { background: linear-gradient(135deg, #ea580c, #f59e0b); }

.feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 12px;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.98rem;
    color: var(--metin, #334155);
    line-height: 1.5;
}
.feature-list li .onay-simge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 900;
}

/* --- Cihaz (Tablet & Bilgisayar) 3D Hareketli Maketleri ---------------- */

@keyframes tn-yuzen-3d-1 {
    0% {
        transform: translateY(-8px) rotateX(4deg) rotateY(-5deg) scale(1);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 189, 248, 0.15);
    }
    50% {
        transform: translateY(6px) rotateX(1deg) rotateY(-2deg) scale(1.01);
        box-shadow: 0 40px 75px -15px rgba(0, 0, 0, 0.75), 0 0 50px rgba(56, 189, 248, 0.22);
    }
    100% {
        transform: translateY(-8px) rotateX(4deg) rotateY(-5deg) scale(1);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 189, 248, 0.15);
    }
}

@keyframes tn-yuzen-3d-2 {
    0% {
        transform: translateY(6px) rotateX(3deg) rotateY(6deg) scale(1);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 40px rgba(245, 158, 11, 0.15);
    }
    50% {
        transform: translateY(-8px) rotateX(0deg) rotateY(2deg) scale(1.01);
        box-shadow: 0 40px 75px -15px rgba(0, 0, 0, 0.75), 0 0 50px rgba(245, 158, 11, 0.22);
    }
    100% {
        transform: translateY(6px) rotateX(3deg) rotateY(6deg) scale(1);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 40px rgba(245, 158, 11, 0.15);
    }
}

@keyframes tn-nabiz-isik {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #10b981); }
}

.tn-3d-sahne {
    perspective: 1400px;
    position: relative;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Ambient Backlight Glow */
.tn-3d-sahne::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 70%;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}
.tn-3d-sahne--mavi::before { background: radial-gradient(circle, #0284c7, transparent 70%); }
.tn-3d-sahne--altin::before { background: radial-gradient(circle, #d97706, transparent 70%); }
.tn-3d-sahne--yesil::before { background: radial-gradient(circle, #059669, transparent 70%); }
.tn-3d-sahne--mor::before { background: radial-gradient(circle, #7c3aed, transparent 70%); }

.tn-3d-kart {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    transform-style: preserve-3d;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease;
    will-change: transform;
}

.tn-3d-kart--yuzen-1 {
    animation: tn-yuzen-3d-1 8s ease-in-out infinite;
}

.tn-3d-kart--yuzen-2 {
    animation: tn-yuzen-3d-2 8s ease-in-out infinite;
}

.tn-3d-kart:hover {
    animation-play-state: paused;
}

/* Tablet Pro Bezel */
.tn-ozellik-tablet {
    background: #0b1120;
    border: 9px solid #1e293b;
    border-radius: 28px;
    box-shadow:
        0 25px 60px -10px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.tn-ozellik-tablet__tepe {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
}

.tn-ozellik-tablet__govde {
    padding: 18px 16px;
    background: #090e1a;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Laptop Pro Chassis */
.tn-ozellik-laptop {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tn-ozellik-laptop__ekran {
    width: 100%;
    background: #0b1120;
    border: 8px solid #1e293b;
    border-radius: 18px 18px 0 0;
    box-shadow:
        0 25px 60px -10px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.tn-ozellik-laptop__tepe {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
}

.tn-ozellik-laptop__govde {
    padding: 18px 16px;
    background: #090e1a;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tn-ozellik-laptop__taban {
    width: 106%;
    height: 15px;
    background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tn-ozellik-laptop__centik {
    width: 65px;
    height: 4px;
    background: #090e1a;
    border-radius: 0 0 6px 6px;
}

/* Floating 3D Micro-Pill Tag */
.tn-3d-yukselen-rozet {
    transform: translateZ(35px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tn-tel-sahne {
    position: relative; display: grid; place-items: center;
    min-height: 470px; background: var(--yuzey-2);
    border-radius: 26px; padding: 36px 24px;
}

/*
 * Telefon govdesi.
 *
 * Once duz koyu bir kutuydu ve telefona benzemiyordu. Cihaz hissi uc
 * seyden geliyor: kalin kose yuvarlakligi, KENARDAKI TUSLAR ve alttaki
 * gezinme cubugu. Ucu de burada; ekranin icerigine hic dokunmadan,
 * fazladan HTML olmadan.
 *
 * Gezinme cubugu (ucgen / daire / kare) arka plan gorseli olarak
 * veriliyor. Ayri HTML yazilsaydi on iki telefonun her birine ucer
 * eleman eklemek gerekirdi.
 */
.tn-tel {
    position: relative;
    width: 268px;
    background: #0b1424;
    border-radius: 34px;
    padding: 10px 10px 30px;
    box-shadow:
        0 24px 56px rgba(8, 18, 38, .34),
        inset 0 0 0 1px rgba(255, 255, 255, .07);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='11' viewBox='0 0 92 11'%3E%3Cpath d='M9 1.5 L2.5 5.5 L9 9.5 Z' fill='%234a5b78'/%3E%3Ccircle cx='46' cy='5.5' r='4.6' fill='none' stroke='%234a5b78' stroke-width='1.7'/%3E%3Crect x='79.5' y='1.2' width='8.6' height='8.6' rx='1.4' fill='none' stroke='%234a5b78' stroke-width='1.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom 10px;
}

/* Yan tuslar: solda ses, sagda guc. */
.tn-tel::before,
.tn-tel::after {
    content: ''; position: absolute; width: 3px;
    background: #253148; border-radius: 3px;
}
.tn-tel::before { left: -3px;  top: 92px; height: 38px; }
.tn-tel::after  { right: -3px; top: 110px; height: 58px; }

/* Arkadaki ekran: ayni ozelligin baska bir gorunumu. Hafif egik ve
   kucuk -- one cikan ekranla yarismasin. */
.tn-tel--arka {
    position: absolute; right: 4%; top: 50%;
    width: 206px; transform: translateY(-50%) rotate(6deg) scale(.9);
    z-index: 1;
}
.tn-tel--on { position: relative; z-index: 2; }

.tn-tel__ekran {
    background: var(--yuzey); border-radius: 25px; overflow: hidden;
    display: flex; flex-direction: column; min-height: 396px;
}
.tn-tel--arka .tn-tel__ekran { min-height: 340px; }

.tn-tel__tepe {
    background: var(--ana); color: #fff;
    padding: 13px 14px 12px; display: flex; align-items: center; gap: 9px;
}
.tn-tel__tepe strong { font-size: .95rem; font-weight: 500; }
.tn-tel__tepe svg { opacity: .85; }
.tn-tel__tepe .itele { margin-left: auto; font-size: .78rem; opacity: .8; }

.tn-tel__govde { padding: 14px; flex: 1; font-size: .84rem; text-align: left; }

.tn-tel__alt { display: flex; border-top: 1px solid var(--cizgi); background: var(--yuzey); }
.tn-tel__alt span {
    flex: 1; padding: 9px 2px 10px;
    font-size: .68rem; font-weight: 500; line-height: 1.1; color: var(--metin-3);
    display: grid; gap: 3px; justify-items: center;
}
.tn-tel__alt span.etkin { color: var(--ana); }

/* --- Telefon ici parcalar --------------------------------------------- */

.tn-ts {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; border-radius: 8px; margin-bottom: 6px;
    background: var(--yuzey-2); border-left: 3px solid var(--ana-parlak, var(--ana));
}
.tn-ts--altin { border-left-color: var(--altin); background: color-mix(in srgb, var(--altin) 14%, var(--yuzey)); }
.tn-ts--yesil { border-left-color: var(--ok); }
.tn-ts--sonuk { border-left-color: var(--cizgi-koyu); }
.tn-ts--uyari { border-left-color: var(--uyari); }
.tn-ts b { display: block; font-size: .84rem; font-weight: 500; color: var(--metin); }
.tn-ts small { font-size: .75rem; color: var(--metin-3); }
.tn-ts .sag { margin-left: auto; font-size: .84rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

.tn-tb { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--metin-3); margin: 2px 0 9px; }

.tn-to { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 11px; }
.tn-to div { background: var(--yuzey-2); border-radius: 8px; padding: 8px 6px; text-align: center; }
.tn-to small { display: block; font-size: .66rem; letter-spacing: .06em; color: var(--metin-3); text-transform: uppercase; }
.tn-to b { font-size: .98rem; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }

.tn-tbuyuk { text-align: center; padding: 14px 0 16px; border-bottom: 1px solid var(--cizgi); margin-bottom: 11px; }
.tn-tbuyuk b { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--metin); font-variant-numeric: tabular-nums; }
.tn-tbuyuk small { font-size: .72rem; color: var(--metin-3); letter-spacing: .1em; }

.tn-tcubuk { display: block; height: 5px; border-radius: 3px; background: var(--yuzey-2); overflow: hidden; margin-top: 5px; }
.tn-tcubuk i { display: block; height: 100%; background: var(--ana-parlak, var(--ana)); }
.tn-tcubuk i.az { background: var(--uyari); }

.tn-tuyari {
    padding: 9px 10px; border-radius: 8px; margin-bottom: 11px;
    background: var(--uyari-zemin); color: var(--uyari);
    font-size: .78rem; display: flex; gap: 7px; align-items: center;
}

.tn-saatler { display: flex; gap: 5px; flex-wrap: wrap; }
.tn-saatler span { font-size: .74rem; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--cizgi); color: var(--metin-3); }
.tn-saatler .secili { background: var(--altin); border-color: var(--altin); color: #17233a; font-weight: 700; }

.tn-tkisi { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.tn-tkisi__harf {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff;
    background: linear-gradient(140deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
}
.tn-tkisi b { display: block; font-size: .86rem; font-weight: 500; color: var(--metin); }
.tn-tkisi small { font-size: .74rem; color: var(--metin-3); }

/* --- Kilit ekrani ----------------------------------------------------- */

.tn-kilit { background: var(--vitrin-zemin); }
.tn-kilit__saat { text-align: center; color: #fff; margin-bottom: 12px; }
.tn-kilit__saat b { display: block; font-size: 2.3rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.tn-kilit__saat small { font-size: .74rem; color: var(--vitrin-alt); }

.tn-bildirim {
    background: rgba(255, 255, 255, .13); border-radius: 12px;
    padding: 10px 11px; display: flex; gap: 9px; margin-bottom: 9px; color: #fff;
}
.tn-bildirim--sonuk { background: rgba(255, 255, 255, .09); }
.tn-bildirim__simge { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; }
.tn-bildirim__simge--altin   { background: var(--altin); color: #17233a; }
.tn-bildirim__simge--mavi    { background: var(--vitrin-zemin-2); color: #fff; }
.tn-bildirim__simge--kirmizi { background: #7f1d1d; color: #fff; }
.tn-bildirim b { display: block; font-size: .8rem; font-weight: 500; }
.tn-bildirim small { font-size: .74rem; color: var(--vitrin-alt); }
.tn-bildirim time { font-size: .68rem; color: var(--vitrin-alt); opacity: .75; flex: none; }

.tn-kurulu { display: grid; place-items: center; text-align: center; gap: 10px; }
.tn-kurulu__simge {
    width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--vitrin-zemin-2), var(--vitrin-zemin));
    color: var(--altin);
}
.tn-kurulu b { color: #fff; font-size: .88rem; font-weight: 500; }
.tn-kurulu small { color: var(--vitrin-alt); font-size: .74rem; }

/* =====================================================================
   10e. TANITIM — 3D MÜŞTERİ VİTRİNİ, 3D FİYATLANDIRMA VE 3D SSS
   ===================================================================== */

/* Global Tanıtım Tipografi Büyütmeleri */
.tn-etiket {
    font-size: 1rem;
    font-weight: 800;
    padding: 8px 18px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.tn-baslik {
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.03em;
}
.tn-alt {
    font-size: 1.25rem;
    line-height: 1.65;
    color: var(--metin-2);
}

/* --- 1. GERÇEKÇİ SALON YÖNETİM & RANDEVU VİTRİNİ -------------------- */

.tn-musteri-bolum {
    position: relative;
    background: #080d1a;
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(80px, 9vw, 120px) 0;
    color: #fff;
}

.tn-musteri-bolum .tn-baslik {
    color: #fff;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    font-weight: 900;
    margin-bottom: 16px;
}

.tn-musteri-bolum .tn-alt {
    color: #94a3b8;
    font-size: 1.25rem;
    max-width: 68ch;
    line-height: 1.6;
}

/* 2 Cihazlı Komuta Izgarası */
.tn-cihaz-izgara {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(24px, 3.5vw, 44px);
    align-items: stretch;
    margin-bottom: clamp(48px, 6vw, 70px);
}

.tn-cihaz-sutun {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: clamp(28px, 3.5vw, 38px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5);
    transition: all .25s ease;
}

.tn-cihaz-sutun:hover {
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 24px 55px -10px rgba(0, 0, 0, 0.7);
}

.tn-cihaz-baslik-etiket {
    margin-bottom: 24px;
}

.tn-cihaz-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(129, 140, 248, 0.3);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.tn-cihaz-rozet--altin {
    background: rgba(245, 158, 11, 0.15);
    color: var(--altin);
    border-color: rgba(245, 158, 11, 0.35);
}

.tn-cihaz-baslik-etiket h3 {
    font-size: 1.55rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -.02em;
}

.tn-cihaz-baslik-etiket p {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.55;
}

/* Üst Cihaz Tarayıcı / Pencere Çubuğu */
.tn-cihaz-ust-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #111a2e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tn-cihaz-noktalar {
    display: flex;
    gap: 6px;
}

.tn-cihaz-noktalar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.tn-cihaz-adres {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px 12px;
    font-size: 0.78rem;
    color: #94a3b8;
    font-family: monospace;
}

.tn-cihaz-durum-canli {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
}

/* 1. Tablet Kasası (iPad Tasarımı) */
.tn-tablet-kasa {
    background: #090e1a;
    border: 10px solid #1e293b;
    border-radius: 36px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.tn-tablet-kamera {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #334155;
    margin: 8px auto 6px;
}

.tn-tablet-ekran {
    background: #090e1a;
    border-radius: 20px;
    overflow: hidden;
}

.tn-tablet-icerik {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 2. Laptop / Bilgisayar Kasası (MacBook / Desktop Tasarımı) */
.tn-laptop-kasa {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.tn-laptop-ekran {
    width: 100%;
    background: #090e1a;
    border: 8px solid #1e293b;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 25px 55px -12px rgba(0, 0, 0, 0.8),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.tn-laptop-icerik {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tn-laptop-taban {
    width: 106%;
    height: 16px;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    border-radius: 0 0 16px 16px;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.tn-laptop-centik {
    width: 70px;
    height: 5px;
    background: #0f172a;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
}

/* Müşteri Arayüzü İç Bileşenleri */
.tn-op-secim-listesi {
    display: grid;
    gap: 10px;
}

.tn-op-secim-madde {
    background: #111a2e;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tn-op-secim-ikon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--altin);
    display: grid;
    place-items: center;
    flex: none;
}

.tn-op-secim-icerik { flex: 1; }
.tn-op-secim-icerik small { font-size: 0.75rem; color: #94a3b8; display: block; }
.tn-op-secim-icerik b { font-size: 0.95rem; color: #f8fafc; display: block; }

.tn-op-fiyat-rozet {
    background: rgba(245, 158, 11, 0.2);
    color: var(--altin);
    font-weight: 900;
    font-size: 0.95rem;
    padding: 5px 12px;
    border-radius: 10px;
}

.tn-op-onay-tik {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 900;
}

.tn-op-bildirim-cubugu {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tn-op-bildirim-ikon {
    color: #10b981;
    flex: none;
}

.tn-op-bildirim-cubugu b { font-size: 0.88rem; color: #10b981; display: block; }
.tn-op-bildirim-cubugu small { font-size: 0.78rem; color: #cbd5e1; display: block; }

/* Panel Ekranı İç Bileşenleri */
.tn-op-panel-sayaclar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tn-op-mini-sayac {
    background: #111a2e;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

.tn-op-mini-sayac small { font-size: 0.72rem; color: #94a3b8; font-weight: 700; display: block; }
.tn-op-mini-sayac b { font-size: 1.18rem; font-weight: 900; color: #fff; display: block; margin-top: 2px; }

.tn-op-mini-sayac--yesil b { color: #10b981; }
.tn-op-mini-sayac--mavi b { color: #38bdf8; }

.tn-op-takvim-tablosu {
    display: grid;
    gap: 10px;
}

.tn-op-takvim-satir {
    background: #111a2e;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tn-op-usta-bilgi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 120px;
    flex: none;
}

.tn-op-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ana);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    display: grid;
    place-items: center;
}

.tn-op-usta-bilgi b { font-size: 0.88rem; color: #f8fafc; }

.tn-op-slot-grubu {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
}

.tn-op-slot {
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.tn-op-slot--dolu {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.tn-op-slot--aktif {
    background: rgba(245, 158, 11, 0.2);
    color: var(--altin);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.tn-op-slot--bos {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.tn-op-kasa-serit {
    background: #131f38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
}

.tn-op-prim-etiket {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* 3 Cihaz Avantaj Maddesi */
.tn-op-uc-avantaj {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

.tn-op-av-kutu {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    transition: transform .25s ease;
}

.tn-op-av-kutu:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.4);
}

.tn-op-av-simge {
    font-size: 2.2rem;
    margin-bottom: 14px;
}

.tn-op-av-kutu h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -.02em;
}

.tn-op-av-kutu p {
    font-size: 1.02rem;
    color: #94a3b8;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .tn-cihaz-izgara { grid-template-columns: 1fr; }
    .tn-op-uc-avantaj { grid-template-columns: 1fr; }
}

/* --- 2. 3D LÜKS FİYATLANDIRMA BÖLÜMÜ (Görsel 2 Büyütmesi) ------------ */

.tn-3d-fiyat-alani {
    position: relative;
    padding: clamp(80px, 10vw, 120px) 0;
}

.tn-3d-fiyat-alani .tn-baslik {
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    font-weight: 900;
    margin-bottom: 16px;
}
.tn-3d-fiyat-alani .tn-alt {
    font-size: 1.28rem;
    line-height: 1.65;
    max-width: 70ch;
}

/* 3D Dönem Değiştirici (Billing Switcher) */
.tn-fiyat-gecis-sarmal {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(38px, 5vw, 58px);
}
.tn-fiyat-gecis-kutusu {
    display: inline-flex;
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: 36px;
    padding: 8px;
    position: relative;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.1);
}
.tn-fiyat-gecis-btn {
    border: none;
    background: transparent;
    padding: 12px 28px;
    border-radius: 28px;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--metin-3);
    cursor: pointer;
    transition: all .25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tn-fiyat-gecis-btn.aktif {
    background: var(--yuzey);
    color: var(--metin);
    box-shadow: 0 8px 22px -2px rgba(0, 0, 0, 0.18);
}
.tn-fiyat-gecis-indirim {
    background: linear-gradient(135deg, var(--altin), #d97706);
    color: #17233a;
    font-size: .85rem;
    font-weight: 900;
    padding: 4px 11px;
    border-radius: 14px;
}

/* 3D 2 Kartlı Fiyat Izgarası - Büyük & Okunaklı */
.tn-fiyat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4.5vw, 50px);
    align-items: stretch;
    perspective: 1400px;
}

.tn-donem {
    position: relative;
    background: var(--yuzey);
    border: 2px solid var(--cizgi);
    border-radius: 36px;
    padding: clamp(36px, 5vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.09);
    transform-style: preserve-3d;
}

.tn-donem:hover {
    transform: translateY(-10px) rotateX(2deg);
    border-color: var(--ana);
    box-shadow: 0 28px 65px -12px rgba(0, 0, 0, 0.18);
}

/* Yıllık Öne Çıkan Altın 3D Kart */
.tn-donem--one {
    border-color: var(--altin);
    background: linear-gradient(180deg, var(--yuzey) 0%, color-mix(in srgb, var(--altin) 10%, var(--yuzey)) 100%);
    box-shadow: 0 28px 70px -12px color-mix(in srgb, var(--altin) 38%, transparent);
}

.tn-donem--one:hover {
    border-color: var(--altin);
    box-shadow: 0 40px 90px -15px color-mix(in srgb, var(--altin) 52%, transparent);
}

.tn-donem__rozet {
    position: absolute;
    top: -18px;
    right: 32px;
    background: linear-gradient(135deg, var(--altin), #d97706);
    color: #17233a;
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 26px;
    box-shadow: 0 10px 24px -2px color-mix(in srgb, var(--altin) 60%, transparent);
}

.tn-donem__baslik {
    font-family: var(--yazi);
    font-weight: 900;
    letter-spacing: -.02em;
    font-size: 1.85rem;
    margin-bottom: 10px;
    color: var(--metin);
}

.tn-donem__tutar {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--metin);
    font-variant-numeric: tabular-nums;
    margin: 16px 0 12px;
    display: flex;
    align-items: baseline;
}

.tn-donem__tutar span {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--metin-3);
    margin-left: 8px;
}

.tn-donem__tutar del {
    font-size: 1.55rem;
    color: var(--metin-3);
    margin-right: 12px;
    text-decoration: line-through;
    opacity: 0.6;
}

.tn-donem__tasarruf-rozeti {
    display: inline-block;
    background: rgba(16, 185, 129, 0.18);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.35);
    font-size: .95rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 10px;
}

.tn-donem p {
    font-size: 1.18rem;
    color: var(--metin-2);
    margin: 10px 0 28px;
    line-height: 1.6;
}

.tn-fiyat__liste {
    margin: 24px 0 32px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.tn-fiyat__liste li {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 1.18rem;
    color: var(--metin);
    line-height: 1.5;
}

.tn-fiyat__liste li svg {
    flex: none;
    color: var(--altin);
    width: 22px;
    height: 22px;
}

/* 3D Butonlar */
.tn-fiyat-cta-btn {
    min-height: 58px;
    font-size: 1.22rem;
    font-weight: 800;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all .25s ease;
}

/* 4'lü Avantaj Kartları */
.tn-3d-fiyat-avantajlar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: clamp(48px, 6vw, 70px);
}
.tn-3d-avantaj-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 22px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 22px -4px rgba(0, 0, 0, 0.06);
    transition: transform .25s ease;
}
.tn-3d-avantaj-kart:hover {
    transform: translateY(-6px);
    border-color: var(--ana);
}
.tn-3d-avantaj-simge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--yuzey-2);
    display: grid;
    place-items: center;
    color: var(--altin);
    flex: none;
}
.tn-3d-avantaj-kart b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--metin); }
.tn-3d-avantaj-kart small { font-size: .98rem; color: var(--metin-3); line-height: 1.4; display: block; margin-top: 2px; }

.tn-fiyat__not {
    text-align: center;
    margin-top: 28px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--metin-3);
    max-width: 76ch;
    margin-inline: auto;
}

/* --- 3. 3D İNTERAKTİF SSS BÖLÜMÜ ------------------------------------- */

.tn-3d-sss-alani {
    position: relative;
    background: var(--yuzey-2);
    border-block: 1px solid var(--cizgi);
    padding: clamp(80px, 10vw, 120px) 0;
}

.tn-3d-sss-alani .tn-baslik {
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    font-weight: 900;
    margin-bottom: 16px;
}
.tn-3d-sss-alani .tn-alt {
    font-size: 1.28rem;
    line-height: 1.65;
}

/* SSS Kategori Butonları */
.tn-sss-kategori-sarmal {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: clamp(34px, 4.5vw, 52px);
}
.tn-sss-kat-btn {
    border: 1px solid var(--cizgi);
    background: var(--yuzey);
    padding: 11px 22px;
    border-radius: 24px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--metin-2);
    cursor: pointer;
    transition: all .2s ease;
}
.tn-sss-kat-btn:hover,
.tn-sss-kat-btn.aktif {
    background: var(--altin);
    color: #17233a;
    border-color: var(--altin);
    box-shadow: 0 8px 20px -2px color-mix(in srgb, var(--altin) 45%, transparent);
}

/* SSS 2 Sütunlu 3D Izgara */
.tn-sss-izgara-3d {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.tn-sss-kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 24px;
    padding: 0 30px;
    transition: all .25s ease;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.05);
}

.tn-sss-kart:hover {
    border-color: color-mix(in srgb, var(--ana) 50%, var(--cizgi));
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.09);
}

.tn-sss-kart[open] {
    border-color: var(--altin);
    background: var(--yuzey);
    box-shadow: 0 18px 40px -10px color-mix(in srgb, var(--altin) 24%, transparent);
}

.tn-sss-kart summary {
    cursor: pointer;
    padding: 24px 0;
    list-style: none;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--metin);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}

.tn-sss-kart summary::-webkit-details-marker { display: none; }

.tn-sss-kart summary::after {
    content: '+';
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--yuzey-2);
    display: grid;
    place-items: center;
    color: var(--altin);
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    flex: none;
    transition: all .25s ease;
}

.tn-sss-kart[open] summary::after {
    content: '\2212';
    background: var(--altin);
    color: #17233a;
    transform: rotate(180deg);
}

.tn-sss-kart-cevap {
    padding: 0 0 28px;
    font-size: 1.16rem;
    line-height: 1.75;
    color: var(--metin-2);
    border-top: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
    padding-top: 20px;
}

/* --- Mobil Uyumluluk -------------------------------------------------- */

@media (max-width: 1100px) {
    .tn-dortlu { grid-template-columns: repeat(2, 1fr); gap: 36px; }
    .tn-3d-fiyat-avantajlar { grid-template-columns: repeat(2, 1fr); }
    .tn-sss-izgara-3d { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .tn-fiyat { grid-template-columns: 1fr; }
    .tn-tepe nav { display: none; }
}

@media (max-width: 580px) {
    .tn-dortlu { grid-template-columns: 1fr; }
    .tn-3d-fiyat-avantajlar { grid-template-columns: 1fr; }
}

/* --- Kapanis ve dip ---------------------------------------------------- */

.tn-kapanis { background: var(--vitrin-zemin); color: var(--vitrin-metin); position: relative; overflow: hidden; }
.tn-kapanis::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--altin) 30%, var(--altin) 70%, transparent);
}
.tn-kapanis h2 {
    font-family: var(--yazi); font-weight: 900; letter-spacing: -.028em;
    color: #fff; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); margin-bottom: 16px;
}
.tn-kapanis p { color: var(--vitrin-alt); max-width: 54ch; margin-bottom: 30px; font-size: 1.16rem; }
.tn-kapanis .dugme--sade { border: 1px solid var(--vitrin-cizgi); color: var(--vitrin-metin); background: none; }
.tn-kapanis .dugme--sade:hover { border-color: var(--altin); color: #fff; }

.tn-dip {
    background: var(--vitrin-zemin); color: var(--vitrin-alt);
    padding: 30px 0; border-top: 1px solid var(--vitrin-cizgi); font-size: .98rem;
}
.tn-dip__ic { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.tn-dip a { color: var(--vitrin-alt); }
.tn-dip a:hover { color: #fff; }


/* --- Vekalet bandi ----------------------------------------------------
   Super admin bir salonun panelini goruntulerken her sayfanin ustunde
   durur. Kapatilamaz: kapatilabilseydi yonetici kendi hesabinda
   sanip salonun verisini bilmeden degistirebilirdi. */

.vekalet-bandi {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--uyari-zemin);
    color: #7c4a03;
    border-bottom: 2px solid var(--uyari);
    font-size: 1.02rem;
}
.vekalet-bandi svg { flex: none; color: var(--uyari); }
.vekalet-bandi strong { color: #5c3702; }
.vekalet-bandi .dugme {
    background: #7c4a03; color: #fff; border-color: #7c4a03;
    min-height: 40px; font-size: .97rem;
}
.vekalet-bandi .dugme:hover { background: #5c3702; }


/* --- Randevu ekrani salon seridi --------------------------------------
   Salonun kok adresi dogrudan randevu ekranina gittigi icin adres,
   telefon ve calisma saatlerinin duracagi tanitim sayfasi kalmadi.
   O bilgiler buraya tasindi. */

.bk-serit {
    background: var(--yuzey-2);
    border-top: 1px solid var(--cizgi);
    padding: 34px 0 40px;
    margin-top: 48px;
}
.bk-serit__ic {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px 40px;
}
.bk-serit__oge { display: grid; gap: 7px; align-content: start; font-size: 1rem; }
.bk-serit__baslik {
    font-size: .82rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--metin-3); margin-bottom: 3px;
}
.bk-serit__oge a { display: inline-flex; align-items: center; gap: 7px; }

.bk-serit__gun {
    display: flex; justify-content: space-between; gap: 18px;
    font-size: .97rem; color: var(--metin-2);
    font-variant-numeric: tabular-nums;
}
.bk-serit__gun b { font-weight: 400; }

/* Bugun kalin: ziyaretci "su an acik mi" sorusunu bir bakista cozsun. */
.bk-serit__gun--bugun { color: var(--metin); font-weight: 700; }
.bk-serit__gun--bugun b { font-weight: 700; }

/* Ust seritteki bos yer tutucular: geri oku ya da karsi baglanti
   olmadiginda logo ortada kalsin diye genislikleri korunuyor. */
.bk-geri--bos { visibility: hidden; }


/* =====================================================================
   11. RANDEVU TAKVIMI — HAFTA SERIDI VE GUN SATIRI
   ===================================================================== */

.tk-hafta {
    display: flex; align-items: stretch; gap: 6px;
    margin-bottom: 18px; overflow-x: auto; padding-bottom: 4px;
}

.tk-hafta__ok {
    flex: none; display: grid; place-items: center;
    width: 42px; border-radius: var(--r-o);
    border: 1px solid var(--cizgi); background: var(--yuzey);
    color: var(--metin-2); text-decoration: none;
}
.tk-hafta__ok:hover { border-color: var(--ana); color: var(--ana); }

.tk-gun {
    flex: 1; min-width: 100px;
    display: grid; justify-items: center; gap: 2px;
    padding: 10px 6px 9px;
    border: 1px solid var(--cizgi); border-radius: var(--r-o);
    background: var(--yuzey); color: var(--metin-2);
    text-decoration: none; line-height: 1.25;
    transition: border-color var(--gecis), background var(--gecis);
    text-align: center;
}
.tk-gun:hover { border-color: var(--ana); text-decoration: none; }

.tk-gun__tarih { font-size: 1.25rem; font-weight: 800; color: var(--metin);
                 font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tk-gun__ad    { font-size: .84rem; font-weight: 600; opacity: .85; }
.tk-gun__adet  { font-size: .78rem; font-weight: 700; color: var(--ana);
                 font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }

/* Sifir olan gun de yaziliyor; bosluk birakilsaydi "veri gelmedi mi,
   gercekten bos mu" ayrimi yapilamazdi. */
.tk-gun__adet--bos { color: var(--metin-3); font-weight: 500; }

/* Bugun ince altin cerceve, SECILI gun dolu zemin: ikisi ayni anda
   olabilir ve birbirine karismamali. */
.tk-gun--bugun { border-color: var(--altin); }

.tk-gun--secili {
    background: var(--ana); border-color: var(--ana); color: #fff;
}
.tk-gun--secili .tk-gun__tarih,
.tk-gun--secili .tk-gun__adet,
.tk-gun--secili .tk-gun__ad,
.tk-gun--secili .tk-gun__adet--bos { color: #fff; }
.tk-gun--secili .tk-gun__adet--bos { opacity: .75; }

/* --- Gun icindeki randevu satiri -------------------------------------- */

.tk-satir { display: flex; align-items: flex-start; gap: 16px; }

.tk-saat {
    flex: none; display: grid; justify-items: center; gap: 1px;
    min-width: 66px; padding-top: 2px;
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--metin); font-variant-numeric: tabular-nums;
}
.tk-saat small { font-size: .8rem; font-weight: 400; color: var(--metin-3); }

.tk-bilgi   { display: grid; gap: 3px; }
.tk-musteri { font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; }
.tk-hizmet  { font-size: 1.02rem; color: var(--metin-2); }
.tk-usta    { display: inline-flex; align-items: center; gap: 6px;
              font-size: .93rem; color: var(--metin-3); }
.tk-usta svg { opacity: .7; }

@media (max-width: 560px) {
    .tk-gun { min-width: 74px; padding: 10px 6px; }
    .tk-gun__tarih { font-size: 1.2rem; }
    .tk-saat { min-width: 56px; font-size: 1.3rem; }
    .tk-musteri { font-size: 1.06rem; }
}


/* --- Randevu akisi: ay takvimi ---------------------------------------- */

.bk-ay {
    border: 1px solid var(--cizgi); border-radius: var(--r-b);
    background: var(--yuzey); padding: 18px; margin-bottom: 24px;
}

.bk-ay__tepe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.bk-ay__tepe strong { font-size: 1.16rem; }

.bk-ay__ok {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--cizgi); border-radius: var(--r-o);
    color: var(--metin-2); text-decoration: none; flex: none;
}
.bk-ay__ok:hover { border-color: var(--ana); color: var(--ana); }

/* Gecmis aya gidilemez; ok gorunur kalir ama tiklanmaz. */
.bk-ay__ok--pasif { opacity: .3; cursor: default; }

.bk-ay__izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.bk-ay__baslik {
    text-align: center; padding-bottom: 8px;
    font-size: .86rem; font-weight: 700; color: var(--metin-3);
}
.bk-ay__bos { aspect-ratio: 1; }

.bk-ay__gun {
    aspect-ratio: 1; display: grid; place-items: center;
    border-radius: var(--r-o); border: 1px solid var(--cizgi);
    font-size: 1.02rem; font-weight: 500; color: var(--metin);
    text-decoration: none; font-variant-numeric: tabular-nums;
    transition: border-color var(--gecis), background var(--gecis);
}
a.bk-ay__gun:hover { border-color: var(--ana); text-decoration: none; }

.bk-ay__gun--secili {
    background: var(--ana); border-color: var(--ana); color: #fff; font-weight: 700;
}

/* Kapali gunler GIZLENMIYOR, soluklastiriliyor: bosluk birakmak
   "sistem mi bozuk" sorusunu dogururdu. */
.bk-ay__gun--kapali {
    color: var(--metin-3); opacity: .38; border-color: transparent;
    background: var(--yuzey-2); cursor: default;
}

.bk-ay__not { margin-top: 14px; font-size: .92rem; color: var(--metin-3); }

/* --- "Fark etmez" secenegi -------------------------------------------- */

.bk-secenek--fark {
    border-color: var(--altin);
    background: color-mix(in srgb, var(--altin) 8%, var(--yuzey));
}

/* --- Acik riza kutusu -------------------------------------------------- */

.bk-riza {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 16px 18px; margin: 20px 0;
    border: 1px solid var(--cizgi); border-radius: var(--r-o);
    background: var(--yuzey-2); font-size: 1rem; line-height: 1.55;
    cursor: pointer;
}
.bk-riza input {
    width: 22px; height: 22px; flex: none; margin-top: 2px;
    accent-color: var(--ana); cursor: pointer;
}
.bk-riza small { display: block; margin-top: 5px; font-size: .9rem; color: var(--metin-3); }
.bk-riza:has(input:focus-visible) { outline: 2px solid var(--ana); outline-offset: 3px; }

@media (max-width: 560px) {
    .bk-ay { padding: 12px; }
    .bk-ay__izgara { gap: 3px; }
    .bk-ay__gun { font-size: .92rem; }
    .bk-ay__baslik { font-size: .74rem; }
}

/* =====================================================================
   12. RANDEVU DETAY PENCERESI
   ===================================================================== */
.tv-pencere {
    width: min(560px, calc(100vw - 32px));
    padding: 0; border: 0;
    border-radius: var(--r-t);
    background: var(--yuzey); color: var(--metin);
    box-shadow: var(--golge-4);
}
.tv-pencere::backdrop { background: rgba(8, 16, 30, .5); }

.tv-pencere__tepe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 22px 24px 16px;
}
.tv-pencere__tepe > div { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.tv-pencere__tepe strong { font-size: 1.24rem; }

.tv-pencere__kapat {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--cizgi); border-radius: var(--r-o);
    background: var(--yuzey-2); color: var(--metin-2); cursor: pointer;
}
.tv-pencere__kapat:hover { color: var(--metin); border-color: var(--cizgi-koyu); }

.tv-pencere__izgara {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 0 24px 20px;
}

.tv-alan {
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-o);
    padding: 11px 14px;
}
.tv-alan--genis { grid-column: 1 / -1; }
.tv-alan small {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: var(--metin-3); margin-bottom: 4px;
}
.tv-alan b { font-size: 1.04rem; font-weight: 600; }

/* Musteri notu ayrisiyor: en kolay atlanan ama en cok ise yarayan alan. */
.tv-alan--not {
    background: var(--uyari-zemin);
    border-color: color-mix(in srgb, var(--uyari) 40%, transparent);
}
.tv-alan--not small,
.tv-alan--not b { color: #7c4a03; }

.tv-pencere__islem {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--cizgi);
}

@media (max-width: 560px) {
    .tv-pencere__izgara { grid-template-columns: 1fr; }
}

/* =====================================================================
   13. PANEL KENAR CUBUGU
   ---------------------------------------------------------------------
   Duzen eski sistemden alindi; renkler lacivert-beyaza cevrildi.
   Menu ogelerinin ayri renkleri SUSLEME DEGIL: on dorde yakin ekran
   arasinda goz, rengi metinden once yakaliyor.
   ===================================================================== */

.kenar {
    background: linear-gradient(180deg, var(--kenar-zemin, #101f3a) 0%, var(--kenar-zemin-2, #16305c) 100%);
    color: #e7edf7;
    padding: 20px 14px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 18px 0 50px rgba(0, 0, 0, .20);
}

/* --- Marka ------------------------------------------------------------ */

.pn-marka {
    display: grid; justify-items: center; gap: 3px;
    padding: 2px 6px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    text-align: center;
}
.pn-marka__logo {
    width: 56px; height: 56px; margin-bottom: 8px;
    display: grid; place-items: center;
    border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, .95); color: var(--ana);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}
.pn-marka__logo img { width: 100%; height: 100%; object-fit: cover; }
.pn-marka strong { font-size: 1.06rem; line-height: 1.25; color: #fff; }
.pn-marka small { font-size: .84rem; color: #9db0cd; }

/* --- Giris yapan kisi -------------------------------------------------- */

.pn-kisi {
    display: flex; align-items: center; gap: 11px;
    margin: 14px 2px; padding: 11px 12px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .09);
}
.pn-kisi__harf {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center; border-radius: 12px;
    background: linear-gradient(140deg, var(--ana), var(--ana-koyu));
    color: #ffffff; font-size: 1.1rem; font-weight: 800;
}
.pn-kisi b { display: block; font-size: .98rem; color: #fff; line-height: 1.3; }
.pn-kisi small { font-size: .84rem; color: #9db0cd; }

/* --- Menu -------------------------------------------------------------- */

.pn-menu { display: grid; gap: 4px; }

.pn-bag {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 13px;
    color: #cdd9ec; text-decoration: none;
    font-size: 1.02rem; font-weight: 500;
    transition: background var(--gecis), color var(--gecis);
}
.pn-bag:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.pn-bag b { font-weight: 500; }

.pn-bag__simge {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center; border-radius: 9px;
    background: var(--oge-zemin, rgba(255, 255, 255, .1));
    color: var(--oge-renk, #cdd9ec);
}

/* Etkin sayfa: dolu zemin, beyaz yazi. Yalnizca kenarlik verilseydi
   dar ekranda hangisinin acik oldugu gozden kaciyordu. */
.pn-bag--etkin {
    background: color-mix(in srgb, var(--ana) 32%, rgba(255, 255, 255, .10));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--ana);
}
.pn-bag--etkin b { font-weight: 700; }
.pn-bag--etkin .pn-bag__simge { background: var(--ana); color: #ffffff; }

/* Oge renkleri: koyu zeminde okunur kalsin diye acik tonlar. */
.pn-bag[data-renk="mor"]        { --oge-renk: #a78bfa; --oge-zemin: rgba(167,139,250,.16); --oge-zemin-koyu: rgba(167,139,250,.26); }
.pn-bag[data-renk="pembe"]      { --oge-renk: #f472b6; --oge-zemin: rgba(244,114,182,.16); --oge-zemin-koyu: rgba(244,114,182,.26); }
.pn-bag[data-renk="turuncu"]    { --oge-renk: #fb923c; --oge-zemin: rgba(251,146,60,.16);  --oge-zemin-koyu: rgba(251,146,60,.26); }
.pn-bag[data-renk="yesil"]      { --oge-renk: #4ade80; --oge-zemin: rgba(74,222,128,.15);  --oge-zemin-koyu: rgba(74,222,128,.25); }
.pn-bag[data-renk="camgobegi"]  { --oge-renk: #22d3ee; --oge-zemin: rgba(34,211,238,.15);  --oge-zemin-koyu: rgba(34,211,238,.25); }
.pn-bag[data-renk="mavi"]       { --oge-renk: #60a5fa; --oge-zemin: rgba(96,165,250,.16);  --oge-zemin-koyu: rgba(96,165,250,.26); }
.pn-bag[data-renk="sari"]       { --oge-renk: #facc15; --oge-zemin: rgba(250,204,21,.15);  --oge-zemin-koyu: rgba(250,204,21,.25); }
.pn-bag[data-renk="kirmizi"]    { --oge-renk: #fb7185; --oge-zemin: rgba(251,113,133,.16); --oge-zemin-koyu: rgba(251,113,133,.26); }
.pn-bag[data-renk="gri"]        { --oge-renk: #94a3b8; --oge-zemin: rgba(148,163,184,.16); --oge-zemin-koyu: rgba(148,163,184,.26); }

/* --- Katlanir gruplar --------------------------------------------------
   <details> kullaniliyor: JavaScript kapali olsa da acilip kapaniyor
   ve etkin sayfanin grubu sunucu tarafinda acik geliyor. */

.pn-grup { margin-top: 10px; }

.pn-grup > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px 6px;
    font-size: .76rem; font-weight: 800; letter-spacing: .13em;
    color: #8ea3c4;
}
.pn-grup > summary::-webkit-details-marker { display: none; }
.pn-grup > summary:hover { color: #cdd9ec; }
.pn-grup > summary:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; border-radius: 8px; }

.pn-ok {
    width: 0; height: 0; flex: none;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transform: rotate(-90deg);
    transition: transform .16s ease;
    opacity: .8;
}
.pn-grup[open] > summary .pn-ok { transform: rotate(0deg); }

.pn-grup__ic { display: grid; gap: 4px; }

/* --- Alt bolum --------------------------------------------------------- */

.pn-alt {
    margin-top: auto; padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    display: grid; gap: 7px;
}

.pn-alt__bag {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 42px; padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
    background: rgba(255, 255, 255, .06); color: #cdd9ec;
    font: 500 .95rem var(--yazi); text-decoration: none;
    cursor: pointer;
}
.pn-alt__bag:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.pn-alt__bag[hidden] { display: none; }

.pn-alt__ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.pn-alt__ikili .pn-alt__bag {
    font-size: 0.82rem;
    padding: 7px 6px;
    min-height: 36px;
}

.pn-alt__bag--cikis {
    background: rgba(220, 38, 38, .16);
    border-color: rgba(248, 113, 113, .3);
    color: #fca5a5;
}
.pn-alt__bag--cikis:hover { background: rgba(220, 38, 38, .28); color: #fff; }

@media (max-width: 900px) {
    .pn-marka__logo { width: 48px; height: 48px; }
}

/* =====================================================================
   14. TAKVIM — GUNLUK / HAFTALIK TABLO
   ---------------------------------------------------------------------
   Duzen eski sistemden alindi. CSS izgarasi yerine TABLO kullaniliyor:
   izgarada her randevu "grid-row: N / span M" ile yerlestiriliyordu ve
   satir araligina tam oturmayan bir saat (11:20 gibi) ya kayiyor ya hic
   cizilmiyordu. Tabloda randevu ait oldugu hucrenin icine giriyor.
   ===================================================================== */

/* --- Gorunum secici ---------------------------------------------------- */

.tkv-secici {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--yuzey-2); border: 1px solid var(--cizgi);
    border-radius: 12px; margin-bottom: 16px;
}
.tkv-secenek {
    padding: 8px 20px; border-radius: 9px;
    font-size: 1rem; font-weight: 600; color: var(--metin-2);
    text-decoration: none;
}
.tkv-secenek:hover { color: var(--metin); text-decoration: none; }
.tkv-secenek--etkin { background: var(--ana); color: #fff; }
.tkv-secenek--etkin:hover { color: #fff; }

/* --- Gun / hafta bari --------------------------------------------------- */

.tkv-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin-bottom: 10px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
}
.tkv-bar__orta { flex: 1; text-align: center; }
.tkv-bar__orta b { display: block; font-size: 1.16rem; letter-spacing: -.01em; }
.tkv-bar__orta small { display: block; margin-top: 2px; font-size: .92rem; color: var(--metin-3); }

.tkv-ok {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--cizgi); border-radius: var(--r-o);
    color: var(--metin-2); text-decoration: none;
}
.tkv-ok:hover { border-color: var(--ana); color: var(--ana); }

.tkv-rozetler { display: inline-flex; gap: 7px; margin-top: 8px; }
.tkv-rozet {
    font-style: normal; font-size: .86rem; font-weight: 600;
    padding: 4px 11px; border-radius: 20px;
    background: var(--yuzey-2); color: var(--metin-2);
}
.tkv-rozet--bugun { background: var(--ana); color: #fff; }

.tkv-don { margin-bottom: 14px; font-size: .98rem; }

/* --- Tablo -------------------------------------------------------------- */

.tkv-kaydir {
    overflow-x: auto; margin-bottom: 22px;
    border: 1px solid var(--cizgi); border-radius: var(--r-b);
    background: var(--yuzey);
}

.tkv { width: 100%; border-collapse: collapse; }

.tkv thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--yuzey-2);
    border-bottom: 1px solid var(--cizgi-koyu);
    border-right: 1px solid var(--cizgi);
    padding: 10px 8px;
    font-size: .95rem; font-weight: 700; color: var(--metin);
    text-align: center;
}

.tkv-sutun-bas { display: grid; gap: 1px; text-decoration: none; color: inherit; }
.tkv-sutun-bas:hover { text-decoration: none; color: var(--ana); }
.tkv-sutun-bas b { font-size: 1rem; }
.tkv-sutun-bas small { font-size: .86rem; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.tkv-sutun-bas em { font-style: normal; font-size: .92rem; font-weight: 700; color: var(--ana); }

.tkv td {
    vertical-align: top; padding: 4px;
    min-width: 132px; height: 46px;
    border-bottom: 1px solid var(--cizgi);
    border-right: 1px solid var(--cizgi);
}
.tkv tr td:last-child, .tkv tr th:last-child { border-right: 0; }

/* Saat sutunu yatay kaydirmada yerinde kalir; cok ustali salonda
   hangi satirin hangi saat oldugu kaybolmasin. */
.tkv th.tkv-saat {
    position: sticky; left: 0; z-index: 2;
    width: 62px; min-width: 62px;
    background: var(--yuzey);
    border-bottom: 1px solid var(--cizgi);
    border-right: 1px solid var(--cizgi);
    padding: 7px 8px; vertical-align: top;
    font-size: .9rem; font-weight: 600; color: var(--metin-2);
    text-align: right; font-variant-numeric: tabular-nums;
}
.tkv-saat-bas {
    position: sticky; left: 0; z-index: 4;
    width: 62px; min-width: 62px;
}

/* Gecmis saatler soluk; gozun bakacagi yer ileri saatler. */
.tkv tr.tkv-gecmis td.tkv-bos,
.tkv tr.tkv-gecmis th.tkv-saat { background: var(--yuzey-2); }
.tkv tr.tkv-gecmis th.tkv-saat { color: var(--metin-3); opacity: .75; }

/* Su anki saate canlı kırmızı çizgi ve nabız noktası: "neredeyiz" sorusu tek bakışta cevaplanır. */
.tkv tr.tkv-simdi td,
.tkv tr.tkv-simdi th { 
    border-top: 2px solid #ef4444 !important; 
    position: relative;
}
.tkv tr.tkv-simdi th.tkv-saat { 
    color: #ef4444 !important; 
    font-weight: 900 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.tkv tr.tkv-simdi th.tkv-saat::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    animation: tkvNabiz 1.5s infinite;
}
@keyframes tkvNabiz {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.tkv .tkv-bugun-sutun { background: color-mix(in srgb, var(--ana) 4%, var(--yuzey)); }

/* --- Randevu blogu ------------------------------------------------------
   Renk DURUMU anlatiyor. Sutun zaten ustayi (ya da gunu) soyluyor;
   renge de onu yuklemek durum bilgisini kaybettirirdi. */

.tkv-blok {
    display: block; width: 100%;
    padding: 6px 9px; margin-bottom: 4px;
    border-radius: 8px; border-left: 3px solid;
    text-decoration: none; cursor: pointer;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.tkv-blok:last-child { margin-bottom: 0; }
.tkv-blok:hover { transform: translateY(-1px); box-shadow: var(--golge-2); text-decoration: none; }
.tkv-blok:focus-visible { outline: 2px solid var(--ana); outline-offset: 1px; }

.tkv-blok b {
    display: block; font-size: .92rem; font-weight: 700; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkv-blok small {
    display: block; margin-top: 2px; font-size: .82rem; font-weight: 500; opacity: .85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tkv-blok[data-durum="bekliyor"]   { background: #eff6ff; border-left-color: #2563eb; color: #1d4ed8; }
.tkv-blok[data-durum="geldi"]      { background: #ecfdf5; border-left-color: #059669; color: #047857; }
.tkv-blok[data-durum="tamamlandi"] { background: #f0fdfa; border-left-color: #0d9488; color: #0f766e; }
.tkv-blok[data-durum="gelmedi"]    { background: #fef2f2; border-left-color: #dc2626; color: #b91c1c; }
.tkv-blok[data-durum="iptal"]      { background: var(--yuzey-2); border-left-color: var(--cizgi-koyu); color: var(--metin-3); text-decoration: line-through; }

@media (max-width: 640px) {
    .tkv td { min-width: 116px; }
    .tkv th.tkv-saat, .tkv-saat-bas { width: 52px; min-width: 52px; }
    .tkv-bar__orta b { font-size: 1.04rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tkv-blok:hover { transform: none; }
}
/* --- Musteri kartlari ve detay penceresi ----------------------------- */

.customer-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.customer-list-card {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    padding: 16px;
    box-shadow: var(--golge-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--gecis), box-shadow var(--gecis);
}

.customer-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--golge-2);
    border-color: var(--cizgi-koyu);
}

.mkart-ozet {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.mkart-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mkart-avatar.buyuk {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

.mkart-kimlik {
    flex: 1;
    min-width: 0;
}

.mkart-kimlik b {
    display: block;
    font-size: 1.05rem;
    color: var(--metin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkart-kimlik small {
    display: block;
    font-size: .88rem;
    color: var(--metin-2);
}

.mkart-tutar {
    text-align: right;
    flex-shrink: 0;
}

.mkart-tutar b {
    display: block;
    font-size: 1.05rem;
    color: var(--ok);
}

.mkart-tutar small {
    display: block;
    font-size: .78rem;
    color: var(--metin-3);
}

.mkart-son {
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-k);
    padding: 8px 12px;
    font-size: .88rem;
}

.mkart-son .mkart-etiket {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--metin-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

.mkart-son b {
    color: var(--metin);
}

.mkart-son small {
    display: block;
    color: var(--metin-2);
}

.mkart-rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mkart-rozet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .82rem;
    background: var(--yuzey-2);
    color: var(--metin-2);
    border: 1px solid var(--cizgi);
}

.mkart-rozet.iyi {
    background: var(--ok-zemin);
    color: var(--ok);
    border-color: transparent;
}

.mkart-rozet.kotu {
    background: var(--hata-zemin);
    color: var(--hata);
    border-color: transparent;
}

.mkart-rozet.notr {
    background: var(--uyari-zemin);
    color: var(--uyari);
    border-color: transparent;
}

.mkart-borc {
    background: var(--hata-zemin);
    color: var(--hata);
    padding: 6px 10px;
    border-radius: var(--r-k);
    font-size: .85rem;
    font-weight: 600;
}

.customer-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--cizgi);
}

.mkart-pencere {
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    background: var(--yuzey);
    color: var(--metin);
    box-shadow: var(--golge-4);
    padding: 24px;
    max-width: 640px;
    width: 92vw;
    margin: auto;
}

.mkart-pencere::backdrop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

.mkart-pencere-bas {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.mkart-pencere-bas b {
    display: block;
    font-size: 1.25rem;
}

.mkart-pencere-bas small {
    display: block;
    font-size: .95rem;
    color: var(--metin-2);
}

.mkart-kapat-form {
    float: right;
}

.mkart-kapat {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--metin-3);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.mkart-kapat:hover {
    color: var(--hata);
}

.mkart-kutular {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.mkart-kutu {
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-k);
    padding: 10px 12px;
}

.mkart-kutu small {
    display: block;
    font-size: .78rem;
    color: var(--metin-3);
    margin-bottom: 4px;
}

.mkart-kutu b {
    display: block;
    font-size: 1.05rem;
    color: var(--metin);
}

.mkart-kutu.kotu {
    background: var(--hata-zemin);
    border-color: rgba(220, 38, 38, .2);
}

.mkart-kutu.kotu b {
    color: var(--hata);
}

.mkart-kutu.genis {
    grid-column: 1 / -1;
}

.mkart-alt-baslik {
    font-size: 1rem;
    margin: 16px 0 10px;
    color: var(--metin);
    font-weight: 700;
}

.mkart-islem-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-k);
    padding: 8px;
    background: var(--yuzey-2);
}

.mkart-islem {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-k);
    font-size: .88rem;
}

.mkart-islem-tarih {
    font-weight: 600;
    color: var(--metin);
}

.mkart-islem-tarih small {
    display: block;
    font-weight: 400;
    color: var(--metin-3);
}

.mkart-islem-ad b {
    display: block;
    color: var(--metin);
}

.mkart-islem-ad small {
    color: var(--metin-2);
}

.mkart-islem-tutar {
    font-weight: 700;
    color: var(--ok);
}

.mkart-pencere-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
}

/* --- Giris ekrani (Merkezli Genis Tam Ekran & Ultra Modern Arayuz) -- */

.giris-govde {
    display: grid; place-items: center;
    min-height: 100vh; padding: 24px;
    background:
        radial-gradient(50% 45% at 20% 15%, color-mix(in srgb, var(--ana) 16%, transparent), transparent 70%),
        radial-gradient(45% 40% at 82% 10%, color-mix(in srgb, var(--ana-parlak, var(--ana)) 14%, transparent), transparent 70%),
        var(--zemin);
}

.giris-govde-tam {
    margin: 0; padding: 0;
    min-height: 100vh; width: 100%;
    background: #060911;
    overflow-x: hidden;
}

/* Master Sarmal & Kapsayici */
.pg-sarmal {
    min-height: 100vh; width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 36px 20px;
    background:
        radial-gradient(circle at 10% 10%, rgba(59, 130, 246, 0.24), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(236, 72, 153, 0.18), transparent 50%),
        #070a12;
}

.pg-kutu {
    width: 100%; max-width: 1340px; min-height: 720px;
    display: flex; border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0c101a;
    box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.85), 0 0 60px rgba(59, 130, 246, 0.08);
    overflow: hidden;
}

/* Sol Hero Alani */
.pg-hero-sol {
    flex: 1.15; padding: 56px 52px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(59, 130, 246, 0.28), transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(219, 39, 119, 0.2), transparent 50%),
        #090d16;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.pg-hero-mesh {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none; opacity: 0.7;
}

.pg-hero-marka {
    display: flex; align-items: center; gap: 16px;
    z-index: 2; position: relative;
}

.pg-hero-logo {
    width: 54px; height: 54px; border-radius: 16px;
    background: linear-gradient(135deg, var(--ana), var(--ana-koyu, #1e293b));
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.45);
}

.pg-hero-marka-metin b {
    display: block; font-size: 1.45rem; font-weight: 800;
    letter-spacing: 0.5px; color: #fff; line-height: 1.2;
}

.pg-hero-marka-metin small {
    font-size: 0.78rem; font-weight: 700; color: #94a3b8;
    letter-spacing: 1.5px; text-transform: uppercase;
}

.pg-hero-orta {
    z-index: 2; position: relative;
    margin: 36px 0; max-width: 580px;
}

.pg-hero-rozet {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 20px;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa; font-size: 0.86rem; font-weight: 700;
    margin-bottom: 20px; letter-spacing: 0.5px;
}

.pg-hero-baslik {
    font-size: 2.65rem; font-weight: 900; line-height: 1.2;
    color: #ffffff; margin-bottom: 16px; letter-spacing: -0.025em;
}

.pg-hero-baslik span {
    background: linear-gradient(135deg, #60a5fa, #f472b6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.pg-hero-aciklama {
    font-size: 1.1rem; line-height: 1.65; color: #94a3b8;
    margin-bottom: 32px; font-weight: 400;
}

.pg-hero-ozellikler {
    display: grid; gap: 14px;
}

.pg-hero-ozellik-kart {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    transition: all .2s ease;
}

.pg-hero-ozellik-kart:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateX(6px);
}

.pg-hero-ozellik-simge {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: #38bdf8; flex-shrink: 0;
}

.pg-hero-ozellik-metin b {
    display: block; font-size: 1.02rem; font-weight: 700;
    color: #f8fafc; margin-bottom: 3px;
}

.pg-hero-ozellik-metin p {
    font-size: 0.88rem; color: #94a3b8; margin: 0; line-height: 1.45;
}

.pg-hero-alt {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.86rem; color: #64748b; font-weight: 600;
    z-index: 2; position: relative;
}

/* Sag Form Alani */
.pg-form-sag {
    flex: 1; padding: 56px 48px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #0f1422; position: relative;
}

.pg-form-icerik {
    width: 100%; max-width: 460px;
}

.pg-kart-tepe {
    margin-bottom: 30px;
}

.pg-kart-logo-mobil {
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(135deg, var(--ana), var(--ana-koyu, #1e293b));
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 18px;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.45);
}

.pg-kart-baslik {
    font-size: 2.1rem; font-weight: 800; color: #fff;
    margin: 0 0 8px; letter-spacing: -0.02em;
}

.pg-kart-alt {
    font-size: 1.02rem; color: #94a3b8; margin: 0; font-weight: 500;
}

.pg-alan {
    margin-bottom: 22px; display: block;
}

.pg-alan span {
    display: block; font-size: 0.92rem; font-weight: 700;
    color: #cbd5e1; margin-bottom: 8px;
}

.pg-girdi-sarici {
    position: relative; display: flex; align-items: center;
}

.pg-girdi-simge {
    position: absolute; left: 16px; color: #64748b;
    pointer-events: none; display: flex; align-items: center; justify-content: center;
}

.pg-girdi {
    width: 100% !important; min-height: 54px !important;
    background: #182030 !important;
    border: 1px solid #334155 !important;
    border-radius: 14px !important;
    padding: 12px 18px 12px 48px !important;
    color: #fff !important; font-size: 1.08rem !important;
    transition: all .15s ease !important;
}

.pg-girdi:focus {
    border-color: var(--ana) !important;
    background: #1e283d !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.28) !important;
    outline: none !important;
}

.pg-sifre-goster {
    position: absolute; right: 14px;
    background: none; border: none; color: #64748b;
    cursor: pointer; padding: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease;
}

.pg-sifre-goster:hover {
    color: #cbd5e1;
}

.pg-dugme {
    width: 100%; min-height: 54px;
    background: var(--ana); color: #fff;
    border: none; border-radius: 14px;
    font-size: 1.15rem; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 10px; box-shadow: 0 12px 25px -5px rgba(59, 130, 246, 0.4);
    transition: all .15s ease;
}

.pg-dugme:hover {
    background: var(--ana-koyu, var(--ana));
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -5px rgba(59, 130, 246, 0.5);
}

.pg-alt-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: #94a3b8; font-size: 0.94rem; font-weight: 600;
    text-decoration: none; transition: color .15s ease;
    margin-top: 24px; text-align: center;
}

.pg-alt-link:hover {
    color: #fff; text-decoration: none;
}

@media (max-width: 960px) {
    .pg-kutu { flex-direction: column; min-height: auto; }
    .pg-hero-sol { display: none; }
    .pg-form-sag {
        width: 100%; padding: 40px 24px;
        background: radial-gradient(circle at 50% 15%, rgba(59, 130, 246, 0.2), transparent 60%), #0d111a;
    }
}

/* --- Super Yonetim Girisi (Titanium Cyber Executive Platform) ------- */

.yg-sarmal {
    min-height: 100vh; width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 36px 20px;
    background:
        radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.35), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(147, 51, 234, 0.22), transparent 50%),
        #04060b;
}

.yg-kutu {
    width: 100%; max-width: 1280px; min-height: 700px;
    display: flex; border-radius: 32px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(10, 15, 26, 0.96);
    backdrop-filter: blur(24px);
    box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.95), 0 0 70px rgba(37, 99, 235, 0.22);
    overflow: hidden;
}

.yg-hero-sol {
    flex: 1.15; padding: 56px 52px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.28), transparent 50%),
        #070b14;
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    color: #fff;
}

.yg-hero-sol .pg-hero-mesh {
    background-image: radial-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px);
}

.yg-hero-logo {
    width: 54px; height: 54px; border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.6);
}

.yg-form-sag {
    flex: 1; padding: 56px 48px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #0b101c; position: relative;
}

.yg-form-icerik {
    width: 100%; max-width: 460px;
}

.yg-logo-buyuk {
    width: 64px; height: 64px; border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    display: grid; place-items: center;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 12px 30px -5px rgba(37, 99, 235, 0.6), 0 0 20px rgba(59, 130, 246, 0.4);
}

.yg-dugme {
    width: 100%; min-height: 54px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 14px;
    font-size: 1.15rem; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 10px; box-shadow: 0 12px 25px -5px rgba(37, 99, 235, 0.5), 0 0 15px rgba(59, 130, 246, 0.3);
    transition: all .15s ease;
}

.yg-dugme:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -5px rgba(37, 99, 235, 0.6), 0 0 25px rgba(59, 130, 246, 0.45);
}

@media (max-width: 960px) {
    .yg-kutu { flex-direction: column; min-height: auto; }
    .yg-hero-sol { display: none; }
    .yg-form-sag {
        width: 100%; padding: 40px 24px;
        background: radial-gradient(circle at 50% 15%, rgba(37, 99, 235, 0.25), transparent 60%), #080c16;
    }
}

.giris-kart {
    width: 100%; max-width: 420px;
    padding: 34px 30px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-t);
    box-shadow: var(--golge-4);
}
.giris-kart h1 { font-size: 1.55rem; margin-bottom: 5px; }
.giris-kart .alt { color: var(--metin-3); font-size: .93rem; margin-bottom: 24px; }

.giris-logo {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    margin-bottom: 20px;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--ana-parlak, var(--ana)), var(--ana-koyu));
    color: #fff;
    box-shadow: var(--golge-ana);
}
.giris-logo svg { width: 28px; height: 28px; }

/* --- Takvim Randevu Detay Penceresi (Gorsel 1 - Merkeze Ortali Modal) --- */
.tv-pencere {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: 92vw;
    max-width: 520px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    z-index: 9999;
}
.tv-pencere::backdrop {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}
.tv-pencere__tepe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: var(--yuzey-2);
    border-bottom: 1px solid var(--cizgi);
}
.tv-pencere__tepe strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--metin);
    margin-right: 10px;
}
.tv-pencere__kapat {
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--metin-2);
    font-size: 1.3rem;
    transition: all .15s ease;
}
.tv-pencere__kapat:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}
.tv-pencere__izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.tv-alan {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}
.tv-alan small {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.tv-alan b {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}
.tv-alan--genis {
    grid-column: 1 / -1;
}
.tv-alan--not {
    background: #fefce8;
    border-color: #fef08a;
}
.tv-alan--not small {
    color: #854d0e;
}
.tv-alan--not b {
    color: #713f12;
    font-weight: 600;
    font-size: 0.95rem;
}
.tv-pencere__islem {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Hizli Yeni Randevu Ekrani / Modali (Gorsel 2 ile Birebir) --- */
.yr-pencere {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: 92vw;
    max-width: 580px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28);
    z-index: 9999;
    max-height: 90vh;
    overflow-y: auto;
}
.yr-pencere::backdrop {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}
.yr-kategori-kutu {
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fafafa;
    overflow: hidden;
}
.yr-kategori-baslik {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--metin);
    user-select: none;
}
.yr-kategori-baslik:hover {
    background: #f1f5f9;
}
.yr-kategori-adet {
    background: #f1f5f9;
    color: var(--metin-2);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: 700;
}
.yr-kategori-ic {
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--cizgi);
    display: grid;
    gap: 8px;
}
.yr-hizmet-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}
.yr-hizmet-satir:last-child {
    border-bottom: none;
}
.yr-dugme-pembe,
.yr-dugme-ana {
    width: 100%;
    min-height: 46px;
    background: var(--ana);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.yr-dugme-pembe:hover,
.yr-dugme-ana:hover {
    background: var(--ana-koyu, var(--ana));
}

/* --- Online Randevu Tarih & Saat Kartı (Görsel Birebir) --- */
.randevu-koyu-kart {
    background: #0d1117;
    color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #1e293b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    margin-bottom: 24px;
}
.randevu-koyu-kart__tepe {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}
.randevu-koyu-kart__etiket {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #f59e0b;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.randevu-koyu-kart__baslik {
    font-size: 1.65rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}
.randevu-tarih-input {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    min-height: 44px !important;
}
.randevu-durum-seridi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 14px;
}

/* 14 Günlük Yatay Gün Hapları (Day Pills - Büyütülmüş) */
.randevu-gun-haplari-sarma {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    margin-bottom: 22px;
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}
.randevu-gun-haplari-sarma::-webkit-scrollbar {
    height: 7px;
}
.randevu-gun-haplari-sarma::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
.randevu-gun-haplari {
    display: flex;
    gap: 12px;
    min-width: max-content;
}
.randevu-gun-hapi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 14px;
    background: #161b22;
    border: 1px solid #30363d;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 90px;
    cursor: pointer;
}
.randevu-gun-hapi:hover {
    border-color: #f59e0b;
    color: #ffffff;
    transform: translateY(-2px);
}
.randevu-gun-hapi--aktif {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    font-weight: 800;
}
.randevu-gun-hapi--pazar {
    opacity: 0.6;
    border-style: dashed;
}
.rgh-etiket {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rgh-tarih {
    font-size: 1.15rem;
    font-weight: 900;
    margin-top: 4px;
}

/* Saat Filtreleri (Sabah / Öğle / Akşam - Büyütülmüş) */
.randevu-saat-filtreleri {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.rs-filtre-btn {
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rs-filtre-btn:hover {
    background: #334155;
    color: #ffffff;
}
.rs-filtre-btn--aktif {
    background: #38bdf8 !important;
    color: #0f172a !important;
    border-color: #38bdf8 !important;
    font-weight: 900;
}
.randevu-saat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 640px) {
    .randevu-saat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.saat-kutusu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-radius: 14px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    user-select: none;
    transition: all 0.15s ease;
    border: none;
    text-align: center;
}
.saat-kutusu--musait {
    background: #22c55e;
    color: #ffffff;
    cursor: pointer;
}
.saat-kutusu--musait:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}
.saat-kutusu--musait.secili,
.saat-kutusu--musait:has(input:checked) {
    background: #15803d;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #22c55e;
    transform: scale(1.02);
}
.saat-kutusu--dolu {
    background: #ef4444;
    color: #ffffff;
    opacity: 0.88;
    cursor: not-allowed;
}
.saat-kutusu--gecmis {
    background: #334155;
    color: #94a3b8;
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Yazdirma -------------------------------------------------------- */

@media print {
    .kenar, .tepe, .menu-dugme, .dugme, .perde, .bk-yuzen-aksiyonlar { display: none !important; }
    body { background: #fff; }
    .kart, .tablo-sar { box-shadow: none; border-color: #ddd; }
}

/* =====================================================================
   LÜKS HARİTA & BİZ NEREDEYİZ BÖLÜMÜ (Görsel Birebir)
   ===================================================================== */
.bk-konum-alani {
    background: #ffffff;
    color: #0f172a;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 50px;
}
.bk-konum-kapsayici {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px 30px;
}
.bk-konum-ust {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr auto;
    gap: 32px;
    align-items: center;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .bk-konum-ust {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.bk-konum-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #881337;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.bk-konum-rozet::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 2px;
    background: #881337;
}
.bk-konum-baslik {
    font-size: 1.85rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.bk-konum-aciklama {
    font-size: 0.92rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
.bk-konum-bilgi-kutu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bk-konum-etiket {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.bk-konum-deger {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.45;
}
.bk-konum-deger a {
    color: #1e293b;
    text-decoration: none;
}
.bk-konum-deger a:hover {
    color: #881337;
}
.bk-konum-butonlar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 160px;
}
.bk-konum-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.bk-konum-btn--koyu {
    background: var(--ana-koyu, #0f172a);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.bk-konum-btn--koyu:hover {
    background: var(--ana);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.bk-konum-btn--tema {
    background: var(--ana);
    color: #ffffff !important;
    border: 1px solid transparent;
}
.bk-konum-btn--tema:hover {
    background: var(--ana-parlak, var(--ana));
    transform: translateY(-2px);
    box-shadow: var(--golge-ana);
}

.bk-harita-kapsayici {
    width: 100%;
    height: 420px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.bk-harita-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =====================================================================
   LÜKS 4-KOLONLU SALON FOOTER'I
   ===================================================================== */
.bk-luks-footer {
    background: #1a0b12;
    color: #f1f5f9;
    padding: 50px 0 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bk-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 900px) {
    .bk-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}
@media (max-width: 600px) {
    .bk-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.bk-footer-logo-kutu {
    margin-bottom: 14px;
}
.bk-footer-logo-kutu img {
    max-width: 180px;
    max-height: 50px;
    object-fit: contain;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
}
.bk-footer-logo-metin {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    display: inline-block;
    padding: 6px 0;
}
.bk-footer-slogan {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}
.bk-footer-baslik {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
    position: relative;
}
.bk-footer-linkler {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bk-footer-linkler li a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}
.bk-footer-linkler li a:hover {
    color: #f43f5e;
}
.bk-footer-iletisim {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
    color: #cbd5e1;
}
.bk-footer-iletisim a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
}
.bk-footer-iletisim a:hover {
    color: #f43f5e;
}
.bk-footer-alt-cubuk {
    max-width: 100%;
    width: 100%;
    margin-top: auto !important;
    padding: 36px 20px 110px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.88rem;
    color: #64748b;
}

/* =====================================================================
   SABİT YÜZEN HIZLI BUTONLAR (Floating Action Bar - Sağ Alt)
   ===================================================================== */
.bk-yuzen-aksiyonlar {
    position: fixed;
    right: 20px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 998;
}
.bk-yuzen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    transition: all 0.2s ease;
    color: #ffffff;
}
.bk-yuzen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.bk-yuzen-btn--wp {
    background: #25d366;
}
.bk-yuzen-btn--tel {
    background: var(--ana);
}
.bk-yuzen-btn--randevu {
    background: #f59e0b;
    color: #0f172a;
}
@media (max-width: 768px) {
    .bk-yuzen-aksiyonlar {
        right: 14px;
        bottom: 74px; /* yapiskan barin ustunde kalsin */
    }
    .bk-yuzen-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

/* AI Chat Widget Konumu (WhatsApp ve Telefon butonlarının üstünde dursun) */
#vassago-chat-btn {
    bottom: 125px !important;
    right: 20px !important;
    z-index: 999999 !important;
}
#vassago-chat-box {
    bottom: 195px !important;
    right: 20px !important;
    z-index: 999999 !important;
}
@media (max-width: 768px) {
    #vassago-chat-btn {
        bottom: 165px !important;
        right: 14px !important;
    }
    #vassago-chat-box {
        bottom: 235px !important;
        right: 14px !important;
    }
}

/* =====================================================================
   TERMAL FİŞ YAZDIRMA (58mm / 80mm POS Print)
   ===================================================================== */
#termal-adisyon-fisi {
    display: none;
}

@media print {
    body * {
        visibility: hidden !important;
    }
    #termal-adisyon-fisi,
    #termal-adisyon-fisi * {
        visibility: visible !important;
    }
    #termal-adisyon-fisi {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 76mm !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4mm !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Courier New', Courier, monospace, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        z-index: 9999999 !important;
    }
}

/* =====================================================================
   ETKİLEŞİMLİ KOLTUK & FİYAT HESAPLAYICI
   ===================================================================== */
.tn-hesaplayici-kutu {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    padding: 28px;
    margin: 0 auto 36px auto;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
.tn-hesaplayici-tepe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.tn-hesaplayici-koltuk-sayi {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 14px;
    padding: 10px 20px;
    text-align: center;
}
.tn-hesaplayici-koltuk-sayi span {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1;
}
.tn-hesaplayici-koltuk-sayi small {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}
.tn-slider {
    width: 100%;
    height: 8px;
    border-radius: 6px;
    background: #334155;
    outline: none;
    cursor: pointer;
    accent-color: #38bdf8;
}
.tn-hesaplayici-sonuclar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.tn-hs-kart {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.tn-hs-kart small {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 4px;
}
.tn-hs-kart b {
    font-size: 1.15rem;
    color: #ffffff;
}

/* --- PWA Akıllı Yükleme Bannerı & Bildirim Stilleri --- */
.pwa-banner-kart {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 480px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 999999;
    animation: pwaSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pwaSlideUp {
    from { opacity: 0; transform: translate(-50%, 24px) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.pwa-banner-icerik {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pwa-banner-simge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.25));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
}
.pwa-banner-metin {
    flex: 1;
    min-width: 0;
}
.pwa-banner-metin strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 2px;
}
.pwa-banner-metin p {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.35;
}
.pwa-banner-butonlar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pwa-banner-daha-sonra {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.pwa-banner-daha-sonra:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.pwa-banner-kapat {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.4rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.pwa-banner-kapat:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 480px) {
    .pwa-banner-kart {
        bottom: 16px;
        padding: 10px 14px;
    }
    .pwa-banner-simge {
        width: 38px;
        height: 38px;
    }
    .pwa-banner-metin strong {
        font-size: 0.88rem;
    }
    .pwa-banner-metin p {
        font-size: 0.76rem;
    }
}

/* =====================================================================
   🌙 GECE MODU (SÜPER ADMİN & SALON ADMİN PANELİ İÇİN ULTRA OKUNUR KOYU TEMA)
   ===================================================================== */
.karanlik-mod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 9999px;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.karanlik-mod-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.mod-ikon-gunes { display: none; }
.mod-ikon-ay    { display: inline-flex; align-items: center; gap: 5px; }

html.karanlik-mod .karanlik-mod-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #f8fafc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.karanlik-mod .karanlik-mod-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-1px);
}
html.karanlik-mod .mod-ikon-gunes { display: inline-flex; align-items: center; gap: 5px; }
html.karanlik-mod .mod-ikon-ay    { display: none; }

/* Karanlık Mod Değişkenleri ve Okunurluk Kuralları */
html.karanlik-mod {
    --zemin:      #080c14 !important;
    --yuzey:      #111827 !important;
    --yuzey-2:    #1c2638 !important;
    --yuzey-3:    #28354d !important;

    --metin:      #f8fafc !important;
    --metin-2:    #cbd5e1 !important;
    --metin-3:    #94a3b8 !important;

    --cizgi:      #1e293b !important;
    --cizgi-koyu: #334155 !important;

    --kenar-zemin:   #090d16 !important;
    --kenar-zemin-2: #101726 !important;

    --ok-zemin:    rgba(34, 197, 94, 0.2) !important;
    --uyari-zemin: rgba(245, 158, 11, 0.2) !important;
    --hata-zemin:  rgba(239, 68, 68, 0.2) !important;
}

html.karanlik-mod body {
    background: var(--zemin) !important;
    color: var(--metin) !important;
}

/* Başlıklar ve Kalın Metinler */
html.karanlik-mod h1,
html.karanlik-mod h2,
html.karanlik-mod h3,
html.karanlik-mod h4,
html.karanlik-mod h5,
html.karanlik-mod h6,
html.karanlik-mod strong,
html.karanlik-mod b,
html.karanlik-mod th,
html.karanlik-mod dt,
html.karanlik-mod .randevu-ad,
html.karanlik-mod .sayfa-basligi h1 {
    color: #f8fafc !important;
}

/* Gövde Yazıları ve Etiketler */
html.karanlik-mod p,
html.karanlik-mod label,
html.karanlik-mod dd,
html.karanlik-mod li,
html.karanlik-mod .bk-alan > span,
html.karanlik-mod .alan > span {
    color: #cbd5e1 !important;
}

html.karanlik-mod small,
html.karanlik-mod .metin-silik,
html.karanlik-mod .randevu-alt,
html.karanlik-mod .ipucu {
    color: #94a3b8 !important;
}

/* Tepe ve Başlık Alanı */
html.karanlik-mod .tepe,
html.karanlik-mod header.cam {
    background: rgba(17, 24, 39, 0.92) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}

/* Kartlar ve Kutular */
html.karanlik-mod .kart,
html.karanlik-mod .kutu,
html.karanlik-mod .olcum,
html.karanlik-mod .bk-kart,
html.karanlik-mod .randevu-satir,
html.karanlik-mod .randevu-kutu-kart,
html.karanlik-mod .tahsilat-kart,
html.karanlik-mod .adisyon-kart,
html.karanlik-mod .mkart,
html.karanlik-mod .pkart {
    background: var(--yuzey) !important;
    border-color: var(--cizgi) !important;
    color: var(--metin) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Tablolar */
html.karanlik-mod table {
    color: #f8fafc !important;
}
html.karanlik-mod th {
    background: var(--yuzey-2) !important;
    color: #cbd5e1 !important;
    border-bottom-color: var(--cizgi-koyu) !important;
}
html.karanlik-mod td {
    border-bottom-color: var(--cizgi) !important;
    color: #f1f5f9 !important;
}
html.karanlik-mod tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Form Elemanları (Girdiler) */
html.karanlik-mod .girdi,
html.karanlik-mod .secim-kutusu,
html.karanlik-mod input[type="text"],
html.karanlik-mod input[type="search"],
html.karanlik-mod input[type="tel"],
html.karanlik-mod input[type="date"],
html.karanlik-mod input[type="time"],
html.karanlik-mod input[type="password"],
html.karanlik-mod input[type="number"],
html.karanlik-mod input[type="email"],
html.karanlik-mod textarea,
html.karanlik-mod select {
    background: #182236 !important;
    color: #f8fafc !important;
    border-color: #2b3954 !important;
}
html.karanlik-mod input:focus,
html.karanlik-mod textarea:focus,
html.karanlik-mod select:focus {
    border-color: var(--ana) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}
html.karanlik-mod input::placeholder,
html.karanlik-mod textarea::placeholder {
    color: #64748b !important;
}

/* Pencereler ve Modallar */
html.karanlik-mod dialog,
html.karanlik-mod .yr-pencere,
html.karanlik-mod .tv-pencere,
html.karanlik-mod .tahsil-pencere,
html.karanlik-mod .modal-kutu {
    background: #111827 !important;
    border-color: #2b3954 !important;
    color: #f8fafc !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
}

/* Rozetler */
html.karanlik-mod .rozet {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.15);
}
html.karanlik-mod .rozet--ok {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
html.karanlik-mod .rozet--uyari {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
html.karanlik-mod .rozet--hata {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
html.karanlik-mod .rozet--ana {
    background: rgba(56, 189, 248, 0.18) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

/* Butonlar */
html.karanlik-mod .dugme--sade {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    border-color: #2b3954 !important;
}
html.karanlik-mod .dugme--sade:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* =====================================================================
   MÜŞTERİ RANDEVU VE SORGULAMA EKRANI İÇİN KESİN AÇIK TEMA KORUMASI
   (Yönetim paneli gece moduna alınsa dahi müşteri ekranı asla bozulmaz)
   ===================================================================== */
html body.randevu,
html body.randevum,
html.karanlik-mod body.randevu,
html.karanlik-mod body.randevum,
body.randevu,
body.randevum {
    background: #f8fafc !important;
    color: #0f172a !important;
}

html.karanlik-mod body.randevu .bk-kart,
html.karanlik-mod body.randevu .bk-ozet,
html.karanlik-mod body.randevu .bk-secim,
html.karanlik-mod body.randevu .bk-adim,
html.karanlik-mod body.randevu .bk-bilgi,
html.karanlik-mod body.randevu .bk-usta,
html.karanlik-mod body.randevu .bk-hizmet,
html.karanlik-mod body.randevum .bk-kart,
html.karanlik-mod body.randevum .bk-ozet {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html.karanlik-mod body.randevu h1,
html.karanlik-mod body.randevu h2,
html.karanlik-mod body.randevu h3,
html.karanlik-mod body.randevu h4,
html.karanlik-mod body.randevu strong,
html.karanlik-mod body.randevu b,
html.karanlik-mod body.randevum h1,
html.karanlik-mod body.randevum h2,
html.karanlik-mod body.randevum h3,
html.karanlik-mod body.randevum strong {
    color: #0f172a !important;
}

html.karanlik-mod body.randevu p,
html.karanlik-mod body.randevu span,
html.karanlik-mod body.randevu small,
html.karanlik-mod body.randevu label,
html.karanlik-mod body.randevum p,
html.karanlik-mod body.randevum span {
    color: #475569 !important;
}

html.karanlik-mod body.randevu .bk-ust,
html.karanlik-mod body.randevum .bk-ust {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}




/* --- Akıllı Global Arama Çubuğu & Dropdown --- */
.pn-global-arama {
    position: relative;
}
.pn-arama-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 320px;
    width: max(100%, 340px);
    max-width: min(92vw, 420px);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    max-height: 380px;
    overflow-y: auto;
    z-index: 999999;
}
.pn-arama-satir {
    transition: background 0.15s ease;
}
.pn-arama-satir:hover {
    background: var(--yuzey-2);
}
@media (max-width: 640px) {
    .tepe-baslik-gizle {
        display: none;
    }
    .pn-global-arama {
        max-width: 220px !important;
    }
    .pn-arama-dropdown {
        left: auto;
        right: 0;
        min-width: 290px;
        width: min(88vw, 360px);
    }
}

/* --- Mobil Sabit Alt Menü (App Bottom Bar) --- */
.pn-mobil-alt-bar {
    display: none;
}
@media (max-width: 860px) {
    .pn-mobil-alt-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: var(--yuzey);
        border-top: 1px solid var(--cizgi);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }
    .pn-mobil-alt-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--metin-3);
        font-size: 0.72rem;
        font-weight: 700;
        text-decoration: none;
        background: none;
        border: none;
        gap: 3px;
        flex: 1;
        height: 100%;
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .pn-mobil-alt-item:hover,
    .pn-mobil-alt-item--aktif {
        color: #0284c7;
    }
    body {
        padding-bottom: 66px !important;
    }
}

/* --- Mobil Sabit Fiyatlandırma CTA Barı (Paywall Kural 9) --- */
.tn-mobil-sabit-cta {
    display: none;
}
@media (max-width: 768px) {
    .tn-mobil-sabit-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 10px 16px;
        z-index: 9999;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* --- Exit Intent Modal Modern Dark Design --- */
.tn-exit-dialog {
    padding: 0;
    margin: auto;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 24px;
    background: #0f172a;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.15);
    max-width: 460px;
    width: min(92vw, 460px);
    overflow: hidden;
    color: #ffffff;
}
.tn-exit-dialog::backdrop {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.tn-exit-modal-icerik {
    display: flex;
    flex-direction: column;
}
.tn-exit-modal-tepe {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(30, 41, 59, 0.9) 100%);
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tn-exit-ikon-kutu {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.tn-exit-rozet {
    display: inline-block;
    background: #f59e0b;
    color: #000000;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.tn-exit-baslik {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}
.tn-exit-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 1.3rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.tn-exit-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: rotate(90deg);
}
.tn-exit-modal-govde {
    padding: 24px;
}
.tn-exit-aciklama {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 18px 0;
}
.tn-exit-kupon-kutu {
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.45);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin-bottom: 20px;
}
.tn-exit-kupon-etiket {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 4px;
}
.tn-exit-kupon-kod {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 1.5px;
    font-family: var(--yazi-tek, monospace);
}
.tn-exit-kupon-alt {
    font-size: 0.78rem;
    color: #34d399;
    margin-top: 4px;
    font-weight: 600;
}



/* =====================================================================
   KURUMSAL YALIN VE MODERN TANITIM STİLLERİ (CORPORATE SAAS THEME)
   ===================================================================== */
.tn-kapsayici {
    background: #090d16;
    color: #f8fafc;
    min-height: 100vh;
    font-family: var(--yazi, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    overflow-x: hidden;
}

/* 1. Header / Navbar */
.tn-tepe {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(9, 13, 22, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tn-tepe__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.tn-marka {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #ffffff;
}
.tn-marka__simge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
}
.tn-marka__yazi {
    display: flex;
    flex-direction: column;
}
.tn-marka__ad {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #ffffff;
}
.tn-marka__alt {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tn-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}
.tn-nav__link {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.15s ease;
}
.tn-nav__link:hover {
    color: #38bdf8;
}
.tn-tepe__eylemler {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tn-btn-giris {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 10px;
}
.tn-btn-kayit {
    font-size: 0.88rem;
    font-weight: 800;
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
}

/* 2. Hero Bölümü */
.tn-hero {
    padding: 80px 0 60px;
    position: relative;
}
.tn-hero__metin {
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}
.tn-rozet-kurumsal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.3);
    color: #38bdf8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 24px;
}
.tn-rozet-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
}
.tn-hero__baslik {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 20px 0;
}
.tn-hero__baslik span {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tn-hero__aciklama {
    font-size: 1.12rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 auto 32px;
    max-width: 680px;
}
.tn-hero__cta-grup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tn-hero__btn-ana {
    font-size: 1.05rem;
    font-weight: 900;
    padding: 14px 30px;
    border-radius: 12px;
}
.tn-hero__btn-demo {
    font-size: 0.98rem;
    font-weight: 700;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.2);
    padding: 14px 24px;
    border-radius: 12px;
}
.tn-hero__guvence {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.84rem;
    color: #64748b;
    font-weight: 600;
    flex-wrap: wrap;
}

/* Hero Mockup Frame */
.tn-hero__onizleme {
    max-width: 960px;
    margin: 0 auto;
}
.tn-onizleme-cerceve {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(2, 132, 199, 0.15);
    overflow: hidden;
}
.tn-onizleme-cubuk {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tn-onizleme-noktalar {
    display: flex;
    gap: 6px;
}
.tn-onizleme-noktalar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.tn-onizleme-noktalar span:nth-child(1) { background: #ef4444; }
.tn-onizleme-noktalar span:nth-child(2) { background: #f59e0b; }
.tn-onizleme-noktalar span:nth-child(3) { background: #10b981; }
.tn-onizleme-adres {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 14px;
    font-size: 0.78rem;
    color: #94a3b8;
    font-family: monospace;
}
.tn-onizleme-govde {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tn-onizleme-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tn-onizleme-kart {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tn-onizleme-kart small {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
}
.tn-onizleme-kart strong {
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
}
.tn-onizleme-kart span {
    font-size: 0.75rem;
    color: #64748b;
}
.tn-onizleme-siradaki {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 1px solid rgba(2, 132, 199, 0.3);
    border-radius: 14px;
    padding: 18px 20px;
}
.tn-mini-etiket {
    background: #0284c7;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.tn-mini-btn {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
}

/* 3. Metrikler Barı */
.tn-metrikler-alani {
    padding: 36px 0;
    background: rgba(15, 23, 42, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tn-metrikler-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.tn-metrik-oge {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tn-metrik-oge strong {
    font-size: 2.1rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.tn-metrik-oge span {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 600;
}

/* 4. Bölüm Yapısı */
.tn-bolum {
    padding: 90px 0;
}
.tn-bolum--koyu {
    background: #060910;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tn-bolum-baslik-alani {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}
.tn-bolum-etiket {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #38bdf8;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}
.tn-bolum-baslik {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}
.tn-bolum-altbaslik {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* Özellikler Grid */
.tn-ozellikler-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.tn-ozellik-kart {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 32px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.tn-ozellik-kart:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-3px);
}
.tn-ozellik-simge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}
.tn-ozellik-kart h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
}
.tn-ozellik-kart p {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 16px 0;
}
.tn-ozellik-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tn-ozellik-liste li {
    font-size: 0.86rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tn-ozellik-liste li::before {
    content: '•';
    color: #38bdf8;
    font-size: 1.2rem;
    line-height: 1;
}

/* Adımlar Grid */
.tn-adimlar-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tn-adim-kart {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px;
}
.tn-adim-numara {
    font-size: 1.8rem;
    font-weight: 900;
    color: #38bdf8;
    font-family: monospace;
    margin-bottom: 12px;
}
.tn-adim-kart h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
}
.tn-adim-kart p {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0;
}

/* Fiyatlandırma Grid */
.tn-puan-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 0.84rem;
    color: #ffffff;
}
.tn-puan-rozeti small { color: #94a3b8; }
.tn-fiyat-izgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 860px;
    margin: 0 auto 36px;
}
.tn-fiyat-karti {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.tn-fiyat-karti--one {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.12);
}
.tn-fiyat-one-rozet {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: #000;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.tn-fiyat-tip-etiket {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    align-self: flex-start;
}
.tn-fiyat-baslik {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}
.tn-fiyat-aciklama {
    font-size: 0.86rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 18px 0;
}
.tn-fiyat-rakam {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    font-family: monospace;
    margin-bottom: 8px;
}
.tn-fiyat-rakam span {
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 600;
}
.tn-mikro-fiyat {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tn-mikro-fiyat span {
    font-size: 0.84rem;
    font-weight: 800;
    color: #fbbf24;
}
.tn-mikro-fiyat small {
    font-size: 0.74rem;
    color: #94a3b8;
}
.tn-fiyat-ozellik-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tn-fiyat-ozellik-liste li {
    font-size: 0.88rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tn-fiyat-ozellik-liste li span {
    color: #10b981;
    font-weight: 900;
    font-size: 0.95rem;
}
.tn-fiyat-btn {
    height: 48px;
    font-size: 0.96rem;
    font-weight: 800;
    border-radius: 12px;
}

/* Zaman Akışı */
.tn-zaman-akisi {
    max-width: 860px;
    margin: 0 auto;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 22px 24px;
}
.tn-zaman-akisi__baslik {
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
}
.tn-zaman-akisi__izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tn-zaman-adim {
    border-left: 3px solid #38bdf8;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tn-zaman-adim strong {
    font-size: 0.82rem;
    color: #ffffff;
}
.tn-zaman-adim span {
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* SSS Accordion */
.tn-sss-kapsayici {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tn-sss-madde {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
.tn-sss-madde summary {
    padding: 18px 22px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tn-sss-madde summary::-webkit-details-marker { display: none; }
.tn-sss-madde summary::after {
    content: '+';
    font-size: 1.4rem;
    color: #38bdf8;
    font-weight: 400;
    transition: transform 0.2s ease;
}
.tn-sss-madde[open] summary::after {
    transform: rotate(45deg);
}
.tn-sss-madde p {
    padding: 0 22px 20px;
    margin: 0;
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Kapanış CTA */
.tn-kapanis-alani {
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.2) 0%, rgba(9, 13, 22, 1) 75%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer */
.tn-dip {
    background: #05070d;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 60px 0 24px;
}
.tn-dip__izgara {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 36px;
    margin-bottom: 40px;
}
.tn-dip__marka {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.tn-dip__marka span { color: #0284c7; }
.tn-dip__aciklama {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 16px 0;
}
.tn-dip__guvenlik {
    font-size: 0.76rem;
    color: #38bdf8;
    font-weight: 700;
}
.tn-dip__baslik {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
}
.tn-dip__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tn-dip__liste a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.15s ease;
}
.tn-dip__liste a:hover {
    color: #ffffff;
}
.tn-dip__alt {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #475569;
}

/* Responsive */
@media (max-width: 860px) {
    .tn-nav { display: none; }
    .tn-ozellikler-izgara,
    .tn-adimlar-izgara,
    .tn-fiyat-izgara,
    .tn-onizleme-izgara,
    .tn-metrikler-izgara,
    .tn-zaman-akisi__izgara,
    .tn-dip__izgara {
        grid-template-columns: 1fr;
    }
    .tn-hero { padding: 48px 0; }
}

/* ==========================================================================
   BERBER PANEL — LACİVERT KURUMSAL SAAS & 3D VİTRİN STİLLERİ
   ========================================================================== */
.tn-kapsayici {
  background-color: #070d1e;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 10% 30%, rgba(30, 58, 138, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 90% 60%, rgba(29, 78, 216, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(10, 25, 60, 0.9) 0%, transparent 70%);
  color: #e2e8f0;
  font-family: inherit;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

.tn-dar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 1. Üst Gezinme */
.tn-tepe {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 13, 30, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.tn-tepe__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.tn-marka {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
}

.tn-marka__simge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 10px;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

.tn-marka__yazi {
  display: flex;
  flex-direction: column;
}

.tn-marka__ad {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.tn-marka__alt {
  font-size: 0.72rem;
  color: #60a5fa;
  font-weight: 500;
}

.tn-nav {
  display: flex;
  gap: 28px;
}

.tn-nav__link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s;
}

.tn-nav__link:hover {
  color: #38bdf8;
}

.tn-tepe__eylemler {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tn-btn-giris {
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
  background: rgba(30, 58, 138, 0.2) !important;
}

.tn-btn-giris:hover {
  background: rgba(37, 99, 235, 0.3) !important;
  color: #ffffff !important;
}

.tn-btn-kayit {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

/* 2. Vitrin / Hero */
.tn-hero {
  padding: 60px 0 50px;
  text-align: center;
}

.tn-rozet-kurumsal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(59, 130, 246, 0.35);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #93c5fd;
  margin-bottom: 24px;
}

.tn-rozet-nokta {
  width: 8px;
  height: 8px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 10px #38bdf8;
}

.tn-hero__baslik {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #ffffff;
  max-width: 850px;
  margin: 0 auto 20px;
}

.tn-hero__baslik span {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tn-hero__aciklama {
  font-size: 1.12rem;
  color: #cbd5e1;
  max-width: 720px;
  margin: 0 auto 32px;
}

.tn-hero__cta-grup {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.tn-hero__btn-ana {
  padding: 14px 28px !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35) !important;
}

.tn-hero__btn-demo {
  padding: 14px 24px !important;
  font-size: 1rem !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  background: rgba(15, 23, 42, 0.7) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tn-hero__btn-demo:hover {
  background: rgba(30, 58, 138, 0.4) !important;
  color: #ffffff !important;
}

.tn-hero__guvence {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 0.85rem;
  color: #94a3b8;
}

/* ==========================================================================
   LAPTOP / BİLGİSAYAR ÇERÇEVESİ (DÜZ, SABİT, KURUMSAL MACBOOK TASARIMI)
   ========================================================================== */
.tn-3d-laptop-alani {
  margin-top: 36px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.tn-laptop-sekmeler {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tn-sekme-btn {
  background: rgba(13, 27, 62, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.tn-sekme-btn:hover {
  background: rgba(30, 58, 138, 0.5);
  color: #ffffff;
  border-color: rgba(59, 130, 246, 0.5);
}

.tn-sekme-btn--aktif {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

/* Düz ve Sabit Sahne (3D / Hareket / Eğiklik YOK) */
.tn-laptop-sahne {
  perspective: none !important;
  display: flex;
  justify-content: center;
}

.tn-laptop-govde {
  transform: none !important;
  animation: none !important;
  width: 100%;
}

.tn-laptop-govde:hover {
  transform: none !important;
}

.tn-laptop-ekran {
  background: #091329;
  border: 8px solid #162444;
  border-bottom: 2px solid #162444;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(37, 99, 235, 0.2);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.tn-laptop-kamera {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #0284c7;
  border-radius: 50%;
  box-shadow: 0 0 6px #0284c7;
}

.tn-laptop-pencere {
  background: #091329;
  min-height: 330px;
  position: relative;
}

.tn-laptop-ustbar {
  background: #060c1c;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.tn-pencere-noktalar {
  display: flex;
  gap: 5px;
}

.tn-pencere-noktalar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tn-pencere-noktalar span:nth-child(1) { background: #ef4444; }
.tn-pencere-noktalar span:nth-child(2) { background: #f59e0b; }
.tn-pencere-noktalar span:nth-child(3) { background: #10b981; }

.tn-laptop-url {
  background: rgba(30, 58, 138, 0.3);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  color: #93c5fd;
  font-family: monospace;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tn-laptop-saat {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

/* Düz Taban & Çentik */
.tn-laptop-taban {
  width: 104%;
  margin-left: -2%;
  height: 14px;
  background: linear-gradient(180deg, #25375c 0%, #141e33 100%);
  border-radius: 0 0 12px 12px;
  position: relative;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
}

.tn-laptop-centik {
  width: 80px;
  height: 4px;
  background: #0c1424;
  border-radius: 0 0 4px 4px;
  margin: 0 auto;
}


/* Sistem Ekran Görünümleri */
.tn-sistem-ekran {
  display: none;
  padding: 16px;
}

.tn-sistem-ekran--aktif {
  display: block;
  animation: tn-ekran-belir 0.3s ease;
}

@keyframes tn-ekran-belir {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tn-ekran-baslik {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.tn-ekran-baslik-sol strong {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
}

.tn-ekran-baslik-sol small {
  color: #94a3b8;
  font-size: 0.75rem;
}

.tn-ekran-baslik-sag {
  display: flex;
  gap: 6px;
}

.tn-durum-rozet {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.tn-durum--yesil {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tn-durum--mavi {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.tn-durum--sari {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Takvim Izgarası */
.tn-takvim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tn-takvim-sutun {
  background: rgba(13, 27, 62, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 8px;
}

.tn-sutun-usta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #93c5fd;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  margin-bottom: 6px;
}

.tn-usta-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tn-randevu-kutu {
  background: #0f1c3f;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.tn-randevu--koltukta {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.tn-randevu--tamamlandi {
  border-left-color: #64748b;
  opacity: 0.75;
}

.tn-randevu--bekliyor {
  border-left-color: #f59e0b;
}

.tn-rk-saat {
  font-size: 0.7rem;
  color: #93c5fd;
  font-weight: 600;
}

.tn-rk-musteri {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.tn-rk-islem {
  font-size: 0.72rem;
  color: #94a3b8;
}

.tn-rk-etiket {
  font-size: 0.65rem;
  color: #64748b;
  display: inline-block;
  margin-top: 2px;
}

.tn-etiket--bekliyor {
  color: #fbbf24;
}

.tn-btn-mini-kasa {
  background: #10b981;
  color: #000;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}

/* Kasa Ekranı */
.tn-kasa-onizleme {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.tn-adisyon-sepet {
  background: rgba(13, 27, 62, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 10px;
}

.tn-sepet-satir {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  padding: 4px 0;
  color: #cbd5e1;
  border-bottom: 1px dashed rgba(59, 130, 246, 0.15);
}

.tn-sepet-toplam {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(59, 130, 246, 0.3);
  font-weight: 800;
  font-size: 0.82rem;
}

.tn-odeme-butonlari {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tn-odeme-btn {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: #0f1c3f;
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #ffffff;
}

.tn-btn--nakit {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

/* CRM & Hakediş Tabloları */
.tn-crm-satir {
  background: rgba(13, 27, 62, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tn-crm-bilgi strong {
  display: block;
  color: #ffffff;
  font-size: 0.85rem;
}

.tn-crm-bilgi small {
  color: #94a3b8;
  font-size: 0.72rem;
}

.tn-crm-durum {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-etiket-uyari {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
}

.tn-etiket-tehlike {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
}

.tn-crm-wp-btn {
  background: #25d366;
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tn-hakedis-kart {
  background: rgba(13, 27, 62, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.tn-hk-ust {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  margin-bottom: 6px;
}

.tn-hk-detay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-size: 0.72rem;
  color: #94a3b8;
}

/* 3. Metrikler Alanı */
.tn-metrikler-alani {
  background: rgba(10, 20, 48, 0.6);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  padding: 36px 0;
}

.tn-metrikler-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.tn-metrik-oge strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tn-metrik-oge span {
  font-size: 0.88rem;
  color: #60a5fa;
  font-weight: 600;
}

/* 4. Bölüm Genel & Özellikler */
.tn-bolum {
  padding: 80px 0;
}

.tn-bolum--koyu {
  background: rgba(8, 16, 38, 0.7);
}

.tn-bolum-baslik-alani {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.tn-bolum-etiket {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  margin-bottom: 10px;
}

.tn-bolum-baslik {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.tn-bolum-altbaslik {
  font-size: 1.05rem;
  color: #94a3b8;
}

.tn-ozellikler-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tn-ozellik-kart {
  background: rgba(13, 27, 62, 0.75);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 14px;
  padding: 28px;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.tn-ozellik-kart:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.5);
}

.tn-ozellik-simge {
  width: 48px;
  height: 48px;
  background: rgba(30, 58, 138, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  margin-bottom: 18px;
}

.tn-ozellik-kart h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.tn-ozellik-kart p {
  font-size: 0.92rem;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.tn-mini-goruntu-kutusu {
  background: #081126;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.tn-mgk-baslik {
  font-size: 0.7rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tn-mgk-satir {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #cbd5e1;
  padding: 3px 0;
}

.tn-mgk-butonlar {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.tn-mgk-btn {
  background: #2563eb;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.tn-ozellik-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tn-ozellik-liste li {
  font-size: 0.85rem;
  color: #94a3b8;
  padding: 4px 0;
  position: relative;
  padding-left: 18px;
}

.tn-ozellik-liste li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #38bdf8;
  font-weight: 800;
}

/* 5. Mobil Vitrin */
.tn-mobil-vitrin-izgara {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.tn-mobil-maddeler {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.tn-mm-oge {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(13, 27, 62, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.15);
  padding: 14px;
  border-radius: 10px;
}

.tn-mm-simge {
  color: #38bdf8;
  background: rgba(30, 58, 138, 0.4);
  padding: 8px;
  border-radius: 8px;
}

.tn-mm-oge strong {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
}

.tn-mm-oge small {
  color: #94a3b8;
  font-size: 0.82rem;
}

/* Telefon Mockup */
.tn-telefon-mockup {
  width: 270px;
  margin: 0 auto;
  background: #070d1e;
  border: 8px solid #1a2744;
  border-radius: 36px;
  padding: 16px 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(37, 99, 235, 0.3);
}

.tn-telefon-ahize {
  width: 50px;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  margin: 0 auto 14px;
}

.tn-tel-salon-kart {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1c3f;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.tn-tel-logo {
  width: 30px;
  height: 30px;
  background: #2563eb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tn-tel-salon-kart strong {
  display: block;
  font-size: 0.8rem;
  color: #fff;
}

.tn-tel-salon-kart small {
  color: #fbbf24;
  font-size: 0.7rem;
}

.tn-tel-adim {
  margin-bottom: 10px;
}

.tn-tel-adim small {
  display: block;
  font-size: 0.7rem;
  color: #60a5fa;
  font-weight: 700;
  margin-bottom: 4px;
}

.tn-tel-hizmet {
  background: #0f1c3f;
  border: 1px solid #2563eb;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.tn-tel-personel-grup, .tn-tel-saat-grup {
  display: flex;
  gap: 4px;
}

.tn-tel-p, .tn-tel-s {
  background: #0d1730;
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  color: #94a3b8;
}

.tn-tel-p--secili, .tn-tel-s--secili {
  background: #2563eb;
  color: #fff;
  border-color: #3b82f6;
}

.tn-tel-onay-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  margin-top: 14px;
}

/* 6. Adımlar */
.tn-adimlar-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tn-adim-kart {
  background: rgba(13, 27, 62, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 28px;
  position: relative;
}

.tn-adim-numara {
  font-size: 2.2rem;
  font-weight: 900;
  color: #38bdf8;
  opacity: 0.6;
  margin-bottom: 12px;
}

.tn-adim-kart h4 {
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: 8px;
}

.tn-adim-kart p {
  font-size: 0.9rem;
  color: #94a3b8;
}

/* 7. Fiyatlandırma */
.tn-fiyat-secici {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.tn-fiyat-btn {
  background: rgba(13, 27, 62, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #94a3b8;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tn-fiyat-btn--aktif {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

.tn-fiyat-rozet {
  background: #10b981;
  color: #000;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.tn-fiyat-karti-kapsayici {
  max-width: 620px;
  margin: 0 auto;
}

.tn-fiyat-karti {
  background: rgba(13, 27, 62, 0.85);
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 18px;
  padding: 36px;
  position: relative;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(37, 99, 235, 0.2);
}

.tn-fiyat-rozet-populer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 999px;
}

.tn-fiyat-karti__ust h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 6px;
  text-align: center;
}

.tn-fiyat-karti__ust p {
  color: #94a3b8;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 24px;
}

.tn-fiyat-karti__tutar {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  margin-bottom: 24px;
}

.tn-fiyat-deger {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.tn-fiyat-para {
  font-size: 1.8rem;
  font-weight: 800;
  color: #38bdf8;
}

.tn-fiyat-rakam {
  font-size: 3.4rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
}

.tn-fiyat-sure {
  font-size: 0.88rem;
  color: #94a3b8;
}

.tn-fiyat-gunluk-not {
  font-size: 0.85rem;
  color: #10b981;
  margin-top: 6px;
}

.tn-fiyat-karti__ozellikler ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tn-fiyat-karti__ozellikler li {
  font-size: 0.85rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-fiyat-karti__ozellikler li svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.tn-btn-fiyat-buyuk {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 16px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  border-radius: 10px !important;
}

.tn-fiyat-dipnot {
  display: block;
  text-align: center;
  color: #64748b;
  font-size: 0.78rem;
  margin-top: 10px;
}

/* 8. SSS */
.tn-sss-kapsayici {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tn-sss-oge {
  background: rgba(13, 27, 62, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 16px 20px;
}

.tn-sss-soru {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}

.tn-sss-soru::-webkit-details-marker {
  display: none;
}

.tn-sss-cevap {
  margin-top: 12px;
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* 9. Çıkış Modalı */
.tn-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tn-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.tn-exit-dialog {
  position: relative;
  z-index: 2;
  background: #0d1730;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 16px;
  max-width: 480px;
  width: 90%;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(37, 99, 235, 0.3);
}

.tn-exit-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tn-exit-ikon {
  color: #f59e0b;
  margin-bottom: 12px;
}

.tn-exit-baslik {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.tn-exit-metin {
  color: #94a3b8;
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.tn-exit-eylemler {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.tn-exit-btn-onay {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}

/* 10. Footer */
.tn-alt-bilgi {
  background: #040813;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  padding: 60px 0 30px;
}

.tn-alt-bilgi__izgara {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.tn-alt-bilgi__aciklama {
  color: #64748b;
  font-size: 0.85rem;
  margin-top: 12px;
}

.tn-alt-bilgi__kolon h4 {
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 14px;
  font-weight: 700;
}

.tn-alt-bilgi__linkler {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tn-alt-bilgi__linkler li {
  margin-bottom: 8px;
}

.tn-alt-bilgi__linkler a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.tn-alt-bilgi__linkler a:hover {
  color: #38bdf8;
}

.tn-alt-bilgi__linkler span {
  color: #64748b;
  font-size: 0.85rem;
}

.tn-alt-bilgi__dip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  font-size: 0.8rem;
  color: #64748b;
}

.tn-alt-bilgi__guvenlik {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
}

/* Responsive Düzenlemeler */
@media (max-width: 900px) {
  .tn-hero__baslik { font-size: 2.1rem; }
  .tn-metrikler-izgara { grid-template-columns: repeat(2, 1fr); }
  .tn-ozellikler-izgara { grid-template-columns: 1fr; }
  .tn-mobil-vitrin-izgara { grid-template-columns: 1fr; }
  .tn-adimlar-izgara { grid-template-columns: 1fr; }
  .tn-alt-bilgi__izgara { grid-template-columns: 1fr 1fr; }
  .tn-nav { display: none; }
  .tn-3d-laptop-alani { max-width: 100%; }
  .tn-fiyat-karti__ozellikler ul { grid-template-columns: 1fr; }
  .tn-kasa-onizleme { grid-template-columns: 1fr; }
  .tn-takvim-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   ADMIN & SALON PANELİ: GECE/GÜNDÜZ MODU & GLOBAL ARAMA STİLLERİ
   ===================================================================== */
.karanlik-mod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--yuzey-2);
    border: 1.5px solid var(--cizgi);
    color: var(--metin);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    box-shadow: var(--golge-1);
}
.karanlik-mod-btn:hover {
    background: var(--yuzey-3);
    border-color: var(--cizgi-koyu);
    transform: translateY(-1px);
    box-shadow: var(--golge-2);
}
.mod-ikon-gunes { display: none !important; }
.mod-ikon-ay    { display: inline-flex !important; align-items: center; gap: 5px; }

html.karanlik-mod .mod-ikon-gunes { display: inline-flex !important; align-items: center; gap: 5px; }
html.karanlik-mod .mod-ikon-ay    { display: none !important; }

@media (max-width: 768px) {
    .mod-yazi { display: none; }
    .karanlik-mod-btn { padding: 6px 10px; }
}

/* Global Arama Dropdown Stilleri */
.pn-arama-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    padding: 6px;
}

.pn-arama-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--metin);
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--cizgi);
}
.pn-arama-item:last-child {
    border-bottom: none;
}
.pn-arama-item:hover {
    background: var(--yuzey-2);
}

.pn-arama-bos {
    padding: 16px;
    text-align: center;
    color: var(--metin-3);
    font-size: 0.88rem;
}

/* Süper Admin (.yonetim) Gündüz & Gece Modu */
.yonetim {
    --zemin:      #f8fafc;
    --yuzey:      #ffffff;
    --yuzey-2:    #f1f5f9;
    --yuzey-3:    #e2e8f0;
    --metin:      #0f172a;
    --metin-2:    #475569;
    --metin-3:    #94a3b8;
    --cizgi:      #e2e8f0;
    --cizgi-koyu: #cbd5e1;
    --ana:        #2563eb;
    --ana-koyu:   #1d4ed8;
    --ana-acik:   #3b82f6;
    --kenar-zemin:   #0f172a;
    --kenar-zemin-2: #1e293b;
}

html.karanlik-mod .yonetim,
html.karanlik-mod body.yonetim {
    --zemin:      #080c14 !important;
    --yuzey:      #111827 !important;
    --yuzey-2:    #1c2638 !important;
    --yuzey-3:    #28354d !important;
    --metin:      #f8fafc !important;
    --metin-2:    #cbd5e1 !important;
    --metin-3:    #94a3b8 !important;
    --cizgi:      #1e293b !important;
    --cizgi-koyu: #334155 !important;
    --ana:        #38bdf8 !important;
    --ana-koyu:   #0ea5e9 !important;
    --ana-acik:   #7dd3fc !important;
    --kenar-zemin:   #090d16 !important;
    --kenar-zemin-2: #101726 !important;
}

/* Mobil Alt Menü Boşluğu */
@media (max-width: 768px) {
    .panel-duzen .ana-alan {
        padding-bottom: 72px;
    }
}

/* ==========================================================================
   BERBER PANEL — 3D & KURUMSAL TANITIM SAYFASI STİLLERİ (LACİVERT & 3D TEMA)
   ========================================================================== */

body.govde--tanitim {
    background-color: #0b132b !important;
    color: #e2e8f0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.tn-kapsayici {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.tn-dar {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header & Nav */
.tn-tepe {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(11, 19, 43, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tn-tepe__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.tn-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.tn-logo__ikon {
    display: flex;
    gap: 3px;
    height: 28px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tn-logo__cubuk {
    width: 5px;
    height: 100%;
    background: #0284c7;
    border-radius: 2px;
}

.tn-logo__cubuk--kirmizi { background: #ef4444; }
.tn-logo__cubuk--beyaz { background: #ffffff; }

.tn-logo__metin {
    display: flex;
    flex-direction: column;
}

.tn-logo__ad {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.tn-logo__etiket {
    font-size: 0.65rem;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.1em;
}

.tn-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.tn-menu__link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.tn-menu__link:hover {
    color: #38bdf8;
}

.tn-tepe__eylemler {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tn-mobil-tetik {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.tn-mobil-tetik span {
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

/* Butonlar */
.tn-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.tn-buton--ana {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4);
}

.tn-buton--ana:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.6);
    transform: translateY(-2px);
    color: #ffffff;
}

.tn-buton--parlak {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #0b132b;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.tn-buton--parlak:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.55);
    color: #0b132b;
}

.tn-buton--cam {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}

.tn-buton--cam:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

.tn-buton--hayalet {
    background: transparent;
    color: #cbd5e1;
}

.tn-buton--hayalet:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.tn-buton--dev {
    padding: 14px 28px;
    font-size: 1.05rem;
    border-radius: 14px;
}

.tn-buton--tam {
    width: 100%;
}

/* Rozetler */
.tn-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.tn-rozet--neon {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.tn-rozet--altin {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}

.tn-rozet--mavi {
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.35);
    color: #38bdf8;
}

.tn-rozet__nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    animation: tn-pulse 2s infinite;
}

@keyframes tn-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

/* Bölümler Ortak */
.tn-bolum {
    padding: 100px 0;
    position: relative;
}

.tn-bolum--koyu {
    background: #080f24;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tn-baslik-alani {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.tn-bolum-basligi {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.tn-bolum-aciklamasi {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* Hero */
.tn-hero {
    padding: 80px 0 120px;
    overflow: hidden;
}

.tn-hero__arkaplan-isik {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.25) 0%, rgba(11, 19, 43, 0) 70%);
    filter: blur(80px);
    pointer-events: none;
}

.tn-hero__izgara {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.tn-hero__baslik {
    font-size: 3.4rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
}

.tn-vurgu--degrade {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tn-hero__aciklama {
    font-size: 1.2rem;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0 0 36px;
}

.tn-hero__butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

.tn-hero__guven {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
    color: #94a3b8;
}

.tn-hero__guven strong { color: #ffffff; }
.tn-hero__ayrac { color: rgba(255, 255, 255, 0.2); }

.tn-3d-sahne {
    width: 100%;
    height: 480px;
    position: relative;
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.1) 0%, rgba(11, 19, 43, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#hero-3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

#hero-3d-canvas:active { cursor: grabbing; }

.tn-3d-kontrol-rozet {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(11, 19, 43, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.78rem;
    color: #cbd5e1;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.tn-rozet-yanip-sonen {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
}

/* Karşılaştırma */
.tn-karsilastirma {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.tn-karsilastirma__kart {
    border-radius: 24px;
    padding: 40px;
    position: relative;
}

.tn-karsilastirma__kart--kotu {
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.tn-karsilastirma__kart--iyi {
    background: rgba(2, 132, 199, 0.08);
    border: 2px solid rgba(56, 189, 248, 0.5);
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.15);
}

.tn-rozet-populer {
    position: absolute;
    top: -14px;
    right: 32px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.06em;
}

.tn-karsilastirma__baslik {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.tn-karsilastirma__baslik h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.tn-karsilastirma__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tn-karsilastirma__liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    color: #cbd5e1;
    line-height: 1.5;
}

/* Adımlar */
.tn-adimlar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.tn-adim-kart {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 36px 28px;
    position: relative;
    transition: transform 0.25s ease;
}

.tn-adim-kart:hover { transform: translateY(-5px); }

.tn-adim-no {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
}

.tn-adim-ikon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.tn-adim-kart h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

.tn-adim-kart p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* Bento Grid */
.tn-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tn-bento-kart {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.tn-bento-kart--genis {
    grid-column: span 2;
}

.tn-bento-kart[data-glow="true"]::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 0);
    left: var(--mouse-x, 0);
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tn-bento-kart[data-glow="true"]:hover::before { opacity: 1; }
.tn-bento-kart:hover { border-color: rgba(56, 189, 248, 0.3); transform: translateY(-3px); }

.tn-bento-kart__ikon {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.tn-bento-kart h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

.tn-bento-kart p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.tn-bento-kart__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tn-bento-kart__etiketler span {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    color: #cbd5e1;
}

/* Hesaplayıcı */
.tn-hesaplayici-kutu {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 48px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.tn-hesaplayici-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.tn-slider-grup {
    margin-bottom: 32px;
}

.tn-slider-etiket {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.tn-slider-etiket strong {
    font-size: 1.3rem;
    color: #38bdf8;
}

.tn-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    -webkit-appearance: none;
}

.tn-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0284c7;
    border: 3px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.6);
}

.tn-hesaplayici-ipucu {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    border-radius: 12px;
}

.tn-sonuc-kart {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    margin-bottom: 20px;
}

.tn-sonuc-etiket {
    font-size: 0.95rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tn-sonuc-deger {
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 8px 0;
    background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tn-sonuc-aciklama {
    font-size: 0.88rem;
    color: #10b981;
    font-weight: 600;
}

.tn-sonuc-alt-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.tn-sonuc-alt-kutu {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

.tn-sonuc-alt-kutu span {
    display: block;
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.tn-sonuc-alt-kutu strong {
    font-size: 1.15rem;
    color: #ffffff;
}

.tn-sonuc-alt-kutu--tam {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* Laptop Mockup */
.tn-cihaz-vitrin {
    max-width: 980px;
    margin: 0 auto;
    perspective: 1200px;
}

.tn-laptop-kasa {
    background: #1e293b;
    border-radius: 20px 20px 0 0;
    padding: 14px 14px 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.tn-laptop-ekran {
    background: #0b132b;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tn-tarayici-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #0f172a;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tn-tarayici-noktalar {
    display: flex;
    gap: 6px;
}

.tn-tarayici-noktalar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.tn-tarayici-noktalar span:nth-child(1) { background: #ef4444; }
.tn-tarayici-noktalar span:nth-child(2) { background: #f59e0b; }
.tn-tarayici-noktalar span:nth-child(3) { background: #10b981; }

.tn-tarayici-url {
    flex: 1;
    max-width: 320px;
    background: #1e293b;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tn-laptop-ic-arayuz {
    padding: 24px;
    min-height: 280px;
}

.tn-mini-pano {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
}

.tn-mini-pano__sol {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tn-mini-kart {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tn-mini-kart small { font-size: 0.8rem; color: #94a3b8; }
.tn-mini-kart strong { font-size: 1.15rem; color: #ffffff; }
.tn-mini-artis { font-size: 0.8rem; color: #10b981; font-weight: 700; }
.tn-mini-doluluk { font-size: 0.8rem; color: #38bdf8; font-weight: 700; }

.tn-mini-pano__sag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
}

.tn-mini-tablo-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
}

.tn-mini-canli-nokta {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.tn-mini-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tn-mini-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #cbd5e1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.tn-durum {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 6px;
}

.tn-durum--onay { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.tn-durum--bekliyor { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

.tn-laptop-alt-govde {
    height: 18px;
    background: #334155;
    border-radius: 0 0 20px 20px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.tn-laptop-touchpad {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background: #1e293b;
    border-radius: 0 0 4px 4px;
}

/* Fiyatlandırma */
.tn-fiyat-secici {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    padding: 6px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tn-secici-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tn-secici-btn.aktif {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}

.tn-indirim-etiketi {
    background: #f59e0b;
    color: #0b132b;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
}

.tn-fiyat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.tn-fiyat-kart {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.25s ease;
}

.tn-fiyat-kart--one-cikan {
    background: rgba(2, 132, 199, 0.08);
    border: 2px solid #38bdf8;
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.25);
    transform: scale(1.04);
}

.tn-fiyat-kart__tepe h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.tn-fiyat-kart__tepe p {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0 0 24px;
}

.tn-fiyat-rakam {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 28px;
}

.tn-para-simge { font-size: 1.5rem; color: #38bdf8; font-weight: 700; }
.tn-fiyat-deger { font-size: 3.2rem; color: #ffffff; font-weight: 900; line-height: 1; }
.tn-fiyat-sure { font-size: 0.9rem; color: #94a3b8; }

.tn-fiyat-ozellikler {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tn-fiyat-ozellikler li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: #cbd5e1;
}

/* SSS */
.tn-sss-akordeon {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tn-sss-madde {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.tn-sss-madde.acik {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.tn-sss-soru {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 20px 24px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.tn-sss-ok {
    transition: transform 0.25s ease;
    color: #38bdf8;
}

.tn-sss-madde.acik .tn-sss-ok {
    transform: rotate(180deg);
}

.tn-sss-cevap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 24px;
}

.tn-sss-madde.acik .tn-sss-cevap {
    max-height: 200px;
    padding-bottom: 20px;
}

.tn-sss-cevap p {
    margin: 0;
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* Kapanış */
.tn-kapanis__kutu {
    text-align: center;
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.25) 0%, rgba(11, 19, 43, 0.8) 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 32px;
    padding: 64px 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.tn-kapanis__kutu h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffffff;
    margin: 16px 0;
}

.tn-kapanis__kutu p {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto 36px;
}

.tn-kapanis__butonlar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Footer */
.tn-dip {
    background: #050a18;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 0;
}

.tn-dip__ic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #64748b;
}

.tn-dip__linkler {
    display: flex;
    gap: 20px;
}

.tn-dip__linkler a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tn-dip__linkler a:hover { color: #38bdf8; }

/* Toast */
.tn-canli-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.tn-canli-toast.goster {
    transform: translateY(0);
    opacity: 1;
}

.tn-canli-toast__ikon { font-size: 1.4rem; }
.tn-canli-toast__icerik b { display: block; font-size: 0.86rem; color: #ffffff; }
.tn-canli-toast__icerik small { font-size: 0.75rem; color: #38bdf8; }

/* Exit Modal */
.tn-exit-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.tn-exit-modal.acik {
    opacity: 1;
    visibility: visible;
}

.tn-exit-modal__kart {
    background: #0f172a;
    border: 2px solid #38bdf8;
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.tn-exit-modal__kapat {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
}

.tn-exit-modal__rozet {
    display: inline-block;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.tn-exit-modal__kart h2 {
    font-size: 1.6rem;
    color: #ffffff;
    margin: 0 0 12px;
}

.tn-exit-modal__kart p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 24px;
}

.tn-exit-modal__butonlar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mobil Uyum */
@media (max-width: 992px) {
    .tn-hero__izgara, .tn-karsilastirma, .tn-adimlar-grid, .tn-fiyat-grid, .tn-hesaplayici-grid, .tn-mini-pano {
        grid-template-columns: 1fr;
    }
    .tn-bento-grid { grid-template-columns: 1fr; }
    .tn-bento-kart--genis { grid-column: span 1; }
    .tn-fiyat-kart--one-cikan { transform: none; }
    .tn-hero__baslik { font-size: 2.5rem; }
    .tn-menu { display: none; }
    .tn-menu.acik {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: #0b132b;
        padding: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .tn-mobil-tetik { display: flex; }
    .tn-dip__ic { flex-direction: column; gap: 16px; text-align: center; }
    .tn-dip__linkler { flex-wrap: wrap; justify-content: center; }
}


/* --- 21st.dev Spotlight Command Menu (Ctrl + K) --- */
.pn-cmd-tetikleyici {
    user-select: none;
}
.pn-cmd-tetikleyici:hover {
    border-color: var(--ana, #3b82f6) !important;
    background: var(--kart) !important;
}
.pn-cmd-dialog {
    padding: 0;
    margin: auto;
    max-width: 580px;
    width: min(94vw, 580px);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    background: var(--kart);
    box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.75), 0 0 30px rgba(59, 130, 246, 0.12);
    overflow: hidden;
    color: var(--metin);
    position: fixed;
    inset: 0;
    z-index: 99999;
}
.pn-cmd-dialog::backdrop {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pn-cmd-tepe {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--cizgi);
    background: var(--yuzey-2);
}
.pn-cmd-arama-simge {
    color: var(--ana, #3b82f6);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pn-cmd-girdi {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    font-size: 0.98rem;
    color: var(--metin);
    font-family: inherit;
    font-weight: 500;
}
.pn-cmd-esc-btn {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--metin-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.pn-cmd-esc-btn:hover {
    border-color: var(--metin-2);
    color: var(--metin);
}
.pn-cmd-govde {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 12px;
}
.pn-cmd-grup-baslik {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--metin-3);
    padding: 8px 12px 4px;
}
.pn-cmd-oge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: var(--metin);
    margin-bottom: 2px;
}
.pn-cmd-oge:hover,
.pn-cmd-oge.aktif {
    background: var(--yuzey-2);
}
html.karanlik-mod .pn-cmd-oge:hover,
html.karanlik-mod .pn-cmd-oge.aktif {
    background: rgba(255, 255, 255, 0.08);
}
.pn-cmd-oge-sol {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}
.pn-cmd-simge-kutu {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pn-cmd-oge-baslik {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--metin);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pn-cmd-oge-alt {
    font-size: 0.76rem;
    color: var(--metin-3);
    margin-top: 1px;
}
.pn-cmd-taban {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--yuzey-2);
    border-top: 1px solid var(--cizgi);
    font-size: 0.74rem;
    color: var(--metin-3);
}
.pn-cmd-taban-sol {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pn-cmd-taban-sol kbd {
    padding: 1px 5px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--metin-2);
}
.pn-cmd-taban-sag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.pn-cmd-nokta {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--basari, #10b981);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}


/* --- 21st.dev Border Beam & Bento Grid & Shimmer Effects --- */
@keyframes border-beam {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.tn-beam-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 1px;
    background: transparent;
}
.tn-beam-card::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0 340deg, #f59e0b 360deg);
    animation: border-beam 4s linear infinite;
}
.tn-beam-ic {
    position: relative;
    z-index: 1;
    border-radius: 19px;
    height: 100%;
}
@keyframes tn-shimmer {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}
.tn-shimmer-btn {
    position: relative;
    overflow: hidden;
}
.tn-shimmer-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-150%);
    animation: tn-shimmer 3.5s infinite;
}

/* --- Radar Pulse Badges (Kayıp Müşteri Radarı) --- */
@keyframes pn-radar-pulse-anim {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes pn-radar-pulse-danger {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.pn-radar-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}
.pn-radar-pulse--uyari {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}
.pn-radar-pulse--uyari .pn-radar-nokta {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    animation: pn-radar-pulse-anim 2s infinite;
}
.pn-radar-pulse--tehlike {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
}
.pn-radar-pulse--tehlike .pn-radar-nokta {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: pn-radar-pulse-danger 2s infinite;
}


/* --- 21st.dev Floating Selection Bar (Randevu Akışı) --- */
.bk-canli-secim-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 540px);
    z-index: 9999;
    animation: bk-bar-gel 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bk-bar-gel {
    from { transform: translate(-50%, 30px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.bk-canli-secim-ic {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 18px;
    padding: 10px 18px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bk-canli-secim-sol {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bk-secilen-rozet {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
}
.bk-secilen-tutar-grup {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.bk-secilen-tutar {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
}
.bk-secilen-sure {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 600;
}