/* ==========================================================================
   YourTourGPT v653 — TABLET SYSTEM
   Applies only to 700–1366 CSS px. Phone (<700) is intentionally untouched.
   This file is linked last so legacy tablet rules cannot override it.
   ========================================================================== */

@media (min-width:700px) and (max-width:1366px){

  /* ---------- global rhythm ---------- */
  body{overflow-x:hidden}
  .content-section,
  .ortaklar-bolumu{
    width:min(1120px,calc(100% - 48px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .content-section{
    padding-top:40px!important;
    padding-bottom:42px!important;
  }
  .content-section.compact{padding-top:28px!important}
  .section-heading{margin-bottom:20px!important}
  .section-heading h2{
    font-size:clamp(30px,3.1vw,42px)!important;
    line-height:1.02!important;
  }
  .kicker{font-size:11px!important;letter-spacing:.14em!important}

  /* ---------- header ---------- */
  header.site-header,
  body>header{
    padding-left:clamp(22px,3vw,42px)!important;
    padding-right:clamp(22px,3vw,42px)!important;
  }
  .desktop-nav{gap:clamp(14px,2vw,28px)!important}
  .desktop-nav a{font-size:13px!important}
  .brand{min-width:max-content}
  .dil-secici select{min-width:118px!important}

  /* ---------- hero ----------
     Keep source's native 3:2 artwork. It is large enough to read,
     but no longer swallows the entire landscape tablet screen. */
  .hero.hero-kayan{
    padding-top:14px!important;
    padding-bottom:14px!important;
  }
  .hero-gorsel-kaydirici,
  .hero-gorsel-kaydirici.hero-oran-wide,
  .hero-gorsel-kaydirici.hero-oran-rent{
    width:min(92vw,1120px)!important;
    max-width:1120px!important;
    aspect-ratio:3/2!important;
    max-height:none!important;
    margin:0 auto!important;
    border-radius:0 0 24px 24px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .hero-gorsel-slide{width:100%!important;height:100%!important}
  .hero-zemin{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  .hero-gorsel-noktalar{bottom:9px!important}

  /* hero copy stays safely inside the left content zone */
  .hero-gorsel-travel .hero-yazi-travel{
    left:4.6%!important;top:7%!important;width:35%!important;
  }
  .hero-gorsel-travel .hero-baslik-serif{
    font-size:clamp(26px,2.8vw,40px)!important;
  }
  .hero-gorsel-esim .hero-yazi-esim{
    left:4.8%!important;top:15%!important;width:31%!important;
  }
  .hero-gorsel-esim .hero-baslik-esim{
    font-size:clamp(25px,2.65vw,38px)!important;
  }

  /* ---------- search / destination ---------- */
  .hero.hero-kayan .hero-content{
    width:min(1040px,calc(100% - 48px))!important;
    padding-top:16px!important;
  }
  .destination-guide{
    width:min(980px,100%)!important;
    margin:0 auto!important;
  }
  .destination-context{
    font-size:17px!important;
    margin-top:0!important;
  }
  .destination-gizlilik{font-size:12px!important}
  .yer-ara-kutu{
    width:min(900px,100%)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .yer-ara-kutu input{
    min-height:56px!important;
    font-size:15px!important;
  }

  /* ---------- quick services ----------
     This is the area that was tiny in the user's tablet screenshot. */
  .ai-home-hub{
    width:min(1080px,100%)!important;
    margin:22px auto 0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .ai-home-kart{
    width:auto!important;
    min-width:0!important;
    min-height:132px!important;
    flex:none!important;
    padding:16px!important;
    border-radius:20px!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    gap:10px 12px!important;
    box-shadow:0 10px 28px rgba(23,50,69,.08)!important;
  }
  .ai-home-kart-ikon{
    width:46px!important;height:46px!important;border-radius:14px!important;
    grid-row:1 / span 2!important;
  }
  .ai-home-kart-copy{min-width:0!important}
  .ai-home-kart-copy small{font-size:9px!important;line-height:1.15!important}
  .ai-home-kart-copy b{font-size:15px!important;line-height:1.16!important}
  .ai-home-kart-copy em{
    display:block!important;
    margin-top:4px!important;
    font-size:10.5px!important;
    line-height:1.28!important;
  }
  .ai-home-kart-ok{
    grid-column:2!important;
    justify-self:start!important;
    font-size:10.5px!important;
  }

  /* ---------- partner rail ----------
     Use the width instead of leaving a tiny island in the middle. */
  .ortaklar-bolumu{
    padding-top:22px!important;
    padding-bottom:32px!important;
  }
  .ortak-serit{
    width:100%!important;
    max-width:1080px!important;
    margin:12px auto 10px!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)!important;
            mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)!important;
  }
  .ortak-kutu{
    flex-basis:180px!important;
    padding:14px 12px!important;
  }
  .ortak-kutu img{height:23px!important;max-width:130px!important}
  .ortak-kutu-not{font-size:11px!important}
  .ortak-kutu-adet{font-size:11.5px!important}
  .ortaklar-not{
    max-width:900px!important;
    margin:14px auto 0!important;
    font-size:13px!important;
    line-height:1.4!important;
  }
  .konum-cagri-partner-alti{
    width:min(960px,100%)!important;
    margin:16px auto 0!important;
  }
  .konum-cagri-partner-alti .konum-cagri{
    min-height:58px!important;
    border-radius:17px!important;
    font-size:16px!important;
  }

  /* ---------- horizontal content rails ---------- */
  .serit,
  .sehir-serit,
  #wgtSerit,
  #yakinTurSerit{
    gap:18px!important;
    padding-bottom:8px!important;
  }

  #yakin.vitrin-yeni .sehir-kart,
  #sehirler.vitrin-yeni .sehir-kart{
    flex:0 0 calc((100% - 18px)/2)!important;
    min-width:0!important;
  }
  #yakin.vitrin-yeni .sehir-gorsel{
    aspect-ratio:4/3!important;
    height:auto!important;
  }
  #sehirler.vitrin-yeni .sehir-kart{
    flex-basis:calc((100% - 36px)/3)!important;
  }
  #sehirler.vitrin-yeni .sehir-gorsel{
    aspect-ratio:4/5!important;
    height:auto!important;
  }

  /* product rails: two generous cards, never 4 miniatures */
  #yakinTur.vitrin-yeni .urun-kart,
  #wgtBolum.vitrin-yeni .urun-kart{
    flex:0 0 calc((100% - 18px)/2)!important;
    min-width:0!important;
  }
  #yakinTur.vitrin-yeni .urun-gorsel,
  #wgtBolum.vitrin-yeni .urun-gorsel{
    aspect-ratio:16/10!important;
    height:auto!important;
    border-radius:20px!important;
  }
  #yakinTur.vitrin-yeni .urun-gorsel img,
  #wgtBolum.vitrin-yeni .urun-gorsel img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;
    transform:none!important;
  }
  .urun-govde h3{
    font-size:clamp(17px,1.7vw,21px)!important;
    line-height:1.22!important;
  }
  .urun-alt,.urun-fiyat{font-size:14px!important}

  /* ---------- country cards ---------- */
  #ulkeler.vitrin-yeni .sehir-kart{
    flex:0 0 calc((100% - 36px)/3)!important;
    min-width:0!important;
  }
  #ulkeler.vitrin-yeni .sehir-kart.gorselsiz{
    min-height:116px!important;
    padding:20px!important;
    border:1px solid #e0e7eb!important;
    border-radius:18px!important;
  }

  /* ---------- CTA buttons ---------- */
  .vitrin-baslik-aksiyon,
  .section-heading .tum-katalog{
    width:auto!important;
    min-height:42px!important;
    padding:10px 16px!important;
    margin:0!important;
    border-radius:999px!important;
    font-size:12px!important;
  }
  #tumSehir,#tumUlke{
    width:min(520px,100%)!important;
    margin:22px auto 0!important;
    min-height:50px!important;
  }

  /* ---------- fixed chat ---------- */
  .ai-sabit,
  .ai-sabit-form,
  #aiSabit{
    max-width:min(760px,calc(100vw - 80px))!important;
  }

  /* ---------- footer ---------- */
  footer{
    display:grid!important;
    grid-template-columns:minmax(190px,.7fr) minmax(0,1.8fr)!important;
    gap:18px 36px!important;
    align-items:start!important;
    padding:34px max(32px,5vw) 118px!important;
  }
  footer .footer-brand{align-self:start!important}
  footer p{margin:0!important;max-width:820px!important}
  footer .yasal-baglantilar{grid-column:1/-1!important}

  /* ---------- redesigned menu, portrait tablets ---------- */
  .mobile-menu{
    max-width:480px!important;
  }
}

