/* ═════════════ MOBİL UYGULAMA · .hm-app (09.09.2026) ═════════════
   Panel dili sitenin kendisi: --sl-fill dolgu + ÜST eğik kenar, dört köşe yuvarlak (teaser ile aynı şekil),
   altın script başlık (.t50-script-gold), --sl-ink/--sl-line tokenları.
   Gölge YOK, hover'da hareket YOK (t-50 kuralı). */
.hm-app{ margin-top:var(--sec-gap); }
/* 09.09.2026 · karar: "alt köşeler diğer sectionlar gibi yuvarlak olsun".
   Paylaşılan .sgb-slant-t sınıfının ALT köşeleri KARE (tanımı öyle: line to 100% 100%).
   O sınıfı düzeltmek yerine — başka yerde kullanılmıyor ama sözleşmesi bu — panele
   TEASER İLE AYNI şekil verildi: üst kenar eğik + DÖRT KÖŞE yuvarlak.
   Aynı tokenlar (--slant / --corner) kullanılıyor, o yüzden mevcut --pad-panel-top
   dolgusu (= slant + pad-y) birebir uyuyor, boşluk ritmi bozulmuyor.
   shape() desteklenmiyorsa polygon fallback: köşe yuvarlaması olmadan aynı siluet. */
/* 15.09.2026 · karar: "üstü düz, altı eğik (sol alttan sağa yükselen) olmalı".
   Eğim üstten alta taşındı — .hm-blog-panel ile birebir aynı siluet ve aynı dolgu mantığı. */
.hm-app-panel{ position:relative; background:var(--sl-fill); color:var(--sl-ink);
  padding-top:var(--pad-panel);          /* üst DÜZ = pad-panel (44) */
  padding-bottom:var(--pad-panel-slant); /* alt EĞİK = slant payı + görünür nefes */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
  overflow:hidden; }
@supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
  .hm-app-panel{ clip-path:shape(
    from var(--corner) 0%, curve to 0% var(--corner) with 0% 0%,                          /* üst-sol yuvarlak (DÜZ üst) */
    line to 0% calc(100% - var(--corner)), curve to var(--corner) 100% with 0% 100%,       /* alt-sol yuvarlak */
    line to calc(100% - var(--corner)) calc(100% - var(--slant)),                          /* DİYAGONAL alt (sol-alçak → sağ-yüksek) */
    curve to 100% calc(100% - var(--slant) - var(--corner)) with 100% calc(100% - var(--slant)), /* alt-sağ kavis */
    line to 100% var(--corner), curve to calc(100% - var(--corner)) 0% with 100% 0%, close); }  /* üst-sağ yuvarlak */
}
.hm-app-ic{ display:grid; grid-template-columns:1fr; gap:clamp(38px,5vw,64px); align-items:center; }
@media(min-width:1000px){ .hm-app-ic{ grid-template-columns:1.02fr .98fr; gap:clamp(40px,4vw,72px); } }


.hm-app-liste{ list-style:none; margin:clamp(26px,3vw,38px) 0 0; padding:0; display:grid; gap:18px; }
/* başlık + açıklama ortak .hm-script-head / .hm-bas-alt'tan gelir (_common · 15.09.2026) */
/* 15.09.2026 · karar: "ikonlar sağdaki yazılarla eşit büyüklükte". Masaüstünde açıklama tek satır →
   ikon satırın yüksekliğine uzar (stretch) ve kare kalır (aspect-ratio) = başlık+açıklama bloğu kadar.
   Dar ekranda bu KİLİTLENİR: ikon genişledikçe metin daralır, satır artar, ikon yine büyür (ölçüldü: 76px, metin taştı)
   → 1000px altında ikon masaüstü ölçüsünde (52px) sabit. */
.hm-app-liste li{ display:flex; gap:16px; align-items:stretch; }
.hm-app-ikon{ flex:0 0 auto; width:auto; height:auto; aspect-ratio:1/1; border-radius:14px; display:grid; place-items:center;
  font-size:1rem; color:var(--brand-600); background:rgba(16,48,80,.07);
  box-shadow:inset 0 0 0 1px rgba(16,48,80,.12); }
html.dark .hm-app-ikon{ color:var(--sky-300); background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.hm-app-metin b{ display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.01em; color:var(--sl-ink); }
.hm-app-metin small{ display:block; margin-top:4px; font-size:.92rem; line-height:1.6;
  color:var(--sl-muted, var(--muted)); }

.hm-app-alt{ margin-top:clamp(28px,3.2vw,40px); }
.hm-app-yakinda{ display:inline-flex; align-items:center; gap:.65rem; margin:0;
  padding:.72rem 1.15rem; border-radius:14px; font-size:.95rem; font-weight:700;
  color:var(--sl-ink); background:rgba(16,48,80,.07); box-shadow:inset 0 0 0 1px rgba(16,48,80,.14); }
.hm-app-yakinda i{ color:var(--cta); font-size:1.05rem; }
html.dark .hm-app-yakinda{ background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.hm-app-simdilik{ margin:14px 0 0; font-size:.95rem; color:var(--sl-muted, var(--muted)); }
.hm-app-tel{ color:var(--cta); font-weight:800; text-decoration:none; white-space:nowrap;
  transition:color .18s ease; }
.hm-app-tel:hover{ color:var(--accent-300); }

/* Mağaza rozetleri · adres girilince otomatik açılır */
.hm-app-rozetler{ display:flex; flex-wrap:wrap; gap:12px; }
.hm-app-rozet{ display:inline-flex; align-items:center; gap:12px; padding:.7rem 1.15rem;
  border-radius:14px; text-decoration:none; background:var(--cta); color:var(--cta-ink);
  transition:background-color .18s ease; }
.hm-app-rozet:hover{ background:var(--accent-300); }
.hm-app-rozet i{ font-size:1.5rem; }
.hm-app-rozet small{ display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.hm-app-rozet b{ display:block; font-size:1rem; font-weight:800; letter-spacing:-.01em; }

/* ── Uygulama tanıtım görseli ──
   Kendi görselimiz: şeffaf PNG→WebP. Gölge YOK (t-50 kuralı), hover'da hareket YOK.
   width/height ZORUNLU: yüklenirken kutu oynamasın (CLS = 0). */
.hm-app-gorsel{ display:flex; align-items:center; justify-content:center; }
.hm-app-foto{ width:100%; max-width:600px; height:auto; display:block; }
@media(min-width:1000px){ .hm-app-foto{ max-width:none; } }
/* Açık / koyu tema görseli (15.09.2026) · yalnız biri görünür */
.hm-app-foto--koyu{ display:none; }
html.dark .hm-app-foto--acik{ display:none; }
html.dark .hm-app-foto--koyu{ display:block; }

/* ikon sabit 52px: 1000–1199 aralığında da stretch+aspect-ratio döngüsü yazıları üst üste bindiriyordu (1024'te ölçüldü) */
@media(max-width:1199.98px){ .hm-app-liste li{ align-items:flex-start; } .hm-app-ikon{ width:52px; height:52px; } }
@media(max-width:999px){
  .hm-app-ic{ text-align:left; }
  .hm-app-gorsel{ min-height:0; padding-top:8px; }
}
@media(prefers-reduced-motion:reduce){ .hm-app *{ transition:none !important; } }