/* ------------------------------------------------------------------
   mobil.css — telefon/tablet duzeni ve YATAY TASMA KALKANI
   Her sayfada <body> sonunda, tema blogundan SONRA yuklenir; bu yuzden
   ayni ozgullukteki tema kurallarini sira ile gecer.
   KURAL: burada sabit renk tanimlanmaz, yalniz var(--...) kullanilir.

   Cozdugu kok sorun: genis tablolar (5 sutunlu P-CTAS gibi) sayfayi
   ekrandan genis yapiyordu; ust cubuk ekran genisliginde kaldigi icin
   telefonda sayfa "kaymis" gorunuyordu. Tablolar artik kendi icinde
   yatay kayar, izgara sutunlari min-content'in altina inebilir.
   ------------------------------------------------------------------ */

/* ---------- 1) Tasma kalkani — her ekran boyutunda ---------- */

/* Izgara sutunlari icerigin min genisligine ZORLANMASIN.
   Genislik kurali MEDYA SORGUSU ICINDE verilmeli: bu dosya sayfa
   CSS'inden sonra yuklendigi icin, sorgusuz bir kural sayfanin
   "@media(max-width:860px){.ozetgrid{grid-template-columns:1fr}}"
   kuralini ezer ve telefonda icerik sutunu 121 px'e duserdi. */
@media (min-width:861px){ .ozetgrid{ grid-template-columns:230px minmax(0,1fr); } }
@media (max-width:860px){ .ozetgrid{ grid-template-columns:minmax(0,1fr); } }
.ozetgrid>*{ min-width:0; }
.wrap,.card,.bolum,.panel,.hizli{ max-width:100%; }
.card,.bolum{ min-width:0; }

/* Tablolar: mobil.js her tabloyu .tsar kutusuna sarar, kutu kayar. */
.tsar{ max-width:100%; overflow-x:auto; overflow-y:hidden; margin:10px 0;
       -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tsar>table{ margin:0; }
.tsar>table td,.tsar>table th{ overflow-wrap:break-word; }

/* Uzun kelime/kod/adres satiri ekrani genisletmesin. */
.bolum,.karka,.kon,.sgovde,.acik,.sik,.hizli,.notsat span,.gpanel .gmetin{
  overflow-wrap:break-word;
}
.bolum pre,.hizli pre{ overflow-x:auto; }

/* Kunye cipi uzun olabiliyor ("Turkiye Klinikleri · cocukacilozel2-2...");
   nowrap oldugu icin tek basina sayfayi 700 px'e cikariyordu. */
.kaynak{ max-width:100%; white-space:normal; }
.bbas{ flex-wrap:wrap; }
.bsag{ min-width:0; max-width:100%; flex-wrap:wrap; }
img{ max-width:100%; height:auto; }
#pages img,#viewer img{ max-width:none; }   /* PDF okuyucu yakinlastirmasi bozulmasin */

/* ---------- 2) Icindekiler: telefonda katlanir panel ---------- */
/* Dugmeyi ve sarmalayiciyi mobil.js uretir. */
.tocdug{ display:none; }
@media (min-width:861px){
  .tocsar{ position:sticky; top:10px; align-self:start; }
  .tocsar .toc{ position:static; }
}
@media (max-width:860px){
  .tocsar{ margin:0 0 10px; }
  .tocdug{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px;
           background:var(--card); border:1px solid var(--line); border-radius:10px;
           padding:12px 14px; font:inherit; font-size:14px; font-weight:600;
           color:var(--ink); cursor:pointer; text-align:left; }
  .tocdug .ok{ transition:transform .18s; color:var(--mut); }
  .tocsar .toc{ display:none; margin-top:6px; max-height:56vh; overflow:auto; }
  .tocsar.acik .toc{ display:block; }
  .tocsar.acik .tocdug .ok{ transform:rotate(180deg); }
}

/* ---------- 3) Telefon duzeni (<=640px) ---------- */
@media (max-width:640px){
  .wrap{ padding:0 12px; }

  /* ust cubuk */
  .topbar{ padding:8px 0 0; }
  .tnav{ font-size:12.5px; gap:8px; }
  .thead{ margin:4px 0 2px; }
  .thead h1,.topbar h1{ font-size:18.5px; line-height:1.2; }
  .tmeta{ font-size:11.5px; gap:5px; margin-bottom:8px; }

  /* sekme seridi: kaydirilabilir, cubuk gizli, kenarlara tasan */
  .tabs{ margin:0 -12px; padding:0 12px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ padding:10px 12px; font-size:13px; }

  /* gezinme seridi (pano, akis, ilerleme, yonetim, cevrimdisi) */
  .nav{ flex-wrap:wrap; height:auto; min-height:48px; row-gap:0; padding:0 10px; }
  .nav .who{ display:none; }

  /* kartlar ve bolumler */
  .card{ padding:13px 14px; }
  .bolum{ padding:14px 15px; }
  .bbas h2{ font-size:16px; }
  .bbas{ flex-wrap:wrap; }

  /* tablolar biraz daha sik */
  html body table th,html body table td{ padding:6px 9px; }
  table,.bolum table,.hizli table{ font-size:13px; }

  /* hafiza karti */
  .kart{ min-height:300px; }
  .kyuz{ padding:16px 15px 46px; overflow:auto; overscroll-behavior:contain; }
  .kon{ font-size:17px; }
  .karka{ font-size:15px; }
  .kalt{ left:14px; right:14px; bottom:10px; }
  .derece{ grid-template-columns:repeat(2,1fr); gap:7px; }
  .derece button{ padding:12px 6px; }

  /* sorular ve deneme */
  .sgovde{ font-size:15.5px; }
  .sik{ font-size:14px; padding:11px 12px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:5px; }
  .sayac{ font-size:15.5px; padding:4px 9px; }

  /* dokunma hedefi: 38px'in altina dusmesin */
  .btn{ min-height:38px; }
  .temadug{ min-height:34px; }
}

/* Cok dar ekran (<=380px) */
@media (max-width:380px){
  .wrap{ padding:0 10px; }
  .tabs{ margin:0 -10px; padding:0 10px; }
  .tab{ padding:10px 10px; font-size:12.5px; }
  .bolum{ padding:12px 12px; }
  .derece button{ font-size:12.5px; }
}

/* ---------- 4) Yazdirma ---------- */
@media print{
  .tsar{ overflow:visible !important; }
  .tocdug{ display:none !important; }
  .tocsar .toc{ display:none !important; }
}