/*
 * Satış demosu (yalnız satis_demo işaretli okulda yüklenir): ince üst şerit, rol değiştirme listesi, giriş rol düğmeleri,
 * sol altta "Okulunuza İsteyin", sağ altta "Görüşünüz", talep sihirbazının modül kartları. Renkler ortak değişkenlerden; gölge ve geçiş yok.
 */

/* ---- Üst şerit ---- */
.demo-serit {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1rem;
    padding: .35rem 1rem;
    background: var(--surface);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-align: center;
    position: relative;
    z-index: 20;
}
.demo-rol { position: relative; }
.demo-rol > summary {
    cursor: pointer; list-style: none; color: var(--text-2);
    padding: .1rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.demo-rol > summary::-webkit-details-marker { display: none; }
.demo-rol-degistir { color: var(--primary); margin-left: .35rem; }
.demo-rol[open] > summary { border-color: var(--primary); }
.demo-rol-liste {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60;
    width: min(20rem, calc(100vw - 2rem));
    max-height: 70vh; overflow-y: auto;
    margin: 0; padding: .35rem; list-style: none; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.demo-rol-liste form { margin: 0; }
.demo-rol-secenek {
    display: flex; flex-direction: column; gap: .1rem; width: 100%;
    padding: .45rem .6rem; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.demo-rol-secenek span { color: var(--muted); font-size: var(--fs-xs); }
button.demo-rol-secenek:hover, button.demo-rol-secenek:focus-visible { background: var(--surface-2); }
.demo-rol-etkin { cursor: default; background: var(--primary-soft); }
@media (max-width: 560px) {
    .demo-rol-liste { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---- Giriş: rol düğmeleri ---- */
.demo-roller { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; }
.demo-roller form { margin: 0; }
.demo-rol-dugme {
    display: flex; flex-direction: column; gap: .1rem; width: 100%;
    padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.demo-rol-dugme span { color: var(--muted); font-size: var(--fs-xs); }
.demo-rol-dugme:hover, .demo-rol-dugme:focus-visible { border-color: var(--primary); }
.demo-giris-portal { margin-top: .5rem; }
.demo-link-notu { margin: .5rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: var(--radius); }
.demo-link-notu p { margin: 0; }
.demo-link-notu p + p { margin-top: .2rem; }

/* ---- Sol alt: Okulunuza İsteyin (tek düz renk: --primary) ---- */
body.satis-demo .sidebar { padding-bottom: 5rem; }
.demo-talep-dugme {
    position: fixed; left: .75rem; bottom: 1rem; z-index: 5;
    width: calc(var(--sidebar-w) - 1.5rem);
    display: block; padding: .7rem 1rem; border-radius: var(--radius);
    background: var(--primary); color: var(--on-primary);
    font-weight: 600; text-align: center; text-decoration: none;
}
.demo-talep-dugme:hover, .demo-talep-dugme:focus-visible { background: var(--primary-hover); color: var(--on-primary); }

/* ---- Sağ alt: Görüşünüz (sessiz) ---- */
.demo-gorus-dugme {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 25;
    padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.demo-gorus-dugme:hover, .demo-gorus-dugme:focus-visible { border-color: var(--primary); color: var(--text); }
body.has-tabbar .demo-gorus-dugme { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
.demo-gorus-tesekkur { margin: 0 0 .75rem; }

/* ---- Puan seçimi (görüş ve çıkış anketi) ---- */
.demo-puan { border: 0; margin: 0 0 .75rem; padding: 0; }
.demo-puan legend { padding: 0; margin-bottom: .4rem; font-weight: 600; }
.demo-puan-secenek { display: inline-flex; margin-right: .35rem; }
.demo-puan-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.demo-puan-secenek span {
    display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
.demo-puan-secenek input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--text); font-weight: 600; }
.demo-puan-secenek input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.demo-anket .form-actions { justify-content: space-between; }

/* ---- Talep sihirbazı: modül kartları ---- */
.demo-modul-grup { border: 0; margin: 1rem 0 0; padding: 0; }
.demo-modul-grup legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.demo-moduller { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.demo-modul {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); cursor: pointer;
}
.demo-modul:has(input:checked) { border-color: var(--primary); }
.demo-modul-ust { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.demo-modul-metin { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.demo-modul-gerek { color: var(--muted); font-size: var(--fs-xs); }
.demo-modul-yakinda { cursor: default; background: var(--surface-2); }
.demo-modul-yakinda .demo-modul-metin { color: var(--muted); }
.demo-tesekkur { max-width: 36rem; }

/* ---- Demo hazırlanıyor ---- */
.demo-hazirlaniyor { background: var(--canvas, var(--surface)); }
.demo-hazirlaniyor-kutu { max-width: 28rem; margin: 18vh auto 0; padding: 0 1rem; text-align: center; color: var(--text); }
.demo-hazirlaniyor-kutu p { color: var(--muted); }

@media print {
    .demo-serit, .demo-talep-dugme, .demo-gorus-dugme { display: none !important; }
}