/* Ceren Şahbaz Randevu — sade/editöryel, ana site paletinden.
   Brief: Profesyonel · Sade · İşlevsel. Tek vurgu rengi, bol boşluk, büyük dokunma hedefleri.

   Hareket ve materyal dili Apple'ın akışkan arayüz ilkelerine göre kurulmuştur:
   basıldığı anda geri bildirim, yay hissi veren eğriler, saydam katmanlar,
   boyuta göre ayarlanmış tipografi, azaltılmış hareket desteği. */

:root {
    --primary:   #5e4d88;   /* koyu mor — birincil */
    --primary-d: #4a3c6e;   /* hover */
    --accent:    #b4a7d2;   /* açık lavanta */
    --accent-sf: #efeaf6;   /* çok açık lavanta yüzey */
    --text:      #153C33;   /* orman yeşili metin */
    --text-soft: #153C33b3; /* %70 */
    --warn:      #F5A200;   /* sıcak sarı vurgu */
    --line:      #e7e3ee;
    --surface:   #ffffff;
    --bg:        #faf9fc;
    --disabled:  #c9c6d1;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow: 0 1px 2px rgba(21,60,51,.05), 0 8px 30px rgba(94,77,136,.08);
    --shadow-lift: 0 2px 6px rgba(21,60,51,.06), 0 18px 50px rgba(94,77,136,.14);

    /* Sistem yazı tipi önce: optik boyutlandırma ve okunabilirlik ayarları hazır gelir. */
    --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* Hareket: kritik sönümlü yay hissi (aşma yok), tek yönlü çıkışlar için hızlı sönüm. */
    --ease-spring: cubic-bezier(.32, .72, 0, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --dur-press: 110ms;   /* basma geri bildirimi — anlık hissedilmeli */
    --dur-ui:    260ms;   /* küçük durum değişimleri */
    --dur-sheet: 420ms;   /* büyük yüzey hareketi */
}

* { box-sizing: border-box; }

/* Kullanıcının yazı boyutu tercihine saygı: kök %100, ölçüler rem/em. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.5;
    letter-spacing: 0;         /* gövde metni: nötr tracking */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap {
    max-width: 60rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 6vw, 4rem) 1.25rem 3.5rem;
}

/* Klavye kullanıcısı için görünür, fare kullanıcısı için sessiz odak halkası. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Başlık ---- */
.head { margin-bottom: 2.25rem; }
.eyebrow {
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .14em;      /* küçük metin: pozitif tracking okunurluğu artırır */
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
}
.head h1 {
    margin: 0 0 .625rem;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.08;          /* büyük metin: sıkı satır aralığı */
    letter-spacing: -.022em;    /* büyük metin: negatif tracking */
    font-optical-sizing: auto;
}
.lede {
    margin: 0;
    color: var(--text-soft);
    max-width: 46ch;
    line-height: 1.55;
}
.lede strong { color: var(--text); font-weight: 600; }

/* ---- Yerleşim: gün listesi + saat paneli ---- */
.booking {
    display: grid;
    grid-template-columns: 17.5rem 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 720px) {
    .booking { grid-template-columns: 1fr; }
}

/* ---- Günler ---- */
/* Mobilde de dikey liste olarak kalır (masaüstüyle aynı). */
.days { display: flex; flex-direction: column; gap: .625rem; }

/* Panel kapatma butonu ve arka planı yalnızca mobilde görünür. */
.panel-close { display: none; }
.panel-backdrop { display: none; }

.day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 1rem 1.125rem;
    min-height: 4rem;
    border: 1.5px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    flex: 0 0 auto;
    transition: border-color var(--dur-ui) var(--ease-out),
                background   var(--dur-ui) var(--ease-out),
                transform    var(--dur-press) var(--ease-out);
}
.day:hover { border-color: var(--accent); }
/* Geri bildirim basıldığı anda gelir — bırakılınca değil. */
.day:active { transform: scale(.985); transition-duration: var(--dur-press); }
.day.is-active {
    border-color: var(--primary);
    background: var(--accent-sf);
}
.day-weekday { font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; }
.day-date { font-size: .9rem; color: var(--text-soft); }
.day.is-active .day-date { color: var(--primary); }

