/* ==========================================================================
   BERBER SİSTEMİ — TASARIM SİSTEMİ
   ==========================================================================

   Tek tasarım sistemi, beş tema (K37). Bileşenler renk YAZMAZ; yalnızca
   jeton okur. Yeni tema eklemek, yeni bir [data-tema] bloğu yazmaktır —
   bileşen CSS'ine dokunulmaz.

   Tema salonun kimliğidir, kullanıcı tercihi değildir. Bu yüzden burada
   prefers-color-scheme YOK: koyu tema seçen bir salonun sayfası, ziyaretçi
   telefonu açık moddayken de koyu görünür. Süper admin paneli bu dosyayı
   kullanmaz, kendi sade biçimlendirmesi vardır.

   Jeton adları Türkçedir; kod tabanının geri kalanıyla tutarlı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TEMA JETONLARI
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TEMALAR

   Her tema yalnizca jetonlari yeniden tanimlar; asagidaki bilesen
   kurallarina hic dokunulmaz. Yeni tema eklemek buraya bir blok yazmaktir.

   'zemin' degeri config/temalar.php icindeki degerle AYNI olmak zorunda:
   theme-color meta etiketi oradan okunur ve ayrisirsa telefonda sayfanin
   ustunde farkli renkte bir serit gorunur. Bir test bunu dogrular.
   -------------------------------------------------------------------------- */

/* Tema A — Kömür & Amber (varsayılan) */
:root,
[data-tema="a"] {
    --zemin:        #15110d;   /* sayfa zemini — siyah değil, kahve koyusu */
    --yuzey:        #1f1a14;   /* kart yüzeyi */
    --yuzey-2:      #2b2419;   /* kabartılmış yüzey, pasif düğme */
    --yazi:         #f3ece1;
    --soluk:        #9c9083;
    --cizgi:        #2b2419;
    --cizgi-guclu:  #453a2a;

    --aksan:        #e5a54b;
    --aksan-yazi:   #1c1408;   /* aksan üzerine yazılan renk */
    --aksan-zayif:  rgba(229, 165, 75, .09);
    --aksan-cizgi:  rgba(229, 165, 75, .24);

    --iyi:          #7fb98a;
    --kotu:         #dd8267;
    --kotu-zayif:   rgba(221, 130, 103, .10);
    --kotu-cizgi:   rgba(221, 130, 103, .28);

    --yazi-tipi:      "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --yazi-tipi-bas:  "Big Shoulders Display", "Archivo", system-ui, sans-serif;
    --yazi-tipi-tek:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Köşe yarıçapı — dokunulacak şeye benzemesi için cömert */
    --r-kk: 11px;   /* küçük: saat kutusu */
    --r-o:  14px;   /* orta: kart, düğme */
    --r-b:  20px;   /* büyük: kapak, kod kartı */
    --r-tam: 999px;

    /* Boşluk ölçeği — 4'ün katları */
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 20px; --b6: 26px; --b7: 34px;
}

/* Tema B — Kum & Mürekkep (açık) */
[data-tema="b"] {
    --zemin:        #f7f2e9;
    --yuzey:        #fffdf8;
    --yuzey-2:      #efe9dc;
    --yazi:         #1e1b16;
    --soluk:        #7a7266;
    --cizgi:        #e8e0d1;
    --cizgi-guclu:  #d2c7b2;

    --aksan:        #28345c;
    --aksan-yazi:   #f4f5fa;
    --aksan-zayif:  rgba(40, 52, 92, .07);
    --aksan-cizgi:  rgba(40, 52, 92, .18);

    --iyi:          #4a7a52;
    --kotu:         #a8452f;
    --kotu-zayif:   rgba(168, 69, 47, .08);
    --kotu-cizgi:   rgba(168, 69, 47, .24);

    --yazi-tipi:      "Instrument Sans", "Archivo", system-ui, sans-serif;
    --yazi-tipi-bas:  "Instrument Serif", Georgia, serif;
    --yazi-tipi-tek:  "IBM Plex Mono", ui-monospace, monospace;

    --r-kk: 11px; --r-o: 14px; --r-b: 18px; --r-tam: 999px;
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 20px; --b6: 26px; --b7: 34px;
}