/* Landscape tablet: make use of the real horizontal canvas. */
@media (min-width:900px) and (max-width:1366px) and (orientation:landscape){
  .hero-gorsel-kaydirici,
  .hero-gorsel-kaydirici.hero-oran-wide,
  .hero-gorsel-kaydirici.hero-oran-rent{
    width:min(86vw,1120px)!important;
  }
  .hero.hero-kayan .hero-content{width:min(1080px,calc(100% - 56px))!important}
  .destination-guide{width:min(1000px,100%)!important}
  .ai-home-hub{width:min(1080px,100%)!important}
}

/* Portrait tablet: retain touch-friendly two-column cards. */
@media (min-width:700px) and (max-width:899px) and (orientation:portrait){
  .desktop-nav{display:none!important}
  .menu-button{display:flex!important}
  .hero-gorsel-kaydirici,
  .hero-gorsel-kaydirici.hero-oran-wide,
  .hero-gorsel-kaydirici.hero-oran-rent{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    border-radius:0!important;
  }
  .ai-home-hub{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ai-home-kart{min-height:126px!important}
  .ortak-kutu{flex-basis:168px!important}
  #sehirler.vitrin-yeni .sehir-kart,
  #ulkeler.vitrin-yeni .sehir-kart{
    flex:0 0 calc((100% - 18px)/2)!important;
  }
}

