/* Urun sayfalari: /uygulamalar ve /uygulamalar/<slug>
   17.08.2026

   Bu dosya yalniz urun sayfalarinda degil, butun site sayfalarinda yukleniyor
   (kabuk tek yerden kuruluyor). Icindeki her secici "urun-", "donem-",
   "giris-yol" ya da var olan ".paket" ailesine ek olarak yazildi; baska
   sayfalarda kullanilan bir sinifi EZMEZ.

   Renk, olcu ve kose degerleri site-gorunum.css'teki degiskenlerden gelir -
   sabit renk yazilmadi. Panelden tema degistirildiginde bu sayfa da doner. */

/* ── Dar kapsayici: uzun metin ve surum notlari icin ── */
.kapsayici-dar { max-width: 52rem; margin-inline: auto; }

/* ── Sirali bolumlerde zemin degisimi. Bolum sinirini cizgiyle degil
     zeminle belirtmek, uzun sayfada gozu daha az yoruyor. ── */
.bolum-alternatif { background: var(--zemin-3); }

/* ── Urun tepesi ── */
.bolum-urun-tepe { padding-block-start: var(--aralik-7, 4rem); }
.urun-dugmeler {
  display: flex; flex-wrap: wrap; gap: var(--aralik-3, 1rem);
  justify-content: center; margin-top: var(--aralik-4, 1.5rem);
}
.urun-metin { display: grid; gap: var(--aralik-3, 1rem); }
.urun-metin p { color: var(--metin-2); margin: 0; }

/* ── Donem secici (haftalik / aylik / yillik) ── */
.donem-secici {
  display: inline-flex; gap: 4px; margin: 0 auto var(--aralik-5, 2rem);
  padding: 4px; border-radius: var(--kose-tam);
  background: var(--zemin-3); border: 1px solid var(--kenar);
}
/* Secici ortalanabilmesi icin kapsayicida blok ortalama gerekiyor. */
.bolum .donem-secici { display: flex; width: fit-content; }

.donem-dugme {
  border: 0; cursor: pointer; font: inherit;
  padding: 8px 18px; border-radius: var(--kose-tam);
  background: transparent; color: var(--metin-2);
  transition: background .15s ease, color .15s ease;
}
.donem-dugme:hover { color: var(--metin); }
.donem-dugme.etkin {
  background: var(--kart); color: var(--metin);
  box-shadow: var(--golge-1); font-weight: 600;
}
.donem-dugme:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }

/* ── Paket izgarasi: sutun sayisi paket sayisina uyar ──
   site.css'teki .paket-grubu sabit 3 sutun. Dort paketli bir uygulamada
   dorduncu kart tek basina alt satira dusuyor ve "unutulmus" gibi duruyor.
   Burada auto-fit: uc paket 3 sutun, dort paket 4 sutun (yer varsa), iki
   paket iki genis kart olur. Yalniz urun sayfasinda gecerli - anasayfadaki
   fiyat bolumu eski davranisi surduruyor. */
