/* ============================================================================
   responsive.css — Oxford Test Practice
   Site genelinde tek ve tutarlı mobil/responsive katmanı.

   YÜKLEME SIRASI: her sayfada </head>'ten hemen önce, sayfanın kendi
   <style> bloğundan SONRA yüklenir. Body içinde <style> yayan parçalar
   (topnav.php, home.php'nin alt blokları) daha geç geldiği için burada
   o seçicilere kasıtlı olarak bir üst seçici eklenerek özgüllük artırıldı
   (.otn-nav .otn-links gibi). Yeni kural eklerken aynı yöntemi kullan.

   BREAKPOINT SİSTEMİ (bundan sonra yazılacak tüm CSS bunu kullanmalı):
     xs   <=  359.98px   küçük telefon        (iPhone SE dikey)
     sm   <=  479.98px   telefon
     md   <=  599.98px   büyük telefon
     lg   <=  767.98px   küçük tablet / yatay telefon
     xl   <= 1023.98px   tablet  (topnav burger eşiği)
     2xl  <= 1279.98px   küçük dizüstü
   Eski dosyalardaki 420/560/640/700/720/860/900/960/980/1000/1020/1100 gibi
   dağınık eşikler korundu; bu katman onların üstünü kapatır.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) TOKENLAR
   ------------------------------------------------------------------------ */
:root{
  /* Üst menü yüksekliği — drawer'ın üst konumu buna bağlı. */
  --otn-bar-h: 70px;

  /* Admin mobil başlığı (.mobile-header). styles.css'teki 480px bloğu
     ölüydü (taban kurallardan önce geliyordu), yükseklik buradan yönetiliyor. */
  --rs-mobilehead-h: 56px;

  /* Sayfa kenar boşluğu: dar ekranda daralır, geniş ekranda sabitlenir. */
  --rs-gutter: clamp(0.85rem, 3.2vw, 1.5rem);

  /* İçerik genişliği */
  --rs-content-max: 1400px;

  /* Dokunma hedefi alt sınırı (WCAG 2.5.8 -> 24px, Apple/Google -> 44px) */
  --rs-tap: 44px;

  /* Güvenli alan (çentik / ana ekran çubuğu) */
  --rs-safe-t: env(safe-area-inset-top, 0px);
  --rs-safe-r: env(safe-area-inset-right, 0px);
  --rs-safe-b: env(safe-area-inset-bottom, 0px);
  --rs-safe-l: env(safe-area-inset-left, 0px);
}
@media (max-width: 1023.98px){ :root{ --otn-bar-h: 62px; } }
@media (max-width:  479.98px){ :root{ --otn-bar-h: 56px; --rs-mobilehead-h: 48px; } }

/* ---------------------------------------------------------------------------
   2) TEMEL HİJYEN — yatay taşmayı kaynağında kes
   ------------------------------------------------------------------------ */

