/* Namaz Vakitleri — sitenin ortak stili.
   Belge sayfaları (privacy/support/kaynaklar) ve Worker'ın ürettiği ana sayfa ile
   şehir sayfaları bu dosyayı paylaşır. */

:root{
  color-scheme: light dark;
  --brand:#1A6660;              /* uygulamanın AppPrimary rengi */
  --line:rgba(127,127,127,.25);
  --soft:rgba(127,127,127,.07);
}
/* Koyu zeminde #1A6660 okunmuyor; aynı ailenin açık tonu kullanılıyor. */
@media (prefers-color-scheme: dark){
  :root{ --brand:#5FBDB2; }
}

*{ box-sizing:border-box }
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  max-width:820px; margin:0 auto; padding:24px 20px 80px; line-height:1.7;
}

h1{ font-size:1.6rem; margin:0 0 .2rem; letter-spacing:-.02em }
h2{ margin-top:2.4rem; font-size:1.15rem; color:var(--brand) }
h3{ margin-top:1.6rem; font-size:1rem }
p, li{ margin-bottom:.7rem }
ul{ padding-inline-start:1.4rem; margin-bottom:1rem }
.muted{ opacity:.7; font-size:.9rem }
code{ background:rgba(127,127,127,.15); padding:1px 5px; border-radius:4px }
a{ color:var(--brand) }

details{ border-top:1px solid var(--line); padding:.7rem 0 }
details summary{ cursor:pointer; font-weight:600 }
details p{ margin:.6rem 0 .2rem }

/* Belge sayfalarında ana sayfaya dönüş: üstte dile göre "← Ana sayfa", altında marka adı.
   Dört dil için dört satır var; docs.js yalnız etkin dilinkini gösterir. Blok düzen:
   dil anahtarının .show kuralı display:block verdiği için flex kullanılmıyor. */
.site-nav{ margin:0 0 14px; font-size:.95rem; line-height:1.4 }
.site-nav .home{ display:inline-block; text-decoration:none; font-weight:600 }
.site-nav .brand{ display:block; margin-top:2px; font-size:.8rem; opacity:.65; text-decoration:none; color:inherit }
.site-nav a:hover{ text-decoration:underline }

/* Dil çubuğu */
.topbar{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px;
  margin:0 0 28px; padding:12px 14px;
  border:1px solid var(--line); border-radius:16px; background:var(--soft);
}
.pill{
  font-size:13px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:transparent;
  color:inherit; text-decoration:none; user-select:none;
  transition:border-color .15s ease, background .15s ease;
  display:inline-flex; align-items:center;
}
.pill:hover{ border-color:var(--brand) }
.pill.active{
  border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  font-weight:600;
}

/* JS yoksa bütün diller alt alta görünür -- sayfa yine okunabilir kalır.
   Anahtarı yalnız docs.js devreye girince gizleme başlar. */
[data-lang]{ display:block }
html.js-lang [data-lang]{ display:none }
html.js-lang [data-lang].show{ display:block }

/* Diller arasındaki ayırıcı yalnız hepsi birden görünürken anlamlı. */
html.js-lang .lang-sep{ display:none }
.lang-sep{ margin:3.5rem 0; border:0; border-top:1px solid var(--line) }

[dir="rtl"]{ text-align:right }
[dir="rtl"] details summary{ text-align:right }

@media (max-width:520px){
  body{ padding:16px 16px 64px }
  h1{ font-size:1.4rem }
}

/* ==========================================================================
   Ana sayfa ve şehir sayfaları (Worker tarafından üretilir).
   Belge sayfalarıyla aynı dosyayı paylaşıyorlar: iki ayrı stil dosyası olsaydı
   marka rengi ve tipografi zamanla ayrışırdı.
   ========================================================================== */

.hero{
  border-radius:26px; padding:26px 20px; margin:0 0 22px;
  background:#0E1A19; color:#fff; text-align:center;
  border:1px solid rgba(127,127,127,.28);
}
.hero .sehir{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0 }
.hero .tarih{ opacity:.75; font-size:.9rem; margin:.35rem 0 0 }
.hero .sonraki{ opacity:.55; font-size:.85rem; margin:1.1rem 0 .2rem }
.hero .vakit-adi{ font-size:1.6rem; font-weight:700; margin:0 }
/* Sayaç: rakamlar eş genişlikte olmazsa her saniye satır oynar. */
.hero .sayac{ font-size:2.6rem; font-weight:700; margin:.1rem 0 0; font-variant-numeric:tabular-nums }

.vakitler{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
}
.vakitler div{ padding:8px 2px; border-radius:999px }
.vakitler .ad{ display:block; font-size:.72rem; opacity:.8 }
.vakitler .saat{ display:block; font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums }
.vakitler .simdi{ background:#1A6660 }
@media (max-width:520px){
  .vakitler{ grid-template-columns:repeat(3,1fr); row-gap:10px }
}

/* Resmî mağaza rozetleri; kendi çerçevelerini taşıdıkları için kutu verilmiyor. */
.magaza{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:18px 0 6px }
.magaza a{ display:inline-flex; align-items:center; text-decoration:none }
.magaza img{ display:block; height:40px; width:auto }
.magaza a:nth-child(2) img{ height:60px }

.sehir-secici{ margin:26px 0 }
.il-listesi{
  display:flex; flex-wrap:wrap; gap:8px 16px; padding:0; margin:14px 0 0; list-style:none;
}
.il-listesi a{ font-size:.9rem }

/* Ürün başlığı: ikon + ad + değer önerisi */
.urun{ display:flex; gap:16px; align-items:flex-start; margin:8px 0 18px }
.urun .ikon{ border-radius:20px; flex:0 0 auto }
.urun h1{ margin:0 0 .3rem }
.urun .deger{ margin:0 0 .5rem }
.rozetler{ display:flex; flex-wrap:wrap; gap:6px; margin:0 }
.rozetler span{
  font-size:.78rem; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--soft);
}
@media (max-width:520px){ .urun{ gap:12px } .urun .ikon{ width:64px; height:64px } }

/* Ana sayfadaki küçük vakit kartı */
.hero.kompakt{ padding:18px 16px }
.hero.kompakt .sehir{ font-size:1.05rem }
.hero.kompakt .ozet{ margin:.7rem 0 0; font-size:1.15rem; font-weight:600 }
.hero.kompakt .sayac-kucuk{ font-variant-numeric:tabular-nums }
.hero.kompakt .vakitler{ margin-top:14px; padding-top:12px }

/* Ekran görüntüleri: yatay kaydırılan şerit */
.ekranlar{ display:flex; gap:14px; overflow-x:auto; padding:4px 0 12px; scroll-snap-type:x mandatory }
.ekranlar figure{ margin:0; flex:0 0 auto; width:200px; scroll-snap-align:start }
.ekranlar img{
  width:200px; height:auto; border-radius:18px; border:1px solid var(--line); display:block;
}
.ekranlar figcaption{ font-size:.78rem; opacity:.7; margin-top:6px; line-height:1.4 }

.site-footer{
  margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.9rem; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.site-footer .bosluk{ flex:1 1 auto }