/* =====================================================================
   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; }
}



/* ==========================================================================
   BERBER PANEL — 100% FULL-WIDTH ULTRA LUXURY DARK NAVY LANDING PAGE
   ========================================================================== */

:root {
    --tn-bg: #0b132b;
    --tn-bg-alt: #0e172a;
    --tn-bg-card: rgba(255, 255, 255, 0.035);
    --tn-bg-card-hover: rgba(255, 255, 255, 0.07);
    --tn-border: rgba(255, 255, 255, 0.08);
    --tn-border-hover: rgba(199, 164, 105, 0.4);
    --tn-metin: #ffffff;
    --tn-metin-alt: #94a3b8;
    --tn-metin-soluk: #64748b;
    --altin: #c7a469;
    --altin-parlak: #f59e0b;
    --mavi: #38bdf8;
    --yesil: #22c55e;
}

html, body.tanitim, body.govde--tanitim, body {
    background: #0b132b !important;
    background-color: #0b132b !important;
    color: #e2e8f0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Full Width Sections */
.tn-kapsayici,
.tn-vitrin,
.tn-bolum,
.tn-bolum--yuzey,
.tn-bolum--gri,
.tn-3d-bolum,
.tn-musteri-bolum,
.tn-3d-sss-alani,
.tn-kapanis,
.tn-dip,
.tn-sayfa-sekmeleri-sarmal {
    width: 100% !important;
    max-width: 100% !important;
    background: #0b132b !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.tn-bolum--yuzey {
    background: #0e172a !important;
    border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tn-bolum--gri {
    background: #090e1f !important;
    border-block: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tn-kapanis {
    background: linear-gradient(180deg, #090e1f 0%, #070c18 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tn-dip {
    background: #050811 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 60px 0 40px !important;
}

/* Max Width Container */
.tn-dar {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Typography & Headings */
.tn-baslik,
.tn-vitrin h1,
.tn-bolum h2,
.tn-bolum h3,
.tn-kapanis h2,
.tn-kapanis h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.tn-alt,
.tn-vitrin__alt,
.tn-bolum p,
.tn-kapanis p {
    color: #94a3b8 !important;
    line-height: 1.65 !important;
}

.tn-etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(199, 164, 105, 0.12);
    border: 1px solid rgba(199, 164, 105, 0.25);
    color: var(--altin);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 3 Adım Kartları (Section #nasil) */
.tn-adim-izgara {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    margin-top: 36px !important;
}

.tn-adim-kart {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 36px 30px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tn-adim-kart:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(199, 164, 105, 0.35) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3) !important;
}

.tn-adim-kart__no {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: var(--altin) !important;
    margin-bottom: 14px !important;
    display: block !important;
    letter-spacing: 0.05em !important;
}

.tn-adim-kart h3,
.tn-adim-kart__baslik {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}

.tn-adim-kart p {
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.tn-adim-kart a {
    color: var(--altin) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* Fark Bölümü (#fark) */
.tn-fark {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
}

.tn-adres {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    color: #e2e8f0 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.tn-adres--iyi {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    font-weight: 700 !important;
}

.tn-adres--kotu {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

/* 4 Ana Süreç (#ozellik) */
.tn-surec-liste {
    display: grid !important;
    gap: 60px !important;
    margin-top: 48px !important;
}

.tn-surec-oge {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    padding: 44px !important;
}

.tn-surec-oge--ters {
    grid-template-columns: 1fr 1fr !important;
}

.tn-surec-oge h3 {
    font-size: 1.55rem !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

.tn-surec-oge p {
    color: #94a3b8 !important;
    font-size: 1rem !important;
}

.tn-surec-madde-liste {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 !important;
    display: grid !important;
    gap: 10px !important;
}

.tn-surec-madde-liste li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
}

.onay-simge {
    color: #34d399 !important;
    font-weight: 900 !important;
}

/* SSS Kartları (#sss) */
.tn-sss-kategori-sarmal {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 36px !important;
}

.tn-sss-kat-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.tn-sss-kat-btn.aktif,
.tn-sss-kat-btn:hover {
    background: var(--altin) !important;
    border-color: var(--altin) !important;
    color: #0b132b !important;
    font-weight: 700 !important;
}

.tn-sss-izgara-3d {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

.tn-sss-kart {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    transition: all 0.25s !important;
}

.tn-sss-kart summary {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

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

.tn-sss-kart p {
    color: #94a3b8 !important;
    font-size: 0.94rem !important;
    margin: 14px 0 0 !important;
    line-height: 1.6 !important;
}

/* Sticky Fast Nav */
.tn-sayfa-sekmeleri-sarmal {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: rgba(11, 19, 43, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 0 !important;
}

.tn-sayfa-sekmeleri {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.tn-sekme-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.tn-sekme-btn.tn-sekme-btn--aktif,
.tn-sekme-btn:hover {
    background: rgba(199, 164, 105, 0.18) !important;
    border-color: rgba(199, 164, 105, 0.4) !important;
    color: var(--altin) !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .tn-adim-izgara {
        grid-template-columns: 1fr !important;
    }
    .tn-fark {
        grid-template-columns: 1fr !important;
    }
    .tn-surec-oge {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
    }
    .tn-sss-izgara-3d {
        grid-template-columns: 1fr !important;
    }
}




/* ==========================================================================
   BERBER PANEL — 100% FULL-SCREEN ULTRA-CONTRAST MASTER STYLESHEET
   ========================================================================== */

:root {
    --altin: #c7a469;
    --altin-parlak: #f59e0b;
    --lacivert-koyu: #0b132b;
    --lacivert-orta: #0e172a;
    --lacivert-kart: #17233f;
    --mavi: #38bdf8;
    --yesil: #10b981;
    --metin-beyaz: #ffffff;
    --metin-gri: #cbd5e1;
    --metin-soluk: #94a3b8;
}

html, body, body.tanitim, body.govde--tanitim {
    background-color: #0b132b !important;
    background: #0b132b !important;
    color: #e2e8f0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

/* 100% Full-Width Edge-to-Edge Sections */
.tn-kapsayici,
.tn-vitrin,
.tn-bolum,
.tn-bolum--yuzey,
.tn-bolum--gri,
.tn-3d-bolum,
.tn-musteri-bolum,
.tn-3d-sss-alani,
.tn-kapanis,
.tn-dip,
.tn-sayfa-sekmeleri-sarmal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #0b132b !important;
    box-sizing: border-box !important;
}

.tn-bolum--yuzey {
    background: #0e172a !important;
    border-block: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.tn-bolum--gri {
    background: #090e1f !important;
    border-block: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.tn-kapanis {
    background: #0e172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 80px 0 !important;
}

.tn-dip {
    background: #070c18 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 60px 0 40px !important;
}

/* Centered Container */
.tn-dar {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Tanitim sayfasi metin renkleri ve basliklari
   ---------------------------------------------------------------------
   BU BLOK TANITIM SAYFASINA AITTIR, SITE GENELINE DEGIL.

   Seciciler eskiden ciplak "h1, h2, h3, h4" ve "p" ile basliyordu ve
   "!important" tasiyordu; yani PANEL dahil butun sayfalarda her baslik
   zorla #ffffff, her paragraf #cbd5e1 oluyordu. Tanitim sayfasinin
   koyu zemininde dogru gorunen bu renkler, panelin gunduz (acik)
   temasinda beyaz zemin uzerine beyaz yaziya donusuyor ve kart
   basliklari ile pencere basliklari OKUNAMIYORDU. Ayrica "p" kurali
   panelde her paragrafin punto ve satir araligini da eziyordu.

   Ciplak seciciler tanitim kapsayicilarina baglandi; tanitim
   sayfasinin gorunumu ayni kaldi, panel kendi tema degiskenlerini
   yeniden kullanabiliyor. */
.tn-baslik,
.section-title,
.tn-vitrin h1, .tn-vitrin h2, .tn-vitrin h3,
.tn-bolum h1, .tn-bolum h2, .tn-bolum h3, .tn-bolum h4,
.tn-kapanis h2, .tn-kapanis h3,
.tn-dip h3, .tn-dip h4 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.tn-alt,
.section-desc,
.tn-vitrin__alt,
.tn-vitrin p,
.tn-bolum p,
.tn-kapanis p,
.tn-dip p {
    color: #cbd5e1 !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
}

/* Badges */
.tn-etiket,
.section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(199, 164, 105, 0.15) !important;
    border: 1px solid rgba(199, 164, 105, 0.35) !important;
    color: var(--altin) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.section-label--emerald {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}

.section-label--blue {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
}

.section-label--indigo {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #818cf8 !important;
}

.section-label--orange {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

/* Feature Lists (Green Checkmark Items) - ULTRA CLEAR */
.feature-list,
.tn-surec-madde-liste {
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 0 !important;
    display: grid !important;
    gap: 14px !important;
}

.feature-list li,
.tn-surec-madde-liste li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: #f1f5f9 !important;
    line-height: 1.5 !important;
}

.feature-list li span,
.tn-surec-madde-liste li span {
    color: #f1f5f9 !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
}

.feature-list li .onay-simge,
.tn-surec-madde-liste li .onay-simge,
.onay-simge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}

/* 3 Adım Kartları (Section #nasil) */
.tn-adim-izgara {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    margin-top: 36px !important;
}

.tn-adim-kart {
    background: #17233f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 36px 28px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.tn-adim-kart__no {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: var(--altin) !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.tn-adim-kart h3,
.tn-adim-kart__baslik {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}

.tn-adim-kart p,
.tn-adim-kart__metin {
    font-size: 1rem !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

.tn-adim-kart a {
    color: var(--altin) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* Fark Bölümü (#fark) */
.tn-fark {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
}

.tn-adres {
    background: #17233f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.tn-adres--iyi {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
    font-weight: 800 !important;
}

.tn-adres--kotu {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

/* 4 Ana Süreç Grid */
.tn-sira {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 48px !important;
    align-items: center !important;
    padding: 40px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tn-sira--ters {
    grid-template-columns: 0.95fr 1.05fr !important;
}

/* SSS Alanı (#sss) */
.tn-sss-kategori-sarmal {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 36px !important;
}

.tn-sss-kat-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    padding: 10px 22px !important;
    border-radius: 24px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.tn-sss-kat-btn.aktif,
.tn-sss-kat-btn:hover {
    background: var(--altin) !important;
    border-color: var(--altin) !important;
    color: #0b132b !important;
    font-weight: 900 !important;
}

.tn-sss-izgara-3d {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
}

.tn-sss-kart {
    background: #17233f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 22px 26px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.tn-sss-kart summary {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

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

.tn-sss-kart p,
.tn-sss-kart-cevap {
    color: #cbd5e1 !important;
    font-size: 1rem !important;
    margin: 16px 0 0 !important;
    line-height: 1.65 !important;
}

/* Sticky Secondary Nav */
.tn-sayfa-sekmeleri-sarmal {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: rgba(11, 19, 43, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 0 !important;
}

.tn-sayfa-sekmeleri {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.tn-sekme-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    padding: 9px 20px !important;
    border-radius: 20px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.tn-sekme-btn.tn-sekme-btn--aktif,
.tn-sekme-btn:hover {
    background: rgba(199, 164, 105, 0.22) !important;
    border-color: rgba(199, 164, 105, 0.5) !important;
    color: var(--altin) !important;
}

/* Mobile Layouts */
@media (max-width: 900px) {
    .tn-adim-izgara {
        grid-template-columns: 1fr !important;
    }
    .tn-fark {
        grid-template-columns: 1fr !important;
    }
    .tn-sira,
    .tn-sira--ters {
        grid-template-columns: 1fr !important;
    }
    .tn-sss-izgara-3d {
        grid-template-columns: 1fr !important;
    }
}



/* --- 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;
}

/* Tehlikeli islem formu: eskiden inline style="margin:0" vardi; inline
   bildirim mobil kuralini eziyordu. Ayni sifirlama artik burada. */
.kasa-tehlike-ayir { margin: 0; }

/* =====================================================================
   MOBIL UYUM DUZELTMELERI  (360 / 390 / 430 px)
   ---------------------------------------------------------------------
   Bu bolum, panelin telefondan kullanilan dort ekranini hedefler:
   Genel Bakis, Randevu Takvimi, Kasa & Adisyon, Musteriler / CRM.

   Kural: MASAUSTU GORUNUMU DEGISMEZ. Butun kurallar bir en-boy
   sorgusunun icinde; hicbiri masaustunde uygulanmaz. Bilgi ya da
   islev gizlenmez, yalnizca yerlesim duzeltilir.
   ===================================================================== */

@media (max-width: 860px) {

    /* --- 1. Yatay tasma ---------------------------------------------
       Sayfanin TAMAMI hicbir zaman yana kaymamali. Genis icerik
       (takvim, tablo) kendi kutusunun icinde kayar; asagida. */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Uzun telefon numarasi, e-posta ya da hizmet adi kutuyu
       tasirmasin. */
    .kart, .olcum, .uyari { overflow-wrap: anywhere; }

    /* --- 2. Dokunma hedefleri (en az 44x44 CSS px) -------------------
       "dugme--kucuk" masaustunde 28-32px yuksekligindeydi; parmakla
       yanlis dugmeye basmayi kolaylastiriyordu. */
    .dugme,
    .dugme--kucuk,
    .tv-pencere__kapat,
    .tkv-ok {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Onay kutusu ve radyo dugmeleri de parmakla secilebilir olmali. */
    input[type="checkbox"],
    input[type="radio"] { width: 20px; height: 20px; }

    /* --- 3. Form alanlari --------------------------------------------
       iOS, 16px'ten kucuk bir alana odaklaninca sayfayi otomatik
       buyutuyor ve kullanici geri uzaklastirmak zorunda kaliyor.
       En az 16px sart. Sayfa icinde inline "height" verilmis alanlar
       da 44px'in altina dusmesin. */
    .girdi,
    .secim-kutusu,
    input[type="text"], input[type="tel"], input[type="email"],
    input[type="number"], input[type="search"], input[type="date"],
    input[type="time"], input[type="password"],
    select, textarea {
        font-size: 16px;
        min-height: 44px;
    }
    textarea { min-height: 72px; }

    /* --- 4. Tehlikeli islemler icin ayirma ---------------------------
       Sil / iptal dugmesi tahsilat dugmesinin hemen yaninda duruyordu.
       Mobilde yanlis dokunmayi zorlastirmak icin aralarina belirgin
       bosluk konuyor. */
    .kasa-tehlike-ayir { margin: 0 0 0 14px; }

    /* --- 5. Pencereler (dialog) --------------------------------------
       Ekrana sigmali; uzun icerik PENCERENIN ICINDE kaymali ki
       kapatma ve islem dugmelerine ulasilabilsin. */
    dialog.tahsil-pencere,
    dialog.yr-pencere,
    dialog.tv-pencere,
    dialog.pn-cmd-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: 88vh;
        max-height: 88dvh;          /* tarayici cubuklari hesaba katilir */
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px;
    }
    dialog.tv-pencere { padding: 0; }   /* kendi ic dolgusu var */

    /* Pencere ici uzun listeler ekranin yarisindan fazlasini
       kaplamasin; altindaki dugme gorunur kalsin. */
    .pn-cmd-govde { max-height: 52vh; }
    #g-yr-kategori-listesi { max-height: 40vh; }

    /* --- 6. Ekran klavyesi -------------------------------------------
       Klavye acilinca gorunur alan kisaliyor. betik.js govdeye
       "klavye-acik" sinifini ekliyor; pencere o anda daha kisa
       tutuluyor ki kaydet dugmesine erisilebilsin. */
    body.klavye-acik dialog.tahsil-pencere,
    body.klavye-acik dialog.yr-pencere,
    body.klavye-acik dialog.pn-cmd-dialog {
        max-height: 96vh;
        max-height: 96dvh;
        top: 4px;
        margin-top: 4px;
    }

    /* --- 7. Takvim ---------------------------------------------------
       Tablo "width:100%" ile sikisinca saat ve usta sutunlari
       okunmaz hale geliyordu. Mobilde tabloya asgari genislik verilip
       KENDI kutusunda yatay kaydiriliyor; sayfa govdesi kaymiyor. */
    .tkv-kaydir {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .tkv { width: auto; min-width: 560px; }
    .tkv thead th { padding: 10px 6px; font-size: .88rem; }
    .tkv-saat-bas, .tkv td:first-child { min-width: 58px; }
    .tkv td { min-width: 132px; }

    /* Gun seridi de kendi icinde kaysin. */
    .gunler { scroll-snap-type: x proximity; }
    .gunler > * { scroll-snap-align: start; }

    /* --- 8. Genis tablolar (CRM gecmisi, kapali adisyonlar) ---------- */
    .tablo-sar, .kart > div[style*="overflow-x"] {
        -webkit-overflow-scrolling: touch;
    }

    /* --- 8b. Gercek sayfa olcumunde bulunan eksikler ----------------
       Gece/gunduz dugmesi 31 px, cikis baglantisi 42 px, takvim
       detayindaki "Randevuyu Iptal Et" 36 px idi. Basliktaki Ctrl K
       rozeti dokunmatik ekranda islevsiz ve arama kutusu kuculmedigi
       icin sagdaki dugmeleri ekrandan itiyordu. Dugme yazisi sigmazsa
       iki satira iner; kesilmez. */
    .karanlik-mod-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .pn-alt__bag,
    .pn-alt__ikili .pn-alt__bag,
    .pn-alt__bag--kur,
    .pn-alt__bag--cikis {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    dialog.tv-pencere button[type="submit"]:not(.dugme) { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
    .pn-cmd-kisayol { display: none !important; }
    .pn-cmd-tetikleyici { height: 44px !important; }   /* satir ici height:38px */
    .tv-pencere__kapat { min-width: 44px; }
    .pn-cmd-esc-btn { min-width: 44px; min-height: 44px; }
    /* Yan menu alt gezinme cubugunun (62 px, z-index 9999) altinda
       kaliyordu; "Cikis Yap" dokunulamiyordu. Son oge cubugun ustune
       gelsin diye alt dolgu cubuk yuksekligi kadar artirildi. */
    .kenar { padding-bottom: 82px; }
    .icerik .dugme { white-space: normal; max-width: 100%; }
}

/* --- 9. Dar telefonlar: 430 px ve alti ------------------------------- */
@media (max-width: 430px) {

    .icerik { padding: 18px 14px 40px; }

    /* Kasa ekrani: odeme dagilimi ve hesap kutulari uc sutunda
       ~95 px'e dusuyordu; rakamlar kirpiliyordu. Alt alta aliniyor. */
    .tahsil-odeme-izgara { grid-template-columns: 1fr !important; }
    .hesap-kutu-izgara   { grid-template-columns: 1fr 1fr !important; }
    .hesap-kutu--net     { grid-column: 1 / -1; }

    /* Adisyon basligi ve tutar yan yana sigmiyordu. */
    .adisyon-ic-kart { padding: 16px; }

    /* Kart eylemleri (Detay / Geri Cagir / Kasaya Al) tek satirda
       kirpilmasin; sarip esit aralik veriliyor. */
    .customer-actions { gap: 8px; }
    .customer-actions > * { flex: 1 1 auto; text-align: center; }

    /* Tahsilat penceresindeki buyuk tutar tasmasin. */
    .tahsil-pencere { padding: 16px; }
}

/* --- 10. Cok dar telefonlar: 360 px ---------------------------------- */
@media (max-width: 360px) {

    .icerik { padding: 16px 12px 36px; }

    /* Metrik kartlari 220 px asgari genislikle tasiyordu. */
    .kasa-metrik-izgara { grid-template-columns: 1fr; }
    .kasa-metrik__deger { font-size: 1.45rem; }

    /* Iki sutunlu form satirlari (Ad + Telefon, Tarih + Saat) alt alta. */
    .yr-pencere form > div[style*="grid-template-columns:1fr 1fr"],
    .tahsil-pencere form > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .hesap-kutu-izgara { grid-template-columns: 1fr !important; }
}