/* overflow-x:hidden yerine clip: position:sticky'yi bozmaz. */
html{ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{ overflow-x: clip; max-width: 100%; }
/* clip desteklemeyen tarayıcıda (iOS < 16) SADECE body: html de hidden
   olursa body kendi kaydırma kabına dönüşür ve sticky header'lar kırılır. */
@supports not (overflow-x: clip){
  html{ overflow-x: visible; }
  body{ overflow-x: hidden; }
}

/* Grid/flex çocukları varsayılan min-width:auto yüzünden küçülmez ve
   satırı dışarı taşırır. Site genelinde en sık görülen taşma nedeni bu. */
.otn-nav *,
[class*="grid"] > *,
[class*="-row"] > *,
[class*="__row"] > *,
[class*="flex"] > *{ min-width: 0; }

/* Uzun kelime / URL / e-posta taşması */
p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6,
figcaption, blockquote, label, summary,
[class*="title"], [class*="name"], [class*="desc"], [class*="text"]{
  overflow-wrap: anywhere;
  word-break: normal;
}
a[href^="mailto:"], a[href^="http"], code, kbd, samp{ overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   3) MEDYA — görsel, video, iframe, tablo, kod hiçbir zaman taşmasın
   ------------------------------------------------------------------------ */
img, svg, video, canvas, audio, iframe, embed, object{
  max-width: 100%;
}
img, svg, video, canvas{ height: auto; }
/* NOT: img{display:block} bilinçli olarak YOK — mevcut sayfalarda görseller
   satır içi hizalamaya güveniyor, blok yapmak hizayı bozardı. */
audio{ width: 100%; }

iframe{ border: 0; }
/* Gömülü video/harita: en-boy oranını koru */
iframe[src*="youtube"], iframe[src*="vimeo"], iframe[src*="player"],
iframe[src*="maps"], iframe[allowfullscreen]{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

pre, code{ max-width: 100%; }
pre{ overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------------------
   4) TABLOLAR — mobilde yatay kaydırılabilir, hiçbir zaman sayfayı germez
   ------------------------------------------------------------------------ */
table{ max-width: 100%; }

/* Sarmalayıcısı olan tablolar (js/responsive.js her tabloyu .rs-tablewrap
   içine alır) yatay kayar; ipucu olarak kenarda gölge gösterilir. */
.rs-tablewrap{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.rs-tablewrap > table{ min-width: max-content; }
/* Kaydırılabilir olduğunu belli eden sağ kenar gölgesi. İçeriği maskelemez,
   koyu temada da doğru görünür. */
.rs-tablewrap.is-scrollable{
  box-shadow: inset -14px 0 12px -12px rgba(2, 8, 40, .28);
  border-radius: 10px;
}
html.dark .rs-tablewrap.is-scrollable{
  box-shadow: inset -14px 0 12px -12px rgba(0, 0, 0, .65);
}
.rs-tablewrap::-webkit-scrollbar{ height: 8px; }
.rs-tablewrap::-webkit-scrollbar-thumb{ background: rgba(2, 8, 40, .22); border-radius: 999px; }
.rs-tablewrap::-webkit-scrollbar-track{ background: transparent; }
@media (max-width: 767.98px){
  .rs-tablewrap > table{ font-size: .85rem; }
  .rs-tablewrap th, .rs-tablewrap td{ padding-left: .55rem; padding-right: .55rem; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   5) AKICI TİPOGRAFİ — sabit px başlıklar dar ekranda satırı kırar
   ------------------------------------------------------------------------ */
@media (max-width: 1023.98px){
  h1, .h1, [class*="hero__title"], [class*="page-header__title"]{
    font-size: clamp(1.5rem, 5.2vw, 2.4rem);
    line-height: 1.18;
  }
  h2, .h2{ font-size: clamp(1.25rem, 4.2vw, 1.85rem); line-height: 1.22; }
  h3, .h3{ font-size: clamp(1.05rem, 3.4vw, 1.4rem);  line-height: 1.3;  }
}
@media (max-width: 479.98px){
  body{ line-height: 1.55; }
}

/* ---------------------------------------------------------------------------
   6) SAYFA KABI — topnav'lı sayfaların iç boşluğu
   ------------------------------------------------------------------------ */
.dashboard--topnav .dashboard__main,
.dashboard--topnav .dashboard__content,
.dashboard--topnav .main-content,
.dashboard--topnav .mg-wrap{
  max-width: var(--rs-content-max) !important;
  padding-left:  max(var(--rs-gutter), var(--rs-safe-l)) !important;
  padding-right: max(var(--rs-gutter), var(--rs-safe-r)) !important;
}
@media (max-width: 767.98px){
  .dashboard--topnav .dashboard__main,
  .dashboard--topnav .dashboard__content,
  .dashboard--topnav .main-content,
  .dashboard--topnav .mg-wrap{
    padding-top: 1rem !important;
    padding-bottom: calc(1.25rem + var(--rs-safe-b)) !important;
  }
}

/* Genel sarmalayıcılar sabit genişlikte kalmasın */
@media (max-width: 1023.98px){
  .container, .wrap, .wrapper, .page, .content, .shell,
  [class$="__wrap"], [class$="__inner"], [class*="container"]{
    width: auto;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   7) ÜST MENÜ (topnav.php) — mobil çekmece
   NOT: topnav kendi <style>'ını body içinde yayar, bu yüzden buradaki
   seçiciler .otn-nav öneki ile özgüllük olarak onun üstündedir.
   ------------------------------------------------------------------------ */
.otn-nav{
  padding-top: var(--rs-safe-t);
}
.otn-nav .otn-bar{
  height: var(--otn-bar-h);
  padding-left:  max(var(--rs-gutter), var(--rs-safe-l));
  padding-right: max(var(--rs-gutter), var(--rs-safe-r));
  gap: clamp(.5rem, 2vw, 1.1rem);
}
.otn-nav .otn-mega{ top: var(--otn-bar-h); }

@media (max-width: 1023.98px){
  /* Masaüstünde .otn-links{flex:1} sağ grubu kenara itiyor. Mobilde bağlantılar
     position:fixed çekmeceye dönüşünce iten bir şey kalmıyordu ve tema/zil/
     avatar/hamburger logonun hemen yanına, sola yığılıyordu. */
  .otn-nav .otn-right{ margin-left: auto; }

  /* Çekmece: ekran kısa olsa bile tüm bağlantılara ulaşılabilsin. */
  .otn-nav .otn-links{
    inset: auto 0 auto 0;
    top: calc(var(--otn-bar-h) + var(--rs-safe-t));
    max-height: calc(100dvh - var(--otn-bar-h) - var(--rs-safe-t));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(.75rem + var(--rs-safe-b));
    z-index: 1002;
  }
  /* dvh desteklemeyen tarayıcılar için js/responsive.js --rs-vh yazar */
  @supports not (height: 100dvh){
    .otn-nav .otn-links{
      max-height: calc((var(--rs-vh, 1vh) * 100) - var(--otn-bar-h));
    }
  }

  /* Arka plan perdesi — çekmece açıkken sayfa tıklanamaz olsun. */
  /* z-index 900: .otn-nav z-index:1000 ile kendi yığın bağlamını kuruyor,
     çekmece o bağlamın içinde. Perde 1000'in ÜSTÜNE çıkarsa çekmeceyi de
     örter — bu yüzden bilerek altında tutuluyor. */
  .rs-navscrim{
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 40, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 900;
    -webkit-tap-highlight-color: transparent;
  }
  body.rs-nav-open .rs-navscrim{ opacity: 1; visibility: visible; }

  /* Menü satırları dokunma hedefi boyutunda */
  .otn-nav .otn-links > .otn-link,
  .otn-nav .otn-links .otn-has-mega > .otn-link{
    min-height: var(--rs-tap);
    font-size: .98rem;
    padding: .7rem .85rem;
  }
  .otn-nav .otn-col a{ min-height: 40px; padding: .55rem .6rem; }
  .otn-nav .otn-mega-tools a{ min-height: 38px; display: inline-flex; align-items: center; }
}
@media (min-width: 1024px){
  .rs-navscrim{ display: none; }
}

/* Çekmece açıkken arkadaki sayfa kaymasın (js sınıfı ekler) */
body.rs-nav-open{ overflow: hidden; }

/* Açılır menüler dar ekranda ekrandan taşmasın */
.otn-nav .otn-dd{
  width: min(320px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - var(--otn-bar-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.otn-nav .otn-notif-dd{
  width: min(350px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}
.otn-nav .otn-exam-dd{
  min-width: 0;
  width: min(330px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}
.otn-nav .otn-notif-list{ max-height: min(340px, 50dvh); }

@media (max-width: 479.98px){
  .otn-nav .otn-brand img{ width: 38px; height: 38px; border-radius: 9px; }
  .otn-nav .otn-icon{ width: var(--rs-tap); height: var(--rs-tap); }
  .otn-nav .otn-burger{ width: var(--rs-tap); height: var(--rs-tap); }
  .otn-nav .otn-divider{ display: none; }
  .otn-nav .otn-right{ gap: .4rem; }
  /* Açılır menüyü ekran genişliğine yasla */
  .otn-nav .otn-dd,
  .otn-nav .otn-notif-dd{
    position: fixed;
    right: .5rem;
    left: .5rem;
    width: auto;
    max-width: none;
    top: calc(var(--otn-bar-h) + var(--rs-safe-t) + .4rem);
  }
}
@media (max-width: 359.98px){
  .otn-nav .otn-bar{ gap: .35rem; }
  .otn-nav .otn-plan{ display: none; }
}

/* ---------------------------------------------------------------------------
   7b) ADMIN KENAR ÇUBUĞU (includes/sidebar.php)
   Çekmece + perde zaten var; eksik olan kaydırma kilidi, güvenli alan ve
   dokunma hedefi boyutları burada tamamlanıyor.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px){
  /* Mevcut 280px korunuyor, sadece dar ekranda ekranı doldurması engelleniyor.
     z-index'e DOKUNULMUYOR: sidebar.php 10000 veriyor ve perde 9998 —
     buradan düşürmek çekmeceyi perdenin altında bırakırdı. */
  .dashboard__sidebar{
    width: min(280px, 86vw);
    max-width: 86vw;
    padding-top: var(--rs-safe-t);
    padding-bottom: var(--rs-safe-b);
    padding-left: var(--rs-safe-l);
  }
  .dashboard__sidebar .sidebar__nav{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .dashboard__sidebar .nav__link{ min-height: var(--rs-tap); }
  /* Kare kalmalı: sadece min-height verilince 28px genişlikte uzun çubuğa dönüyordu */
  .dashboard__sidebar .sidebar__close{ width: 40px; height: 40px; min-width: 40px; }

  .mobile-header{
    padding-top: var(--rs-safe-t);
    padding-left:  max(.75rem, var(--rs-safe-l));
    padding-right: max(.75rem, var(--rs-safe-r));
  }
  .mobile-header__menu-btn{ min-width: var(--rs-tap); min-height: var(--rs-tap); }

  /* Sabit üst çubuk çentiğin altına kaymasın */
  .mobile-header{ height: var(--rs-mobilehead-h); }
  .dashboard__main{ padding-top: calc(var(--rs-mobilehead-h) + var(--rs-safe-t)) !important; }
}

/* styles.css'te bu kurallar 480px bloğunda yazılmıştı ama taban
   .mobile-header kurallarından ÖNCE geldiği için hepsi ölüydü. */
@media (max-width: 480px){
  .mobile-header{ padding-left: .75rem; padding-right: .75rem; }
  .mobile-header__logo{ font-size: .875rem; }
  .mobile-header__menu-btn{ border-width: 1.5px; }
  .mobile-header__avatar{ width: 32px; height: 32px; font-size: .6875rem; border-width: 1.5px; }
}
body.rs-sidebar-open{ overflow: hidden; }

/* ---------------------------------------------------------------------------
   7c) SAYFAYA ÖZEL HEADER'LAR
   Sitede topnav ve admin kenar çubuğu dışında dört ayrı header ailesi var ve
   hiçbirinin mobil kuralı yoktu — 360px'te marka adı, butonlar ve rozetler
   yan yana sığmayıp başlığı taşırıyordu. Hepsi burada toplandı.
   ------------------------------------------------------------------------ */

/* 7c-1) .nav ailesi
   Kullananlar: oxford-test-of-english.php, ote-sinav-hazirlik.php ve
   blog/blog-template.php (9 blog sayfası). Bu üç dosya dışında kullanılmıyor,
   bu yüzden genel isimlerine rağmen hedeflemek güvenli. */
@media (max-width: 767.98px){
  .nav{
    padding: .7rem max(1rem, var(--rs-safe-l)) .7rem max(1rem, var(--rs-safe-r));
  }
  .nav-container{ gap: .6rem; min-width: 0; }
  .nav-brand{ min-width: 0; gap: .55rem; flex: 1 1 auto; }
  .nav-logo{ width: 36px; height: 36px; font-size: 1.05rem; flex: none; }
  .nav-title{
    font-size: .95rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "| OTE Hazırlık", "| Blog" gibi ikincil ek — dar ekranda marka adı önce gelir */
  .nav-title span{ display: none; }
  .nav-actions{ gap: .4rem; flex: none; }
  .nav-actions .btn{ padding: .5rem .75rem; font-size: .8rem; white-space: nowrap; }
}
/* Dar telefonda marka adı "Oxford Tes…" diye kesilmesin: iki satıra sarsın */
@media (max-width: 419.98px){
  .nav-title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: .84rem;
    line-height: 1.12;
  }
  .nav-actions{ gap: .35rem; }
  .nav-actions .btn{ padding: .45rem .6rem; font-size: .76rem; }
}

/* 7c-2) .exam-header — sinav-basvurusu/ altındaki 8 sayfa.
   .oxford-page ile kapsandı: styles.css'te aynı isimde, sınav motoruna ait
   başka bir .exam-header var, ona dokunulmamalı. */
@media (max-width: 767.98px){
  .oxford-page .exam-header{ padding: 10px 0; }
  .oxford-page .exam-header .container{
    gap: 8px;
    padding-left:  max(14px, var(--rs-safe-l));
    padding-right: max(14px, var(--rs-safe-r));
  }
  .oxford-page .exam-header .logo{ font-size: 1rem; gap: 8px; min-width: 0; }
  .oxford-page .exam-header .logo span{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .oxford-page .exam-header .logo-icon{ width: 34px; height: 34px; flex: none; font-size: 1rem; }
  /* Breadcrumb zaten ikinci satıra sarıyor; okunur kalsın */
  .oxford-page .exam-header .breadcrumb{ font-size: .8rem; width: 100%; }
}

/* 7c-3) .header ailesi — forgot-password.php ve reset-password.php */
@media (max-width: 599.98px){
  .header{ padding: .75rem max(1rem, var(--rs-safe-l)) .75rem max(1rem, var(--rs-safe-r)); }
  .header-container{ gap: .6rem; min-width: 0; }
  .header-brand{ min-width: 0; }
  .header-title{
    font-size: .95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .header-link{ font-size: .8rem; white-space: nowrap; flex: none; }
}

/* 7c-4) .mast — index.php açılış sayfası.
   Başlığın kendisi clamp() ile zaten esnek; tek eksik, çekmecenin masaüstüne
   geçilince açık kalması. */
@media (min-width: 1001px){
  .drawer{ display: none !important; }
}
@media (max-width: 1000px){
  /* .wrap 1.5rem kenar boşluğu veriyor; burada SIFIRLAMA, sadece çentikle
     büyüt (önceki sürüm max(0px,...) yazıp logoyu kenara yapıştırıyordu). */
  .mast__in{
    padding-left:  max(1.1rem, var(--rs-safe-l));
    padding-right: max(1.1rem, var(--rs-safe-r));
  }
  /* index.php'de .drawer{padding:.75rem 0 1.1rem} kuralı .wrap'ten sonra
     geldiği için yan boşluğu 0'lıyordu: bağlantılar ekran kenarına yapışıktı. */
  .mast .drawer{
    padding-left:  max(1.1rem, var(--rs-safe-l));
    padding-right: max(1.1rem, var(--rs-safe-r));
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mast .drawer.on{ padding-bottom: calc(1.1rem + var(--rs-safe-b)); }
  .mast .drawer a{ min-height: var(--rs-tap); display: flex; align-items: center; }
  .mast .drawer .b{ justify-content: center; }
  /* .drawer a{color:var(--ink-2)} (0,1,1), .b--fill{color:#fff} (0,1,0)
     kuralını eziyordu: koyu buton üstünde koyu yazı. */
  .mast .drawer a.b--fill{ color: #fff; }
}

/* 7c-5) Yatay kayan sekme/bağlantı şeritleri (.g-nav, .nav-tabs)
   Zaten overflow-x:auto; mobilde kaydırma çubuğunu incelt ve zinciri kes. */
.g-nav, .nav-tabs{
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 767.98px){
  .g-nav, .nav-tabs{ scroll-snap-type: x proximity; }
  .g-nav a, .nav-tab{ scroll-snap-align: start; min-height: 38px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------------------
   8) IZGARALAR — bilinen sabit sütunlu ızgaraları kademeli olarak indir
   Blanket kural yok: sadece projede doğrulanmış sınıflar hedefleniyor.
   ------------------------------------------------------------------------ */

/* 8a) İçerik ızgaraları: dar ekranda tek sütun */
@media (max-width: 767.98px){
  .quick-start-grid,
  .score-grid,
  .sets-grid,
  .split,
  .figs__in,
  .foot__g,
  .cert-taker,
  .fm-finish-summary__grid,
  body .otd-grid,
  body .otd-rows,
  body .otd-mock,
  body .otd-pf-2col{
    grid-template-columns: 1fr !important;
  }
}

/* 8b) İstatistik şeritleri: tek sütun yerine 2 sütunda kalsın —
   tek sütun bu kartları gereksiz uzatıyor. */
@media (max-width: 767.98px){
  body .otd-stats,
  body .rs-stats,
  body .mb-stats,
  body .otd-skillgrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .otd-stats > *,
  body .rs-stats > *,
  body .mb-stats > *{ min-width: 0; }
}
@media (max-width: 359.98px){
  body .otd-stats,
  body .rs-stats,
  body .mb-stats{ grid-template-columns: 1fr !important; }
}

/* 8c) auto-fit ızgaralar: minmax tabanı dar ekranda taşma yapıyor */
@media (max-width: 479.98px){
  [style*="repeat(auto-fit"], [style*="repeat(auto-fill"]{
    grid-template-columns: 1fr !important;
  }
}

/* 8d) Sertifika satırları — sütun sırası korunuyor:
   modül adı | puan | bar. Bar esnek kalmalı, sabit px verilmemeli. */
@media (max-width: 479.98px){
  .cert-thead, .cert-mrow{
    grid-template-columns: minmax(0, 1.1fr) 38px minmax(0, 1fr) !important;
    gap: .5rem !important;
  }
  .cert-overall{ flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   9) FORMLAR VE DOKUNMA HEDEFLERİ
   ------------------------------------------------------------------------ */

/* Taban kurallar ÖNCE: media query özgüllük eklemediği için, aynı seçici
   media bloğundan sonra tekrar yazılırsa mobil kural ölür. Bu dosyada
   sıralama her zaman taban -> media şeklinde. */
input, select, textarea, button{ max-width: 100%; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea{
  box-sizing: border-box;
}

/* iOS Safari, 16px'ten küçük yazılı alana odaklanınca sayfayı zorla
   yakınlaştırır ve geri çıkmaz. Mobilde tüm girdiler >=16px. */
@media (max-width: 767.98px){
  input, select, textarea{ font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"]{ font-size: inherit !important; }
  textarea{ min-height: 7.5rem; }
}

/* Dokunmatik cihazda küçük hedefleri büyüt (fare kullanıcısını etkilemez) */
@media (hover: none) and (pointer: coarse){
  button, [role="button"], .btn, [class*="btn"], a.otn-link,
  input[type="submit"], input[type="button"], input[type="reset"],
  select, summary, .otn-icon, .otn-burger{
    min-height: var(--rs-tap);
  }
  input[type="checkbox"], input[type="radio"]{
    min-width: 22px; min-height: 22px;
  }
  /* Yan yana duran küçük ikon butonları arasına nefes payı */
  .otn-right > * + *{ margin-left: 0; }
}

/* Mobilde buton grupları tam genişlik ve alt alta.
   DİKKAT: [class*="-actions"] gibi joker seçici KULLANMA ve display VERME —
   .nav-actions'ı da yakalayıp blogun mobilde gizlediği header butonlarını
   geri getiriyordu (tarayıcı testinde yakalandı). Sadece bilinen form grupları. */
@media (max-width: 479.98px){
  .btn-group, .form-actions{
    flex-wrap: wrap;
    gap: .55rem;
  }
  .btn-group > .btn, .form-actions > button, .form-actions > .btn{
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   10) MODAL / POPUP — mobilde tam ekran sayfa yaprağı
   ------------------------------------------------------------------------ */
@media (max-width: 599.98px){
  .modal, .modal__box, .modal-content, .modal-dialog,
  [class*="modal__"], [class*="-modal"] > div,
  dialog{
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  dialog{ margin: auto .5rem; }
}

/* Ekranın ALTINA sabitlenen çubuklar ana ekran çubuğunun altında kalmasın.
   Genel [class*="sticky"] kasıtlı olarak hedeflenmiyor: yan sütundaki sticky
   kutulara da boşluk ekliyordu. */
[class*="fixed-bottom"], [class*="bottom-bar"], [class*="bottombar"],
[class*="__footer--fixed"], [class*="-footer--fixed"]{
  padding-bottom: var(--rs-safe-b);
}

/* ---------------------------------------------------------------------------
   11) SINAV EKRANLARI (exam-test.php / full-mock.php / practice)
   Motorun düzenine dokunulmuyor; sadece mobil okunabilirlik ve taşma
   düzeltmeleri. Zamanlayıcı/ses mantığı CSS'ten etkilenmez.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px){
  .fm-header, .exam-header, [class*="exam__header"]{
    padding-left:  max(.7rem, var(--rs-safe-l));
    padding-right: max(.7rem, var(--rs-safe-r));
  }
  .fm-footer, [class*="exam__footer"]{
    padding-bottom: calc(.6rem + var(--rs-safe-b));
  }
  /* Soru metni ve şıklar mobilde yeterince büyük olsun */
  .question-text, [class*="question__text"], [class*="qtext"],
  .option-label, [class*="option__text"]{
    font-size: 1rem;
    line-height: 1.6;
  }
  /* Şıklar tam genişlik + dokunma hedefi */
  .option, .option-item, [class*="option__row"], label[class*="option"]{
    min-height: var(--rs-tap);
    width: 100%;
  }
  /* Sürükle-bırak / eşleştirme alanları yan yana sığmıyor */
  [class*="match__"], [class*="dragdrop"], [class*="drop-zone"]{
    max-width: 100%;
  }
}

/* 11b) SINAV KATMANLARI — overlay/panel mobilde gerçekten ekrana sığsın
   -------------------------------------------------------------------------
   Bu blok full-mock.css'ten SONRA yükleniyor (full-mock.php:677 -> 686), o
   yüzden aynı özgüllükte kurallar burada kazanır. Dokunulan üç gerçek hata:

   1) vh, adres çubuğu GİZLİYKEN ölçülen yüksekliktir. `max-height:90vh` bir
      telefonda görünür alandan uzun bir panel demek: ayak (Start / Close)
      ekranın altında kalıyor ve panelin kendisi de kaydırılamıyordu.
      dvh o anki görünür yükseklik. vh satırı dvh bilmeyen tarayıcı için
      önce yazılıyor, sonra dvh onu eziyor.
   2) Panel tek parça kaydırılıyordu; uzun bir metinde başlık ve ayak yukarı
      kayıp gözden kayboluyordu. Panel artık sütun: baş ve ayak sabit,
      yalnızca gövde kayıyor.
   3) Ayak `justify-content:flex-end` ile iki düğmeyi sağa sıkıştırıyordu;
      dar ekranda taşıyordu. Düğmeler tam genişliğe yayılıyor.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px){
  /* Sağdan açılan panel (practice soru listesi) bu kuralların dışında —
     o tam boy bir çekmece, sayfa yaprağı değil. */
  .fm-overlay:not(.fm-overlay--right){
    align-items: flex-end;              /* başparmağa yakın sayfa yaprağı */
    overflow-y: auto;
    padding: max(.5rem, var(--rs-safe-t)) max(.5rem, var(--rs-safe-r))
             max(.5rem, var(--rs-safe-b)) max(.5rem, var(--rs-safe-l));
  }
  .fm-overlay:not(.fm-overlay--right) .fm-panel{
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;                   /* kaydırma gövdenin işi */
    overscroll-behavior: contain;       /* panelin sonu sayfayı kaydırmasın */
  }
  .fm-panel__head, .fm-panel__foot{ flex: 0 0 auto; }
  .fm-panel__body{
    flex: 1 1 auto;
    min-height: 0;                      /* flex çocuğu küçülebilsin */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fm-panel__foot{
    flex-wrap: wrap;
    justify-content: stretch;
    gap: .5rem;
  }
  .fm-panel__foot > button,
  .fm-panel__foot > a{
    flex: 1 1 10rem;
    min-height: var(--rs-tap);
    justify-content: center;
  }

  /* Sağ çekmece: 100vh ekranın altını taşıyordu, ayağı erişilemezdi. */
  .fm-panel--right{
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Gövde de aynı sebeple dvh'ye geçiyor. */
  body.fm-body{ min-height: 100vh; min-height: 100dvh; }

  /* Motorun kendi modalları (modül bitti / süre doldu / skorum) aynı
     davranışı alsın — bunlar full-mock.css'te değil, js/exam-engine.js
     içinde basılıyor. */
  .modal-overlay,
  .transcript-modal-overlay,
  .myscore-modal-overlay{
    align-items: flex-end;
    overflow-y: auto;
    padding: max(.5rem, var(--rs-safe-t)) max(.5rem, var(--rs-safe-r))
             max(.5rem, var(--rs-safe-b)) max(.5rem, var(--rs-safe-l));
  }
  .modal-overlay .modal{
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal__actions{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .modal__actions > *{ flex: 1 1 10rem; min-height: var(--rs-tap); justify-content: center; }
}

/* 11d) SINAV KABUĞU — çentik, ev çubuğu ve soru şeridi
   -------------------------------------------------------------------------
   Üç ayrı çakışma:

   1) .fm-header ve .fm-footer SABİT YÜKSEKLİKLİ (--fm-header-h/--fm-footer-h)
      ve ekranın kenarlarına yapışık. Güvenli alan dolgusu sabit yüksekliğin
      İÇİNE ekleniyordu, yani içeriği eziyordu; iPhone'da ayaktaki Next/Finish
      ev çubuğunun altında kalıyordu. Doğrusu yüksekliği güvenli alan KADAR
      büyütmek. Gövdenin dolgusu da aynı miktarda artmalı, yoksa son soru
      ayağın arkasında kalır.

   2) .fm-pnav (practice soru şeridi) hiçbir mobil kuralı olmayan sabit bir
      kutuydu: 40 soruluk bir parçada 30px'lik düğmeler 94vw içinde sarıp
      dört sıraya çıkıyor ve sorunun üstünü kapatıyordu. Telefonda tek sıra
      + yatay kaydırma — kaydırılabilir olduğu kenar gölgesinden belli olur.
      NOT: .fm-pnav kuralları full-mock.css'te medya sorgularından SONRA
      yazılmış, o yüzden oradaki bir mobil kuralı taban kural ezerdi; bu
      dosya tamamen sonra yüklendiği için burada güvenli.

   3) .pr-nav çekmecesi ayakla aynı hizaya oturuyordu; o da güvenli alanı
      hesaba katmalı.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px){
  .fm-header{
    height: calc(var(--fm-header-h) + var(--rs-safe-t));
    padding-top: var(--rs-safe-t);
    padding-left:  max(.65rem, var(--rs-safe-l));
    padding-right: max(.65rem, var(--rs-safe-r));
  }
  .fm-footer{
    height: calc(var(--fm-footer-h) + var(--rs-safe-b));
    padding-bottom: var(--rs-safe-b);
    padding-left:  max(.65rem, var(--rs-safe-l));
    padding-right: max(.65rem, var(--rs-safe-r));
  }
  body.fm-body{
    padding-top:    calc(var(--fm-header-h) + var(--rs-safe-t));
    padding-bottom: calc(var(--fm-footer-h) + var(--rs-safe-b));
  }
  .pr-nav{
    top:    calc(var(--fm-header-h) + var(--rs-safe-t));
    bottom: calc(var(--fm-footer-h) + var(--rs-safe-b));
  }

  /* Soru şeridi: tek sıra, yatay kaydırma, ayağın hemen üstünde. */
  .fm-pnav{
    left: max(.5rem, var(--rs-safe-l));
    right: max(.5rem, var(--rs-safe-r));
    transform: none;
    max-width: none;
    bottom: calc(var(--fm-footer-h) + var(--rs-safe-b) + .5rem);
    gap: .5rem;
    padding: .45rem .55rem;
  }
  .fm-pnav__items{
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Kaydırınca etkin soru kenara yapışsın */
    scroll-snap-type: x proximity;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 2px;
  }
  .fm-pnav__items::-webkit-scrollbar{ display: none; }
  .fm-pnav__item{ flex: 0 0 auto; scroll-snap-align: center; }
  /* Etiket dar ekranda şeridin yarısını yiyordu; sayaç kalıyor çünkü
     "kaç soru kaldı" bilgisi etiketten daha işe yarar. */
  .fm-pnav__label{ display: none; }
}
@media (max-width: 359.98px){
  .fm-pnav__count{ display: none; }
}

/* 11c) "Jump to" telefonda görünmez
   -------------------------------------------------------------------------
   Modül/parça arasında atlamak bir YÖNETİCİ aracı; adayda zaten hiç
   çıkmıyor. Telefonda sınav başlığında yalnızca birkaç düğmelik yer var ve
   bu araç oraya sıkıştığında asıl kontrolleri (yardım, ayarlar, bitir)
   eziyordu. Masaüstünde duruyor — orada yer var ve iş oradan yapılıyor.
   Düğmeyle birlikte onu tarif eden hoş geldin satırı da gider; biri
   olmadan öteki yanlış bilgi olurdu.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px){
  body.fm-body #fmJumpBtn,
  .fm-welcome__item--jump{ display: none !important; }
}

/* Yatay telefon: sabit yüksekliklerde içerik sıkışıyor */
@media (max-height: 520px) and (orientation: landscape){
  :root{ --otn-bar-h: 50px; }
  .otn-nav{ position: static; }
  .otn-nav .otn-links{ max-height: calc(100dvh - var(--otn-bar-h)); }
  /* Sınav başlığına dokunulmuyor: motor kendi yükseklik hesabını yapıyor. */
}

/* ---------------------------------------------------------------------------
   12) YARDIMCI SINIFLAR — yeni işlerde kullan
   ------------------------------------------------------------------------ */
.rs-only-mobile{ display: none; }
@media (max-width: 767.98px){
  .rs-only-mobile{ display: revert; }
  .rs-hide-mobile{ display: none !important; }
  .rs-stack-mobile{ display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .rs-full-mobile{ width: 100% !important; max-width: 100% !important; }
  .rs-scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 768px){
  .rs-hide-desktop{ display: none !important; }
}

/* ---------------------------------------------------------------------------
   13) ERİŞİLEBİLİRLİK / YAZDIRMA
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Klavye ile gezinenler için görünür odak — mobilde de faydalı */
:focus-visible{
  outline: 2px solid #1b2859;
  outline-offset: 2px;
}

@media print{
  .otn-nav, .rs-navscrim, .otn-dd, .otn-notif-dd,
  [class*="sidebar"], [class*="cookie"], [class*="banner"]{ display: none !important; }
  body{ overflow: visible !important; }
  .rs-tablewrap{ overflow: visible !important; }
  .rs-tablewrap > table{ min-width: 0 !important; }
}

/* ---------------------------------------------------------------------------
   14) MOBİL DAVRANIŞ BİLEŞENLERİ (js/mobile.js tarafından basılır)

   Bu bölümdeki her şeyi js/mobile.js çalışma anında gövdeye ekler; sunucu
   tarafında hiçbir sayfada karşılığı yoktur. Bu yüzden seçicilerin hepsi
   .rs- öneklidir ve mevcut hiçbir sınıfla çakışmaz.
   ------------------------------------------------------------------------ */

/* 14a) Alt sekme çubuğu -----------------------------------------------------
   Yalnızca dar ekranda. Geniş ekranda topnav zaten yatay ve tam görünür;
   çubuk orada sadece yer kaplardı. */
.rs-tabbar{ display: none; }

@media (max-width: 1023.98px){
  .rs-tabbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; align-items: stretch;
    background: #fff;
    border-top: 1px solid #e6eaf0;
    /* Ana ekran çubuğu (iPhone) çubuğun içini yemesin */
    padding-bottom: var(--rs-safe-b);
    padding-left:  var(--rs-safe-l);
    padding-right: var(--rs-safe-r);
    box-shadow: 0 -6px 24px rgba(2, 8, 40, .07);
  }
  .rs-tabbar__item{
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem;
    min-height: var(--rs-tap);
    padding: .5rem .2rem .45rem;
    text-decoration: none;
    color: #64748b;
    font-size: .66rem; font-weight: 700; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .rs-tabbar__item svg{
    width: 22px; height: 22px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .rs-tabbar__item span{
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rs-tabbar__item.is-on{ color: #1b2859; }
  /* Etkin sekmenin üstündeki çizgi: renk körlüğünde de okunur bir ikinci işaret */
  .rs-tabbar__item.is-on::before{
    content: ""; position: absolute; top: 0; width: 34px; height: 3px;
    border-radius: 0 0 3px 3px; background: #0d9488;
  }
  .rs-tabbar__item{ position: relative; }

  /* Çubuğun altında kalan içerik: gövdeye onun yüksekliği kadar dolgu.
     max() değil sabit: çubuk yüksekliği ikon+etiket+dolgu ile sabittir. */
  body.rs-has-tabbar{
    padding-bottom: calc(58px + var(--rs-safe-b)) !important;
  }
  /* Sayfanın kendi sabit alt öğeleri çubuğun üstüne çıksın */
  body.rs-has-tabbar [class*="fixed-bottom"],
  body.rs-has-tabbar [class*="bottom-bar"],
  body.rs-has-tabbar [class*="bottombar"]{
    bottom: calc(58px + var(--rs-safe-b));
  }
}

/* 360px altı: beş etiket yan yana sığmıyor, etiketleri küçült */
@media (max-width: 359.98px){
  .rs-tabbar__item{ font-size: .6rem; }
  .rs-tabbar__item svg{ width: 20px; height: 20px; }
}

html.dark .rs-tabbar{ background: #141b2d; border-top-color: #233047; }
html.dark .rs-tabbar__item{ color: #94a3b8; }
html.dark .rs-tabbar__item.is-on{ color: #e8edf3; }

/* 14b) "Ana ekrana ekle" şeridi ---------------------------------------------
   Çubuğun hemen üstünde durur; kapatılınca localStorage'a yazılır ve bir daha
   gösterilmez. */
.rs-install{
  position: fixed; z-index: 960;
  left: max(.6rem, var(--rs-safe-l)); right: max(.6rem, var(--rs-safe-r));
  bottom: calc(58px + var(--rs-safe-b) + .6rem);
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .8rem;
  background: #011E41; color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(2, 8, 40, .3);
}
body:not(.rs-has-tabbar) .rs-install{ bottom: calc(var(--rs-safe-b) + .6rem); }
.rs-install__txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.rs-install__txt b{ font-size: .84rem; font-weight: 800; }
.rs-install__txt span{ font-size: .73rem; opacity: .8; }
.rs-install__act{ display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.rs-install__go{
  background: #0d9488; color: #fff; border: none; border-radius: 9px;
  padding: .55rem .85rem; font-size: .8rem; font-weight: 800; cursor: pointer;
  min-height: var(--rs-tap);
}
.rs-install__no{
  background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 9px;
  width: var(--rs-tap); min-height: var(--rs-tap); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
@media (min-width: 1024px){ .rs-install{ display: none; } }

/* 14c) Veri tasarrufu --------------------------------------------------------
   Bağlantı saveData bildirdiğinde ya da 3G ve altındayken pahalı ama
   bilgilendirici olmayan süslemeleri kapat. İçerik görselleri ve sınav sesi
   ASLA gizlenmez — sadece kendiliğinden inmeyi bırakır (js tarafı). */
html.rs-save-data [class*="hero"] [style*="background-image"],
html.rs-save-data [class*="banner"] [style*="background-image"],
html.rs-save-data [class*="-bg-img"]{
  background-image: none !important;
}
html.rs-save-data *{
  animation: none !important;
  background-attachment: scroll !important;
}
html.rs-save-data [class*="backdrop"],
html.rs-save-data [style*="backdrop-filter"]{ backdrop-filter: none !important; }

/* 14d) Yazdırma / sınav: alt çubuk asla görünmez -----------------------------
   Sınav ekranında js zaten basmıyor; bu ikinci bir emniyet. */
body.mock-mode .rs-tabbar,
body.practice-mode .rs-tabbar,
body.fm-body .rs-tabbar{ display: none !important; }
@media print{ .rs-tabbar, .rs-install{ display: none !important; } }