/*
 * Wizard yüzeyi. Renk, gölge ve tipografi TAMAMEN theme.css token'larından gelir;
 * bu dosyada kendine ait bir palet YOKTUR. Wizard eskiden ayrı bir palet (mercan
 * aksan, krem zemin, Plus Jakarta Sans) kullandığı için siteden kopuk görünüyordu.
 */

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--surface);
    color: var(--ink);
    font-family: "Inter", sans-serif;
}

.wizard-topbar {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 4vw, 4.5rem);
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(18px);
}

.wizard-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--ink-strong);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.5px;
    text-decoration: none;
}

.wizard-brand-mark {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: var(--ink-strong);
    color: #fff;
    box-shadow: var(--card-shadow);
}

.wizard-brand em {
    color: var(--primary);
    font-style: normal;
}

.wizard-brand-word {
    display: inline;
    white-space: nowrap;
}

.wizard-help {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.wizard-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1.4rem, 4vw, 3.25rem) 0 2.5rem;
}

.wizard-orb {
    position: fixed;
    z-index: -1;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.wizard-orb-one {
    top: 16%;
    left: -120px;
    border: 44px solid rgba(26, 86, 219, .05);
}

.wizard-orb-two {
    right: -150px;
    bottom: 5%;
    border: 54px solid rgba(26, 86, 219, .07);
}

.wizard-chrome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.wizard-eyebrow {
    margin-bottom: .55rem;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wizard-chrome h1 {
    max-width: 680px;
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.wizard-status {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.wizard-step-copy {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.restart-button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 500;
}

.restart-button:hover {
    color: var(--ink-strong);
}

.wizard-progress {
    position: relative;
    height: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.wizard-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    /* Sayfa yüklenirken çubuk bir önceki bölümden mevcut bölüme akar. Genişliğin kendisi
       hâlâ tek kaynaktan -- sunucudan -- gelir; animasyon salt CSS olduğu için ilerleme
       yine bölüm içi soru geçişlerinden etkilenmez. */
    animation: progressAdvance .8s cubic-bezier(.22, 1, .36, 1);
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

.wizard-card {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--card-shadow-hover);
}

.wizard-stage {
    display: grid;
    min-height: 560px;
    grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
}

.wizard-card.is-enhanced .wizard-stage {
    display: none;
    animation: stageIn .48s cubic-bezier(.22, 1, .36, 1);
}

.wizard-card.is-enhanced .wizard-stage.is-active {
    display: grid;
}

.wizard-card.is-enhanced .wizard-stage.is-leaving {
    animation: stageOut .18s ease forwards;
}

.wizard-card:not(.is-enhanced) .wizard-stage + .wizard-stage {
    border-top: 1px solid var(--border);
}

.wizard-stage--plain {
    grid-template-columns: 1fr;
}

.wizard-question {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.6rem, 5vw, 4.4rem);
}

.wizard-question--wide {
    justify-content: flex-start;
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.question-kicker {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.question-title {
    max-width: 620px;
    margin: 0 0 .7rem;
    color: var(--ink-strong);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.question-help {
    max-width: 600px;
    margin: 0 0 2rem;
    color: var(--text-muted);
    font-size: .94rem;
    line-height: 1.65;
}

.wizard-visual {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: var(--ink-strong);
}

.wizard-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 7s ease;
}

.wizard-stage.is-active .wizard-visual img {
    transform: scale(1.035);
}

.wizard-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 23, 42, .72));
    content: "";
}

.visual-caption {
    position: absolute;
    z-index: 2;
    right: 1.6rem;
    bottom: 1.6rem;
    left: 1.6rem;
    color: #fff;
}

.visual-caption strong {
    display: block;
    margin-bottom: .25rem;
    font-size: 1.05rem;
}

.visual-caption span {
    color: rgba(255, 255, 255, .76);
    font-size: .78rem;
}

.visual-abstract {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(26, 86, 219, .95), rgba(15, 23, 42, .95)),
        var(--ink-strong);
}

.abstract-home {
    position: relative;
    width: min(68%, 330px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 44% 56% 66% 34% / 44% 39% 61% 56%;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 0 26px rgba(255, 255, 255, .045);
    animation: floaty 6s ease-in-out infinite;
}

.abstract-home i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: clamp(5rem, 10vw, 8rem);
}

.abstract-home::before,
.abstract-home::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.abstract-home::before {
    top: -22px;
    right: -28px;
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, .2);
}

