/*
 * Kur'an Öğreniyorum — yönetim paneli görünümü.
 *
 * NEDEN BÖYLE
 * Kullanıcının şikâyeti "kullanışsız" değildi, **"boş"**tu: "bakınca
 * çalışası gelmiyor". Yani sorun düzenin işleyişi değil, ekranda bakacak
 * bir şey olmaması. Buradaki her karar boşluğu doldurmaya çalışıyor —
 * ama sahte kutularla değil, panelin zaten bildiği veriyle.
 *
 * ÜÇ TEMEL
 * 1. Koyu kenar çubuğu, açık içerik. Menü dikey olduğu için on madde rahat
 *    sığıyor (yatay çubukta iki satıra taşıyordu) ve koyu/açık ayrımı
 *    sayfaya derinlik veriyor.
 * 2. Her bölümün kendi rengi. `html[data-renk]` sayfa açılırken menüdeki
 *    kayıttan geliyor ve `--vurgu` değişkenini kuruyor; başlık noktası,
 *    bağlantılar, etkin satır hep ondan besleniyor. Panelin "hep aynı
 *    ekran" hissini kıran şey bu.
 * 3. Okunurluk pazarlık dışı. Paneli hoca da kullanacak: taban 16 punto,
 *    düğme hedefi en az 44 piksel, Arapça metin her zaman açık zeminde.
 *    Koyu tema tam da bu yüzden yalnız kenar çubuğunda kaldı — ince hareke
 *    çizgileri koyu zeminde kayboluyor.
 */

:root {
    /* Bölüm renkleri. Hepsi yakın doygunlukta seçildi ki biri diğerinin
       önüne geçmesin; ayırt edici olan ton, parlaklık değil. */
    --mavi: #2f6fed;
    --lacivert: #14304f;
    --turuncu: #e8761c;
    --yesil: #17925c;
    --mor: #7146d4;
    --turkuaz: #0b91a3;
    --kirmizi: #d13c33;
    --gri: #5b6b7f;

    --vurgu: var(--lacivert);
    --vurgu-soft: #eaf0f9;

    --ink: #16233a;
    --ink-soft: #5a6a80;

    --zemin: #f3f6fb;
    --kart: #ffffff;
    --kart-alt: #f7f9fd;
    --cizgi: #e2e8f2;
    --cizgi-soft: #eef2f8;

    --yan-bg: #101f36;
    --yan-bg2: #16304f;
    --yan-ink: #cfdaea;

    --ok: #17925c;
    --ok-bg: #e6f4ed;
    --hata: #d13c33;
    --hata-bg: #fbecea;
    --uyari: #b5730f;
    --uyari-bg: #fdf3e0;

    --r: 16px;
    --r-s: 10px;

    --golge-1: 0 1px 2px rgba(16, 31, 54, .05), 0 3px 10px -6px rgba(16, 31, 54, .16);
    --golge-2: 0 1px 2px rgba(16, 31, 54, .06), 0 16px 34px -22px rgba(16, 31, 54, .45);

    --arapca: "Traditional Arabic", "Segoe UI Historic", "Geeza Pro",
              "Noto Naskh Arabic", serif;
}