.paket-grubu-esnek {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Dort kart tek satira sigmazsa ikili ikili bolunsun; 3+1 gorunumu olmasin. */
@media (min-width: 641px) and (max-width: 1100px) {
  .paket-grubu-esnek { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .paket-grubu-esnek { grid-template-columns: 1fr; }
}

/* ── Pakete eklenenler ── */
.paket-limit {
  margin: 0; font-size: var(--olcek-2); color: var(--metin-3);
  padding-bottom: var(--aralik-2, .5rem);
  border-bottom: 1px solid var(--kenar);
}
.paket-fiyat-yok {
  font-family: var(--yazi-baslik); font-size: var(--olcek-5) !important;
  font-weight: 600; color: var(--metin-2) !important;
}

/* ── Giris yollari: tarayici / masaustu / mobil ── */
.giris-yollari {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.giris-yol {
  display: flex; flex-direction: column; gap: var(--aralik-2, .5rem);
  align-items: flex-start;
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.giris-yol h3 { margin: 0; font-size: var(--olcek-3); }
.giris-yol p { margin: 0; font-size: var(--olcek-2); color: var(--metin-3); }
.giris-yol .dugme { margin-top: auto; }

/* ── Uygulama vitrini ── */
.urun-izgara {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.urun-kart {
  display: flex; flex-direction: column; gap: var(--aralik-2, .5rem);
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.urun-kart:hover {
  border-color: var(--ana-acik); box-shadow: var(--golge-2);
  transform: translateY(-2px);
}
.urun-kart:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; }
.urun-kart-tepe { display: flex; align-items: center; gap: var(--aralik-2, .5rem); flex-wrap: wrap; }
.urun-kart-tepe h3 { margin: 0; font-size: var(--olcek-4); }
.urun-kart p { margin: 0; color: var(--metin-2); font-size: var(--olcek-2); }
.urun-kart-alt {
  display: flex; align-items: baseline; gap: var(--aralik-3, 1rem);
  flex-wrap: wrap; margin-top: auto; padding-top: var(--aralik-3, 1rem);
}
.urun-kart-fiyat {
  font-family: var(--yazi-baslik); font-weight: 700; font-size: var(--olcek-5);
  color: var(--metin);
}
.urun-kart-fiyat small {
  font-family: var(--yazi-govde); font-weight: 400;
  font-size: var(--olcek-1); color: var(--metin-3); margin-left: 4px;
}
.urun-kart-deneme {
  font-size: var(--olcek-1); padding: 3px 10px; border-radius: var(--kose-tam);
  background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana-koyu);
}

/* ── "Yakinda" ve "kapali" rozeti. Var olan .etiket ailesine ek ── */
.etiket-yakinda {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: #8a6716;
}

.bos-durum { text-align: center; color: var(--metin-3); }

/* ── Kilavuz sayfasi ── */
.kilavuz-icindekiler {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.kilavuz-grup-baglanti h3 {
  margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-2);
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3);
}
.kilavuz-grup-baglanti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kilavuz-grup-baglanti a { color: var(--metin-2); text-decoration: none; font-size: var(--olcek-2); }
.kilavuz-grup-baglanti a:hover { color: var(--ana); text-decoration: underline; }

.kilavuz-bolum {
  padding: var(--aralik-4, 1.5rem) 0;
  border-top: 1px solid var(--kenar);
}
.kilavuz-bolum:first-of-type { border-top: 0; }
/* Ic baglantiyla gelindiginde baslik yapiskan tepenin altinda kalmasin. */
.kilavuz-bolum { scroll-margin-top: 6rem; }
.kilavuz-bolum h3 { margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-4); }
.kilavuz-metin ul { display: grid; gap: var(--aralik-2, .5rem); margin: 0; padding-left: 1.1rem; }
.kilavuz-metin li, .kilavuz-metin p { color: var(--metin-2); }
.kilavuz-metin p { margin: 0 0 var(--aralik-2, .5rem); }

.kilavuz-sss { margin-top: var(--aralik-3, 1rem); }
.kilavuz-sss h4 {
  margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-2);
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3);
}
.kilavuz-sss details {
  border: 1px solid var(--kenar); border-radius: var(--kose-kucuk);
  padding: 10px 14px; margin-bottom: 8px; background: var(--zemin-2);
}
.kilavuz-sss summary { cursor: pointer; font-weight: 500; color: var(--metin); }
.kilavuz-sss summary:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.kilavuz-sss details p { margin: 8px 0 0; color: var(--metin-2); font-size: var(--olcek-2); }

/* ── Koyu tema. Yalniz kendi degiskenleri olan yerler duzeltiliyor;
     gerisi zaten degiskenlerden geliyor ve kendiliginden doner. ── */
:root[data-tema="koyu"] .etiket-yakinda { color: var(--vurgu-acik); }
:root[data-tema="koyu"] .urun-kart-deneme { color: var(--ana-acik); }

/* ── Telefon ── */
@media (max-width: 640px) {
  .urun-dugmeler { flex-direction: column; align-items: stretch; }
  .urun-dugmeler .dugme { text-align: center; }
  .donem-secici { width: 100%; }
  .donem-dugme { flex: 1; padding-inline: 8px; }
}

/* ── Güven rozetleri ──
   Musa'nın kararı: rakam yerine doğrulanabilir güven unsurları. */
.rozet-izgara {
  display: grid; gap: var(--aralik-3, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.rozet {
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  /* Sol kenarda ince vurgu şeridi: kart yığınında gözü yönlendiriyor. */
  border-left: 3px solid var(--ana);
}
.rozet h3 { margin: 0 0 6px; font-size: var(--olcek-3); }
.rozet p { margin: 0; font-size: var(--olcek-2); color: var(--metin-2); }

/* ── "Öncesi / sonrası" karşılaştırması ── */
.karsilastirma {
  border: 1px solid var(--kenar); border-radius: var(--kose-orta);
  overflow: hidden; background: var(--kart);
}
.karsilastirma-tepe,
.karsilastirma-satir {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--aralik-3, 1rem);
}
.karsilastirma-tepe {
  background: var(--zemin-3); font-weight: 600;
  border-bottom: 1px solid var(--kenar);
}
.karsilastirma-tepe span,
.karsilastirma-satir p {
  margin: 0; padding: 14px var(--aralik-3, 1rem);
}
.karsilastirma-satir { border-bottom: 1px solid var(--kenar); }
.karsilastirma-satir:last-child { border-bottom: 0; }
/* Sol sütun "sorun", sağ sütun "çözüm" - renkle ayrılıyor, ikonla değil:
   ikon 16 pikselde kayboluyor ve ekran okuyucuda anlam taşımıyor. */
.karsilastirma-once { color: var(--metin-3); }
.karsilastirma-satir .karsilastirma-once { position: relative; }
.karsilastirma-sonra {
  color: var(--metin); font-weight: 500;
  background: color-mix(in srgb, var(--ana) 4%, transparent);
}
.karsilastirma-tepe .karsilastirma-sonra { color: var(--ana-koyu); }

/* ── SSS ── */
.sss-listesi { display: grid; gap: 10px; }
.sss-listesi details {
  border: 1px solid var(--kenar); border-radius: var(--kose-kucuk);
  padding: 14px 16px; background: var(--kart);
}
.sss-listesi summary {
  cursor: pointer; font-weight: 500; color: var(--metin);
}
.sss-listesi summary:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; }
.sss-listesi details[open] summary { margin-bottom: 8px; }
.sss-listesi details p { margin: 0; color: var(--metin-2); }

