/* =========================================================================
   LicensePow — Mobile Responsive Hardening (Override Katmanı)
   v1.6.0 — 2026-05-24
   
   STRATEJİ: Mevcut CSS dosyalarına dokunmadan, sadece <1024px viewport'ta
   override kuralları uygula. Desktop görünüm değişmez.
   
   Yüklenme sırası: tokens → reset → utilities → layout → components → 
                    whmcs → rtl → domain-landing → MOBILE.CSS (en son)
   ========================================================================= */

/* =========================================================================
   1. GLOBAL OVERFLOW KORUMASI
   ========================================================================= */

/* HTML/Body yatay kayma önleme
   NOT: overflow-x: hidden position:sticky'yi kırar.
   overflow-x: clip ise sticky'yi bozmaz ve taşmayı keser. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Mobil drawer (fixed panel) — translateX(100%) ile sağa itilmiş içerik
   body.scrollWidth'i artırmasın */
.site-mobile-nav {
  overflow: hidden;
}

/* Medya elemanları taşmasın */
img, video, iframe, embed, object, picture, canvas, svg {
  max-width: 100%;
  height: auto;
}

svg {
  /* SVG ikon yüksekliklerini icon-only kullanım için bozma */
  height: revert;
}

/* Pre/code blokları taşmasın */
pre, code, kbd, samp {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

pre {
  overflow-x: auto;
}

/* Tablolar — sarılmamış olsalar bile yatay kaydırma izni */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* table-wrap zaten varsa onun içindeki tablo yine normal davransın */
.table-wrap > table,
.table-responsive > table {
  display: table;
  width: 100%;
}

/* Bootstrap table-responsive — serverstatus.tpl gibi WHMCS default sayfalar için */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Container/section padding güvencesi — aşırı sıkışmayı önle */
.container, .content-card, section {
  min-width: 0;
}

/* =========================================================================
   2. iOS ZOOM ENGELİ — Input font-size minimum 16px
   NOT: whmcs.css'te `.form-control { font-size: var(--fs-sm) !important }` kuralı 
        var. Bu yüzden override için class hedefli kuralla eşleştirilmeli.
   ========================================================================= */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  select,
  textarea,
  /* whmcs.css'in .form-control !important kuralını override et */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px !important;
  }
}

/* =========================================================================
   3. TAP TARGET — Minimum 44×44 (WCAG 2.5.5)
   ========================================================================= */
