/* =====================================================================
   PAKET SAYFALARI — Paradaise ve Klasik
   Yalnizca bu iki sayfada yuklenir (duzen.php, $ekStiller). Ortak
   belirtecler site.css'te; bu dosya ondan SONRA gelir.

   Dosya once paradaise.css adiyla yazilmisti; Klasik sayfasi da ayni
   manset, baloncuk, paket karti ve kapanis bandi duzenini kullandigi icin
   paket.css olarak adlandirildi ve iki sayfaya birden hizmet ediyor.
   ===================================================================== */

/* ============ MANSET ============
 *
 * Sayfa basligi iki sutuna ayrilir: solda satis metni, sagda cihaz
 * gorseli. Ana sayfadaki .hero-grid ile ayni oran (1 / .78) kullanilir ki
 * iki sayfa arasinda gecen ziyaretci ayni duzeni gorsun.
 *
 * 1120 px alti tek sutuna duser ve gorsel metnin ALTINA gecer: dar
 * ekranda once ne satildigini okumali, sonra resmi gormeli.
 */
.pagehead--para{position:relative; overflow:hidden}
.pagehead--para .wrap{position:relative; z-index:2; padding-block:36px 34px}

/* Arka plandaki nokta+cizgi dokusu. Sagda, gorselin arkasinda yogunlasir;
   metnin okundugu sol tarafta maske ile silinir. */
.paradoku{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle at center, rgba(12,95,174,.20) 1.4px, transparent 1.5px),
    linear-gradient(90deg, rgba(12,95,174,.07) 1px, transparent 1px);
  background-size:26px 26px, 78px 78px;
  -webkit-mask-image:radial-gradient(72% 88% at 86% 42%, #000 0%, transparent 70%);
          mask-image:radial-gradient(72% 88% at 86% 42%, #000 0%, transparent 70%);
}

.phero{display:grid; grid-template-columns:1fr .78fr; gap:44px; align-items:center}
@media (max-width:1120px){
  .phero{grid-template-columns:1fr; gap:26px}
  /* Gorsel dar ekranda kucultulur; manset yuksekligi sisirmesin */
  .phero .shotbox{max-width:340px}
}
.phero__metin{min-width:0}

.phero__cipler{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}

/* ============ BOLUM ARALIKLARI ============
 *
 * Olcum seridi ile altindaki lisans notu arasi 121 px olculmustu
 * (.sec--tight'in 48 px alt dolgusu + .sec'in 72 px ust dolgusu). Iki blok
 * da ayni beyaz zeminde durdugu icin bu bosluk "bolum ayrimi" gibi degil,
 * unutulmus bosluk gibi okunuyordu — arada renk degisimi yok ki ayrim
 * anlasilsin.
 *
 * Bolum ICI ritme esitlenir: not ile paket izgarasi arasi 30 px, serit ile
 * not arasi da artik 32 px. Sayfanin geri kalanindaki .sec dolgulari
 * DOKUNULMADI; oralarda zemin rengi ya da kart cercevesi degistigi icin
 * genis bosluk dogru duruyor.
 */
.sec--olcum{padding-block:48px 0}
.sec--paketler{padding-top:32px}

/* Cok paragrafli bilgi kutusu: ikon ile metin blogu yan yana, paragraflar
   alt alta. .notice'in kendi flex duzeni tek paragraf icin yazilmisti. */
.notice--coklu > div{min-width:0}
.notice--coklu p + p{margin-top:9px}

/* --- Baslangic fiyati ---
   Manset icinde tek satirlik fiyat cengeli. Rakam veriden gelir; kartlara
   inmeden once ziyaretci butcenin nereye oturdugunu gorur. */
.phero__fiyat{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  margin-top:22px;
}
.phero__fiyat-etiket{
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  /* Etiket kendi satirini alir: fiyatin yanina yazilinca rakamla ayni
     hizada iki farkli olcu yan yana geliyor ve ikisi de zayifliyordu. */
  flex:1 1 100%;
}
.phero__fiyat .price-now{font-size:2.1rem; line-height:1}
.phero__fiyat-ek{font-size:.86rem; color:var(--text-2)}

.phero__cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:22px}
@media (max-width:560px){
  .phero__cta{gap:10px}
  .phero__cta .btn{flex:1 1 100%; justify-content:center}
}