.abstract-home::after {
    bottom: 10px;
    left: -34px;
    width: 48px;
    height: 48px;
    border: 10px solid rgba(255, 255, 255, .28);
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.choice-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * DİKKAT: Aşağıdaki durum seçicileri BİTİŞİK kardeş (+) değil GENEL kardeş (~) kullanır.
 * Thymeleaf `th:field` bir checkbox'ın hemen ardına Spring'in alan işaretçisini basar
 * (<input type="hidden" name="_facades">), bu yüzden label artık checkbox'ın bitişik
 * kardeşi değildir ve '+' hiç eşleşmez -- seçim çalışır ama görsel geri bildirim ölür.
 * Radio'larda bu gizli alan üretilmez; kural yine de tek biçimde '~' tutulur.
 */
.choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card {
    position: relative;
    display: flex;
    min-height: 88px;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.choice-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--card-shadow-hover);
}

.choice-card i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: 1.25rem;
}

.choice-card strong {
    color: var(--ink-strong);
    font-size: .9rem;
    font-weight: 600;
}

.choice-card small {
    display: block;
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .72rem;
}

.choice-input:focus-visible ~ .choice-card {
    outline: 3px solid rgba(26, 86, 219, .22);
    outline-offset: 2px;
}

.choice-input:checked ~ .choice-card {
    border-color: var(--primary);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}

.choice-input:checked ~ .choice-card::after {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    content: "✓";
    font-size: .7rem;
    font-weight: 900;
}

/*
 * Beyan listesi: tek sütun, geniş satırlar. Madde metinleri (ve altındaki açıklama)
 * iki kolonlu .choice-grid içinde kırpılıyordu. Durum seçicileri .choice-card ile aynı
 * nedenle GENEL kardeş (~) kullanır -- th:field checkbox'ın ardına gizli alan basar.
 */
.choice-list {
    display: grid;
    gap: .6rem;
}

.choice-list > div {
    position: relative;
}

