/* ===========================================================
   Otel Restoran Check List — tema
   Renkler ve ölçüler tek yerden: :root
   =========================================================== */
:root {
    --bg: #0a1729;            /* koyu lacivert */
    --bg-soft: #0e2038;
    --surface: rgba(17, 36, 61, .72);
    --surface-solid: #112441;
    --border: rgba(200, 164, 92, .18);
    --border-strong: rgba(200, 164, 92, .42);
    --gold: #c8a45c;
    --gold-soft: #e3c98f;
    --text: #f0ece4;
    --text-dim: #93a6bf;
    --green: #4ca77a;
    --green-bg: rgba(76, 167, 122, .14);
    --red: #d9665c;
    --red-bg: rgba(217, 102, 92, .14);
    --radius: 16px;
    --radius-sm: 11px;
    --shadow: 0 18px 46px rgba(0, 0, 0, .45);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    overflow-x: hidden;
}

/* --- Arka plan görseli katmanı ------------------------------------- */
/* wwwroot/img içine koyulan görsel, sayfa üzerinden --bg-image ile verilir */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 620px at 78% -8%, rgba(200, 164, 92, .18), transparent 62%),
        radial-gradient(900px 560px at 8% 104%, rgba(28, 74, 133, .34), transparent 62%),
        linear-gradient(170deg, #0d2137 0%, #0a1729 100%);
    background-size: cover;
    background-position: center;
}

.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 23, 41, .80) 0%, rgba(10, 23, 41, .90) 55%, rgba(10, 23, 41, .96) 100%);
}

/* --- Header / Footer ------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top));
    background: rgba(10, 23, 41, .76);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    border: 1px solid var(--border-strong);
    color: var(--gold);
    font-size: 17px;
    background: linear-gradient(145deg, rgba(200, 164, 92, .18), rgba(200, 164, 92, .04));
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.brand-text small { font-size: 11px; color: var(--text-dim); letter-spacing: 1.1px; text-transform: uppercase; }

.site-main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 40px;
}

.site-footer {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    border-top: 1px solid rgba(255, 255, 255, .05);
}

/* --- Ortak parçalar -------------------------------------------------- */
.eyebrow {
    font-size: 11px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 10px;
}

.display-title {
    font-family: var(--serif);
    font-size: clamp(30px, 7vw, 46px);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 10px;
    letter-spacing: .4px;
}

.lead {
    color: var(--text-dim);
    font-size: 15px;
    margin: 0 auto 26px;
    max-width: 56ch;
}

.page-head { text-align: center; margin-bottom: 26px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 22px;
    border: 0;
    border-radius: var(--radius-sm);
    font: 600 15px/1 var(--sans);
    letter-spacing: .3px;
    color: #14100a;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    text-decoration: none;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200, 164, 92, .3); }
.btn:active { transform: translateY(0); }
.btn:disabled { filter: grayscale(.6); opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.ghost-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--gold);
    background: transparent;
    font: 500 13px/1 var(--sans);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
    cursor: pointer;
}

.ghost-btn:hover { background: rgba(200, 164, 92, .12); }

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.alert-error { background: var(--red-bg); border-color: rgba(217, 102, 92, .35); color: #f0b7b1; }
.alert-warn { background: rgba(200, 164, 92, .12); border-color: var(--border-strong); color: var(--gold-soft); }

/* --- 1. Adım: restoran seçimi ---------------------------------------- */
.restaurant-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.restaurant-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 168px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    transition: transform .25s ease, border-color .25s ease;
}

.restaurant-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.restaurant-card .thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform .6s ease;
}

.restaurant-card:hover .thumb { transform: scale(1.09); }

.restaurant-card .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(8, 20, 36, .94) 8%, rgba(8, 20, 36, .66) 58%, rgba(8, 20, 36, .38) 100%);
}

.restaurant-card .body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 168px;
    padding: 22px;
}

.restaurant-card h2 {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: .4px;
}

.restaurant-card p { margin: 0; font-size: 13px; color: var(--text-dim); }

.restaurant-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: .4px;
}

.restaurant-card .arrow { color: var(--gold); font-size: 15px; }

/* --- 2. Adım: şifre --------------------------------------------------- */
.narrow { max-width: 440px; margin: 0 auto; }