/* Oynat ucgeni / panel ikonu butonun icinde metinle ayni cizgiye oturur */
.btn--demo svg{width:16px; height:16px; flex:0 0 auto}

/* Demo panel kimlik bilgileri. Ayarlarda kullanici adi VE sifre birlikte
   doluysa cizilir; tek satirlik yardimci not, buton degil. */
.phero__kimlik{
  margin-top:12px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.02em;
  color:var(--text-2);
}
.phero__kimlik b{
  color:var(--text); font-weight:600;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px;
}

/* ============ PAKET KARTI: SATIN AL + DEMO ============
 *
 * Buton kartin DIBINE yapisir (margin-top:auto eskiden butonun kendisinde
 * duruyordu; demo baglantisi eklenince sarmalayiciya tasindi).
 */
/* ============ DIKKAT BALONCUGU ============
 *
 * Paket izgarasinin hemen ustunde durur ve asagi bakan bir kuyrukla
 * kartlara isaret eder. Renk TURUNCU ailesinden: mavi .notice kutusu bir
 * ust satirda duruyor, ikisi ayni renk olsa biri otekini yutardi. Turuncu
 * bu sitede vurgu rengi (bkz. .ost-serit), o yuzden dolgu degil cerceve ve
 * ikon olarak kullanilir — butona benzemez.
 */
.balon{
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:28px; padding:16px 20px;
  border:1px solid var(--buy-line); border-radius:16px;
  background:var(--buy-soft);
}
/* Kuyruk: iki katman — dis ucgen cerceve rengi, ic ucgen dolgu rengi.
   Tek ucgenle yapilinca cerceve kuyrukta kesiliyordu. */
.balon::before,
.balon::after{
  content:""; position:absolute; top:100%; left:38px;
  width:0; height:0;
  border-left:11px solid transparent; border-right:11px solid transparent;
}
.balon::before{border-top:12px solid var(--buy-line)}
.balon::after{margin-left:1px; border-left-width:10px; border-right-width:10px;
  border-top:10px solid var(--buy-soft)}

.balon__ik{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--surface); border:1px solid var(--buy-line);
  color:var(--buy-text);
}
.balon__ik svg{width:18px; height:18px; display:block}

.balon__metin{font-size:.9rem; line-height:1.6; color:var(--text-2); min-width:0}
/* Baslik: h2/h3 DEGIL. Bu bir bilgi kutusunun cengeli, belgenin bolum
   basligi degil; baslik etiketi verilse sayfa taslaginda gercek
   bolumlerle ayni agirliga cikardi. */
.balon__baslik{
  display:block; margin-bottom:7px;
  font-family:var(--f-display); font-size:1.02rem; font-weight:700;
  letter-spacing:-.015em; color:var(--buy-text);
}
.balon__metin p + p{margin-top:8px}
/* b: cumle icindeki anahtar kelimeler */
.balon__metin b{color:var(--text); font-weight:600}
/* Kapanis cumlesi: kutunun icinde ustune basilan tek satir. */
.balon__vurgu{
  margin-top:11px !important;
  padding-top:10px; border-top:1px dashed var(--buy-line);
  color:var(--text); font-weight:600;
}

@media (max-width:560px){
  .balon{padding:14px 16px; gap:11px}
  .balon::before,.balon::after{left:26px}
  .balon__metin{font-size:.865rem}
}

/* ============ KAPANIS BANDI: DUGMELER SAGDA ============
 *
 * .band .wrap yatay bir flex kabidir (space-between + wrap). Metin blogu iki
 * paragrafa cikinca dogal genisligi ~480 px oldu; uc dugme de ~700 px
 * istiyordu. Toplam 1180 px'lik alani astigi icin dugme blogu ALT SATIRA
 * dusuyor ve bandi gereksiz yere uzatiyordu.
 *
 * Cozum: dugme blogu dar bir SUTUN olur. Taban genisligi 320 px'e indigi
 * icin metnin yanina sigar; .wrap zaten align-items:center oldugu icin
 * dikeyde ortalanir ve bandin yuksekligini metin belirler.
 *
 * Yalnizca bu sayfada gecerlidir; iki dugmeli diger bantlar (hosting, vps,
 * ek hizmetler...) yatay dizilimini korur.
 */