.choice-row {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.choice-row::before {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: .1rem;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    content: "✓";
    font-size: .7rem;
    font-weight: 900;
}

.choice-row strong {
    display: block;
    color: var(--ink-strong);
    font-size: .88rem;
    font-weight: 600;
}

.choice-row small {
    display: block;
    margin-top: .15rem;
    color: var(--text-muted);
    font-size: .76rem;
}

.choice-row:hover {
    border-color: var(--primary);
}

.choice-input:focus-visible ~ .choice-row {
    outline: 3px solid rgba(26, 86, 219, .22);
    outline-offset: 2px;
}

.choice-input:checked ~ .choice-row {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.choice-input:checked ~ .choice-row::before {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Site formlarıyla aynı mikro etiket: küçük, büyük harf, seyrek harf aralığı. */
.form-label {
    margin-bottom: .35rem;
    color: #475569;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.form-control,
.form-select {
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: #fff;
    color: var(--ink);
    font-size: .9rem;
    padding: .78rem .95rem;
}

textarea.form-control {
    min-height: 128px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}

/* Tarayıcının artır/azalt okları wizard'ın HİÇBİR sayısal alanında gösterilmez.
   Birimli alanlarda ok odakta "m²" / "TL" rozetinin üstüne biniyordu; alan, fiyat ve
   oda sayısı gibi değerler zaten yazılarak giriliyor. Kural tüm alanlarda aynı olsun
   diye tek yerde ve kapsamsız duruyor -- bu stylesheet yalnız wizard'a yükleniyor.
   Fare tekerleğinin değeri değiştirmesi ayrıca listing-wizard.js'te engellenir. */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.input-shell {
    position: relative;
}

/* Birimli alanlarda uzun değerlerin "m²" / "TL" rozetinin altına kaymasını engeller;
   varsayılan .95rem dolgu bunun için yetmiyordu. */
.input-shell .form-control {
    padding-right: 2.9rem;
}

.input-suffix {
    position: absolute;
    top: 50%;
    right: .95rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    pointer-events: none;
    transform: translateY(-50%);
}

.pill-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.pill-check {
    position: relative;
}

.pill-check input {
    position: absolute;
    opacity: 0;
}

.pill-check label {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    gap: .45rem;
    padding: .62rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    transition: .2s ease;
}

.pill-check label::before {
    color: var(--primary);
    content: "+";
    font-size: 1rem;
}

.pill-check input:checked ~ label {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-weight: 600;
}

.pill-check input:checked ~ label::before {
    content: "✓";
}

.private-box {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    /* Sitedeki uyarı rozeti paleti (badge-draft) ile aynı. */
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: .78rem;
    line-height: 1.5;
}

.summary {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .42rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
}

.summary-row:last-child {
    border-bottom: 0;
}

.summary-row span {
    color: var(--text-muted);
}

.account-choice {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.map-shell {
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--card-shadow);
}

#listing-map {
    height: 350px;
    border-radius: 8px;
}

.map-hint {
    margin-top: .75rem;
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.5;
}

.map-location-status {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .75rem;
    color: var(--primary-dark);
    font-size: .76rem;
    font-weight: 700;
}

.map-location-status[hidden] {
    display: none;
}

.map-location-status .spinner-border {
    width: .85rem;
    height: .85rem;
    border-width: .12em;
}

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1.6rem, 5vw, 4.4rem) 1.4rem;
    border-top: 1px solid var(--border);
    background: #fff;
}

.wizard-actions-left {
    min-width: 90px;
}

.wizard-actions-right {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.question-counter {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 500;
}

/* Sitedeki .btn-primary ile aynı: 8px radius, 600 ağırlık, gölgesiz, düz renk geçişi.
   Yalnız dokunma hedefi wizard için biraz daha yüksek tutulur. */
.btn-wizard {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .72rem 1.25rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-wizard-primary {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

.btn-wizard-primary:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
    color: #fff;
}

.btn-wizard-ghost {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
}

.btn-wizard-ghost:hover {
    border-color: var(--border);
    color: var(--ink-strong);
}

.secure-note {
    color: var(--text-muted);
    font-size: .75rem;
}

.req::after {
    color: #dc2626;
    content: " *";
}

.invalid-feedback,
.text-danger {
    font-size: .72rem;
}

.micro-dots {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.micro-dot {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: var(--border);
    transition: width .25s ease, background .25s ease;
}

.micro-dot.is-active {
    width: 23px;
    background: var(--primary);
}

.micro-dot.is-done {
    background: #93c5fd;
}

.skip-note {
    color: var(--text-muted);
    font-size: .72rem;
}

@keyframes stageIn {
    from {
        opacity: 0;
        transform: translateX(22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes stageOut {
    to {
        opacity: 0;
        transform: translateX(-14px);
    }
}

@keyframes progressAdvance {
    from {
        width: var(--progress-from, 0%);
    }
    to {
        width: var(--progress-to, 100%);
    }
}

@keyframes floaty {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@media (max-width: 860px) {
    .wizard-stage {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .wizard-visual {
        order: -1;
        min-height: 235px;
        max-height: 270px;
    }

    .visual-abstract {
        min-height: 210px;
    }

    .abstract-home {
        width: 180px;
    }

    .wizard-question {
        padding: 1.8rem;
    }

    .wizard-card {
        min-height: 0;
    }

    .wizard-actions {
        padding-right: 1.8rem;
        padding-left: 1.8rem;
    }
}

@media (max-width: 576px) {
    .wizard-topbar {
        min-height: 62px;
    }

    .wizard-help span,
    .restart-button span,
    .wizard-eyebrow {
        display: none;
    }

    .wizard-shell {
        width: min(100% - 1rem, 1180px);
        padding-top: 1rem;
    }

    .wizard-chrome {
        gap: .6rem;
    }

    .wizard-chrome h1 {
        font-size: 1.35rem;
    }

    .wizard-status {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: .25rem;
    }

    .wizard-card {
        border-radius: 22px;
    }

    .wizard-question {
        padding: 1.35rem;
    }

    .question-title {
        font-size: 1.75rem;
    }

    .question-help {
        margin-bottom: 1.35rem;
    }

    .choice-grid,
    .choice-grid--four {
        grid-template-columns: 1fr;
    }

    .choice-card {
        min-height: 74px;
    }

    .wizard-actions {
        align-items: stretch;
        padding: .9rem 1.15rem 1.1rem;
    }

    .wizard-actions-right {
        justify-content: flex-end;
    }

    .question-counter,
    .secure-note {
        display: none;
    }

    .btn-wizard {
        min-height: 46px;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #listing-map {
        height: 285px;
    }
}

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