/* =====================================================================
   MOBİL VE TABLET KATMANI
   main.css'ten SONRA yüklenir. Ayrı bir mobil adres yoktur; site tek URL
   üzerinden uyarlanır (responsive) çalışır — arama motorlarının önerdiği
   ve yönlendirme/çift içerik hatası doğurmayan yapı budur.

   Hedef cihazlar
   · iPhone SE (375×667) → iPhone 16 Pro Max (440×956), çentik ve
     ada (Dynamic Island) güvenli alanları dahil
   · Android 360–430 dp (Pixel, Galaxy, Xiaomi), tarayıcı çubuğu değişimi
   · iPad mini 8.3" (744) · iPad 10.9" (820) · iPad Pro 12.9" (1024),
     portre ve yatay
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · Tüm ekranlarda geçerli taban düzeltmeleri
   ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
html, body { max-width: 100%; overflow-x: clip }
img, svg, video, canvas, iframe { max-width: 100% }
* { -webkit-tap-highlight-color: rgba(255, 79, 169, .18) }
.sd-tablewrap, .mp-thumbs, .hero-pills, .pub-filters { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain }
/* Uzun başlık ve URL'lerin taşmasını engelle */
h1, h2, h3, .rc-link .url, .rc-hrow .v, .contact-info a { overflow-wrap: anywhere }

/* ---------------------------------------------------------------------
   2 · Güvenli alan (çentik, ada, ev çubuğu) — viewport-fit=cover ile
   ------------------------------------------------------------------ */
@supports (padding: max(0px)) {
  .top-nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)) }
  .mobile-sheet { padding-top: max(96px, calc(env(safe-area-inset-top) + 92px)); padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)) }
  .cookies { bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) }
  .to-top { bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px)); right: max(14px, env(safe-area-inset-right)) }
  .sd-topbar { padding-top: max(14px, env(safe-area-inset-top)) }
  .mp-overlay { padding-bottom: max(10px, env(safe-area-inset-bottom)) }
}

/* ---------------------------------------------------------------------
   3 · Dokunmatik cihazlar — yapışkan hover ve özel imleci kapat
   ------------------------------------------------------------------ */
@media (hover: none) {
  .rc-model:hover, .rc-link:hover, .media-card:hover, .case-card:hover, .blog-card:hover,
  .testi-card:hover, .media-tile:hover, .sd-feature:hover, .member-card:hover,
  .spec-row .tag-jump:hover, .rc-ghost:hover, .pub-row:hover { transform: none }
  .magnetic-cursor, .cursor-dot, .cursor-ring { display: none !important }
  html.fc-cursor-on * { cursor: auto !important }
}

/* ---------------------------------------------------------------------
   4 · Form alanları — iOS'ta odaklanınca sayfa yakınlaşmasın (16px kuralı)
       ve dokunma hedefi 48px'in altına düşmesin
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .field input, .field select, .field textarea { font-size: 16px; min-height: 48px; padding-top: 12px; padding-bottom: 12px }
  .field select { padding-right: 34px }
  .btn-cta, .rc-ghost, .pub-filter, .hero-pills .pill { min-height: 46px; display: inline-flex; align-items: center; justify-content: center }
  .top-nav .burger { width: 46px; height: 46px }
  .top-nav .lang button { min-width: 40px; min-height: 40px }
  .to-top { width: 48px; height: 48px }
  .mobile-sheet a { min-height: 52px; display: flex; align-items: center }
}

/* ---------------------------------------------------------------------
   5 · Tablet — 1024px ve altı
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  section.section { padding: 96px 32px }
  .hero-grid { padding: 120px 32px 88px }
  .sd-inner { padding-left: 32px; padding-right: 32px }
  .footer { padding: 64px 32px 32px }
  .rc-gcards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rc-hrows { grid-template-columns: 1fr }
  .rc-linkrow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Tablet portre — iPad mini / iPad dikey */
@media (min-width: 681px) and (max-width: 900px) {
  .rc-models { grid-template-columns: 1fr }
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-portrait img { height: 62dvh; max-height: 560px }
}

/* ---------------------------------------------------------------------
   6 · Telefon — 680px ve altı
   ------------------------------------------------------------------ */
