/* Premium odeme sayfasi stilleri (template/Buy_Membershiip.tpl).
   Sablondan buraya tasindi: KVS duzeninde sayfa bazli stiller
   static/styles/ altinda durur ve header'da page_id ile yuklenir. */

.pp-tg-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.pp-tg-modal.hidden{display:none}
.pp-tg-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.pp-tg-panel{position:relative;width:100%;max-width:400px;background:#141414;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden}
.pp-tg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #2a2a2a;color:#fff}
.pp-tg-head strong{font-size:16px}
.pp-tg-head small{display:block;color:#888;font-size:12px;margin-top:4px;font-weight:400}
.pp-tg-x{background:none;border:0;color:#888;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.pp-tg-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;text-align:center}
.pp-tg-plan{color:#fff;font-size:15px;font-weight:600;margin:0}
.pp-tg-go{display:block;text-decoration:none}
.pp-tg-go.hidden{display:none}
.pp-tg-wait{color:#8a8a8a;font-size:12px;margin:0;min-height:16px}
.pp-tg-err{color:#ff6b6b;font-size:13px;margin:0}
.pp-tg-err.hidden{display:none}
.pp-tg-ok{color:#2ecc40;font-weight:700}
/* Kampanya kutusu: diger kutularla ayni olcu, ayirt edici altin cerceve */
.pp4-pbox-sc,.pp4-pbox-dyn.pp4-pbox-sc{border-color:#5a4a1a}
.pp4-pbox-sc.hidden{display:none}
.pp4-pbox-sc strong{color:#f5c518}
.pp4-pbox-sc .pp4-pico svg{fill:#f5c518}
.pp4-price .pp4-pstars{display:block;font-style:normal;font-size:12px;font-weight:400;color:#8a8a8a;margin-top:2px;white-space:nowrap}
/* Havale penceresindeki bilgi satirlari: her satirin kendi kopyalama dugmesi var,
   telefondan IBAN elle yazmak hata kaynagi */
.pp-bt-rows{display:flex;flex-direction:column;gap:8px;text-align:left}
.pp-bt-row{background:#0e0e0e;border:1px solid #262626;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.pp-bt-row .pp-bt-in{flex:1;min-width:0}
.pp-bt-row small{display:block;color:#7d7d7d;font-size:11px;margin-bottom:2px}
/* IBAN 4'lu gruplar halinde yazildigi icin yalnizca BOSLUKLARDAN
   kirilmali; break-all rakam grubunun ortasindan boluyordu. */
.pp-bt-row b{display:block;color:#fff;font-size:13px;font-weight:600;overflow-wrap:break-word;word-break:normal}
.pp-bt-row.pp-bt-key{border-color:#5a4a1a}
.pp-bt-row.pp-bt-key b{color:#f5c518;font-size:16px;letter-spacing:1px}
.pp-bt-copy{flex:none;background:#1f1f1f;border:1px solid #333;color:#ccc;border-radius:6px;padding:7px 11px;font-size:11px;cursor:pointer;white-space:nowrap}
.pp-bt-copy:active{background:#2b2b2b}
.pp-bt-warn{color:#f5c518;font-size:12px;margin:0;line-height:1.5}
.pp-bt-warn-strong{border:1px solid #5a4a1a;background:#1a1608;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:600}
/* Kucuk ekranda icerik tasarsa DEKONTU GONDER dugmesine ulasilamiyordu */
#pp_bt_modal .pp-tg-body{max-height:min(70vh,560px);overflow-y:auto}
.pp-bt-note{color:#8a8a8a;font-size:12px;margin:0;line-height:1.5}
.pp-bt-note.hidden{display:none}
.pp-bt-go{display:block;text-decoration:none}
.pp-bt-go.hidden{display:none}

/* ------------------------------------------------ odeme kutusu tasarimi ---
   Sag ust kosede, kutudan YARI TASAN yuvarlak logo rozeti. Hacim hissi uc
   katmandan geliyor: disa dusen golge (yukseklik), ust kenardaki ic isik
   (parlak kenar) ve alttaki ic golge (yuvarlaklik). Ustundeki ::after
   katmani da cam parlamasini veriyor.
   Rozetin tasma payi kutular ARASI bosluktan aliniyor; kutunun kendi
   olculeri buyumuyor. */
.pp4-pay{padding-top:4px}
.pp4-pbox{position:relative;overflow:visible}
.pp4-pbox-dyn{margin-top:22px;min-height:0;padding:11px 12px;
  /* Kutular <button>; tarayici buton icerigini dikeyde ortalar ve
     display:block bunu bozmaz. Dikey flex + flex-start ile icerik
     her kutuda ayni hizada, en ustte basliyor. */
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;
  -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
/* Baslik ustte. Sag ustteki rozetin altina girmesin diye sagdan bosluk
   birakiliyor; metin kalan alanda ortali kaliyor. */
.pp4-pmain{display:block;width:100%;-ms-flex:0 0 auto;flex:0 0 auto;
  text-align:center}
.pp4-pbox-dyn strong{margin:0;font-size:17px;font-weight:700;line-height:1.28;
  letter-spacing:.2px;color:#f5f5f9}

.pp4-plogo{position:absolute;top:-22px;right:-16px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  /* Zemin markanin rengi; iki ton JS'ten geliyor. */
  background:radial-gradient(circle at 34% 26%,
    var(--pl1,#43434c) 0%, var(--pl1,#43434c) 18%, var(--pl2,#101014) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 16px rgba(0,0,0,.6),
             0 2px 4px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 -7px 12px rgba(0,0,0,.45)}
.pp4-plogo:after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;
  border-radius:50%;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 60%)}
/* Logolar kendi renklerini tasiyor; currentColor kullanilmiyor. */
.pp4-plogo svg{position:relative;z-index:1;width:22px;height:22px;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}
.pp4-pbox-active .pp4-plogo{border-color:rgba(240,165,0,.45);
  box-shadow:0 8px 18px rgba(0,0,0,.6),
             0 0 0 3px rgba(240,165,0,.10),
             inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -7px 12px rgba(0,0,0,.45)}

/* Sure secenekleri: kartin ALTINDA, YATAY duran haplar. Once sol sutunda
   dikey duruyorlardi; kucuk ve okunmasi zordu. margin-top:auto haplari
   kartin dibine iter, boylece butun kartlarda ayni hizada dururlar. */
.pp4-pinfo{-ms-flex:0 0 auto;flex:0 0 auto;display:block;
  margin-top:auto;padding-top:9px;text-align:center;
  font-style:normal;font-weight:400;color:#9d9da8;
  font-size:12.5px;line-height:1.25;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none}
.pp4-pbox-active .pp4-pinfo{color:#cbb083}

@media screen and (max-width:520px){
  .pp4-pbox-dyn{min-height:0;margin-top:20px;padding:10px 7px}
  .pp4-pbox-dyn strong{font-size:15px}
  .pp4-plogo{width:40px;height:40px;top:-20px;right:-14px}
  .pp4-plogo svg{width:19px;height:19px}
  .pp4-pmain{padding-right:18px}
  .pp4-pinfo{gap:4px;padding-top:10px}
  .pp4-pinfo b{padding:3px 8px;font-size:10.5px}
}

/* Fare uzerine gelince hicbir sey degismesin: cekirdek CSS'teki yesil
   cerceve efekti ve gecisler burada iptal ediliyor. Secili kutunun altin
   cercevesi !important tasidigi icin etkilenmiyor. */
.pp4-pbox,.pp4-pbox:hover,.pp4-pbox:focus{-webkit-transition:none;transition:none}
.no-touch .pp4-pbox:hover{border-color:#232328;background:#121214}
.no-touch .pp4-pbox-active:hover{background:#171512}

/* ------------------------------------------- ilk boyama / kayma onlemi ---
   Sunucudan gelen yedek kutular ve statik plan satirlari, gercek paketler
   yuklenene kadar ekranda duruyordu; kullanici bir an ESKI tasarimi
   goruyordu. Artik gizliler. Paketler hic yuklenemezse JS <html> uzerine
   pp-fallback sinifini koyar ve yedekler geri gelir.

   Alanlara son olculeriyle yer ayriliyor ki icerik yerine otururken
   sayfanin alti zilamasin (kayma = 0). Saglayici sayisi degisirse bu
   degerler de guncellenmeli. */
#pp_pay .pp4-pbox-fb{display:none}
html.pp-fallback #pp_pay .pp4-pbox-fb{display:block}
/* align-content: min-height ile ayrilan bosluk, sarmalanan flex
   satirlarini geriyor ve kartlari gereksiz uzatiyordu. */
#pp_pay{min-height:0;-ms-flex-line-pack:start;align-content:flex-start}
#pp_plans{min-height:166px}
@media screen and (max-width:520px){
}
@media screen and (max-width:380px){
  #pp_plans{min-height:166px}
}

/* Statik plan satirlari ilk boyamada gorunmesin: gercek paketler basilinca
   JS <html>'e pp-ready ekliyor. Alan min-height ile ayrildigi icin gizliyken
   de asagisi kaymiyor. */
html:not(.pp-ready) #pp_plans{visibility:hidden}

/* "Nasil odenir" adimlari: baslik ile hap sirasi arasinda, ortali.
   Punto bilerek buyuk: siteyi her yastan kullanici aciyor. */
@media screen and (max-width:520px){
}

/* Cok dar ekranlar (<=340px): adim metni burada 6 satira cikip karti asiri
   uzatiyordu; punto bir tik kisildi, kart yuksekligi de ona gore ayarlandi. */
@media screen and (max-width:340px){
  .pp4-pbox-dyn{min-height:0}
  .pp4-pinfo b{font-size:10px;padding:3px 7px}
}

/* Adimlarin altindaki aciklama: adim metninden daha INCE ve daha kucuk,
   boylece adimlarin onune gecmez. Yalnizca dil dosyasinda karsiligi olan
   yontemlerde gorunur. */
@media screen and (max-width:520px){
}
@media screen and (max-width:340px){
}

/* ------------------------------------------------ sol ust kose kurdelesi ---
   Kart, sag ustteki rozet tasabilsin diye overflow:visible. Bu yuzden
   kurdeleyi kart kirpamiyor; kendi kirpma kutusunun icinde duruyor.
   Kutu kartin sol ust kosesine oturuyor ve kose yuvarlakligini paylasiyor,
   boylece kurdelenin uclari disari tasmiyor. */
.pp4-pribbon{position:absolute;top:0;left:0;width:56px;height:56px;
  overflow:hidden;border-top-left-radius:10px;pointer-events:none;z-index:3}
.pp4-pribbon i{position:absolute;top:18px;left:-37px;width:130px;
  -webkit-transform:rotate(-45deg);transform:rotate(-45deg);
  text-align:center;font-style:normal;
  background:-webkit-linear-gradient(315deg,#3cc46c,#1a7a3e);
  background:linear-gradient(135deg,#3cc46c,#1a7a3e);
  color:#fff;font-size:10.5px;font-weight:700;line-height:20px;
  letter-spacing:.2px;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.pp4-pribbon-onay i{background:-webkit-linear-gradient(315deg,#f0b53a,#b0730c);
  background:linear-gradient(135deg,#f0b53a,#b0730c);
  font-size:9.5px;letter-spacing:-.3px}

/* Baslik kurdelenin altina girmesin: sagda rozet, solda kurdele icin bosluk. */
.pp4-pmain{margin-top:14px;padding:0 44px}

@media screen and (max-width:520px){
  .pp4-pribbon{width:50px;height:50px}
  .pp4-pribbon i{top:16px;left:-27px;width:104px;font-size:9.5px;line-height:18px;letter-spacing:0}
  .pp4-pmain{margin-top:12px;padding:0 36px}
}



/* Kutunun dibindeki yardim satiri. Sayfa ile asistan tek parca calissin
   diye buraya dokunmak, o yontemin rehberini asistanda aciyor. Kutu bir
   <button>; bu yuzden ic ice buton yok, tiklama hedefe gore ayriliyor. */
.pp4-phelp{-ms-flex:0 0 auto;flex:0 0 auto;display:block;
  margin-top:auto;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
  font-style:normal;font-weight:500;font-size:12.5px;line-height:1.3;
  letter-spacing:.1px;text-align:center;color:#7e7e88;
  text-decoration:underline;text-underline-offset:2px;
  -webkit-text-decoration-color:rgba(255,255,255,.14);
  text-decoration-color:rgba(255,255,255,.14)}
.pp4-pbox-active .pp4-phelp{color:#cbb083;
  border-top-color:rgba(240,165,0,.22);
  -webkit-text-decoration-color:rgba(240,165,0,.35);
  text-decoration-color:rgba(240,165,0,.35)}
@media screen and (max-width:520px){
  .pp4-phelp{font-size:12.5px;padding-top:9px;letter-spacing:-.3px}
}



/* Sure ozeti tek sirada kalmali; dar ekranda punto kisiliyor. */
@media screen and (max-width:520px){
  .pp4-pinfo{font-size:10px;padding-top:10px}
}
@media screen and (max-width:380px){
  .pp4-pinfo{font-size:9px}
}
/* En dar ekranlarda yardim satiri iki satira dusuyordu; bir punto
   kisilinca tek satirda kaliyor ve kart kisa duruyor. */
@media screen and (max-width:370px){
  .pp4-phelp{font-size:11.5px}
  /* Dar ekranda basligin yan boslugu kutunun EN KUCUK genisligini
     belirliyor; genis kalirsa uzun adli kutu (Telegram) tek basina
     satir kapliyor ve izgara bozuluyor. Bosluk kisilirken kurdele de
     kuculuyor ki baslik seride girmesin. */
  .pp4-pmain{padding:0 22px}
  .pp4-pribbon{width:40px;height:40px}
  .pp4-pribbon i{top:12px;left:-32px;font-size:8.5px;line-height:16px}
}


/* Odeme yontemi baslik/aciklama ile kutular arasindaki bosluk fazlaydi. */
/* "Nasil odemek istersiniz?" basligi ile ustundeki metin arasindaki
   28px fazlaydi; yalnizca BU baslik kisaltildi, digerleri korundu. */
.pp4-h2-pay{margin-top:14px}
.pp4-paynote{margin-bottom:0;font-size:14px;color:#a6a6b0}
.pp4-star{color:#e5484d;font-weight:700}
@media screen and (max-width:520px){.pp4-paynote{font-size:13px}}

/* Satin alma dugmesi: biraz daha derli toplu. 44px dokunma hedefinin
   altina inmiyor. */
.pp4-cta{padding:12px 18px;font-size:14px}
@media screen and (max-width:520px){
  .pp4-cta{padding:11px 16px;font-size:13.5px}
}

/* Ayrilan yer bant bant: her bandin EN DUSUK dogal yuksekligi secildi.
   Boylece hicbir genislikte alta bos alan kalmiyor; icerik daha uzun
   oldugunda kalan kayma en fazla ~50px. Olculen dogal degerler:
   320:704 340:671 360:706 380:652 400:656 420:617 440:601 460:601
   480:561 500:545 520:545 560:595 600+:573 */

/* Rozetin rengi yalnizca JS'in yazdigi inline stile baglıydı; inline dustugu
   an cekirdekteki .pp4-pbox span{color:#8a8a90} devralip ikonlari griye
   ceviriyordu. Kendi taban rengimizi ayni ozgullukte tanimliyoruz. */
.pp4-pbox .pp4-plogo{color:#cfcfd6}

/* ---------------------------------- mobilde odeme bolumu tam genislik ---
   Sayfa kabinin yan boslugu (.content 10px + .pp4 12px) bu bolumde
   kaldirildi; yalnizca baslik, not ve kutu izgarasi etkileniyor, sayfanin
   geri kalani kendi kabinda kaliyor.
   Rozetin yatay tasmasi kisildi (-14px -> -6px), yoksa en sagdaki kutunun
   rozeti ekranin disina tasip yatay kaydirma acardi. */
@media screen and (max-width:520px){
  /* vw KULLANMA: iOS Safari'de vw gorsel genislikten farkli hesaplanip
     icerigi saga kaydiriyordu. Sayfa kabinin bilinen yan boslugu
     (.content 10px + .pp4 12px = 22px) kadar disari cikiyoruz; kenarda
     rozetin tasmasi icin 6px pay birakildi. */
  .pp4-h2-pay,.pp4-paynote,#pp_pay{margin-left:-16px;margin-right:-16px}
  .pp4-h2-pay,.pp4-paynote{padding-left:10px;padding-right:10px}
  .pp4-plogo{right:-6px}
}

/* Kahraman bolumundeki "aninda uye ol" satiri. Yanindaki isaretler emoji
   degil SVG: her cihazda ayni gorunsun ve boyutu kontrol edilebilsin. */
.pp4-instant{display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:7px;margin:7px 0 0;color:#e8e8ef;font-size:14px;font-weight:600;
  letter-spacing:.2px;line-height:1.35;text-align:center}
.pp4-instant .pp4-spark{-ms-flex:0 0 auto;flex:0 0 auto;width:19px;height:19px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
@media screen and (max-width:520px){
  .pp4-instant{gap:6px;margin-top:6px;font-size:12.5px}
  .pp4-instant .pp4-spark{width:17px;height:17px}
}

/* 18 yas bildirimi: destek notunun altinda, alt alta iki satir.
   Basindaki kirmizi yildiz, sayfadaki odeme notuyla ayni isaret. */
.pp-age{margin:8px auto 0;max-width:560px;text-align:center;
  color:#8f8f99;font-size:12.5px;line-height:1.6}
.pp-note + .pp-age{margin-top:28px}
.pp-age .pp4-star{margin-right:4px}
@media screen and (max-width:520px){
  .pp-age{margin-top:7px;font-size:11.5px}
  .pp-note + .pp-age{margin-top:24px}
}

/* Form talebi kutusu: dinamik odeme kutulariyla ayni olcu.
   Stil buraya tasindi cunku premium-form.css artik yalnizca
   /premium/form/ sayfasinda yukleniyor. */
.pp4-pbox-form{position:relative;overflow:visible;min-height:0;margin-top:20px;padding:10px 7px}
.pp4-pbox-form strong{font-size:15px}

/* Form sayfasina gecis katmani. Sayfa degisimi aninda olmasin diye
   kisa bir hazirlik gosterilir; ayni zamanda cift tiklamayi engeller. */
.pp4-gecis{position:fixed;inset:0;z-index:2147483000;display:flex;
  align-items:center;justify-content:center;background:rgba(8,8,10,.86);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:1;animation:pp4GecisAc .2s ease}
@keyframes pp4GecisAc{from{opacity:0}to{opacity:1}}
.pp4-gecis-ic{display:flex;flex-direction:column;align-items:center;gap:14px}
.pp4-gecis-ic em{color:#c9c9d2;font-size:13.5px;font-style:normal;font-weight:600}
.pp4-gecis-d{width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:#e8e8ee;
  animation:pp4GecisDon .7s linear infinite}
@keyframes pp4GecisDon{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pp4-gecis-d{animation:none}}