/* Serif başlık büyük harfe çevrilmez; küçük harf onun karakteri. */
[data-tema="b"] .salon-adi,
[data-tema="b"] .marka {
    text-transform: none;
    letter-spacing: -.015em;
}

/* Tema C — Petrol & Mint (koyu) */
[data-tema="c"] {
    --zemin:        #0b2427;
    --yuzey:        #0f3034;
    --yuzey-2:      #164045;
    --yazi:         #e6f3f1;
    --soluk:        #7fa5a3;
    --cizgi:        #164045;
    --cizgi-guclu:  #1f565c;

    --aksan:        #4fd8ba;
    --aksan-yazi:   #04211c;
    --aksan-zayif:  rgba(79, 216, 186, .10);
    --aksan-cizgi:  rgba(79, 216, 186, .22);

    --iyi:          #4fd8ba;
    --kotu:         #e88a72;
    --kotu-zayif:   rgba(232, 138, 114, .10);
    --kotu-cizgi:   rgba(232, 138, 114, .26);

    --yazi-tipi:      "Familjen Grotesk", "Archivo", system-ui, sans-serif;
    --yazi-tipi-bas:  "Familjen Grotesk", "Archivo", system-ui, sans-serif;
    --yazi-tipi-tek:  "IBM Plex Mono", ui-monospace, monospace;

    --r-kk: 12px; --r-o: 16px; --r-b: 22px; --r-tam: 999px;
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 20px; --b6: 26px; --b7: 34px;
}

[data-tema="c"] .salon-adi,
[data-tema="c"] .marka {
    text-transform: none;
    letter-spacing: -.035em;
    font-weight: 700;
}

/* Tema D — Kireç & Bordo (açık) */
[data-tema="d"] {
    --zemin:        #f6f4f1;
    --yuzey:        #ffffff;
    --yuzey-2:      #ece8e3;
    --yazi:         #1c1917;
    --soluk:        #736b64;
    --cizgi:        #e4dfd9;
    --cizgi-guclu:  #cdc5bc;

    --aksan:        #7d2334;
    --aksan-yazi:   #fdf6f5;
    --aksan-zayif:  rgba(125, 35, 52, .07);
    --aksan-cizgi:  rgba(125, 35, 52, .18);

    --iyi:          #4a7048;
    --kotu:         #9b3b22;
    --kotu-zayif:   rgba(155, 59, 34, .08);
    --kotu-cizgi:   rgba(155, 59, 34, .24);

    --yazi-tipi:      "Archivo", system-ui, sans-serif;
    --yazi-tipi-bas:  "Big Shoulders Display", "Archivo", system-ui, sans-serif;
    --yazi-tipi-tek:  "IBM Plex Mono", ui-monospace, monospace;

    --r-kk: 8px; --r-o: 10px; --r-b: 14px; --r-tam: 999px;
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 20px; --b6: 26px; --b7: 34px;
}

/* Tema E — Gece & Buz (koyu) */
[data-tema="e"] {
    --zemin:        #0e1420;
    --yuzey:        #161e2d;
    --yuzey-2:      #1f293b;
    --yazi:         #e8edf5;
    --soluk:        #8695ad;
    --cizgi:        #1f293b;
    --cizgi-guclu:  #2f3d54;

    --aksan:        #6fb2f0;
    --aksan-yazi:   #06111f;
    --aksan-zayif:  rgba(111, 178, 240, .10);
    --aksan-cizgi:  rgba(111, 178, 240, .22);

    --iyi:          #6cc39a;
    --kotu:         #e58a76;
    --kotu-zayif:   rgba(229, 138, 118, .10);
    --kotu-cizgi:   rgba(229, 138, 118, .26);

    --yazi-tipi:      "Archivo", system-ui, sans-serif;
    --yazi-tipi-bas:  "Archivo", system-ui, sans-serif;
    --yazi-tipi-tek:  "IBM Plex Mono", ui-monospace, monospace;

    --r-kk: 10px; --r-o: 13px; --r-b: 18px; --r-tam: 999px;
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 20px; --b6: 26px; --b7: 34px;
}

