/* f-b · Tek telefon: fiyat bölümü (Apple fiyat sayfası düzeni).
   Renkler tema.css'teki değişkenlerden (--bg --fg --soluk --cizgi --kart --vurgu); burada yalnız yedekleri var.
   İçeriği fiyat.js kurar; bütün sınıflar "fy-" önekli. */

.fiyatlar{
  --fy-fg:var(--fg,#f5f5f7);
  --fy-soluk:var(--soluk,rgba(245,245,247,.6));
  --fy-cizgi:var(--cizgi,rgba(255,255,255,.12));
  --fy-kart:var(--kart,#111113);
  --fy-vurgu:var(--vurgu,#2997ff);
  --fy-ease:var(--ease,cubic-bezier(0.22,1,0.36,1));
  position:relative;
  padding:72px var(--yan,18px) 0;
  color:var(--fy-fg);
  overflow-x:clip;
}
.fy-ic{max-width:1120px;margin:0 auto}

/* ---------- Başlık ---------- */
/* Bağlantıyla gelinince başlık üst paydan biraz aşağıda durur. Üstte sabit menü olursa yüksekliği --menu-pay ile verilir. */
.fy-bas,.fy-sss{
  scroll-margin-top:calc(var(--menu-pay,0px) + max(24px, calc(var(--ust,18px) + 10px)));
}
.fy-bas{text-align:center}
.fy-bas h2{
  font-size:clamp(32px,8.6vw,40px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  text-wrap:balance;
}
/* Fiyat notu: kartların altında dipnot (kurul 09) */
.fy-not{
  max-width:32ch;
  margin:20px auto 0;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:var(--fy-soluk);
  text-wrap:balance;
}

/* ---------- Sekmeler: Apple segmented control ---------- */
.fy-sekmeler{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  width:min(100%,320px);
  height:36px;
  margin:28px auto 0;
  padding:2px;
  border-radius:9px;
  background:#1d1d1f;
  -webkit-user-select:none;
  user-select:none;
}
.fy-sekmeler::before{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  width:calc(100% / var(--adet,2) - 4px / var(--adet,2));
  border-radius:7px;
  background:#3a3a3c;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transform:translateX(calc(var(--k,0) * 100%));
  transition:transform .3s var(--fy-ease);
}
.fy-sekme{
  position:relative;
  z-index:1;
  height:32px;
  border-radius:7px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--fy-soluk);
  transition:color .25s var(--fy-ease);
}
.fy-sekme[aria-selected="true"]{color:var(--fy-fg)}
.fy-sekme::after{content:"";position:absolute;inset:-6px 0} /* görünür 32-36 px, dokunma 44 px */
.fy-sekme:focus-visible{outline-offset:1px}

/* ---------- Açıklama ve kartlar ---------- */
.fy-panel{margin-top:24px}
.fy-aciklama{
  max-width:40ch;
  text-wrap:balance;
  margin:0 auto;
  text-align:center;
  font-size:16px;
  line-height:1.5;
  color:var(--fy-soluk);
  text-wrap:balance;
}
.fy-kartlar{
  display:grid;
  gap:12px;
  margin-top:32px;
}
.fy-kart{
  --k-fg:var(--fy-fg);
  --k-soluk:var(--fy-soluk);
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px;
  border-radius:22px;
  background:var(--fy-kart);
  color:var(--k-fg);
}
/* Önerilen paket: ters renk */
.fy-kart.fy-oneri{
  --k-fg:#000;
  --k-soluk:rgba(0,0,0,.56);
  background:#f5f5f7;
}
/* Etiket yeri: hep 24 px hap + 12 px boşluk; boşsa telefonda yer tutmaz, bilgisayarda tutar (adlar aynı hizada) */
.fy-etiket{
  display:flex;
  align-items:center;
  min-height:24px;
  margin-bottom:12px;
}
.fy-etiket:empty{display:none}
.fy-hap{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:-.005em;white-space:nowrap;
}
/* "Önerimiz": nötr hap; açık (önerilen) kartta koyu ton */
.fy-oneri-hap{background:rgba(255,255,255,.1);color:var(--fy-soluk)}
.fy-kart.fy-oneri .fy-oneri-hap{background:rgba(0,0,0,.06);color:var(--k-soluk)}
/* Süreli açılış fiyatı: tek vurgu, Cumhuriyet kırmızısının kısık tonu; bitiş tarihi fiyatın altında */
.fy-kmp-hap{background:rgba(227,10,23,.16);color:#ff6b70}
.fy-kart.fy-oneri .fy-kmp-hap{background:rgba(227,10,23,.1);color:#b3000a} /* açık kartta düşerse okunsun */
.fy-kmp-bitis{margin-top:6px;font-size:13px;font-weight:500;color:var(--k-soluk)}
.fy-ad{
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
}
.fy-fiyat{
  margin-top:8px;
  font-size:40px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.03em;
  text-align:left;
  white-space:nowrap;
}
.fy-birim{
  font-size:.55em;
  font-weight:600;
  letter-spacing:-.01em;
}
.fy-maddeler{
  display:grid;
  gap:12px;
  margin:24px 0 32px;
  font-size:15px;
  line-height:1.45;
}
.fy-maddeler li{display:flex;align-items:flex-start;gap:10px}
.fy-onay{flex:none;margin-top:3px}

/* ---------- Düğmeler ---------- */
.fy-dugme{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:48px;
  margin-top:auto;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform .2s var(--fy-ease), background-color .2s var(--fy-ease), border-color .2s var(--fy-ease);
}
.fy-ig-simge{flex:none}
.fy-ana{background:#000;color:#fff}             /* önerilen (açık) kartta: siyah hap, beyaz yazı */
.fy-ikincil{border:1px solid var(--fy-cizgi);color:var(--k-fg)}
.fy-dugme:active,.fy-kapanis-dugme:active{transform:scale(.98)}
/* Açık kartta odak halkası beyaz yazının rengini alıp kayboluyordu (kurul 07) */
.fy-oneri :focus-visible{outline-color:#000}
@media (hover:hover){
  .fy-ana:hover{background:#1d1d1f}
  .fy-ikincil:hover{border-color:rgba(255,255,255,.34)}
  .fy-kapanis-dugme:hover{opacity:.86}
  .fy-ig:hover{text-decoration:underline;text-underline-offset:3px}
}

/* ---------- Nasıl çalışıyoruz? ---------- */
.fy-adimlar{margin-top:96px}
.fy-adim-baslik,.fy-sss-baslik,.fy-kapanis-baslik{
  text-align:center;
  font-size:clamp(26px,7vw,32px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
}
.fy-adim-liste{
  display:grid;
  gap:28px;
  margin-top:32px;
}
.fy-adim{
  padding-top:20px;
  border-top:1px solid var(--fy-cizgi);
}
.fy-adim-no{
  display:block;
  font-size:22px;
  font-weight:600;
  line-height:1;
  color:var(--fy-soluk);
  font-variant-numeric:tabular-nums;
}
.fy-adim-ad{
  margin-top:10px;
  font-size:19px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
}
.fy-adim-metin{
  max-width:38ch;
  text-wrap:pretty;
  margin-top:8px;
  font-size:15px;
  line-height:1.5;
  color:var(--fy-soluk);
}

/* ---------- Sık sorulanlar (Apple SSS düzeni) ---------- */
.fy-sss{margin-top:96px}
.fy-sss-liste{
  margin-top:32px;
  border-bottom:1px solid var(--fy-cizgi);
}
.fy-sss-oge{border-top:1px solid var(--fy-cizgi)}
.fy-sss-soru{font-size:inherit;font-weight:inherit;line-height:inherit}
.fy-sss-dugme{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:64px;
  padding:18px 0;
  text-align:left;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--fy-fg);
}
.fy-arti{
  flex:none;
  color:var(--fy-soluk);
  transition:transform .3s var(--fy-ease);
}
.fy-sss-acik .fy-arti{transform:rotate(45deg)}
/* Yükseklik animasyonu: 0fr → 1fr. Kapalıyken visibility:hidden, ekran okuyucu da görmez. */
.fy-sss-cevap{
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .35s var(--fy-ease), visibility 0s linear .35s;
}
.fy-sss-acik .fy-sss-cevap{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows .35s var(--fy-ease), visibility 0s;
}
.fy-sss-ic{min-height:0;overflow:hidden}
.fy-sss-ic p{
  max-width:60ch;
  text-wrap:pretty;
  padding:0 32px 22px 0;
  font-size:15px;
  line-height:1.55;
  color:var(--fy-soluk);
}

/* ---------- Kapanış: "Sitenizi konuşalım." ---------- */
.fy-kapanis{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:96px;
  text-align:center;
}
.fy-kapanis-metin{
  max-width:34ch;
  margin-top:12px;
  font-size:16px;
  line-height:1.45;
  color:var(--fy-soluk);
  text-wrap:balance;
}
.fy-kapanis-dugme{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  margin-top:28px;
  padding:0 24px 0 20px;
  border-radius:999px;
  background:var(--fy-fg);
  color:#000;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .2s var(--fy-ease), opacity .2s var(--fy-ease);
}
.fy-kapanis-dugme:focus-visible{outline-color:var(--fy-fg)} /* siyah yazının rengi siyah sayfada görünmez */

/* ---------- Alt bilgi (çizgisiz: Sık sorulanlar zaten çizgiyle bitiyor) ---------- */
.fy-alt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:64px;
  padding:0 0 calc(var(--alt,16px) + 24px);
}
.fy-alt-satir{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 24px;
  justify-content:center;
  font-size:14px;
}
.fy-ig{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--fy-fg); /* tek vurgu kuralı: mavi yok (kurul 09) */
}
.fy-telif{color:var(--fy-soluk)}

/* ---------- Giriş hareketi: yalnız opacity + translateY(12px→0); sınıfı JS ekler ---------- */
.fy-js .fy-grup .fy-gir{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s var(--fy-ease), transform .8s var(--fy-ease);
  transition-delay:calc(.15s + var(--i,0) * .06s);
}
.fy-js .fy-grup.fy-acik .fy-gir{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fy-js .fy-grup .fy-gir{opacity:1;transform:none;transition:none}
  .fy-sekmeler::before,.fy-sekme,.fy-dugme,.fy-kapanis-dugme,.fy-arti,.fy-sss-cevap,.fy-sss-acik .fy-sss-cevap{transition:none}
}

/* ---------- Bilgisayar ---------- */
@media (min-width:1024px){
  .fiyatlar{padding:120px max(var(--yan,18px),32px) 0}
  .fy-bas h2{font-size:56px}
  .fy-sekmeler{width:360px;margin-top:36px}
  .fy-panel{margin-top:28px}
  .fy-aciklama{font-size:17px}
  .fy-not{max-width:none;margin-top:24px}
  .fy-kartlar{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:48px;
  }
  .fy-kartlar[data-adet="1"]{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .fy-kartlar[data-adet="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto}
  .fy-kartlar[data-etiket] .fy-etiket{display:flex} /* boş etiket de yer tutar: adlar ve fiyatlar aynı hizada */
  .fy-fiyat{font-size:48px}
  .fy-adimlar{margin-top:140px}
  .fy-adim-baslik,.fy-sss-baslik,.fy-kapanis-baslik{font-size:40px}
  .fy-sss{max-width:760px;margin:140px auto 0}
  .fy-sss-liste{margin-top:48px}
  .fy-adim-liste{
    grid-template-columns:repeat(var(--adim,3),minmax(0,1fr));
    gap:32px;
    margin-top:48px;
  }
  .fy-kapanis{margin-top:140px}
  .fy-kapanis-metin{margin-top:14px;font-size:19px}
  .fy-kapanis-dugme{margin-top:32px}
  .fy-alt{margin-top:96px}
  .fy-alt-satir{gap:0 32px}
}

/* Bilgisayarda kart satırları ortak: etiket, ad, fiyat, bitiş satırı, maddeler, düğme yan kartlarla aynı hizada
   (açılış kartının fazladan bitiş satırı maddeleri kaydırmasın). Subgrid yoksa yukarıdaki düzen geçerli. */
@media (min-width:1024px){
  @supports (grid-template-rows:subgrid){
    .fy-kartlar{row-gap:0}
    .fy-kart{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
    .fy-etiket{grid-row:1}
    .fy-ad{grid-row:2}
    .fy-fiyat{grid-row:3}
    .fy-kmp-bitis{grid-row:4;align-self:start}
    .fy-maddeler{grid-row:5;align-self:start}
    .fy-dugme{grid-row:6;margin-top:0}
  }
}