/* ═══════════════════════════════════════════════════════════
   REKLAM ALANLARI — tüm sayfalarda ortak
   Kullanım:  <div data-reklam="alan-anahtari" data-tip="lider"></div>
   Tipler: lider (yatay geniş) · genis (billboard) · kutu (liste içi kart)
   ═══════════════════════════════════════════════════════════ */
.rk{position:relative;margin-block:1.4rem}
.rk-etiket{
  display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.rk-etiket::before{content:"";width:14px;height:1px;background:var(--line)}
.rk-etiket::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.rk-slot{display:block;border-radius:18px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}

/* ── BOŞ ALAN: “işletmeniz bu alanda olabilir” ── */
.rk-bos{
  display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.3rem;
  border:2px dashed rgba(18,182,196,.6);
  background:linear-gradient(120deg,var(--turk-soft),var(--card) 55%,var(--card));
  color:var(--ink);
}
.rk-bos:hover{border-color:var(--turk);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.rk-bos .rk-ico{
  width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,#12A3B2,#0E5D71);color:#fff;box-shadow:0 10px 20px -12px rgba(14,93,113,.9);
}
.rk-bos .rk-ico svg{width:25px;height:25px}
.rk-bos .rk-txt{min-width:0}
.rk-bos b{display:block;font-size:1.04rem;font-weight:800;letter-spacing:-.02em}
.rk-bos .rk-alt{display:block;margin-top:.2rem;font-size:.85rem;color:var(--muted);font-weight:600}
.rk-bos .rk-cta{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,#EE4B58,#E23744);color:#fff;border-radius:999px;
  padding:.72rem 1.25rem;font-size:.84rem;font-weight:800;white-space:nowrap;
  box-shadow:0 12px 22px -14px rgba(226,55,68,.95);
}
.rk-bos:hover .rk-cta{transform:translateY(-1px)}
.rk-bos .rk-cta svg{width:15px;height:15px}

/* ── DOLU REKLAM ── */
.rk-dolu{
  display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.25rem;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow);
}
.rk-dolu:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--turk)}
.rk-dolu .rk-logo{
  width:60px;height:60px;flex:none;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  font-weight:800;font-size:1.15rem;letter-spacing:-.02em;
  background:linear-gradient(145deg,#2ECBD8,#0E5D71);color:#fff;
}
.rk-dolu .rk-logo img{width:100%;height:100%;object-fit:cover}
.rk-dolu.t-red .rk-logo{background:linear-gradient(145deg,#E8404D,#8E1520)}
.rk-dolu.t-petrol .rk-logo{background:linear-gradient(145deg,#17809A,#0A4557)}
.rk-dolu .rk-txt{min-width:0}
.rk-dolu .rk-marka{
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turk-d);
}
.rk-dolu b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;margin-top:.12rem}
.rk-dolu .rk-alt{display:block;margin-top:.18rem;font-size:.86rem;color:var(--muted);font-weight:600}
.rk-dolu .rk-cta{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,#17809A,#0E5D71);color:#fff;border-radius:999px;
  padding:.7rem 1.2rem;font-size:.83rem;font-weight:800;white-space:nowrap;
}
.rk-dolu .rk-cta svg{width:15px;height:15px}
.rk-rozet{
  position:absolute;top:-9px;right:14px;background:var(--amber-soft);color:#8A5A12;border:1px solid rgba(233,150,44,.4);
  font-family:"DM Mono",monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;
}
:root[data-theme="dark"] .rk-rozet{color:#F0AE55}

/* ── TİP: LİDER (yatay şerit) ── */
.rk-lider .rk-slot{min-height:104px}

/* ── TİP: GENİŞ (billboard) ── */
.rk-genis .rk-slot{min-height:170px;padding-block:1.8rem}
.rk-genis .rk-bos b,.rk-genis .rk-dolu b{font-size:1.35rem}
.rk-genis .rk-ico,.rk-genis .rk-logo{width:64px;height:64px;border-radius:19px}
.rk-genis .rk-ico svg{width:31px;height:31px}
.rk-genis .rk-cta{padding:.85rem 1.5rem;font-size:.9rem}

/* ── TİP: KUTU (kart ızgarası içi) ── */
.rk-kutu{margin:0;display:flex;flex-direction:column}
.rk-kutu .rk-etiket{margin-bottom:.35rem}
.rk-kutu .rk-slot{flex:1;display:flex}
.rk-kutu .rk-bos,.rk-kutu .rk-dolu{
  flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:.55rem;
  padding:1.4rem 1.3rem;text-align:left;border-radius:20px;
}
.rk-kutu .rk-cta{margin-left:0;margin-top:.4rem;width:100%;justify-content:center}
.rk-kutu .rk-alt{max-width:34ch}

/* ── mobil ── */
@media (max-width:720px){
  .rk-bos,.rk-dolu{flex-direction:column;align-items:flex-start;gap:.7rem;padding:1.1rem}
  .rk-bos .rk-cta,.rk-dolu .rk-cta{margin-left:0;width:100%;justify-content:center}
  .rk-genis .rk-slot{min-height:0;padding-block:1.2rem}
  .rk-genis .rk-bos b,.rk-genis .rk-dolu b{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){.rk-slot{transition:none}}

/* ═══════════════════════════════════════════════════════════════════
   REKLAM ALANI ÖLÇÜLERİ
   Tam genişlik alanları (şerit ve billboard): 1240 × 300 piksel
   Kutu alanları (liste içi, kenar çubuğu)   :  760 × 500 piksel
   ═══════════════════════════════════════════════════════════════════ */
.rk-lider .rk-slot,
.rk-genis .rk-slot{min-height:300px}
.rk-genis .rk-slot{padding-block:2rem}
.rk-kutu  .rk-bos,.rk-kutu .rk-dolu{min-height:252px}

/* ═══════════════════════════════════════════════════════════════════
   TAM GÖRSEL REKLAM (banner)
   Afiş alanın tamamını kaplar; solda küçük logo durmaz.
   Yükseklik masaüstünde SABİT 300 px — ekran ne kadar dar olursa
   olsun kısalmaz. Görsel ortadan hizalanıp kenarlardan kırpılır.
   ═══════════════════════════════════════════════════════════════════ */
.rk-tam{
  display:block;padding:0;line-height:0;overflow:hidden;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:18px;
  isolation:isolate;              /* bazı tarayıcılarda köşe kırpması kaçıyordu */
}
/* Görsele de aynı yarıçapı veriyoruz: kırpma tutmasa bile
   dört köşe de yuvarlak kalır (iOS Safari'de görülen sorun). */
.rk-tam img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  border-radius:16px;
}
.rk-tam:hover{border-color:var(--turk);box-shadow:var(--shadow-md)}

.rk-lider .rk-tam,
.rk-genis .rk-tam{height:300px;min-height:300px;max-height:300px}
.rk-kutu  .rk-tam{height:500px;min-height:0;max-height:500px}

/* ═══════════════════════════════════════════════════════════════════
   MOBİL
   Afiş ekran genişliğine tam oturur, oranını korur, köşeleri yuvarlak
   kalır. Kart biçimindeki sabit yükseklikler kalkar.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .rk{margin-block:1.1rem}
  .rk-lider .rk-slot,.rk-genis .rk-slot{min-height:0}
  .rk-genis .rk-slot{padding-block:1.3rem}
  .rk-kutu .rk-bos,.rk-kutu .rk-dolu{min-height:0}

  /* Telefonda 300 px şerit gibi kalmasın: oranını koruyarak küçülsün */
  .rk-lider .rk-tam,.rk-genis .rk-tam{
    height:auto;min-height:0;max-height:none;aspect-ratio:1240/300;
  }
  .rk-kutu .rk-tam{height:auto;max-height:none;aspect-ratio:760/500}
  .rk-tam{border-radius:14px}
  .rk-tam img{border-radius:12px}

  /* Etiket ve rozet dar ekranda yer kaplamasın */
  .rk-etiket{font-size:.54rem;letter-spacing:.16em;margin-bottom:.3rem}
  .rk-rozet{font-size:.52rem;padding:.18rem .45rem}
}
@media (max-width:420px){
  .rk-tam{border-radius:12px}
  .rk-tam img{border-radius:10px}
}