/* ---- Panel ---- */
.panel {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-height: 17.5rem;
    box-shadow: var(--shadow);
}
.panel-head { margin-bottom: 1.125rem; }
.panel-head h2 {
    margin: 0 0 .25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}
.panel-sub { margin: 0; color: var(--text-soft); font-size: .95rem; }

.times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: .625rem;
}
.slot {
    padding: .875rem .5rem;
    border: 1.5px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;  /* saatler hizalı kalsın */
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--dur-ui) var(--ease-out),
                background   var(--dur-ui) var(--ease-out),
                color        var(--dur-ui) var(--ease-out),
                transform    var(--dur-press) var(--ease-out);
}
.slot:hover { border-color: var(--primary); color: var(--primary); }
.slot:active { transform: scale(.96); transition-duration: var(--dur-press); }
.slot:disabled,
.slot.is-taken {
    background: #f4f3f7;
    border-color: transparent;
    color: var(--disabled);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.slot:disabled:active { transform: none; }

.times-empty, .times-loading {
    grid-column: 1 / -1;
    color: var(--text-soft);
    padding: 1.5rem 0;
    text-align: center;
}

/* ---- Mobil: panel alt-sayfa (sheet) olarak açılır ---- */
@media (max-width: 720px) {
    .panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        margin: 0;
        max-height: 82vh;            /* eski tarayıcı yedeği */
        max-height: 82dvh;           /* modern: adres çubuğuna göre dinamik */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        z-index: 60;
        transform: translate3d(0, 110%, 0);
        transition: transform var(--dur-sheet) var(--ease-spring);
        padding-top: 1.75rem;
        /* iPhone home çubuğu için güvenli alan boşluğu */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -.75rem 2.5rem rgba(21,60,51,.28);
        will-change: transform;

        /* Yüzey, altındaki içeriği belli eden bir materyal gibi davranır. */
        background: rgba(255, 255, 255, .86);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
    }
    body.panel-open .panel { transform: translate3d(0, 0, 0); }

    /* Parmakla sürüklenirken JS 1:1 takip eder; geçiş devre dışı kalır. */
    .panel.is-dragging { transition: none; }

    /* Tutamak: yüzeyin sürüklenebilir olduğunu söyler. */
    .panel::before {
        content: "";
        position: absolute;
        top: .5rem; left: 50%;
        transform: translateX(-50%);
        width: 2.25rem; height: 4px;
        border-radius: 999px;
        background: var(--line);
    }

    .panel-close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: .75rem; right: .875rem;
        width: 2.25rem; height: 2.25rem;
        border: 0; background: var(--accent-sf); color: var(--primary);
        border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer;
        transition: transform var(--dur-press) var(--ease-out);
    }
    .panel-close:active { transform: scale(.92); }

    body.panel-open .panel-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(21,60,51,.34);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 55;
        animation: fade var(--dur-ui) var(--ease-out);
    }

    /* mobilde saatler daha rahat dokunulsun */
    .times { grid-template-columns: repeat(auto-fill, minmax(5.375rem, 1fr)); }
}

/* ---- Footer ---- */
.foot { margin-top: 3rem; color: var(--text-soft); font-size: .85rem; text-align: center; }
.foot p { margin: 0; }