[data-tema="e"] .salon-adi,
[data-tema="e"] .marka {
    text-transform: none;
    letter-spacing: -.03em;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. TEMEL
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font-family: var(--yazi-tipi);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

:focus-visible {
    outline: 2px solid var(--aksan);
    outline-offset: 2px;
    border-radius: var(--r-kk);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sayfa gövdesi. Alt boşluk, yapışkan alt barın içeriği örtmemesi için. */
.sayfa   { max-width: 560px; margin: 0 auto; }
.govde   { padding: var(--b5) 18px 112px; }
.govde--dar { padding-bottom: var(--b7); }

/* --------------------------------------------------------------------------
   3. ÜST BAR
   -------------------------------------------------------------------------- */

.ust-bar {
    display: flex; align-items: center; gap: var(--b3);
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--cizgi);
}
.ust-bar__geri {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-tam); border: 1px solid var(--cizgi);
    background: var(--yuzey); color: var(--yazi);
    font-size: .9rem; cursor: pointer;
}
.ust-bar__baslik { font-weight: 600; font-size: .94rem; }
.ust-bar__adim   { margin-left: auto; font-family: var(--yazi-tipi-tek);
                   font-size: .72rem; color: var(--soluk); }

.marka {
    font-family: var(--yazi-tipi-bas); font-weight: 700;
    font-size: 1.14rem; letter-spacing: .08em; text-transform: uppercase;
}
.marka-logo { height: 26px; width: auto; }
.ust-bar__sag { margin-left: auto; font-size: .78rem; color: var(--soluk);
                font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. BAŞLIKLAR
   -------------------------------------------------------------------------- */

.kapak {
    margin: 0 18px; padding: var(--b5);
    min-height: 190px; border-radius: var(--r-b);
    display: flex; align-items: flex-end;
    /* Fotoğraf yoksa bu ışık boşluğu doldurur; sayfa eksik durmaz. */
    background:
        radial-gradient(120% 110% at 18% 8%, var(--aksan-zayif) 0%, transparent 58%),
        linear-gradient(158deg, var(--yuzey) 0%, var(--zemin) 100%);
    background-size: cover;
    background-position: center;
}
.kapak--fotografli { position: relative; color: #fff; }
/* Fotoğraf üzerine yazı okunsun diye alttan koyulaşan perde. */
.kapak--fotografli::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
}
.kapak--fotografli > * { position: relative; }

.salon-adi {
    font-family: var(--yazi-tipi-bas); font-weight: 700;
    font-size: 2.7rem; line-height: .92; letter-spacing: .005em;
    text-transform: uppercase; margin: 0; text-wrap: balance;
}
.salon-adi--buyuk { font-size: 3.1rem; }

.yer {
    font-size: .7rem; color: var(--soluk); letter-spacing: .18em;
    text-transform: uppercase; margin: 10px 0 0;
}
.kapak--fotografli .yer { color: rgba(255,255,255,.78); }

.bolum {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--soluk); font-weight: 600; margin: 0 0 10px;
}
.bolum + * { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. DURUM ROZETİ
   -------------------------------------------------------------------------- */

.durum {
    display: flex; align-items: center; gap: 9px;
    padding: 11px var(--b4); border-radius: var(--r-tam);
    background: var(--aksan-zayif); border: 1px solid var(--aksan-cizgi);
    font-size: .84rem;
}
.durum__nokta { width: 6px; height: 6px; border-radius: 50%;
                background: var(--iyi); flex: none; }
.durum--kapali { background: transparent; border-color: var(--cizgi-guclu); }
.durum--kapali .durum__nokta { background: var(--soluk); }
.durum__sag { margin-left: auto; color: var(--soluk);
              font-variant-numeric: tabular-nums; }

.rozet {
    display: inline-block; padding: 3px 10px; border-radius: var(--r-tam);
    border: 1px solid var(--cizgi-guclu); color: var(--soluk);
    font-size: .72rem; letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   6. SEÇİLEBİLİR KART
   -------------------------------------------------------------------------- */

.secim {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 14px 15px; margin: 0 0 var(--b2);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-o); color: inherit; text-align: left;
    font: inherit; cursor: pointer;
}
.secim--acik  { border-color: var(--aksan); background: var(--aksan-zayif); }
/* Pasif seçenek gizlenmez; SEBEBİ yazılır. Sessizce yok olan seçenek
   "usta nerede?" sorusu üretir. */
.secim--pasif { opacity: .42; cursor: not-allowed; }
.secim__govde { flex: 1; min-width: 0; }
.secim__ad    { font-weight: 600; font-size: .92rem; }
.secim__alt   { font-size: .76rem; color: var(--soluk); margin-top: 2px; }
.secim__sag   { font-size: .96rem; font-weight: 700; white-space: nowrap;
                font-variant-numeric: tabular-nums; }

.kutu {
    width: 21px; height: 21px; flex: none; border-radius: 7px;
    border: 1.5px solid var(--cizgi-guclu);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: var(--aksan-yazi);
}
.secim--acik .kutu { background: var(--aksan); border-color: var(--aksan); }

.avatar {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: linear-gradient(150deg, var(--yuzey-2), var(--zemin));
    border: 1px solid var(--cizgi-guclu);
    background-size: cover; background-position: center;
}
.avatar--herkes {
    display: flex; align-items: center; justify-content: center;
    background: var(--aksan-zayif); border-color: var(--aksan-cizgi);
    color: var(--aksan); font-weight: 700; font-size: .95rem;
}

/* --------------------------------------------------------------------------
   7. GÜN VE SAAT
   -------------------------------------------------------------------------- */

.gunler {
    display: flex; gap: var(--b2); overflow-x: auto;
    padding: 0 0 var(--b1); margin: 0 0 var(--b5);
    scrollbar-width: none;
}
.gunler::-webkit-scrollbar { height: 0; }
.gun {
    flex: none; width: 54px; padding: 9px 0; text-align: center;
    border-radius: 13px; background: var(--yuzey);
    border: 1px solid var(--cizgi); color: inherit; font: inherit;
    cursor: pointer;
}
.gun--acik  { background: var(--aksan); border-color: var(--aksan);
              color: var(--aksan-yazi); }
.gun--pasif { opacity: .3; cursor: not-allowed; }
.gun__ad { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.gun__no { font-size: 1.26rem; font-weight: 700; line-height: 1.2;
           font-variant-numeric: tabular-nums; }

/* Saatler 4'lü ızgarada ve sabah/öğle/akşam diye bölünür.
   Kırk saat tek blokta gösterilirse okunmaz. */
.saatler {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 7px; margin: 0 0 var(--b6);
}
.saat {
    padding: 11px 0; text-align: center; border-radius: var(--r-kk);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    color: inherit; font: inherit; font-size: .86rem; font-weight: 600;
    font-variant-numeric: tabular-nums; cursor: pointer;
}
.saat--acik  { background: var(--aksan); border-color: var(--aksan);
               color: var(--aksan-yazi); }
.saat--dolu  { opacity: .26; text-decoration: line-through; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   8. KART, ÖZET, LİSTE
   -------------------------------------------------------------------------- */

.kart {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-o); padding: 15px 16px; margin: 0 0 var(--b4);
}

.ozet {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-o); padding: 15px 16px; margin: 0 0 var(--b4);
}
.ozet__satir   { display: flex; justify-content: space-between; gap: 14px;
                 padding: 7px 0; font-size: .88rem; }
.ozet__satir + .ozet__satir { border-top: 1px solid var(--cizgi); }
.ozet__satir > :first-child { color: var(--soluk); }
.ozet__satir > :last-child  { font-weight: 600; text-align: right;
                              font-variant-numeric: tabular-nums; }
.ozet__toplam  { display: flex; justify-content: space-between; align-items: baseline;
                 border-top: 1px solid var(--cizgi); margin-top: 5px; padding-top: 11px; }
.ozet__toplam b { font-size: 1.16rem; font-variant-numeric: tabular-nums; }

.satir {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--cizgi);
    font-size: .89rem;
}
.satir:last-child { border-bottom: 0; }
.satir > :last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. UYARI
   -------------------------------------------------------------------------- */

