/* Ön tarama: soru akışı (/analiz/) + sonuç (/sonuc/). site.css'in üstüne. */

.t-page { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(4rem, 9vw, 6rem); }
.t-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 56rem) { .t-grid { grid-template-columns: 1fr; } .t-side { display: none; } }

/* sol: dosya sırtı / ilerleme */
.t-side { position: sticky; top: 90px; font-size: .88rem; }
.t-side ol { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.t-side li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.t-side li .n { font: .75rem var(--mono); }
.t-side li.ok { color: var(--ink-2); }
.t-side li.ok .n { color: var(--red); }
.t-side li.now { color: var(--ink); font-weight: 600; }
.t-side li.now .n { color: var(--red); }
.t-side .hand { display: block; font-size: 1.25rem; margin-top: 1rem; transform: rotate(-2deg); }

.t-bar { height: 3px; background: var(--rule); margin-bottom: 1.5rem; }
.t-bar i { display: block; height: 100%; background: var(--red); width: 0; transition: width 300ms var(--ease-out); }

.sheet { background: var(--slip); border: 1px solid var(--ink); padding: clamp(1.4rem, 4vw, 2.6rem);
         box-shadow: 6px 6px 0 var(--paper-2), 6px 6px 0 1px var(--ink); }
.q-no { font: .78rem var(--mono); color: var(--ink-3); }
.q-no b { color: var(--red); font-weight: 500; }
.q-title { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-top: .6rem; }
.q-title:focus { outline: none; } /* adım değişince ekran okuyucu için odak buraya taşınır */
.q-hint { color: var(--ink-2); margin-top: .7rem; max-width: 34rem; }
.q-body { margin-top: 1.6rem; }
.step-enter { animation: stepIn 260ms var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } }

/* seçenekler: defter satırı */
.opts { display: grid; border-top: 1px solid var(--ink); }
.pick { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; background: none; border: 0;
       border-bottom: 1px solid var(--rule); padding: 1rem .4rem; font: 500 1.08rem var(--body); color: var(--ink); cursor: pointer;
       transition: background-color 150ms ease; }
.pick .box { flex: none; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--ink); position: relative; }
.pick[aria-pressed="true"] .box::after { content: ""; position: absolute; left: .2rem; top: -.35rem; width: .6rem; height: 1.2rem;
       border: solid var(--red); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.pick .key { margin-left: auto; font: .72rem var(--mono); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .pick:hover { background: var(--paper); } }
.pick:active { background: var(--paper-2); }
.pick:focus-visible { outline-offset: -2px; }

.dal { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 40rem) { .dal { grid-template-columns: 1fr; } }
.dal .pick { flex-direction: column; align-items: flex-start; gap: .4rem; border: 1px solid var(--ink); padding: 1.3rem; }
.dal .pick b { font: 700 1.35rem/1.1 var(--display); letter-spacing: -.02em; }
.dal .pick span { color: var(--ink-2); font-weight: 400; font-size: .95rem; }

/* alanlar */
.field { display: grid; gap: .35rem; margin-bottom: 1.2rem; }
.field label { font: .75rem var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select { font: 500 1.1rem var(--body); color: var(--ink); background: transparent; border: 0;
       border-bottom: 2px solid var(--ink); border-radius: 0; padding: .5rem .1rem; width: 100%; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--red); }
.field input::placeholder { color: var(--ink-3); font-family: var(--hand); font-size: 1.3rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 40rem) { .row2 { grid-template-columns: 1fr; } }

.sektor-list { max-height: 21rem; overflow-y: auto; margin-top: .5rem; border-top: 1px solid var(--ink); overscroll-behavior: contain; }
.sektor-list .pick { padding-block: .75rem; font-size: 1rem; }
.bos { padding: 1rem .4rem; color: var(--ink-3); }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); margin-top: .9rem; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--red); flex: none; }

.nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.back { background: none; border: 0; font: .9rem var(--body); color: var(--ink-2); cursor: pointer; padding: .5rem 0; text-decoration: underline; text-underline-offset: 3px; }
.back[hidden] { visibility: hidden; display: block; }
.err { color: var(--red); font-weight: 600; margin-top: 1rem; }
.err:empty { display: none; }
.kvkk-box { font-size: .82rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); padding: .9rem 1rem; margin-top: 1rem; max-height: 9rem; overflow-y: auto; }