/* ---- Modal ---- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(21,60,51,.38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem; z-index: 50;
    animation: fade var(--dur-ui) var(--ease-out);
}
/* hidden özniteliği display:flex'i ezmesin — gizliyse gerçekten gizle. */
.modal-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    width: 100%; max-width: 27.5rem;
    box-shadow: var(--shadow-lift), 0 1.25rem 3.75rem rgba(21,60,51,.25);
    position: relative;
    /* Açıldığı yerden büyür: tetikleyen slot ile arasındaki bağ korunur.
       Kaynak konumu JS tarafından --origin-x/y ile verilir. */
    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
    animation: materialize var(--dur-ui) var(--ease-spring);
}
@keyframes materialize {
    from { transform: scale(.94); opacity: 0; }
}
.modal h2 {
    margin: 0 0 .25rem;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -.016em;
}
.modal-slot {
    margin: 0 0 1.25rem;
    color: var(--primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.modal-close {
    position: absolute; top: .875rem; right: 1rem;
    border: 0; background: none; font-size: 1.8rem; line-height: 1;
    color: var(--text-soft); cursor: pointer; padding: .25rem;
    transition: color var(--dur-ui) var(--ease-out),
                transform var(--dur-press) var(--ease-out);
}
.modal-close:hover { color: var(--text); }
.modal-close:active { transform: scale(.9); }

.field { display: block; margin-bottom: .875rem; }
.field > span { display: block; margin-bottom: .375rem; font-weight: 600; font-size: .92rem; }
.field em { color: var(--text-soft); font-weight: 400; font-style: normal; }
.field input, .field textarea {
    width: 100%;
    padding: .75rem .875rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit; font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--dur-ui) var(--ease-out),
                box-shadow   var(--dur-ui) var(--ease-out);
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-sf);
}
.field textarea { resize: vertical; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
    margin: .25rem 0 .875rem;
    padding: .625rem .75rem;
    background: #fff4e3;
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    color: #8a5a00;
    font-size: .92rem;
}

.btn-primary, .btn-secondary {
    width: 100%;
    padding: .875rem;
    border: 0; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 1.02rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-ui) var(--ease-out),
                opacity    var(--dur-ui) var(--ease-out),
                transform  var(--dur-press) var(--ease-out);
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.btn-secondary { background: var(--accent-sf); color: var(--primary); margin-top: .5rem; }
.btn-secondary:hover { background: #e3dcf0; }
.btn-secondary:active { transform: scale(.985); }

/* ---- Onay ---- */
.modal-success { text-align: center; }
.check {
    width: 4rem; height: 4rem; margin: 0 auto .875rem;
    background: var(--accent-sf); color: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    animation: check-in var(--dur-sheet) var(--ease-spring) both;
}
/* Onay işareti tek seferlik, hafif aşmalı: tamamlanma hissini taşır. */
@keyframes check-in {
    0%   { transform: scale(.5); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
.receipt {
    text-align: left;
    margin: 1.125rem 0;
    border-top: 1px solid var(--line);
}
.receipt div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6875rem 0;
    border-bottom: 1px solid var(--line);
}
.receipt dt { color: var(--text-soft); }
.receipt dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.success-note { color: var(--text-soft); font-size: .88rem; margin: 0 0 .375rem; line-height: 1.55; }

/* ---- Randevu kapalı bilgi kartı ---- */
.closed-card {
    margin: .5rem auto 0;
    max-width: 32.5rem;
    padding: 2rem 1.75rem;
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.closed-card h2 { margin: 0 0 .625rem; font-size: 1.15rem; letter-spacing: -.012em; }
.closed-card p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.6; }

/* ---- Erişilebilirlik tercihleri ---- */

/* Hareket azaltma: kayma ve yay yerine kısa geçiş. Geri bildirim kaybolmaz. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .panel { transition: opacity var(--dur-ui) ease !important; }
    .modal { animation: fade var(--dur-ui) ease; }
}

/* Saydamlık azaltma: cam yüzeyler donuklaşır. */
@media (prefers-reduced-transparency: reduce) {
    .panel, .modal-overlay, .panel-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    @media (max-width: 720px) {
        .panel { background: var(--surface); }
    }
    .modal-overlay { background: rgba(21,60,51,.55); }
}

/* Yüksek kontrast: kenarlar belirginleşir. */
@media (prefers-contrast: more) {
    .day, .slot, .panel, .field input, .field textarea { border-color: var(--text); }
    .lede, .panel-sub, .closed-card p { color: var(--text); }
}