/* Hata sayfası yoktur. Sorun nerede çıktıysa uyarı orada durur ve çözüm
   hemen altındadır. */
.uyari {
    display: flex; gap: 11px; padding: 13px 14px;
    border-radius: var(--r-o); margin: 0 0 var(--b4);
    font-size: .85rem; line-height: 1.5;
    background: var(--aksan-zayif); border: 1px solid var(--aksan-cizgi);
}
.uyari--hata { background: var(--kotu-zayif); border-color: var(--kotu-cizgi); }
.uyari__im   { flex: none; font-style: normal; }
.uyari b     { display: block; margin: 0 0 2px; }
.uyari p     { margin: 0; color: var(--soluk); }

/* --------------------------------------------------------------------------
   10. DÜĞME VE ALT BAR
   -------------------------------------------------------------------------- */

.dugme {
    display: block; width: 100%; padding: 13px; cursor: pointer;
    border-radius: 13px; border: 1px solid var(--cizgi);
    background: var(--yuzey); color: var(--yazi);
    font-family: var(--yazi-tipi); font-size: .88rem; font-weight: 600;
    text-align: center;
}
.dugme--birincil {
    padding: 16px; border: 0; border-radius: var(--r-o);
    background: var(--aksan); color: var(--aksan-yazi);
    font-size: .98rem; font-weight: 700;
}
/* İptal düğmesi dolu kırmızı DEĞİL: yanlışlıkla basılacak bir yer olmamalı. */
.dugme--tehlike { background: transparent; border-color: var(--kotu-cizgi);
                  color: var(--kotu); }