.band-act--dikey{
  flex-direction:column; align-items:stretch;
  width:min(320px, 100%); flex:0 0 auto;
}
.band-act--dikey .btn{width:100%; justify-content:center; text-align:center}

/*
 * Soldaki metnin OLCUSU.
 *
 * Genel .band kurallari h2 icin 21ch, paragraf icin 48ch verir. Bu sayfada
 * paragraf 330 px'e sikisip 12 satira yayiliyordu — sagdaki dugme sutununa
 * kadar 790 px bos alan varken. `ch` birimi ogenin KENDI punto olcusune gore
 * cozuldugu icin (burada 1ch ~ 6,9 px) 48ch beklenenden cok daha dar
 * kaliyor; olculer bu yuzden px olarak veriliyor.
 *
 * 600 px yaklasik 85 karakterlik bir satir demek: govde metni icin uzun
 * kacardi, ama burada iki kisa cagri paragrafi var ve satir sayisi yariya
 * dusuyor — bant gereksiz yukseklikten kurtulur.
 */
.band--genis .band-metin{flex:1 1 460px; min-width:0}
.band--genis h2{max-width:460px}
.band--genis p{max-width:600px}
@media (max-width:860px){
  /* Alan daralinca olcu yeniden okuma genisligine iner */
  .band--genis h2,
  .band--genis p{max-width:none}
}

@media (max-width:560px){
  /* Telefonda bant tek sutuna duser (.band .wrap kuralinda); dugmeler tam
     genislige yayilir. */
  .band-act--dikey{width:100%}
}

/* Surec seridinin altindaki kapanis cumlesi. Ortada, adim kartlarindan
   belirgin sekilde ayrilan tek satir; kart degil, sonuc cumlesi. */
.surec-kapanis{
  margin:26px auto 0; max-width:640px; text-align:center;
  font-family:var(--f-display); font-size:1.12rem; font-weight:700;
  letter-spacing:-.015em; color:var(--text);
}

/* Aylik bedelin altindaki sunucu/altyapi satiri. Rakamla ayni blokta durur
   ama onun kadar baskin olmamali: turuncu degil, notr murekkep. */
.pcard-sunucu{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--text-2); line-height:1.4;
}

.pcard-act{margin-top:auto; display:grid; gap:9px; justify-items:stretch}
.pcard-act .btn{width:100%}
.pcard-demo{
  justify-self:center;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  text-decoration:none; padding:2px 4px; border-radius:6px;
  transition:color .15s ease;
}
.pcard-demo:hover{color:var(--brand); text-decoration:underline}
.pcard-demo:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ============ DEMO BOLUMU ============ */
.dgrid{display:grid; grid-template-columns:1fr 1.05fr; gap:46px; align-items:center}
@media (max-width:1000px){.dgrid{grid-template-columns:1fr; gap:32px}}
.dgrid__metin{min-width:0}
.dgrid__metin .ticklist{margin-top:18px}
.nowrap{white-space:nowrap}

/* Liste ile butonlar arasindaki kapanis cumlesi. Madde degil, ozet — bu
   yuzden tik ikonu yok; sol tarafina ince bir cizgi konur ki listeden
   ayrildigi anlasilsin. */
.dgrid__kapanis{
  margin-top:18px; padding-left:14px;
  border-left:3px solid var(--buy-line);
  font-size:.9rem; line-height:1.62; color:var(--text);
}

/*
 * Tarayici cercevesi.
 *
 * Icindeki "site" tamamen bicimdir: gercek bir ekran goruntusu degil,
 * demonun DUZENINI anlatan bir maket. Bu yuzden aria-hidden ile ekran
 * okuyucudan gizlenir ve hicbir metni bilgi tasimaz.
 */
.tarayici{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface);
  box-shadow:0 30px 60px -34px rgba(15,40,70,.55), 0 2px 6px -2px rgba(15,40,70,.18);
  transition:transform .35s ease;
}
.tarayici:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){.tarayici{transition:none} .tarayici:hover{transform:none}}

