/* Survey (Anket) page — shared by the English and Turkish versions. Design only. */

:root {
    --sv-primary: #0f5e5a;        /* deep teal */
    --sv-primary-600: #0b4a47;
    --sv-primary-50: #e7f2f1;
    --sv-accent: #c9a227;         /* gold */
    --sv-bg: #f6f4ee;             /* warm off-white */
    --sv-text: #1f2a2e;
    --sv-muted: #5f6b70;
    --sv-border: #dde3e2;
    --sv-radius: 14px;
}

body:has(.sv) { background: var(--sv-bg); }

.sv { max-width: 880px; margin: 0 auto; color: var(--sv-text); }

/* ---------- Header ---------- */
.sv-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sv-primary) 0%, #17766f 100%);
    color: #fff;
    border-radius: var(--sv-radius);
    padding: 1.5rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(15, 94, 90, .18);
}
.sv-hero::after {             /* crescent decoration */
    content: "";
    position: absolute; bottom: -70px; right: -20px;
    width: 140px; height: 140px; border-radius: 50%;
    box-shadow: -22px 14px 0 0 rgba(201, 162, 39, .22);
    pointer-events: none;
}
.sv-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; position: relative; z-index: 1; }
.sv .sv-title { color: #fff !important; font-weight: 700; font-size: 1.45rem; line-height: 1.25; margin: 0; }
.sv-hero .lead { color: rgba(255, 255, 255, .92); font-size: 1rem; margin: .85rem 0 0; position: relative; z-index: 1; }
.sv-hero .lead + .lead { margin-top: .4rem; }

.sv-lang {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; border-radius: 999px;
    background: rgba(255, 255, 255, .15); color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .35); font-weight: 600; font-size: .9rem;
    transition: background .15s;
}
.sv-lang:hover, .sv-lang:focus { background: rgba(255, 255, 255, .28); color: #fff; }
.sv-lang::before { content: "🌐"; font-size: .95rem; }

/* ---------- Card ---------- */
.sv-card {
    background: #fff; border-radius: var(--sv-radius);
    border: 1px solid var(--sv-border);
    box-shadow: 0 2px 10px rgba(31, 42, 46, .05);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.sv-required-note {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--sv-primary-50); color: var(--sv-primary-600);
    border-left: 4px solid var(--sv-primary);
    border-radius: 10px; padding: .75rem .9rem; margin-bottom: 1.25rem; font-size: .95rem;
}
.sv-required-note::before { content: "ℹ"; font-weight: 700; }

.sv .required-indicator { color: #c0392b; margin-left: .15rem; }

/* ---------- Fields ---------- */
.sv-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .sv-grid { grid-template-columns: 1fr 1fr; } }

.sv .form-group { margin-bottom: 1.1rem; }
.sv label:not(.sv-date) { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--sv-text); }

.sv .form-control {
    font-size: 16px;               /* prevents zoom-on-focus on iPhone */
    min-height: 48px;
    border-radius: 10px;
    border: 1.5px solid var(--sv-border);
    background: #fcfdfd;
    padding: .6rem .85rem;
}
.sv textarea.form-control { min-height: 96px; }
.sv .form-control:focus {
    border-color: var(--sv-primary);
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(15, 94, 90, .15);
}
.sv .form-control::placeholder { color: #9aa5a8; }
.sv .input-validation-error { border-color: #c0392b; background: #fff8f7; }
.sv .field-validation-error { display: block; font-size: .875rem; margin-top: .3rem; }
.sv .validation-summary-errors {
    background: #fdecea; border-left: 4px solid #c0392b; border-radius: 10px;
    padding: .75rem 1rem; margin-bottom: 1rem;
}
.sv .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Date section ---------- */
.sv-dates-block {
    border: 0; margin: .5rem 0 1.25rem; padding: 1rem;
    background: #fbfaf6; border: 1px solid #ece7d8; border-radius: 12px;
}
.sv-dates-block > p { margin-bottom: .5rem; }
.sv-dates-block > p:first-child { font-weight: 600; }
.sv-dates-block > p + p { color: var(--sv-muted); font-size: .92rem; }

.sv-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .85rem;
}
@media (min-width: 480px) { .sv-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sv-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sv-date { position: relative; margin: 0; cursor: pointer; }
.sv-date input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-date-box {
    display: flex; align-items: center; gap: .55rem;
    min-height: 52px; padding: .5rem .7rem;
    border: 1.5px solid var(--sv-border); border-radius: 10px; background: #fff;
    transition: background .12s, border-color .12s, transform .05s;
    user-select: none;
}
.sv-date-box::before {           /* checkbox circle */
    content: ""; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #b9c4c3; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
}
.sv-date-text { display: flex; flex-direction: column; line-height: 1.15; }
.sv-date-dow { font-size: .78rem; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; }
.sv-date-day { font-weight: 600; font-size: .98rem; }

.sv-date:hover .sv-date-box { border-color: var(--sv-primary); }
.sv-date:active .sv-date-box { transform: scale(.98); }
.sv-date input:focus-visible + .sv-date-box { outline: 3px solid rgba(15, 94, 90, .35); outline-offset: 2px; }
.sv-date input:checked + .sv-date-box { background: var(--sv-primary-50); border-color: var(--sv-primary); }
.sv-date input:checked + .sv-date-box::before { content: "✓"; background: var(--sv-primary); border-color: var(--sv-primary); }
.sv-date input:checked + .sv-date-box .sv-date-day { color: var(--sv-primary-600); }

/* ---------- Notices ---------- */
.sv-notice, .sv-announce {
    border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.1rem; border-left: 5px solid;
}
.sv-notice { background: #fdecea; border-color: #c0392b; color: #7a1f16; }
.sv-announce { background: #fbf6e6; border-color: var(--sv-accent); color: #5c4a10; }
.sv-notice p:last-child, .sv-announce p:last-child { margin-bottom: 0; }
.sv-announce p { padding-left: 1.4rem; position: relative; }
.sv-announce p::before { content: "🌙"; position: absolute; left: 0; }

/* ---------- Actions ---------- */
.sv-actions {
    display: flex; gap: .6rem; justify-content: flex-end; align-items: center;
    margin-top: 1.25rem;
}
.sv .btn-sv {
    background: var(--sv-primary); border-color: var(--sv-primary); color: #fff;
    font-weight: 600; min-height: 48px; min-width: 150px; border-radius: 10px; font-size: 1.05rem;
}
.sv .btn-sv:hover, .sv .btn-sv:focus { background: var(--sv-primary-600); border-color: var(--sv-primary-600); color: #fff; }
.sv .btn-sv-back { min-height: 48px; border-radius: 10px; }

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    .sv-hero { padding: 1.15rem 1rem 1rem; border-radius: 12px; }
    .sv .sv-title { font-size: 1.2rem; }
    .sv-card { padding: 1rem; border-radius: 12px; }
    .sv-dates-block { padding: .8rem; }

    /* Submit bar stays reachable at the bottom of the screen */
    .sv-actions {
        position: sticky; bottom: 0; z-index: 5;
        margin: 1rem -1rem -1rem; padding: .75rem 1rem;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--sv-border);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 -4px 12px rgba(31, 42, 46, .06);
    }
    .sv-actions .btn { flex: 1; }
}