@media (max-width: 1024px) {
  /* Birincil etkileşimler */
  .btn,
  .btn-icon,
  .btn-secondary,
  .btn-primary,
  .btn-ghost,
  .theme-toggle,
  .lang-switcher__btn,
  .currency-switcher__btn,
  .lp-cart-toggle,
  .js-mobile-nav-toggle,
  .pagination a,
  .pagination button,
  .nav-tabs a,
  .nav-pills a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* btn-sm da en az 40px kalsın (görsel olarak küçük ama tıklanabilir) */
  .btn-sm {
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* =========================================================================
   4. SITE HEADER — Mobil optimizasyon (<1024px)
   YENİ STRATEJİ: header.tpl'de `hide-on-mobile` class'ı eklendi.
   Burada sadece layout/spacing düzenlemeleri.
   ========================================================================= */
@media (max-width: 1023.98px) {
  /* site-header: overflow-x:clip dropdown'ları kesiyor (clip + visible = her iki eksen clip)
     Çözüm: overflow kaldır, taşma zaten html overflow-x:clip ile engelleniyor */
  .site-header {
    overflow: visible;
  }
  
  .site-header__inner {
    /* layout.css'deki 0 24px'i override et */
    padding: 0 var(--space-4) !important;
    gap: var(--space-2);
    /* Grid ile padding-right çalışır */
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  
  /* Grid layout: logo | nav(gizli) | actions */
  .site-header__inner > .site-logo { grid-column: 1; }
  .site-header__inner > .site-nav  { grid-column: 2; }
  .site-header__actions            { grid-column: 3; justify-self: end; }
  
  .site-header__actions {
    gap: var(--space-1);
    flex-shrink: 0;
  }
  
  /* Logo: text uzun ise satır kırılmaması için min-width, taşma için max-width */
  .site-logo {
    min-width: 0;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* hide-on-mobile class'ı ile gizle (header.tpl'de işaretli öğeler) */
  .site-header__actions .hide-on-mobile {
    display: none !important;
  }
  
  /* Eski class'lı öğeler (hide-on-mobile sınıfı yokmuş gibi davransa bile) */
  .site-header__actions .currency-switcher {
    display: block !important;
  }
  
  /* Para birimi seçici — mobilde kompakt: sadece kod göster, chevron gizle */
  .site-header__actions .currency-switcher__btn {
    padding: 0 8px;
    min-height: 44px;
    min-width: 44px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    gap: 2px;
  }
  
  .site-header__actions .currency-switcher__btn svg {
    display: none;
  }
  
  /* Dil seçici — mobilde kompakt: sadece ikon + kısa metin, chevron gizli */
  .site-header__actions .lang-switcher {
    display: block !important;
  }
  
  .site-header__actions .lang-switcher__btn {
    padding: 0 8px;
    min-height: 44px;
    min-width: 44px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    gap: 2px;
  }
  
  /* Dil seçici chevron gizle — yer kazanmak için */
  .site-header__actions .lang-switcher__btn svg:last-child {
    display: none;
  }
  
  /* Görünür kalanlar: lang + theme + cart + hamburger */
  .lp-cart-toggle,
  .js-mobile-nav-toggle,
  .theme-toggle.js-theme-toggle {
    display: inline-flex !important;
  }
  
  /* Theme toggle mobilde kompakt */
  .site-header__actions .theme-toggle.js-theme-toggle:not(.lp-cart-toggle) {
    width: 40px;
    height: 44px;
    min-width: 40px;
    padding: 0;
  }
  
  /* Cart toggle: 44x44 */
  .lp-cart-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  
  /* Hamburger: 44x44, padding sıfırla — ikon tam ortada */
  .js-mobile-nav-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    margin-right: 0;
    position: relative;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .js-mobile-nav-toggle svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
  
  /* Cart badge mobilde: konum daha sıkı, üst-üste binme önle */
  .lp-cart-toggle__badge {
    top: -4px !important;
    right: -4px !important;
    min-width: 18px;
    height: 18px;
    border-width: 2px;
  }
}

/* Çok dar ekran (<360px) — gap minimum */
@media (max-width: 360px) {
  .site-header__inner {
    padding: 0 10px;
    gap: 4px;
  }
  
  .site-header__actions {
    gap: 2px;
  }
  
  /* Dil seçici çok dar ekranda gizle */
  .site-header__actions .lang-switcher {
    display: none !important;
  }
  
  .site-logo svg,
  .site-logo img {
    width: 28px;
    height: 28px;
  }
}

/* =========================================================================
   5. MOBİL DRAWER — Daha kapsamlı (Lang, Currency, Auth bölümleri)
   ========================================================================= */
.site-mobile-nav__extras {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-mobile-nav__extras .mobile-nav__section-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
}

.site-mobile-nav__extras .lang-switcher,
.site-mobile-nav__extras .currency-switcher {
  display: block;
  width: 100%;
}

.site-mobile-nav__extras .lang-switcher__btn,
.site-mobile-nav__extras .currency-switcher__btn {
  width: 100%;
  justify-content: space-between;
  min-height: 44px;
}

.site-mobile-nav__extras .auth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.site-mobile-nav__extras .auth-buttons .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

/* === Müşteri alanı linkleri — drawer içinde === */
.mobile-nav__client-link:hover,
.mobile-nav__client-link:focus {
  background-color: var(--color-accent-soft);
  color: var(--color-accent) !important;
}

.mobile-nav__client-link.is-active {
  background-color: var(--color-accent-soft);
  color: var(--color-accent) !important;
}

/* Drawer içerik scroll edilebilir, footer kısmı sabit altta kalsın */
.site-mobile-nav {
  display: flex;
  flex-direction: column;
}

.site-mobile-nav .mobile-nav-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Kullanıcı bilgi kartı — uzun email taşmasın */
.mobile-nav__user-card {
  min-width: 0;
}

/* =========================================================================
   6. CONTENT-CARD / SECTION padding — mobilde nefes alsın
   ========================================================================= */
@media (max-width: 768px) {
  .content-card {
    padding: var(--space-4) !important;
  }
  
  .content-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  
  /* Section padding düşür */
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  
  /* Hero spacing */
  .hero, .lp-domain-hero, .lp-dr-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  
  /* Container yan padding */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* =========================================================================
   7. FORM GRID — Çok dar ekranda 2-3 sütun yerine 1 sütun
   ========================================================================= */
@media (max-width: 480px) {
  .lp-form-grid-2,
  .lp-form-grid-3,
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
}

/* =========================================================================
   8. PRICING / CARDS — Mobilde tek sütun
   ========================================================================= */
@media (max-width: 640px) {
  .pricing-grid,
  .features-grid,
  .cards-grid-2,
  .cards-grid-3,
  .cards-grid-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Hero stats 2 sütun (zaten var) — doğrula */
  .hero__stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================================
   9. MODAL — Mobilde tam ekran benzeri
   ========================================================================= */
@media (max-width: 600px) {
  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 40px);
    margin: 12px;
  }
  
  .modal__header,
  .modal__body,
  .modal__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* =========================================================================
   10. FOOTER — Mobilde nefes alma + logo center
   ========================================================================= */
@media (max-width: 640px) {
  .site-footer {
    padding: var(--space-8) 0 var(--space-6);
  }
  
  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  
  .site-footer__social {
    justify-content: center;
  }
  
  /* Footer nav linkleri — tap target artır */
  .site-footer a:not(.social-links a),
  .site-footer__nav a,
  .site-footer__links a {
    display: inline-block;
    min-height: 36px;
    line-height: 36px;
    padding: 0 2px;
  }
  
  /* Sosyal medya ikonları — inline-flex koru, ortalama bozulmasın */
  .social-links a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
  }
  
  .social-links svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
}

/* =========================================================================
   11. TYPOGRAPHY — Mobilde çok büyük başlıkları yumuşat
   ========================================================================= */
@media (max-width: 480px) {
  .h1, h1.display, .hero__title {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.15;
  }
  
  .h2, h2.display, .section-title {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.2;
  }
  
  .lead {
    font-size: var(--fs-base);
  }
}

/* =========================================================================
   12. ACCESSIBILITY — Hover-only etkileşimler için tap fallback
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {
  /* Hover ile açılan dropdown'lar tap ile de açılsın */
  .dropdown:focus-within > .dropdown__menu,
  .dropdown.is-open > .dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /* Mega menu hover bağımlılığını gevşet — JS toggler kullansın */
  .mega-menu-wrap.is-open > .mega-menu {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================================
   13. ADMIN IMPERSONATION BAR — Mobilde wrap
   ========================================================================= */
@media (max-width: 640px) {
  .admin-impersonation-bar__inner {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
    text-align: center;
  }
}

/* =========================================================================
   14. UTILITIES — Mobilde gizleme yardımcıları
   ========================================================================= */
@media (max-width: 640px) {
  .hide-on-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .show-on-mobile { display: none !important; }
}

/* =========================================================================
   15. DROPDOWN MENU — Mobilde viewport sınırlarını aşmasın
   ========================================================================= */
@media (max-width: 1024px) {
  .dropdown__menu {
    max-width: calc(100vw - 24px);
    right: 12px !important;
    left: auto !important;
  }
}

/* =========================================================================
   16. MOBİL DRAWER — Tam ekran genişliği (300px sabit yerine 88vw)
   + Sağdan çıkma animasyonu iyileştirmesi
   ========================================================================= */
@media (max-width: 480px) {
  .site-mobile-nav {
    width: 88vw;
    max-width: 360px;
  }
}

/* Tüm viewport'larda animasyonu iyileştir — yumuşak spring efekti */
.site-mobile-nav {
  /* Açılış: spring (hızlı başlar, yavaş biter)
     Kapanış: ease-in (yavaş başlar, hızlı biter) */
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Açılış durumunda farklı easing */
.site-mobile-nav.is-open {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-nav-overlay {
  transition: opacity 0.35s ease !important;
}

/* =========================================================================
   17. BODY — Drawer açıkken scroll lock
   ========================================================================= */
body.mobile-nav-open {
  overflow: hidden;
}

/* =========================================================================
   18. SKIP LINK — Klavye erişilebilirliği (WCAG 2.4.1)
   ========================================================================= */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top 0.2s;
}

.skip-to-main:focus {
  top: var(--space-4);
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* =========================================================================
   19. CLIENT AREA — İNLINE GRID OVERRIDE (Mobil Tek Kolon)
   =========================================================================
   Sorun: Template dosyalarında inline style ile tanımlı grid-template-columns
   değerleri (1fr 280px, 1fr 320px, 1fr 340px, 1fr 1fr vb.) mobilde taşıyor.
   Çözüm: [style*="grid-template-columns"] attribute selector ile override.
   ========================================================================= */

@media (max-width: 767px) {

  /* --- 2-kolon layout: sol içerik + sağ sidebar (sabit px) --- */
  /* Örn: grid-template-columns:1fr 280px / 1fr 300px / 1fr 320px / 1fr 340px */
  [style*="grid-template-columns:1fr 2"],
  [style*="grid-template-columns:1fr 3"] {
    display: block !important;
  }
  [style*="grid-template-columns:1fr 2"] > *,
  [style*="grid-template-columns:1fr 3"] > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--space-4);
  }
  [style*="grid-template-columns:1fr 2"] > *:last-child,
  [style*="grid-template-columns:1fr 3"] > *:last-child {
    margin-bottom: 0;
  }

  /* --- 2 eşit kolon form grid'leri: 1fr 1fr --- */
  /* Örn: ad/soyad, şehir/eyalet, kart son kullanma/cvv */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- 4 eşit kolon: repeat(4,1fr) → 2 kolon --- */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- dl grid (term/definition yan yana) → tek kolon --- */
  /* Örn: grid-template-columns:1fr 1fr veya auto 1fr */
  dl[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  dl[style*="grid-template-columns"] dt {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }
  dl[style*="grid-template-columns"] dt:first-child {
    margin-top: 0;
  }

  /* --- client-welcome header: flex-wrap + butonlar alta --- */
  .client-welcome {
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
  }
  .client-welcome .flex.gap-2.ml-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  .client-welcome .flex.gap-2.ml-auto .btn {
    flex: 1;
    justify-content: center;
  }

  /* --- section-header: başlık + buton alt alta --- */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
  }
  .section-header .btn {
    align-self: flex-start;
  }

  /* --- invoice-header: logo + meta alt alta --- */
  .invoice-header {
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }
  .invoice-meta {
    align-items: flex-start !important;
  }
  .lp-pay-inline {
    align-items: flex-start !important;
  }

  /* --- invoice-addresses: 2 kolon → tek kolon --- */
  .invoice-addresses {
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }
  .invoice-address--right {
    align-items: flex-start !important;
  }

  /* --- Tablo taşması: yatay scroll --- */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* display:block ile overflow-x:auto çalışır hale gelir */
  .table-wrap table {
    min-width: 480px;
    display: block !important;
    width: 100%;
  }
  /* table-responsive içindeki tablolar display:table kalmalı (Bootstrap scroll mekanizması) */
  .table-responsive > table {
    display: table !important;
  }

  /* --- content-card içindeki flex row'lar → wrap --- */
  .content-card__body [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* --- Ticket header: başlık + butonlar --- */
  .ticket-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
  }
  .ticket-header > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  /* --- Breadcrumb taşmasın --- */
  .breadcrumb {
    flex-wrap: wrap !important;
  }

  /* --- Stat kartları: 2 kolon → 2 kolon (zaten iyi, ama min-width sıfırla) --- */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-card {
    min-width: 0 !important;
  }

  /* --- Hızlı aksiyonlar butonları tam genişlik --- */
  .content-card__body .btn-block {
    width: 100% !important;
  }

}

/* Çok küçük ekranlar (< 480px): stat kartları tek kolon */
@media (max-width: 479px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}