/* =====================================================================
   ANASAYFA MOBIL DUZENI (tek kaynak)  --  yalnizca telefon genisligi (<= 768px)
   Masaustu gorunume dokunmaz. index.php'de style.css'ten SONRA yuklenir.
   Eski, dagilmis mobil kurallari (style.css icindeki !important'lar) burada ezilir.
   ===================================================================== */
@media (max-width: 768px) {

  /* 1) Baslik sistemi: style.css'teki "ANASAYFA BASLIK SISTEMI" degiskenleri mobil olcuye alinir */
  body.index-page {
    --sh-pad-top: 18px;
    --sh-title-size: 24px;
    --sh-title-lh: 30px;
    --sh-title-pull-top: -3px;     /* (30-24)/2 */
    --sh-title-pull-bottom: 5px;   /* 32-30+3 */
    --sh-kicker-size: 15px;
    --sh-kicker-lh: 22px;
  }
  body.index-page .section-title .title,
  body.index-page .feature-section-heading > h2 { letter-spacing: -.5px !important; }

  /* 2) Bolum boslugu: tek olcek (kucuk ekranda 100/90/80px bosluklar icerigi itiyordu) */
  body.index-page section:not(.hero) { padding-top: 44px !important; padding-bottom: 44px !important; }
  body.index-page #contact { padding-bottom: 36px !important; }


  /* 2b) TikFinity ve Transpose: tablet/mobilde eklenen kart ic bosluklari ve ortalama kaldirilir;
         cizgi ile metin ayni sol kenarda, tum basliklar gibi sola yasli */
  body.index-page #tikfinity-partner .tikfinity-partner-card,
  body.index-page #tuber-transpose .transpose-showcase-card { grid-template-columns: minmax(0, 1fr) !important; }
  body.index-page .tikfinity-partner-content,
  body.index-page .transpose-showcase-content { padding-left: 0 !important; padding-right: 0 !important; min-width: 0; text-align: left !important; }
  body.index-page .tikfinity-partner-content { padding-bottom: 8px !important; }
  body.index-page .tikfinity-partner-content > p,
  body.index-page .transpose-showcase-content > p,
  body.index-page .transpose-showcase-content h2 { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  body.index-page .tikfinity-partner-content h2 span,
  body.index-page .transpose-showcase-content h2 span { white-space: normal !important; }

  /* 3) Hero: tam ilk ekran, butonlar alt alta ve parmaga uygun */
  /* Hero ilk ekrani tam doldurur: altindaki beyaz bolum gorunmez.
     style.css mobilde body'ye zoom:0.9 verdigi icin yukseklik 1/0.9 ile telafi edilir;
     svh = tarayici cubuklari acikken gorunen alan (iPhone Safari/Chrome'da tasma yapmaz). */
  body.index-page #hero,
  body.index-page #hero .classic,
  body.index-page #hero .swiper-slide {
    height: calc(100vh / 0.9) !important;
    height: calc(100svh / 0.9) !important;
    min-height: 0 !important;
  }
  body.index-page #hero .slider-content { width: 100% !important; padding: 0 20px !important; }
  body.index-page #hero .hero-title { font-size: 42px !important; line-height: 1.1 !important; }
  body.index-page #hero .hero-subtitle { font-size: 15px !important; }
  /* Butonlar: eski kompakt hap gorunumu (yan yana, otomatik genislik); sadece biraz daha okunur/dokunulur */
  body.index-page #hero .hero-buttons { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; }
  body.index-page #hero .swiper-slide .slider-content .hero-buttons > a,
  body.index-page #hero .swiper-slide .slider-content .hero-buttons > a.site-btn.top_30,
  body.index-page #hero .swiper-slide .slider-content .hero-buttons > a.tiktok-live-btn {
    height: 40px !important; min-height: 40px !important; max-height: none !important;
    width: auto !important; margin: 0 !important; padding: 0 18px !important;
    font-size: 13.5px !important; line-height: 38px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important;
  }
  body.index-page #hero .hero-buttons .premium-collab-badge { width: auto !important; }
  body.index-page #hero .hero-buttons .pcb-title { font-size: 14px !important; }

  /* 4) Butonlar: en az 46px yukseklik, okunur yazi */
  body.index-page .site-btn,
  body.index-page button.site-btn { min-height: 46px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }

  /* 5) Hizmet kartlari: ikon basligin yaninda (masaustu ile ayni), daha sik bosluk */
  .services .service { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; align-content: start; padding: 18px !important; margin-top: 12px !important; }
  .services .service > i { grid-column: 1; grid-row: 1; font-size: 34px; line-height: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0; }
  .services .service > i:before { font-size: 34px; line-height: 1; margin: 0; }
  .services .service > h3.second-title { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; line-height: 1.3; }
  .services .service > p { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; font-size: 14px; line-height: 22px; }

  /* 6) Cok kucuk yazilar: en az 13.5px (etiket) / 14px (metin) */
  body.index-page .trust-card-highlight,
  body.index-page #ek-kazanc small,
  body.index-page #ek-kazanc span,
  body.index-page #tikfinity-partner small,
  body.index-page #tikfinity-partner li,
  body.index-page #tuber-transpose li,
  body.index-page #yayinci span,
  body.index-page #yayinci a,
  body.index-page #yayinci label,
  body.index-page #pr-isbirligi div,
  body.index-page #pr-isbirligi small,
  body.index-page .pcb-title { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* 7) Formlar: dokunma yuksekligi 48px, iOS'ta otomatik yakinlastirmayi onlemek icin 16px yazi */
  body.index-page input.emailput,
  body.index-page .form-inp,
  body.index-page .contact-form textarea { font-size: 16px !important; min-height: 48px; }
  body.index-page .contact-form textarea { min-height: 96px; height: 110px !important; }
  body.index-page .apply-form .check-label { font-size: 14px !important; line-height: 1.5 !important; }

  /* 7b) Dokunma hedefleri: carousel oklari ve onay kutulari */
  body.index-page .transpose-carousel-arrow { width: 40px !important; height: 40px !important; }
  body.index-page .apply-form input[type="checkbox"] { width: 20px; height: 20px; }

  /* 9) Iletisim: baslik > FORM > bilgiler (kompakt: mail + adres yan yana, telefon altta) */
  body.index-page #contact .getintouch { display: flex !important; flex-direction: column !important; }
  body.index-page #contact .section-title { margin-bottom: 10px !important; }
  body.index-page #contact .contact-form { margin-top: 0 !important; margin-bottom: 0 !important; }
  body.index-page #contact .contact-form .form-inp { margin-bottom: 18px !important; }
  body.index-page #contact .contact-form button.site-btn { margin-bottom: 18px !important; }
  body.index-page #contact .getintouch > .contact-form { order: 1; width: 100%; max-width: 100%; flex: none; }
  body.index-page #contact .getintouch > .contact-info { order: 2; width: 100%; max-width: 100%; flex: none; margin-top: 6px; padding-top: 22px; border-top: 1px solid #ddd;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  body.index-page #contact .contact-info .info { margin: 0 !important; padding: 0 !important;
    display: grid !important; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: start; }
  body.index-page #contact .contact-info .info:nth-child(3) { grid-column: 1 / -1; }
  body.index-page #contact .contact-info .info > i { grid-row: 1 / span 2; font-size: 17px; line-height: 1.3; margin: 2px 0 0 !important; }
  body.index-page #contact .contact-info .info > a,
  body.index-page #contact .contact-info .info > p.text { grid-column: 2; margin: 0 !important; font-size: 14.5px !important; line-height: 1.35 !important; word-break: break-word; }
  body.index-page #contact .contact-info .info > p:not(.text) { grid-column: 2; margin: 2px 0 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; color: #888; }

  /* 8) Yuzen butonlar: daha kucuk ve kenara yakin, icerigi daha az ortsun */
  .whatsapp-float { width: 44px !important; height: 44px !important; bottom: 14px !important; left: 12px !important; }
  .whatsapp-float svg { width: 24px; height: 24px; }
  .music-control-icon { width: 40px !important; height: 40px !important; right: 10px !important; bottom: 14px !important; }
  .music-control-icon span { font-size: 18px !important; }
}