.dugme--sonuk   { background: var(--yuzey-2); color: #6e6255; cursor: not-allowed; }
.dugme--ince    { width: auto; display: inline-block; padding: 9px 16px; }

.ikili { display: flex; gap: var(--b2); margin: 0 0 var(--b2); }
.ikili > * { flex: 1; }

/* Yapışkan eylem barı. Kaydırınca kaybolmaz — sayfanın tek asıl eylemi. */
.alt-bar {
    position: sticky; bottom: 0; z-index: 5;
    margin: 0 -18px -112px; padding: 14px 18px 20px;
    background: linear-gradient(180deg, transparent 0%, var(--zemin) 34%);
}
.alt-bar__ozet {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0 3px 10px; font-size: .84rem;
}
.alt-bar__ozet > :first-child { color: var(--soluk); }
.alt-bar__ozet b { font-size: 1.03rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */

.alan { margin: 0 0 13px; }
.alan__etiket { display: block; font-size: .75rem; color: var(--soluk);
                letter-spacing: .04em; margin: 0 0 6px; }
.girdi {
    width: 100%; padding: 13px 14px; border-radius: var(--r-o);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    color: var(--yazi); font-family: var(--yazi-tipi); font-size: .93rem;
}
.girdi::placeholder { color: var(--soluk); }
.girdi:focus { border-color: var(--aksan); outline: none; }
.alan__hata { color: var(--kotu); font-size: .78rem; margin: 5px 0 0; }

/* --------------------------------------------------------------------------
   12. RANDEVU KODU
   -------------------------------------------------------------------------- */

.kod-kart {
    text-align: center; padding: var(--b6) 18px; margin: 0 0 var(--b5);
    border-radius: var(--r-b); border: 1px solid var(--aksan-cizgi);
    background:
        radial-gradient(120% 120% at 50% 0%, var(--aksan-zayif) 0%, transparent 62%),
        var(--yuzey);
}
.kod-kart__im {
    width: 46px; height: 46px; margin: 0 auto var(--b3); border-radius: 50%;
    background: var(--aksan); color: var(--aksan-yazi);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.kod-kart__not { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
                 color: var(--soluk); margin: 0 0 7px; }
/* Kod alfabesinde karışabilecek karakter yoktur (0/O, 1/I/l). Telefonda
   okunup söylenebilmesi gerekir. */
.kod {
    font-family: var(--yazi-tipi-tek); font-size: 1.78rem; font-weight: 500;
    letter-spacing: .1em; color: var(--aksan);
}

/* --------------------------------------------------------------------------
   13. YARDIMCILAR
   -------------------------------------------------------------------------- */

.soluk    { color: var(--soluk); }
.ortala   { text-align: center; }
.tek      { font-family: var(--yazi-tipi-tek); }
.ust-bosluk   { margin-top: var(--b6); }
.ust-bosluk-s { margin-top: var(--b4); }