@media (max-width: 640px) {
  /* Telefonda iki sütun okunmuyor - alt alta, "öncesi" üstte. */
  .karsilastirma-tepe { display: none; }
  .karsilastirma-satir { grid-template-columns: 1fr; gap: 0; }
  .karsilastirma-satir p { padding-block: 10px; }
  .karsilastirma-satir .karsilastirma-once { padding-bottom: 4px; }
}

/* ── Fiyat hesaplayici ─────────────────────────────────── */
/* JS kapaliyken hic gorunmez (HTML'de hidden); alttaki paket
   kartlari zaten tam bilgiyi veriyor. */
.hesaplayici {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 2rem 2.25rem;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-buyuk);
  box-shadow: var(--golge-2);
}
.hesaplayici[hidden] { display: none; }

.hesaplayici-etiket {
  display: block;
  font-size: .92rem; color: var(--metin-3);
  margin-bottom: .35rem;
}
.hesaplayici-sayi {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 3rem; font-weight: 600; line-height: 1.05;
  color: var(--ana);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.hesaplayici-kaydirac {
  width: 100%; height: 6px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--zemin-3);
  border-radius: var(--kose-tam);
  cursor: pointer;
}
.hesaplayici-kaydirac::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ana); border: 3px solid var(--kart);
  box-shadow: 0 2px 10px rgba(20, 22, 26, .22);
  cursor: grab;
}
.hesaplayici-kaydirac::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ana); border: 3px solid var(--kart);
  box-shadow: 0 2px 10px rgba(20, 22, 26, .22);
  cursor: grab;
}
.hesaplayici-kaydirac:focus-visible { outline: 3px solid var(--ana); outline-offset: 4px; }
.hesaplayici-uclar {
  display: flex; justify-content: space-between;
  margin-top: .55rem; font-size: .8rem; color: var(--metin-3);
}

.hesaplayici-sag {
  padding: 1.5rem 1.6rem;
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  text-align: center;
}
.hesap-etiket { display: block; font-size: .82rem; color: var(--metin-3); }
.hesap-paket {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 1.5rem; font-weight: 600;
  margin: .15rem 0 .5rem;
}
.hesap-fiyat { margin: 0 0 .4rem; display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.hesap-fiyat span { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hesap-fiyat small { font-size: .88rem; color: var(--metin-3); }
.hesap-kazanc {
  margin: 0 0 .5rem; font-size: .85rem; font-weight: 500;
  color: var(--basari, #2f7a55);
}
.hesap-not { margin: 0 0 1rem; font-size: .78rem; color: var(--metin-3); line-height: 1.5; }
.hesaplayici-sag .dugme { width: 100%; justify-content: center; }

@media (max-width: 780px) {
  .hesaplayici { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.35rem; }
  .hesaplayici-sayi { font-size: 2.4rem; }
}

/* ── Kahraman ekran görüntüsü ──────────────────────────── */
.urun-kahraman-gorsel {
  margin: 3rem auto 0;
  max-width: 1080px;
  border-radius: var(--kose-buyuk);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-3);
  background: var(--kart);
}
.urun-kahraman-gorsel img { display: block; width: 100%; height: auto; }

/* ── Modül sekmeleri ───────────────────────────────────── */
.modul-sekmeler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 auto 2rem;
}
.modul-dugme {
  padding: .6rem 1.25rem;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--kart); color: var(--metin-2);
  font: inherit; font-size: .93rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.modul-dugme:hover { border-color: var(--kenar-koyu); color: var(--metin); }
.modul-dugme.etkin {
  background: var(--ana); border-color: var(--ana); color: #fff;
}
.modul-dugme:focus-visible { outline: 3px solid var(--ana); outline-offset: 2px; }

.modul-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr);
  gap: 2.5rem;
  align-items: center;
}
.modul-panel[hidden] { display: none; }
.modul-metin h3 {
  font-family: var(--yazi-baslik);
  font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem;
}
.modul-faydalar { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.modul-faydalar li {
  position: relative; padding-left: 1.6rem;
  font-size: .97rem; line-height: 1.6; color: var(--metin-2);
}
.modul-faydalar li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ana);
}
.modul-gorsel {
  margin: 0;
  border-radius: var(--kose-orta);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-2);
  background: var(--kart);
}
.modul-gorsel img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .modul-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .urun-kahraman-gorsel { margin-top: 2rem; }
}