/* ═══════════════════════════════
   MOBILE.CSS — Dvelia Mobil Stilleri
   styles.css'ten ayrıştırılmış tüm @media blokları.
   Breakpoints:
     ≤1100px  — büyük tablet
     ≤768px   — tablet + telefon (ana breakpoint)
     ≤640px   — compare modal
     ≤600px   — rankings grid
     ≤480px   — sadece telefon
═══════════════════════════════ */

/* ── COMPARE — küçük ekran (≤640px) ── */
@media(max-width:640px){
  .cmp-head{padding:14px 16px}
  .cmp-tool-pills{display:none}
  .cmp-ai-section{padding:14px 12px 0}
  .cmp-body{padding:0 12px 16px;overflow-x:auto}

  /* AI analiz kartları — tek sütun */
  .cmp-analysis-grid{grid-template-columns:1fr}
  .cmp-who-grid{grid-template-columns:1fr}
  .cmp-scenario-row{grid-template-columns:1fr;text-align:center}
  .cmp-scenario-vs{display:none}

  /* Tablo — 3 araç sığacak şekilde küçültüldü */
  /* Hesap: label(70px) + 3×sütun(80px) = 310px < 320px (375px ekran - 32px overlay - 24px padding) */
  .cmp-table{min-width:unset;width:100%;font-size:.72rem}
  .cmp-table th{padding:8px 5px;font-size:.65rem;letter-spacing:.03em}
  .cmp-table th.cmp-tool-head{min-width:80px}
  .cmp-table td{padding:8px 5px;font-size:.72rem}
  .cmp-table td.cmp-row-label{width:70px;font-size:.63rem;padding:8px 4px}
  .cmp-table td.cmp-cell{font-size:.72rem}
  .cmp-tool-logo{width:28px;height:28px;font-size:.9rem}
  .cmp-tool-name{font-size:.72rem}
  .cmp-pop-bar{width:50px}
  .cmp-visit-btn{font-size:.65rem;padding:5px 8px}
}

/* ── ANİMASYON — mobilde devre dışı ── */
@media(max-width:768px){
  .reveal{opacity:1!important;transform:none!important}
}