.tarayici__bas{
  display:flex; align-items:center; gap:7px;
  padding:10px 13px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.tarayici__nokta{width:9px; height:9px; border-radius:50%; background:var(--line-2); flex:0 0 auto}
.tarayici__nokta:first-child{background:#E5734A}
.tarayici__nokta:nth-child(2){background:#E0B341}
.tarayici__nokta:nth-child(3){background:#5FA463}
.tarayici__adres{
  display:flex; align-items:center; gap:6px; margin-left:8px;
  flex:1 1 auto; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:5px 12px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.02em; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tarayici__adres svg{width:12px; height:12px; flex:0 0 auto; color:var(--green)}

.tarayici__ekran{background:#fff; padding:0 0 14px}

/* --- maket: ust bar --- */
.dsite__bas{
  display:flex; align-items:center; justify-content:space-between;
  background:#0E6BB8; padding:9px 13px;
}
.dsite__logo{font-family:var(--f-display); font-weight:800; font-size:.82rem; color:#fff; letter-spacing:-.01em}
.dsite__logo i{font-style:normal; opacity:.72; font-weight:600}
.dsite__ara{width:52px; height:7px; border-radius:99px; background:rgba(255,255,255,.42)}

/* --- maket: kategori cubugu --- */
.dsite__kat{
  display:flex; align-items:center; gap:11px;
  padding:8px 13px; border-bottom:1px solid #E4E9EF; background:#fff;
  overflow:hidden;
}
.dsite__kat-oge{
  font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#2B3B4C; white-space:nowrap;
}
.dsite__kat-oge.is-on{color:#0E6BB8; box-shadow:inset 0 -2px 0 #0E6BB8; padding-bottom:2px}
.dsite__ilan-dugme{
  margin-left:auto; flex:0 0 auto;
  background:#E8A21C; color:#20160A;
  font-size:.57rem; font-weight:800; letter-spacing:.03em;
  padding:4px 9px; border-radius:5px; white-space:nowrap;
}

/* --- maket: son dakika bandi --- */
.dsite__sondakika{display:flex; align-items:center; margin:11px 13px 0; overflow:hidden; border-radius:4px}
.dsite__sd-etiket{
  background:#16212C; color:#fff; flex:0 0 auto;
  font-size:.58rem; font-weight:800; letter-spacing:.06em;
  padding:5px 9px;
}
.dsite__sd-akis{
  flex:1 1 auto; height:22px;
  background:linear-gradient(90deg, #F0A81E, #F5C542);
}

/* --- maket: manset --- */
.dsite__manset{display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin:9px 13px 0; border-radius:5px; overflow:hidden}
.dsite__manset-gorsel{
  display:block; aspect-ratio:16/10;
  background:
    radial-gradient(60% 70% at 32% 34%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(150deg, #3D5165, #1E2C3A);
}
.dsite__manset-metin{
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  background:#0E6BB8; padding:13px 14px;
}
.dsite__satir{display:block; height:9px; border-radius:3px; background:rgba(255,255,255,.9)}
.dsite__satir--ince{height:6px; background:rgba(255,255,255,.55)}

/* --- maket: resmi ilan sekmeleri --- */
.dsite__ilan{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:9px 13px 0}
.dsite__ilan-sekme{
  text-align:center; padding:5px 3px;
  font-size:.55rem; font-weight:700; letter-spacing:.03em; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dsite__ilan-sekme--0{background:#3E86C4}
.dsite__ilan-sekme--1{background:#5FA79B}
.dsite__ilan-sekme--2{background:#C4566B}
.dsite__ilan-sekme--3{background:#D9A227; color:#20160A}

/* --- maket: haber kartlari --- */
.dsite__izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:11px 13px 0}
.dsite__kart{
  display:block; aspect-ratio:4/3; border-radius:4px;
  background:linear-gradient(160deg, #DCE5EE, #C3D2E0);
}

/* Cok dar ekranda maket asiri kuculup okunmaz hale gelmesin:
   dort kolonluk bolumler ikiye duser. */
@media (max-width:560px){
  .dsite__izgara{grid-template-columns:repeat(2,1fr)}
  .dsite__ilan{grid-template-columns:repeat(2,1fr)}
  .dsite__manset{grid-template-columns:1fr}
  .dsite__manset-gorsel{aspect-ratio:16/7}
  /* Kategoriler sigmayinca "Resmî İlanlar" dugmesi disari itilip yarim
     kaliyordu. Oysa bu maketteki en anlamli oge o — Basin Ilan Kurumu
     uyumunu gosteren tek isaret. Fazla kategoriler gizlenir, dugme tam
     gorunur kalir. */
  .dsite__kat-oge:nth-child(n+4){display:none}
}