/* ═══════════════════════════════════════════════════════════
   KONU-MOBIL.CSS — Konu sayfasının bölüm bölüm (mobil) görünümü
   RK, MP ve YZ konu sayfalarında ortak (rehber §10.2).
   rota-konu-mobil.js body'ye .rkm-akis sınıfı ekler. Renkler yalnız tema
   değişkenleridir; başarı --c4 (iki temada yeşil), uyarı --c6, hata --c8.
═════════════════════════════════════════════════════════════ */

/* rota-core.css (≤1199px) body'ye overflow-x: hidden !important verir; bu
   body'yi kaydırma kabı yapar ve alt gezinme çubuğunun sticky konumunu
   bozar. clip aynı kırpmayı kap oluşturmadan yapar. Yalnız bu akışta. */
body.rkm-akis { overflow-x: clip !important; overflow-y: visible !important; }
body.rkm-akis #kSidebar { display: none; }
body.rkm-akis .layout { display: block !important; }
body.rkm-akis .mc { max-width: 760px; margin: 0 auto; }

/* Tek sütun sabit genişlikte: sütun "auto" kalırsa içerideki auto-fit ızgaralar
   (ör. son duraktaki örnek kartlar) kutuyu en geniş hâline (~1000px) şişirir. */
.rkm { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.rkm > * { min-width: 0; }

.rkm-ust { display: grid; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.rkm-ilerleme-metni { color: var(--text2); font: 600 max(.76rem, 12px)/1.35 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkm-cubuk { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.rkm-cubuk i { display: block; height: 100%; width: 0; background: var(--c4); transition: width .35s; }
/* Önceki / şimdiki / sonraki ekran: üç yuva, kaydırma yok. */
.rkm-komsular { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: .4rem; align-items: stretch; }
.rkm-yuva { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .45rem .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card2); color: var(--text2); text-align: left; font: inherit; }
button.rkm-yuva { cursor: pointer; }
button.rkm-yuva:hover:not(:disabled) { border-color: var(--primary); }
.rkm-yuva-sonraki { flex-direction: row-reverse; text-align: right; }
.rkm-yuva-bos { visibility: hidden; }
.rkm-yuva-simdiki { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); color: var(--text1); }
.rkm-yuva-no { flex: 0 0 auto; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--border); background: var(--card); color: var(--text3); font: 800 max(.7rem, 11px)/1 'Inter', sans-serif; }
.rkm-yuva-simdiki .rkm-yuva-no { border-color: var(--primary); background: var(--primary); color: var(--bg1); }
/* Yeşil zeminde açık temada var(--bg1) açık renk olduğundan okunmuyordu (2,01:1); koyu temada bg1 koyudur. */
.rkm-yuva[data-durum="tamam"] .rkm-yuva-no,
.rkm-yuva[data-durum="ozet"] .rkm-yuva-no { border-color: var(--c4); background: var(--c4); color: var(--text1); }
[data-theme="siber"] .rkm-yuva[data-durum="tamam"] .rkm-yuva-no,
[data-theme="siber"] .rkm-yuva[data-durum="ozet"] .rkm-yuva-no { color: var(--bg1); }
/* Koyu temada ana renk zemin üzerinde koyu metin 4,31:1 kalıyordu; zemin biraz açılır. */
[data-theme="siber"] .rkm-yuva-simdiki .rkm-yuva-no { background: color-mix(in srgb, var(--primary) 78%, white); }
.rkm-yuva[data-durum="atlandi"] .rkm-yuva-no { border-color: var(--c6); background: color-mix(in srgb, var(--c6) 20%, var(--card)); color: var(--text1); }
.rkm-yuva-metin { display: grid; min-width: 0; }
.rkm-yuva-metin small { color: var(--text3); font: 700 max(.6rem, 9px)/1.2 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.rkm-yuva-metin strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font: 650 max(.72rem, 11px)/1.3 'Inter', sans-serif; overflow-wrap: anywhere; }
.rkm-yuva-simdiki .rkm-yuva-metin strong { font-weight: 800; }

.rkm-ekran[hidden] { display: none; }
.rkm-ekran > .sec { margin-bottom: .8rem; }
.rkm-kesif-tek .konu-kesif-panel[hidden] { display: block; }

/* Tek kart: bölüm kartının içindeki durak kartı (.konu-kesif) görünmez
   olur; metin dış kartın tam genişliğini kullanır. */
.rkm-ekran .sbd { padding: clamp(14px, 4vw, 22px); }
.rkm-ekran .rkm-kesif-tek { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.rkm-ekran .konu-kesif-metin p { font-size: max(.98rem, 15px); line-height: 1.72; }
.rkm-ekran .sbd p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Paragraflar kesik çizgi yerine renkli kartlarla ayrılır: yumuşak ton +
   solda renk şeridi; renk üç tonda döner, madde paragrafları ayrı renktedir. */
.rkm-ekran .konu-kesif-metin { display: grid; gap: .6rem; padding-top: .8rem; }
.rkm-ekran .konu-kesif-metin p,
.rkm-ekran .konu-kesif-metin p + p { --kart-renk: var(--c1); padding: .75rem .9rem; border: 0; border-left: 4px solid var(--kart-renk); border-radius: 12px; background: color-mix(in srgb, var(--kart-renk) 8%, var(--card)); }
.rkm-ekran .konu-kesif-metin p:nth-child(3n + 2) { --kart-renk: var(--c5); }
.rkm-ekran .konu-kesif-metin p:nth-child(3n) { --kart-renk: var(--c7); }
.rkm-ekran .konu-kesif-metin p:has(.konu-kesif-madde) { --kart-renk: var(--c4); padding-left: .75rem; }

.rkm-sorular { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .85rem; border: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 12px; background: var(--card); }
.rkm-sorular-baslik { margin: 0; color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1)); font: 800 max(.72rem, 11px)/1.3 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.rkm-uyari { display: grid; gap: .55rem; padding: .8rem .9rem; border: 1px solid var(--c6); border-left-width: 4px; border-radius: 10px; background: color-mix(in srgb, var(--c6) 10%, var(--card)); color: var(--text1); font: 500 max(.82rem, 12px)/1.5 'Inter', sans-serif; }
.rkm-uyari[hidden] { display: none; }
.rkm-uyari p { margin: 0; }
.rkm-uyari-dugmeler { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Alt çubuk ekran genişliğiyle ölçeklenir: düğmeler boşluğu doldurur,
   yazı, iç boşluk ve yükseklik clamp() ile büyüyüp küçülür. */
.rkm-nav { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(.4rem, 2vw, .9rem); padding: clamp(.45rem, 1.8vw, .8rem); border: 1px solid var(--border); border-radius: clamp(10px, 2.5vw, 16px); background: var(--card); box-shadow: 0 -6px 18px color-mix(in srgb, var(--bg1) 70%, transparent); }
.rkm-nav .rkm-dugme { min-height: clamp(46px, 11vw, 58px); padding: clamp(.45rem, 1.6vw, .7rem) clamp(.6rem, 3vw, 1.3rem); font-size: clamp(15px, 3.9vw, 18px); }
.rkm-konum { color: var(--text3); text-align: center; white-space: nowrap; font: 700 clamp(13px, 3.3vw, 16px)/1 'Inter', sans-serif; }
.rkm-dugme { padding: .55rem .9rem; border: 1px solid var(--border); border-radius: 9px; background: var(--card2); color: var(--text1); font: 650 max(.8rem, 12px)/1.3 'Inter', sans-serif; cursor: pointer; }
.rkm-dugme:disabled { opacity: .45; cursor: default; }
.rkm-dugme[hidden] { display: none; }
.rkm-dugme.rkm-ana { background: var(--primary); border-color: var(--primary); color: var(--bg1); }
/* Koyu temada ana renk zemin üzerinde koyu metin 3,46:1 kalıyordu; zemin biraz açılır. */
[data-theme="siber"] .rkm-dugme.rkm-ana:not(.rkm-bekliyor) { background: color-mix(in srgb, var(--primary) 78%, white); border-color: color-mix(in srgb, var(--primary) 78%, white); }
.rkm-dugme.rkm-ana.rkm-bekliyor { background: var(--card2); border-color: var(--primary); color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1)); }
/* Bekleyen düğmede ana renk metin koyu kartta 3,46:1 kalıyordu; metin biraz açılır. */
[data-theme="siber"] .rkm-dugme.rkm-ana.rkm-bekliyor { color: color-mix(in srgb, var(--primary) 78%, white); }