.pin-card { padding: 30px 24px 26px; text-align: center; }

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 20px;
}

.pin-inputs input {
    width: 58px;
    height: 68px;
    text-align: center;
    font: 700 26px/1 var(--sans);
    color: var(--text);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 13px;
    caret-color: var(--gold);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pin-inputs input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(200, 164, 92, .1);
    box-shadow: 0 0 0 4px rgba(200, 164, 92, .14);
}

.pin-inputs input.filled { border-color: var(--border-strong); }

/* --- 3. Adım: check list --------------------------------------------- */
.checklist-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 22px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-solid);
}

.checklist-hero .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; }
.checklist-hero .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8, 20, 36, .94), rgba(8, 20, 36, .66)); }
.checklist-hero > .inner { position: relative; z-index: 1; }
.checklist-hero h1 { font-family: var(--serif); font-size: clamp(26px, 6vw, 36px); margin: 0 0 6px; font-weight: 600; }
.checklist-hero .date { font-size: 13px; color: var(--text-dim); }

.progress-wrap { margin-top: 18px; }

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 7px;
    letter-spacing: .4px;
}

.progress-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .35s ease; }

.section-block { margin-bottom: 20px; }

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.q-list { display: flex; flex-direction: column; gap: 10px; }

.q-item {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s ease;
}

.q-item.answered { border-color: rgba(255, 255, 255, .12); }
.q-item.unanswered-highlight { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217, 102, 92, .16); }

.q-text { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.q-no { flex: none; color: var(--gold); font-weight: 700; font-size: 13px; min-width: 22px; padding-top: 1px; }

.q-choices { display: flex; gap: 9px; }
.q-choices input { position: absolute; opacity: 0; pointer-events: none; }

.q-choices label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: all .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.q-choices label:active { transform: scale(.97); }
.q-choices input:checked + label.yes { background: var(--green-bg); border-color: var(--green); color: #8fdcb2; }
.q-choices input:checked + label.no { background: var(--red-bg); border-color: var(--red); color: #f0b7b1; }
.q-choices input:focus-visible + label { box-shadow: 0 0 0 3px rgba(200, 164, 92, .3); }

.field-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

.field label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 7px;
}

.field input, .field textarea {
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font: 400 15px/1.5 var(--sans);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea { resize: vertical; min-height: 92px; }

.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, .14);
}

.field input::placeholder, .field textarea::placeholder { color: rgba(154, 162, 173, .6); }

.submit-card { padding: 22px 20px; margin-top: 22px; }

.summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.chip {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    border: 1px solid transparent;
}

.chip-yes { background: var(--green-bg); color: #8fdcb2; border-color: rgba(76, 167, 122, .35); }
.chip-no { background: var(--red-bg); color: #f0b7b1; border-color: rgba(217, 102, 92, .35); }
.chip-left { background: rgba(255, 255, 255, .05); color: var(--text-dim); border-color: rgba(255, 255, 255, .1); }

/* --- Onay ekranı ------------------------------------------------------ */
.success-card { padding: 40px 26px; text-align: center; }

.success-mark {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid rgba(76, 167, 122, .4);
    animation: pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.mail-list { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13.5px; color: var(--text-dim); }
.mail-list li { padding: 5px 0; }

/* --- Animasyon -------------------------------------------------------- */
.reveal { animation: rise .5s ease both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
.reveal:nth-child(5) { animation-delay: .2s; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

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

/* --- Masaüstü --------------------------------------------------------- */
@media (min-width: 640px) {
    .site-main { padding: 40px 24px 56px; }
    .restaurant-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .field-grid { grid-template-columns: 1fr 1fr; }
    .q-item { flex-direction: row; align-items: center; justify-content: space-between; padding: 17px 20px; }
    .q-text { flex: 1; }
    .q-choices { flex: none; width: 216px; }
    .checklist-hero { padding: 32px 30px; }
    .btn { width: auto; min-width: 230px; }
    .submit-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .summary-chips { margin-bottom: 0; }
}

@media (min-width: 1000px) {
    .restaurant-grid { grid-template-columns: repeat(3, 1fr); }
    .restaurant-card:first-child { grid-column: span 3; min-height: 230px; }
    .restaurant-card:first-child .body { min-height: 230px; }
    .restaurant-card:first-child h2 { font-size: 34px; }
}