/*
 * ═══ HERO METNİ GÖRSELİN YAZISINA BİNİYORDU (19 Ağustos, EKRAN GÖRÜNTÜSÜ) ═══
 * KULLANICI: "tablet versiyonunda fotoğraf üstü yazılar karışmış,
 * telefonda her şey iyi."
 *
 * Sebep yapısal: hero görselinin İÇİNDE de yazı var ("YourHoliday
 * eSIM / Stay connected") ve biz onun üstüne HTML metni bindiriyoruz.
 * İki yazı ancak belirli en-boy oranında yan yana durabiliyor; ara
 * genişliklerde görsel farklı kırpılıyor ve çakışıyorlar.
 *
 * 700–1366px için güvenli bölge tanımlıydı ama üst sınırın hemen
 * üstünde aynı çakışma sürüyordu. Sınır 1600px'e çekildi ve metin
 * kutusu daraltıldı: görselin yazılı bölgesi yaklaşık %38'den
 * başlıyor, metin %36'da bitiyor.
 *
 * ÖLÇÜM NOTU: oranlar ekran görüntüsünden okundu, tarayıcıda piksel
 * ölçümü yapılmadı. Yükledikten sonra tablet genişliğinde tekrar
 * bakılmalı.
 */
@media (min-width:700px) and (max-width:1600px){
  .hero-gorsel-esim .hero-yazi-esim,
  .hero-gorsel-travel .hero-yazi-travel{
    left:4.8%!important;
    width:33%!important;
    /* Kutu görselin yazılı bölgesine hiç girmesin. */
    max-width:33%!important;
  }
  .hero-gorsel-esim .hero-yazi-esim{ top:14%!important; }

  /* Başlık kutuya sığmazsa taşıyordu: ölçek genişliğe bağlandı. */
  .hero-gorsel-esim .hero-baslik-esim{ font-size:clamp(22px,2.4vw,34px)!important; }
  .hero-gorsel-travel .hero-baslik-serif{ font-size:clamp(24px,2.5vw,36px)!important; }

  /* Açıklama ve özellik satırları da aynı bölgede kalmalı. */
  .hero-gorsel-esim .hero-aciklama,
  .hero-gorsel-esim .hero-ozellikler-esim{ width:100%!important; }
  .hero-gorsel-esim .hero-ozellikler-esim{ gap:10px!important; }
  .hero-gorsel-esim .hero-ozellik span{ font-size:.72rem!important; }
}