.rkm-ozet .rkm-ozet-icerik { display: grid; gap: .5rem; padding: 1rem; margin-bottom: .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text1); }
.rkm-ozet-baslik { margin: 0; font: 800 max(1.1rem, 17px)/1.25 'Inter', sans-serif; }
.rkm-ozet-sayi { margin: 0; color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1)); font: 800 max(1rem, 16px)/1.3 'Inter', sans-serif; }
.rkm-ozet-icerik p { margin: 0; }
.rkm-eksikler { display: grid; gap: .4rem; }
.rkm-eksikler .rkm-dugme { text-align: left; }
.rkm-ozet .rks-bitis { margin-bottom: .8rem; }
.rkm-ozet .rks-bitis.rkm-bitis-eksik { border-color: var(--c6); background: color-mix(in srgb, var(--c6) 9%, var(--card)); }

/* Çubuk tam genişliktedir; sağ alttaki Pusula, çubuğun yüksekliği kadar
   (düğme + iç boşluk + alt aralık) yukarı alınır ki Sonraki'yi örtmesin. */
@media (max-width: 768px) {
  .rkm-nav { bottom: .5rem; }
  body.rkm-akis .rota-maskot { bottom: calc(clamp(46px, 11vw, 58px) + 2 * clamp(.45rem, 1.8vw, .8rem) + 1.6rem); }
}

@media (prefers-reduced-motion: reduce) { .rkm-cubuk i { transition: none; } }