/* ── BÜYÜK TABLET (≤1100px) ── */
@media(max-width:1100px){
  .ai-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .news-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── TABLET + PHONE (≤768px) ── */
@media(max-width:768px){

  /* NAV */
  nav{padding:0 16px!important;height:68px!important;align-items:center}
  .nav-left{flex-direction:row!important;align-items:center!important;gap:0!important;padding:0}
  .nav-count{font-size:.62rem!important;padding:3px 8px!important}
  .nav-right{gap:6px!important}
  .lang-sw .lang-code{display:none!important}
  .hamburger{display:flex!important}
  .nav-links{
    display:none!important;
    position:fixed!important;
    top:104px!important;
    right:0!important;
    left:auto!important;
    width:140px;
    flex-direction:column!important;
    background:var(--cream);
    padding:8px 0!important;
    gap:0!important;
    z-index:199;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links.mobile-open{
    display:flex!important;
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }
  .nav-links li a{
    display:block;
    padding:9px 16px!important;
    font-size:.68rem!important;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--ink3);
    text-align:right;
    border-right:2px solid transparent;
  }
  .nav-links li a.active{border-right-color:var(--rust);color:var(--rust)!important}

  /* HERO — news-bar(32px)+nav(68px)=100px fixed, en az 110px boşluk gerekiyor */
  .hero{min-height:auto!important;padding:110px 16px 24px!important}
  .hero-badge{font-size:.64rem;padding:5px 10px;margin-bottom:12px!important}
  .hero-title{font-size:1.65rem!important;line-height:1.18}
  .hero-sub{font-size:.8rem;margin-top:8px!important}
  .search-wrap{margin-top:14px!important;max-width:100%!important}
  .s-input{font-size:16px;min-width:0}/* 16px → iOS zoom engellenir */
  .hero-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:16px!important;padding-top:12px!important}
  .stat-num{font-size:1.3rem!important}
  .stat-lbl{font-size:.64rem!important}
  .hero-cta-row{opacity:1!important;animation:none!important}
  .hero-cta-btn{display:inline-flex!important;padding:10px 18px!important;font-size:.8rem!important}
  .hero-cta-primary{background:var(--rust)!important;color:#fff!important}
  .hero-cta-secondary{border:1.5px solid rgba(26,23,20,.2)!important;color:var(--ink)!important}

  /* CATEGORY — yatay kaydırma */
  .cat-section{padding:24px 0 28px!important;position:relative}
  .cat-section::after{
    content:'›';
    position:absolute;
    right:0;top:50%;
    transform:translateY(-50%);
    background:linear-gradient(to right,transparent,var(--white) 60%);
    padding:20px 12px 20px 28px;
    font-size:1.4rem;
    color:var(--rust);
    pointer-events:none;
    opacity:.7;
  }
  .cat-section > .reveal{padding-left:16px!important;padding-right:16px!important}
  .cat-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:12px!important;
    padding:4px 16px 16px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:unset!important;
    scroll-snap-type:x mandatory;
  }
  .cat-grid::-webkit-scrollbar{display:none}
  .cat-card{
    min-width:175px!important;
    max-width:175px!important;
    flex-shrink:0!important;
    padding:16px 14px!important;
    height:auto!important;
    scroll-snap-align:start;
  }
  .cat-icon-big{font-size:1.8rem!important;margin-bottom:10px}
  .cat-name{font-size:1rem!important}
  .cat-cnt{font-size:.78rem!important}
  .cat-intro{font-size:.85rem!important;margin-bottom:16px!important}
  .cat-top3{display:flex!important;flex-direction:column;gap:5px;margin-top:12px}
  .cat-top3-item{
    font-size:.75rem!important;
    padding:5px 8px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    border-radius:3px;
  }
  /* Carousel indicator */
  .cat-scroll-dots{
    display:flex;
    justify-content:center;
    gap:5px;
    padding:8px 0 4px;
  }
  .cat-scroll-dot{
    width:6px;height:6px;
    border-radius:50%;
    background:rgba(26,23,20,.15);
    transition:background .2s,width .2s;
    flex-shrink:0;
  }
  .cat-scroll-dot.active{
    background:var(--rust);
    width:18px;
    border-radius:3px;
  }

  /* POPULAR & DİZİN */
  .home-explore-section{grid-template-columns:1fr!important;padding:0 16px 40px!important}
  .home-nav-card{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:14px 16px!important;text-decoration:none!important}
  .popular-section{padding:24px 16px 40px!important}
  .popular-header{flex-direction:column;align-items:flex-start;gap:10px}
  .popular-title{font-size:1.2rem!important}
  .ai-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .dir-section,.filter-section{padding-left:16px!important;padding-right:16px!important}
  .dir-header{flex-direction:column;align-items:flex-start;gap:8px}
  .dir-title{font-size:1.3rem!important}
  .page-hero-strip{flex-direction:column;align-items:flex-start;gap:8px}
  .page-hero-strip h2{font-size:1.5rem!important}

  /* FILTER BAR — yatay kaydırma */
  /* overflow:hidden kaldırıldı — autocomplete dropdown'u kesiyordu */
  .filter-section{overflow:visible!important;padding:12px 16px 0!important;flex-direction:column;align-items:stretch}
  .filter-arrow{display:none!important}
  .filter-inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    gap:6px!important;
    padding:4px 16px 10px!important;
    scrollbar-width:none!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  .filter-inner::-webkit-scrollbar{display:none!important}
  .filter-bar{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    gap:6px!important;
    padding-bottom:6px!important;
    scrollbar-width:none!important;
  }
  .filter-bar::-webkit-scrollbar{display:none!important}
  .f-btn{white-space:nowrap!important;flex-shrink:0!important;font-size:.68rem!important;padding:5px 12px!important}

  /* DIR SEARCH */
  .dir-search-wrap{padding-bottom:12px;width:100%}
  .dir-search-box{min-width:unset;width:100%}
  .dir-s-input{width:100%;font-size:16px}/* 16px → iOS zoom engellenir */
  #heroAutoBox{left:0;right:0}

  /* HABER BANDI — mobilde 32px yükseklik */
  .news-bar-top{height:32px}
  .nbt-label{padding:0 10px;font-size:.6rem}
  .nbt-btn{padding:4px 10px;font-size:.62rem;margin-right:4px}
  .nbt-track span{font-size:.68rem;padding:0 18px}
  nav{top:32px!important}
  /* hero padding-top .hero kuralında 110px olarak ayarlandı */
  .filter-section{top:128px!important}
  .page-hero-strip{padding:120px 16px 20px!important}

  /* NEWS */
  .news-ticker-section{top:104px}
  .news-grid{grid-template-columns:1fr 1fr!important}
  .news-grid-section{padding:28px 16px 48px!important}
  .news-page-section{padding:32px 16px 60px!important}

  /* MODAL — HTML'de .modal ve .modal-body kullanılıyor */
  .modal{max-height:90vh;border-radius:0}
  .modal-head{padding:24px 16px 20px!important}
  .modal-body{padding:16px!important}
  .modal-cta{flex-wrap:wrap}
  .m-btn-go,.m-btn-back,.m-btn-compare{width:100%;justify-content:center;text-align:center}

  /* CONTACT */
  .contact-section{padding:48px 16px!important}
  .contact-inner{grid-template-columns:1fr!important;gap:36px!important}
  .contact-title{font-size:1.6rem!important}
  .cf-btn{align-self:stretch;text-align:center}

  /* RANKINGS */
  .rankings-section{padding:32px 16px 48px}
  .rank-item{grid-template-columns:32px 32px 1fr auto;gap:8px;padding:12px 0}
  .rank-num{font-size:1.1rem}
  .rank-logo{width:32px;height:32px;font-size:.9rem}

  /* COMPARE BAR */
  .compare-bar-inner{padding:8px 12px;gap:8px}
  .compare-bar-label{font-size:.65rem}
  .compare-chips{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .compare-chips::-webkit-scrollbar{display:none}
  .compare-bar-actions{gap:6px}
  .compare-go-btn,.compare-clear-btn{padding:7px 12px;font-size:.72rem}

  /* FOOTER */
  footer{padding:32px 16px 20px}
  .foot-top{flex-direction:column;gap:14px}
  .foot-links{flex-wrap:wrap;gap:8px 14px}
}

/* ── RANKINGS GRID (≤600px) ── */
@media(max-width:600px){
  .rank-method-grid{grid-template-columns:1fr}
}

/* ── SADECE TELEFON (≤480px) ── */
@media(max-width:480px){
  .hero-title{font-size:1.4rem!important}
  .ai-grid{grid-template-columns:1fr!important}
  .cat-card{min-width:130px!important;max-width:130px!important}
  .news-grid{grid-template-columns:1fr!important}
  .modal-box{border-radius:10px 10px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:85vh;margin:0}
  .modal-ov{align-items:flex-end;padding:0}
}

/* ── NEWSLETTER POPUP — MOBİL ── */
@media(max-width:600px){
  .nl-popup{
    width:calc(100% - 32px);
    padding:28px 20px 20px;
    border-radius:12px;
  }
  .nl-form{flex-direction:column}
  .nl-btn{width:100%}
}