/* ============================================================
   Reklam Verin — reklam veren firmalar için tanıtım sayfası
   Animasyonlar: /reklam-veren/assets/*-ad-placement.css|js (reklam-veren/includes/onizleme-*.php)
   ============================================================ */
:root {
    --rk-primary: #f3123d;
    --rk-primary-dark: #d40f36;
    --rk-ink: #1f2937;
    --rk-muted: #6b7280;
    --rk-line: #e6e9ed;
    --rk-bg: #f8fafc;
}

.rk-main { background: var(--rk-bg); padding-top: 80px; }

/* ---- Ortak ---- */
.rk-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px; background: rgba(243, 18, 61, 0.1); color: var(--rk-primary); font-weight: 700; font-size: 13px; }
.rk-rozet i { display: inline-flex; }
.rk-rozet-acik { padding: 5px 12px; font-size: 12.5px; }
.rk-aksiyon { display: flex; flex-wrap: wrap; gap: 12px; }
.rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 6px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .25s ease; border: 2px solid transparent; cursor: pointer; }
.rk-btn i { display: inline-flex; }
.rk-btn-ana { background: var(--rk-primary); color: #fff; }
.rk-btn-ana:hover { background: var(--rk-primary-dark); color: #fff; }
.rk-btn-cizgi { background: #fff; color: var(--rk-ink); border-color: var(--rk-line); }
.rk-btn-cizgi:hover { border-color: var(--rk-primary); color: var(--rk-primary); }
.rk-btn-kucuk { padding: 10px 16px; font-size: 14px; }
.rk-btn-beyaz { background: #fff; color: var(--rk-primary); }
.rk-btn-beyaz:hover { background: #fff1f4; color: var(--rk-primary-dark); }
.rk-btn-whatsapp { background: #25d366; color: #fff; }
.rk-btn-whatsapp:hover { background: #1ebe5b; color: #fff; }
.rk-btn-whatsapp i { font-size: 18px; }
.rk-btn-cizgi-beyaz { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.rk-btn-cizgi-beyaz:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---- Hero ---- */
.rk-hero { background: linear-gradient(180deg, #fff 0%, #fff5f7 100%); border-bottom: 1px solid var(--rk-line); }
.rk-hero-inner { max-width: 1000px; margin: 0 auto; padding: 64px 20px 52px; text-align: center; }
.rk-hero h1 { margin: 18px 0 16px; font-family: 'Quicksand', sans-serif; font-size: clamp(30px, 4.6vw, 50px); font-weight: 800; color: var(--rk-ink); line-height: 1.14; letter-spacing: -0.01em; }
.rk-hero h1 em { font-style: normal; color: var(--rk-primary); }
.rk-hero-metin > p { margin: 0 auto 26px; color: var(--rk-muted); font-size: 17px; line-height: 1.65; max-width: 720px; }
.rk-hero .rk-aksiyon { justify-content: center; }
.rk-hero-not { margin: 16px 0 0 !important; font-size: 13.5px !important; color: var(--rk-muted); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.rk-hero-not i { color: var(--rk-primary); display: inline-flex; }
.rk-hero-not a { color: var(--rk-primary); font-weight: 700; }
.rk-hero-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 820px; margin: 40px auto 0; }
.rk-hero-kartlar a { display: grid; justify-items: center; gap: 4px; padding: 18px 14px; background: #fff; border: 1px solid var(--rk-line); border-radius: 6px; text-decoration: none; transition: all .25s ease; }
.rk-hero-kartlar a:hover { border-color: rgba(243, 18, 61, .35); box-shadow: 0 8px 24px rgba(31, 41, 55, .07); transform: translateY(-2px); }
.rk-hero-kartlar i { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(243, 18, 61, 0.1); color: var(--rk-primary); font-size: 18px; margin-bottom: 6px; }
.rk-hero-kartlar strong { font-size: 15px; color: var(--rk-ink); }
.rk-hero-kartlar span { font-size: 13px; color: var(--rk-muted); }

/* ---- Şerit ---- */
.rk-serit { background: #fff; border-bottom: 1px solid var(--rk-line); }
.rk-serit-inner { max-width: 1200px; margin: 0 auto; padding: 26px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.rk-serit strong { display: block; font-size: 26px; font-weight: 800; color: var(--rk-primary); font-family: 'Quicksand', sans-serif; }
.rk-serit span { font-size: 13.5px; color: var(--rk-muted); }

/* ---- Bölüm ---- */
.rk-bolum { max-width: 1200px; margin: 0 auto; padding: 60px 20px; scroll-margin-top: 80px; }
.rk-bolum + .rk-bolum { padding-top: 10px; }
.rk-bolum-baslik { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.rk-bolum-baslik h2 { margin: 0 0 10px; font-family: 'Quicksand', sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--rk-ink); }
.rk-bolum-baslik p { margin: 0; color: var(--rk-muted); font-size: 15.5px; line-height: 1.65; }

/* ---- Avantajlar ---- */
.rk-avantaj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rk-avantaj { background: #fff; border: 1px solid var(--rk-line); border-radius: 6px; padding: 24px; transition: all .25s ease; }
.rk-avantaj:hover { border-color: rgba(243, 18, 61, .35); box-shadow: 0 8px 24px rgba(31, 41, 55, .07); transform: translateY(-2px); }
.rk-avantaj-ikon { width: 46px; height: 46px; border-radius: 10px; background: rgba(243, 18, 61, 0.1); color: var(--rk-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.rk-avantaj h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color: var(--rk-ink); }
.rk-avantaj p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--rk-muted); }

/* ---- Reklam alanları (metin + animasyon) ---- */
.rk-alan { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 44px; align-items: center; padding: 34px 0; scroll-margin-top: 90px; }
.rk-alan + .rk-alan { border-top: 1px solid var(--rk-line); }
.rk-alan-ters { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.rk-alan-ters .rk-alan-metin { order: 2; }
.rk-alan-metin h3 { margin: 14px 0 6px; font-family: 'Quicksand', sans-serif; font-size: clamp(21px, 2.5vw, 27px); font-weight: 800; color: var(--rk-ink); line-height: 1.25; }
.rk-alan-ad { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--rk-primary); }
.rk-alan-metin > p:not(.rk-alan-ad) { margin: 0 0 16px; color: var(--rk-muted); font-size: 15px; line-height: 1.7; }
.rk-alan-metin ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.rk-alan-metin li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--rk-ink); }
.rk-alan-metin li i { color: var(--rk-primary); display: inline-flex; margin-top: 3px; font-size: 13px; }
.rk-alan-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.rk-fiyat { font-size: 14px; color: var(--rk-muted); }
.rk-fiyat b { font-size: 20px; font-weight: 800; color: var(--rk-ink); }
.rk-fiyat-kapali { font-weight: 700; }
.rk-alan-gorsel { min-width: 0; }
.rk-alan-gorsel .vr-ad-demo h2 { font-family: 'Quicksand', sans-serif; }

/* ---- Adımlar ---- */
.rk-adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: adim; }
.rk-adim { position: relative; background: #fff; border: 1px solid var(--rk-line); border-radius: 6px; padding: 24px 22px; }
.rk-adim > span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--rk-primary); color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.rk-adim h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--rk-ink); }
.rk-adim p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rk-muted); }

/* ---- SSS ---- */
.rk-sss { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.rk-sss details { background: #fff; border: 1px solid var(--rk-line); border-radius: 6px; padding: 0 20px; }
.rk-sss summary { cursor: pointer; padding: 17px 0; font-weight: 700; font-size: 15.5px; color: var(--rk-ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.rk-sss summary::-webkit-details-marker { display: none; }
.rk-sss summary::after { content: '+'; color: var(--rk-primary); font-size: 20px; line-height: 1; }
.rk-sss details[open] summary::after { content: '−'; }
.rk-sss p { margin: 0 0 18px; color: var(--rk-muted); font-size: 14.5px; line-height: 1.7; }

/* ---- Alt CTA ---- */
.rk-cta { padding: 0 20px 70px; }
.rk-cta-inner { max-width: 1160px; margin: 0 auto; padding: 48px 28px; border-radius: 6px; background: linear-gradient(135deg, #f3123d 0%, #c80d33 100%); color: #fff; text-align: center; }
.rk-cta h2 { margin: 0 0 10px; font-family: 'Quicksand', sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: #fff; }
.rk-cta p { margin: 0 auto 24px; max-width: 560px; font-size: 15.5px; line-height: 1.6; opacity: .92; }
.rk-cta .rk-aksiyon { justify-content: center; }

/* ---- Duyarlı ---- */
@media (max-width: 992px) {
    .rk-avantaj-grid { grid-template-columns: repeat(2, 1fr); }
    .rk-adimlar { grid-template-columns: repeat(2, 1fr); }
    .rk-alan, .rk-alan-ters { grid-template-columns: 1fr; gap: 26px; }
    .rk-alan-ters .rk-alan-metin { order: 0; }
}
@media (max-width: 640px) {
    .rk-main { padding-top: 70px; }
    .rk-hero-inner { padding: 40px 16px 36px; }
    .rk-hero-metin > p { font-size: 15.5px; }
    .rk-hero-kartlar { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
    .rk-hero-kartlar a { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 14px; }
    .rk-hero-kartlar i { grid-row: span 2; margin: 0; }
    .rk-btn { width: 100%; }
    .rk-serit-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 22px 16px; }
    .rk-bolum { padding: 44px 16px; }
    .rk-avantaj-grid, .rk-adimlar { grid-template-columns: 1fr; }
    .rk-alan-alt .rk-btn { width: auto; }
    .rk-cta { padding: 0 16px 50px; }
    .rk-cta-inner { padding: 36px 18px; }
}