@media (max-width: 680px) {
  section.section { padding: 64px 18px }
  .hero-grid { padding: 116px 18px 64px; gap: 30px }
  .footer { padding: 56px 18px 28px }
  .sd-inner { padding-left: 18px; padding-right: 18px }

  /* Hero — sabit vh yerine dinamik dvh; iOS'ta adres çubuğu açılıp
     kapandığında portre kayması olmaz */
  .hero-portrait img { height: auto; width: min(100%, 340px); max-height: 50dvh; margin-inline: auto }
  .hero-portrait .glow { inset: 12% 0 0 }

  /* Risk hesaplayıcı */
  .rc-grid { grid-template-columns: 1fr }
  .rc-gcards { grid-template-columns: 1fr }
  .rc-linkrow { grid-template-columns: 1fr }
  .rc-step { padding: 16px 14px }
  .rc-alert, .rc-handoff, .rc-next, .rc-legal { padding: 16px 14px }
  .rc-actions { flex-direction: column; align-items: stretch }
  .rc-actions .btn-cta, .rc-actions .rc-ghost { width: 100% }
  .rc-results { grid-template-columns: 1fr }
  .rc-hrow { flex-direction: column; gap: 3px }
  .rc-hrow .v { text-align: left }
  .rc-hcta { flex-direction: column; align-items: flex-start; gap: 12px }
  .rc-reasons li { grid-template-columns: 1fr; gap: 5px }
  .rc-reasons li .g { justify-self: start }
  /* Risk birikimi grafiği: sarkma yerine yatay kaydırma */
  .rc-traj { padding: 14px }
  .rc-traj-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity }
  .rc-traj-col { flex: 0 0 68px; scroll-snap-align: start }
  .rc-traj-col .lb { text-align: center; line-height: 1.4 }

  /* Bölüm ızgaraları */
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px }
  .about-grid, .contact-grid, .consult-grid { gap: 32px }
  .footer .grid { grid-template-columns: 1fr; gap: 28px }
  .sd-media { grid-template-columns: 1fr }
  .media-links li { grid-template-columns: 1fr }

  /* Oynatıcı — dinamik yükseklik, iOS tarayıcı çubuğu payı */
  .mp-frame { width: 100%; max-height: 90dvh }
  .mp-frame.is-portrait { width: min(420px, 100%) }
  .mp-overlay { padding: 8px }

  /* Kart detay katmanı */
  .spec-detail { height: 100dvh }
  .sd-hero .ix { margin-bottom: 4px }

  /* Çerez bandı */
  .cookies { padding: 14px 16px; gap: 10px }
  .cookies button { flex: 1 1 auto; min-height: 44px }
}

/* ---------------------------------------------------------------------
   7 · Küçük telefon — 400px ve altı (iPhone SE, Galaxy A serisi)
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
  section.section { padding: 56px 14px }
  .hero-grid { padding: 110px 14px 56px }
  .stats-row { grid-template-columns: 1fr }
  .rc-model { padding: 14px }
  .rc-model .nm { font-size: 14px }
  .rc-step-h .t { letter-spacing: .12em }
  .rc-traj-col { flex: 0 0 62px }
  .brand .tx .name { font-size: 17px }
}

/* ---------------------------------------------------------------------
   8 · Telefon yatay (landscape) — düşük yükseklikte sabit katmanlar
   ------------------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-grid { padding-top: 96px; padding-bottom: 40px }
  .hero-portrait img { max-height: 78dvh }
  .mobile-sheet { padding-top: 72px; overflow-y: auto; justify-content: flex-start; gap: 4px }
  .mobile-sheet a { font-size: 22px; min-height: 44px }
  .mp-frame { max-height: 96dvh }
}

/* ---------------------------------------------------------------------
   9 · Mobil menü — kaydırılabilir, kapatma düğmesi görünür
   ------------------------------------------------------------------ */
.mobile-sheet { overflow-y: auto; overscroll-behavior: contain }
.ms-close {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline);
  color: var(--text-2); appearance: none;
}
.ms-close:hover, .ms-close:focus-visible { border-color: var(--pink); color: var(--pink) }
body.no-scroll { overflow: hidden; touch-action: none }

/* ---------------------------------------------------------------------
   10 · Yazdırma — hesaplayıcı sonucu tek renkli, tam genişlik
   ------------------------------------------------------------------ */
@media print {
  .to-top, .cookies, .mobile-sheet, .ms-close, .top-nav .burger { display: none !important }
  .rc-traj-row { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; overflow: visible !important }
  .rc-step, .rc-alert, .rc-handoff { break-inside: avoid }
}