/* bekleme */
.wait { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 2.5rem 0; }
.wait svg { width: 64px; height: 64px; animation: sweep 1.6s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-26px) rotate(-8deg); } to { transform: translateX(26px) rotate(8deg); } }
.wait .hand { font-size: 1.5rem; }

/* ================= SONUÇ ================= */
.r-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; padding-bottom: 1.8rem; border-bottom: 1px solid var(--ink); }
@media (max-width: 48rem) { .r-head { grid-template-columns: 1fr; } }
.r-head h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; margin-top: .8rem; }
.r-head .sub { margin-top: .8rem; color: var(--ink-2); }
.verdict { display: grid; justify-items: end; gap: .6rem; }
@media (max-width: 48rem) { .verdict { justify-items: start; } }
.verdict .stamp { font-size: clamp(1.3rem, 3vw, 1.9rem); border-width: 5px; padding: .6rem 1rem; }
.verdict .score { font: 500 clamp(2.4rem, 5vw, 3.4rem)/1 var(--mono); }
.verdict .score small { font-size: .38em; color: var(--ink-3); }
.verdict .of { font: .78rem var(--mono); color: var(--ink-3); }
.r-verdict-text { margin-top: 1.4rem; font-size: 1.15rem; max-width: 44rem; }
.kritik { margin-top: 1rem; display: grid; gap: .3rem; }
.kritik .hand { font-size: 1.35rem; }

.r-sec { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.r-sec > h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: .7rem; }
.mods { margin-top: 1.4rem; border: 1px solid var(--ink); background: var(--slip); }
.mod { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 9rem; gap: .5rem 1rem; padding: 1.1rem 1rem; border-bottom: 1px solid var(--rule); }
.mod:last-child { border-bottom: 0; }
.mod .no { font: .9rem var(--mono); color: var(--red); }
.mod .nm { font: 700 1.15rem/1.2 var(--display); letter-spacing: -.02em; }
.mod .bg { color: var(--ink-2); margin-top: .35rem; }
.mod .dt { color: var(--ink-3); font-size: .88rem; margin-top: .4rem; }
.mod .src { font: .72rem var(--mono); color: var(--ink-3); margin-top: .5rem; }
.mod .sc { text-align: right; font: 500 1.3rem var(--mono); }
.mod .sc small { font-size: .7rem; color: var(--ink-3); }
.mod .meter { height: 6px; background: var(--paper-2); margin-top: .5rem; }
.mod .meter i { display: block; height: 100%; background: var(--ink); }
.mod.off { background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--ink) 4%, transparent) 7px 8px); }
.mod.off .nm { color: var(--ink-3); }
.mod.off .sc, .mod.wait-row .sc { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mod.wait-row .sc::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border: 2px solid var(--red); border-right-color: transparent; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 40rem) { .mod { grid-template-columns: 2.4rem minmax(0, 1fr); } .mod .sc { grid-column: 2; text-align: left; } }

.unc { counter-reset: u; margin-top: 1.4rem; display: grid; gap: 1.1rem; }
.unc article { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--ink); }
.unc article::before { counter-increment: u; content: counter(u); font: 800 2.6rem/1 var(--display); color: var(--red); }
.unc h3 { font-size: 1.35rem; }
.unc p { color: var(--ink-2); margin-top: .5rem; max-width: 44rem; }
.unc .fix { font-family: var(--hand); color: var(--red); font-size: 1.3rem; margin-top: .6rem; }

.permits { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; max-width: 46rem; }
.permits li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; color: var(--ink-2); }
.permits li::before { content: "☐"; color: var(--ink); font-family: var(--mono); }

.talk { margin-top: clamp(2.5rem, 6vw, 3.5rem); background: var(--ink); color: var(--paper); padding: clamp(1.5rem, 4vw, 2.6rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; }
@media (max-width: 52rem) { .talk { grid-template-columns: 1fr; } }
.talk h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.talk p { color: color-mix(in srgb, var(--paper) 78%, transparent); margin-top: .8rem; }
.talk .field label { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.talk .field input { color: var(--paper); border-bottom-color: var(--paper); }
.talk .btn { background: var(--paper); color: var(--ink); }
.talk .ok { font-family: var(--hand); font-size: 1.6rem; color: #E2674F; }
.r-foot { margin-top: 2rem; font-size: .85rem; color: var(--ink-3); max-width: 50rem; }
.r-foot p + p { margin-top: .4rem; }