/* Sayfanın rengi menüdeki bölümden geliyor (layout.php → data-renk). */
html[data-renk="mavi"]     { --vurgu: var(--mavi);     --vurgu-soft: #e9f0fe; }
html[data-renk="lacivert"] { --vurgu: var(--lacivert); --vurgu-soft: #e9eef5; }
html[data-renk="turuncu"]  { --vurgu: var(--turuncu);  --vurgu-soft: #fdefe2; }
html[data-renk="yesil"]    { --vurgu: var(--yesil);    --vurgu-soft: #e6f4ed; }
html[data-renk="mor"]      { --vurgu: var(--mor);      --vurgu-soft: #efe9fb; }
html[data-renk="turkuaz"]  { --vurgu: var(--turkuaz);  --vurgu-soft: #e2f4f6; }
html[data-renk="kirmizi"]  { --vurgu: var(--kirmizi);  --vurgu-soft: #fbeceb; }
html[data-renk="gri"]      { --vurgu: var(--gri);      --vurgu-soft: #edf0f4; }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif;
    background: var(--zemin);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; border-radius: 5px; }

/* Klavye kullanıcısı menüyü her sayfada baştan geçmesin. */
.atla { position: absolute; left: -9999px; background: var(--kart);
        padding: 12px 18px; border-radius: var(--r-s); z-index: 100; }
.atla:focus { left: 12px; top: 12px; }

/* --- Kabuk ---------------------------------------------------------------- */

.kabuk { display: flex; min-height: 100vh; }

/* --- Kenar çubuğu --------------------------------------------------------- */

.yan {
    width: 250px;
    flex: none;
    background: linear-gradient(175deg, var(--yan-bg2) 0%, var(--yan-bg) 62%);
    color: var(--yan-ink);
    display: flex;
    flex-direction: column;
    padding: 22px 14px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.marka { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }

.marka-nokta {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--turuncu);
    box-shadow: 0 0 0 5px rgba(232, 118, 28, .18);
    flex: none;
}

.marka-ad { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }

.marka-ad em {
    display: block; font-style: normal; font-weight: 500; font-size: 12px;
    color: rgba(207, 218, 234, .6); letter-spacing: .04em;
}

.yan-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.yan-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: var(--r-s);
    color: var(--yan-ink); text-decoration: none;
    font-size: 15px; font-weight: 500; position: relative;
    transition: background .12s, color .12s;
}

.yan-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* Etkin satır bölümün kendi rengiyle işaretleniyor: menüye bakan kişi
   hangi bölümde olduğunu okumadan biliyor. */
.yan-menu a.active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }

.yan-menu a.active::before {
    content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px;
    width: 4px; border-radius: 0 4px 4px 0; background: var(--satir);
}

.yan-menu a[data-renk="mavi"]     { --satir: var(--mavi); }
.yan-menu a[data-renk="lacivert"] { --satir: #6f9bd8; }
.yan-menu a[data-renk="turuncu"]  { --satir: var(--turuncu); }
.yan-menu a[data-renk="yesil"]    { --satir: var(--yesil); }
.yan-menu a[data-renk="mor"]      { --satir: #9b7af0; }
.yan-menu a[data-renk="turkuaz"]  { --satir: #2bb7c9; }
.yan-menu a[data-renk="kirmizi"]  { --satir: var(--kirmizi); }
.yan-menu a[data-renk="gri"]      { --satir: #8fa1b7; }

.nav-ikon {
    width: 21px; height: 21px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}

.yan-menu a.active .nav-ikon { opacity: 1; color: var(--satir); }

.yan-alt { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; }

.yan-kisi {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-s);
    text-decoration: none; color: var(--yan-ink);
}

.yan-kisi:hover { background: rgba(255, 255, 255, .07); }

.yan-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff;
    display: grid; place-items: center; font-weight: 700; flex: none;
}

.yan-kisi-ad strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.yan-kisi-ad em { font-style: normal; font-size: 12px; color: rgba(207, 218, 234, .62); }

.yan-cikis { display: block; padding: 8px 10px; color: rgba(207, 218, 234, .72);
             text-decoration: none; font-size: 14px; }
.yan-cikis:hover { color: #fff; }

.yan-surum { margin: 6px 0 0; padding: 0 10px; font-size: 11.5px;
             color: rgba(207, 218, 234, .38); letter-spacing: .03em; }

/* --- Gövde ve üst şerit ---------------------------------------------------- */

.govde { flex: 1; min-width: 0; }

.ust {
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
    padding: 20px 34px; display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; position: sticky; top: 0; z-index: 10;
}

.ust h1 {
    margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em;
    display: flex; align-items: center; gap: 11px;
}

/* Başlıktan önceki nokta, bölümün rengini taşıyan en küçük işaret. */
.ust h1::before {
    content: ""; width: 11px; height: 11px; border-radius: 50%;
    background: var(--vurgu); flex: none;
}

.rozet {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
    text-decoration: none; border: 1px solid var(--cizgi);
    background: var(--kart-alt); color: var(--ink-soft);
}

.rozet-uyari { background: var(--uyari-bg); border-color: #f0dcb4; color: var(--uyari); }
.rozet-uyari::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--turuncu); }

.page { padding: 28px 34px 90px; max-width: 1180px; }

/* --- Tipografi ------------------------------------------------------------- */

h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 30px 0 14px; }
h3 { font-size: 16.5px; font-weight: 700; margin: 20px 0 10px; }
p { margin: 0 0 14px; }

.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; }
.dim { opacity: .62; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mini { font-size: 12.5px; color: var(--ink-soft); }
.hint { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.warn-text { color: var(--uyari); font-weight: 600; }

.mono, code, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; }

code { background: var(--vurgu-soft); border: 1px solid var(--cizgi-soft);
       border-radius: 5px; padding: .1em .4em; color: var(--ink); }

code.big, pre.code {
    display: block; padding: 14px 16px; font-size: 13.5px;
    background: #0f1c2e; color: #d6e2f2; border: none;
    border-radius: var(--r-s); margin: 0 0 14px;
    /* Uzun adres kartın kenarında kesiliyordu. Yatay kaydırma çubuğu
       teknik olarak vardı ama kimse orada kaydırmayı denemez; sarmak
       kesmekten dürüst. */
    white-space: pre-wrap;
    word-break: break-all;
}

.arabic { font-family: var(--arapca); font-size: 30px; line-height: 1.7; }
.arabic-small { font-family: var(--arapca); font-size: 21px; }
.arabic-verse { font-family: var(--arapca); font-size: 32px; line-height: 2; direction: rtl; }

/* --- Kart ------------------------------------------------------------------ */

.card {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 22px 24px;
    box-shadow: var(--golge-1); margin-bottom: 18px;
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* --- Pano (Özet sayfası) --------------------------------------------------- */

.pano-halkalar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; margin-bottom: 18px;
}

/*
 * İlerleme halkası kartı. Panelin en çok sorulan üç sorusunu tek bakışta
 * cevaplıyor: ses, sembol ve video ne kadar hazır. Sayıyı yazmak yeterli
 * olurdu; halka oranı okumadan görünür kılıyor ve sayfayı dolduran asıl
 * şey bu.
 */
.halka-kart {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 20px 22px;
    box-shadow: var(--golge-1);
    display: flex; align-items: center; gap: 18px;
    text-decoration: none; color: inherit;
    transition: transform .13s, box-shadow .13s;
}

.halka-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }

.halka-kart[data-renk="mor"]     { --k: var(--mor); }
.halka-kart[data-renk="turuncu"] { --k: var(--turuncu); }
.halka-kart[data-renk="yesil"]   { --k: var(--yesil); }
.halka-kart[data-renk="turkuaz"] { --k: var(--turkuaz); }
.halka-kart[data-renk="mavi"]    { --k: var(--mavi); }

.halka { position: relative; width: 86px; height: 86px; flex: none; }
.halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.halka .iz { fill: none; stroke: var(--cizgi-soft); stroke-width: 9; }
.halka .dolu { fill: none; stroke: var(--k); stroke-width: 9; stroke-linecap: round; }

.halka-yuzde {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 19px; font-weight: 800; letter-spacing: -.03em;
    color: var(--k); font-variant-numeric: tabular-nums;
}

.halka-bilgi strong { display: block; font-size: 16.5px; font-weight: 700; }
.halka-bilgi span { display: block; color: var(--ink-soft); font-size: 14px; }
.halka-bilgi em {
    display: inline-block; margin-top: 7px; font-style: normal;
    font-size: 13px; font-weight: 600; color: var(--k);
}

/* Sayı şeridi: "içerik ne kadar büyük" sorusunu cevaplayan, değişmeyen
   sayılar. Halkalardan sonraki ikinci katman. */
.cards, .pano-sayilar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 12px; margin-bottom: 22px;
}

.cards .card, .sayi-kart {
    margin: 0; padding: 16px 18px;
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r-s); box-shadow: var(--golge-1);
    color: var(--ink-soft); font-size: 13.5px;
}

.card .n, .sayi-kart strong {
    display: block; font-size: 27px; font-weight: 800; line-height: 1.15;
    letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}

.pano-iki {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px; align-items: start;
}

.pano-iki .card { margin: 0; }

/* İşlem akışı: her satırın önünde nokta ve dikey çizgi — liste değil,
   zaman çizgisi gibi okunuyor. */
.akis { list-style: none; margin: 0; padding: 0; }

.akis li {
    position: relative; padding: 0 0 16px 24px;
    border-left: 2px solid var(--cizgi-soft); font-size: 14.5px;
}

.akis li:last-child { padding-bottom: 0; border-left-color: transparent; }

.akis li::before {
    content: ""; position: absolute; left: -6px; top: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--vurgu); box-shadow: 0 0 0 3px var(--kart);
}

.akis strong { font-weight: 600; }
.akis time { display: block; color: var(--ink-soft); font-size: 12.5px; }

/* --- Uyarı kutuları -------------------------------------------------------- */

.alert {
    border-radius: var(--r-s); padding: 14px 18px; margin-bottom: 18px;
    border: 1px solid var(--cizgi); border-left: 4px solid var(--ink-soft);
    background: var(--kart); box-shadow: var(--golge-1); line-height: 1.55;
}

.alert.ok    { border-left-color: var(--ok);      background: var(--ok-bg);    border-color: #c9e6d9; }
.alert.warn  { border-left-color: var(--turuncu); background: var(--uyari-bg); border-color: #f0dcb4; }
.alert.error { border-left-color: var(--hata);    background: var(--hata-bg);  border-color: #f2cecb; }

/* --- Düğmeler -------------------------------------------------------------- */
/* Dokunma hedefi en az 44 piksel: paneli hoca da kullanıyor. */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px; border-radius: var(--r-s);
    border: 1.5px solid var(--cizgi); background: var(--kart); color: var(--ink);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    text-decoration: none; box-shadow: var(--golge-1);
    transition: transform .1s, box-shadow .12s, background .12s;
}

.btn:hover { background: var(--kart-alt); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn.primary {
    background: var(--vurgu); border-color: transparent; color: #fff;
    box-shadow: 0 1px 2px rgba(16, 31, 54, .1), 0 8px 18px -10px var(--vurgu);
}

.btn.primary:hover { filter: brightness(1.08); background: var(--vurgu); }
.btn.danger { border-color: #eec4c0; color: var(--hata); }
.btn.danger:hover { background: var(--hata-bg); }
.btn.small { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Form ------------------------------------------------------------------ */

.field { margin-bottom: 16px; }
.field label, label.field { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"],
select, textarea {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
    color: var(--ink); background: var(--kart);
    border: 1.5px solid var(--cizgi); border-radius: var(--r-s);
    transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--vurgu);
    box-shadow: 0 0 0 3px var(--vurgu-soft);
}

textarea { line-height: 1.55; resize: vertical; }

/* Ham dosya seçici tarayıcının kendi kutusu; kesikli kenarlık onu diğer
   alanlarla aynı ailenin parçası yapıyor. */
input[type="file"] {
    font: inherit; font-size: 14px; padding: 9px 11px;
    background: var(--kart-alt); border: 1.5px dashed var(--cizgi);
    border-radius: var(--r-s); max-width: 100%;
}

.search { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.search input { max-width: 340px; }
.list-field { display: flex; flex-direction: column; gap: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.check input { width: 19px; height: 19px; accent-color: var(--vurgu); }

/* --- Tablolar --------------------------------------------------------------- */
/*
 * `.grid` uzun süre HİÇ tanımlı değildi: Sesler sayfasındaki tablo
 * tarayıcının çıplak varsayılanıyla çiziliyordu ve sayfanın "kod dökümü"
 * gibi görünmesinin asıl sebebi buydu. Artık smoke_test bunu denetliyor.
 */
.table, .grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); overflow: hidden;
    box-shadow: var(--golge-1); margin-bottom: 20px;
}

.table th, .grid th {
    text-align: left; background: var(--kart-alt);
    border-bottom: 1px solid var(--cizgi); padding: 12px 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft);
}

.table td, .grid td {
    padding: 15px 16px; border-bottom: 1px solid var(--cizgi-soft);
    vertical-align: top;
}

.table tbody tr:last-child td, .grid tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td, .grid tbody tr:hover td { background: var(--vurgu-soft); }
.table.compact td, .table.compact th { padding: 9px 12px; font-size: 14px; }

/* --- İlerleme çubuğu -------------------------------------------------------- */

.bar { height: 12px; background: var(--cizgi); border-radius: 999px;
       overflow: hidden; margin: 10px 0 18px; }

.bar > span, .bar > div, .bar > i {
    display: block; height: 100%; background: var(--vurgu); border-radius: 999px;
}

/* --- Rozet, sekme, sayfalama ------------------------------------------------ */

.tag {
    display: inline-block; background: var(--vurgu-soft);
    border: 1px solid var(--cizgi); border-radius: 999px;
    padding: 3px 11px; font-size: 12.5px; font-weight: 600; color: var(--vurgu);
}

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
        border-bottom: 2px solid var(--cizgi); }

.tabs a {
    padding: 10px 16px; border-radius: var(--r-s) var(--r-s) 0 0;
    text-decoration: none; font-weight: 600; font-size: 15px;
    color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -2px;
}

.tabs a:hover { background: var(--kart-alt); color: var(--ink); }
.tabs a.active { color: var(--vurgu); border-bottom-color: var(--vurgu); background: var(--kart); }

.pager { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

/* --- Düzenleyici ------------------------------------------------------------ */

.editor {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 22px 24px; box-shadow: var(--golge-1);
}

.editor.narrow { max-width: 620px; }

.unit, .lesson {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 16px 20px; margin-bottom: 12px;
    box-shadow: var(--golge-1);
}

.lesson-head { display: flex; justify-content: space-between; align-items: center;
               gap: 14px; flex-wrap: wrap; }

/* --- Semboller --------------------------------------------------------------- */

.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 14px; }

.symbol-card {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 16px; text-align: center;
    box-shadow: var(--golge-1); transition: transform .13s, box-shadow .13s;
}

.symbol-card:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }

.symbol-image {
    height: 96px; display: grid; place-items: center;
    background: var(--vurgu-soft); border-radius: var(--r-s); margin-bottom: 12px;
}

.symbol-image img, .symbol-image svg { max-width: 78px; max-height: 78px; }

/* Görseli olmayan sembol turuncu, pakete gömülü olan sönük: ikisi de
   eksiklik değil ama biri dikkat istiyor, diğeri istemiyor. */
.symbol-image .missing { color: var(--turuncu); font-size: 13.5px; font-weight: 600; }
.symbol-image .bundled { color: var(--ink-soft); font-size: 12.5px; text-align: center; }

.symbol-meta { font-size: 14px; color: var(--ink-soft); }
.symbol-meta strong { display: block; color: var(--ink); font-size: 16px; }
.symbol-source { font-size: 12.5px; color: var(--ink-soft); word-break: break-all; }
.symbol-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* --- Giriş ekranı ------------------------------------------------------------ */

.auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: radial-gradient(900px 520px at 50% -10%, #1d3f68 0%, #16304f 48%, #0d1a2c 100%);
}

.auth-card {
    background: var(--kart); border-radius: 20px; padding: 38px 34px;
    width: 100%; max-width: 404px;
    box-shadow: 0 32px 74px -32px rgba(0, 0, 0, .6);
}

.auth-card.wide { max-width: 660px; }
.auth-card h1 { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.auth-card .btn { width: 100%; }
.auth-card hr { border: none; border-top: 1px solid var(--cizgi); margin: 20px 0; }

/* --- Okunacak sütunu (Sesler) ------------------------------------------------ */
/*
 * Yazı tipinde Amiri YOK — uygulamada kullanılan o olsa da. Denendi: Google
 * Fonts sürümü harekeyi harften KOPUK, çok yukarıda çiziyor; yani tam da
 * gösterilmesi gereken şeyi bozuyor.
 */
.oku-glif {
    font-size: 32px; line-height: 1.7; font-family: var(--arapca);
    /* `dir="rtl"` hizayı da sağa alıyordu; metin hücrenin sağ kenarına
       yapışınca bir sonraki sütuna aitmiş gibi okunuyordu. */
    text-align: left;
}

.oku-okunus { font-size: 17px; font-weight: 700; color: var(--vurgu); line-height: 1.3; }

/* --- Mikrofonla kayıt kutusu -------------------------------------------------- */
/* Kutu, kaydedilen satırın HEMEN ALTINDA açılıyor: ortada beliren bir
   pencere "şu an neyi kaydediyorum?" sorusunu doğuruyordu. */

.kayit-acik > td { border-bottom: none !important; background: var(--vurgu-soft); }

.kayit-satiri > td {
    background: var(--vurgu-soft); padding: 0; border-left: 4px solid var(--vurgu);
}

.kayit-kutu { padding: 22px 24px 24px; max-width: 640px; }

.kayit-adim { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.kayit-adim:first-child { margin-top: 0; }
.kayit-adim-gizli { display: none; }

.kayit-adim-no {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--vurgu); color: #fff; font-size: 14px; font-weight: 700;
    display: grid; place-items: center; flex: none;
}

.kayit-adim-ad { font-size: 16.5px; font-weight: 700; }

.kayit-okuma {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 18px; text-align: center;
    box-shadow: var(--golge-1);
}

/* Hareke, harfin üstündeki küçük bir işaret ve kaydı yapan kişi ekrandan
   uzakta olabiliyor. 44 pikselin altında fetha ile kesra ayırt edilemiyor. */
.kayit-glif { font-size: 58px; line-height: 1.5; font-family: var(--arapca); }
.kayit-okunus { font-size: 27px; font-weight: 800; color: var(--vurgu); }
.kayit-ipucu { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

.kayit-buyuk {
    display: block; width: 100%; min-height: 54px; padding: 13px 18px;
    font: inherit; font-size: 17px; font-weight: 700;
    border-radius: var(--r-s); border: none;
    background: var(--vurgu); color: #fff; cursor: pointer;
    box-shadow: 0 8px 18px -10px var(--vurgu);
}

.kayit-buyuk:disabled { background: #ccd6e4; color: #7a8798; cursor: default; box-shadow: none; }

/* Kaydederken kırmızı: "mikrofon şu an açık" tek bakışta anlaşılmalı. */
.kayit-dugme.kaydediyor { background: var(--hata); box-shadow: 0 8px 18px -10px var(--hata); }

.kayit-durum { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.kayit-liste { display: flex; flex-direction: column; gap: 9px; }

.deneme {
    display: flex; align-items: center; gap: 14px;
    background: var(--kart); border: 2px solid var(--cizgi);
    border-radius: var(--r-s); padding: 11px 15px; cursor: pointer;
    transition: border-color .12s, background .12s;
}

.deneme:hover { border-color: #c3d0de; }
.deneme.secili { border-color: var(--vurgu); background: var(--vurgu-soft); }

.deneme-isaret {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #b9c5d2; flex: none;
}

/* Seçili olan içi dolu daire — radyo düğmesinin bilinen görüntüsü. */
.deneme.secili .deneme-isaret {
    border-color: var(--vurgu);
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 22px var(--vurgu);
}

.deneme-bilgi { flex: 1; display: flex; flex-direction: column; }
.deneme-bilgi strong { font-size: 16px; }
.deneme-alt { font-size: 13.5px; color: var(--ink-soft); }

.deneme-dinle {
    min-height: 44px; min-width: 108px; padding: 8px 18px;
    font: inherit; font-size: 16px; font-weight: 700;
    border-radius: var(--r-s); border: 2px solid var(--vurgu);
    background: var(--kart); color: var(--vurgu); cursor: pointer; flex: none;
}

.deneme-dinle:hover { background: var(--vurgu-soft); }
.deneme-dinle.caliyor { background: var(--vurgu); color: #fff; }

.kayit-alt { display: flex; gap: 10px; margin-top: 20px; }
.kayit-alt .kayit-onay { flex: 2; }
.kayit-vazgec { flex: 1; background: var(--kart); color: var(--ink);
                border: 1.5px solid var(--cizgi); box-shadow: none; }

/* --- Dar ekran ---------------------------------------------------------------- */

@media (max-width: 1000px) {
    .kabuk { flex-direction: column; }
    .yan {
        width: 100%; height: auto; position: static;
        flex-direction: row; align-items: center; gap: 14px;
        padding: 12px 16px; overflow-x: auto;
    }
    .marka { padding: 0; }
    .marka-ad em { display: none; }
    .yan-menu { flex-direction: row; flex: 1; }
    .yan-menu a { padding: 8px 10px; white-space: nowrap; }
    .yan-menu a span { display: none; }
    .yan-menu a.active span { display: inline; }
    .yan-menu a.active::before { display: none; }
    .yan-alt { border-top: none; padding-top: 0; display: flex; align-items: center; gap: 8px; }
    .yan-kisi-ad, .yan-surum { display: none; }
    .ust { padding: 16px 18px; }
    .page { padding: 20px 18px 70px; }
    .kayit-kutu { padding: 16px; }
    .kayit-glif { font-size: 46px; }
    .deneme { flex-wrap: wrap; }
    .deneme-dinle { width: 100%; }
    .kayit-alt { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}