/* ==========================================================================
   play-store-like.html  •  05 RESPONSIVE + KOYU TEMA
   < 1100px  : tek kolon (tablet / küçük masaüstü)
   <  768px  : Android uygulaması görünümü (Play Store app)
   ========================================================================== */

/* ---------- tablet / küçük masaüstü ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .install-card{display:none}                 /* kart yerine tam genişlik buton */
  .mobile-install{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-width:420px}
  .mobile-install .btn{width:100%}
  .gf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mobil: gerçek Play Store uygulaması ---------- */
@media (max-width:767px){
  :root{
    --gp-gutter:16px;
    --shot-h:68vw;
    --shot-w:38.25vw;
  }
  body{font-size:14px}
  .gnav{display:none}
  .mbar,.sticky-install{display:flex}
  .container{padding:0 var(--gp-gutter)}
  .install-card{display:none}          /* mobilde sağ kart yerine tam genişlik buton */
  .mobile-install{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-width:none}
  .mobile-install .btn{width:100%}
  .car-prev,.car-next{display:none}    /* dokunmatikte oklar gizli */
  .car-dots{display:flex}

  .hero{padding:8px 0 0}
  .app-head{gap:16px}
  .app-icon{width:72px;height:72px}
  .app-title{font-size:22px}
  .app-stats{margin-top:10px;gap:0;width:100%}
  .stat{padding:6px 10px;min-width:0;flex:1}
  .stat-v{font-size:14px}

  /* ekran görüntüleri kenardan kenara */
  .shots{margin-top:20px}
  .carousel-track{
    gap:8px;
    margin:0 calc(var(--gp-gutter) * -1);
    padding:0 var(--gp-gutter) 4px;
    /* snap hizalaması kenar boşluğuna göre yapılır; aksi halde ilk kart
       ekranın soluna yapışır (boşluk görünmez) */
    scroll-padding-inline:var(--gp-gutter);
  }
  .shot{border-radius:var(--gp-radius-m)}

  /* bölümler */
  .sec{padding:20px 0}
  .sec-head>.t-sub{font-size:15px}
  .card{border-radius:var(--gp-radius-m);padding:16px}
  .reviews-summary{grid-template-columns:auto minmax(120px,1fr);gap:16px}
  .rating-big{min-width:104px}
  .rating-big .rb-v{font-size:36px}
  .hist-c{display:none}
  .review{padding:20px 0}
  .avatar{width:36px;height:36px;font-size:14px}
  .inner-pad{padding-bottom:96px}      /* yapışkan bar için yer */
}

@media (max-width:400px){
  .stat-k{font-size:11px}
  .app-title{font-size:20px}
}

/* ---------- koyu tema (Play Store dark theme) ----------
   NOT: Play Store koyu temada aynı marka yeşilini kullanır (buton zemini
   #01875f, yazı beyaz). Marka rengi korunur; yüzey/metin token'ları değişir. */
/* ---- koyu tema: tamamen SİSTEME göre (prefers-color-scheme) ----
   Manuel tema anahtarı yoktur. Play Store koyu temada marka yeşilini
   (#01875f / beyaz yazı) korur; yüzey ve metin token'ları değişir. */
@media (prefers-color-scheme:dark){
  :root{
    --gp-bg:#202124;
    --gp-surface:#202124;
    --gp-surface-2:#303134;
    --gp-text:#e8eaed;
    --gp-text-2:#9aa0a6;
    --gp-text-3:#80868b;
    --gp-chip:#303134;
    --gp-chip-text:#e8eaed;
    --gp-hover:#303134;
    --gp-divider:#5f6368;
    --gp-track:#3c4043;
    color-scheme:dark;
  }
  .gnav-logo .wordmark{color:var(--gp-text-2)}
}

/* ---------- erişilebilirlik ---------- */
@media (prefers-reduced-motion:reduce){
  .carousel-track{scroll-behavior:auto}
  .sticky-install{transition:none}
}
@media print{
  .gnav,.mbar,.mtabs,.sticky-install,.car-prev,.car-next{display:none!important}
}