/* ===== Base ===== */
:root{
  --bg:#f7f9fb; --card:#ffffff; --text:#0b1220; --muted:#4b5563; --brand:#1a73e8;
  --line:#e5e7eb;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Roboto,system-ui,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;flex-direction:column}
.brand-txt{font-weight:800;font-size:20px;white-space:nowrap}
.brand-sub{color:var(--muted);font-weight:600;font-size:14px}

/* Nav + actions (desktop) */
.nav{display:flex;gap:18px;align-items:center}
.nav .link{font-weight:600;color:#0b1220;text-decoration:none;padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav .link[aria-current="true"]{background:#eef2ff;color:#3730a3}
.actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.partner-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#2563eb}
.partner-badge .badge-box{width:110px;height:32px;border-radius:8px;background:#f1f5f9;display:inline-grid;place-items:center}
.phone{font-weight:700;color:#111827;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.btn.lg{padding:12px 18px;border-radius:14px}
.menu-toggle{display:none;border:0;background:transparent;padding:6px;margin-left:4px;line-height:0}
.menu-toggle .material-symbols-outlined{font-size:26px;color:#111}

/* ===== Mobile / Tablet ===== */
@media (max-width:1024px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .nav, .actions{display:none} /* kapalı durum */
  /* açık durum – sadece data-open ile kontrol */
  .topbar[data-open="true"] .nav,
  .topbar[data-open="true"] .actions{
    display:flex;flex-direction:column;gap:16px;
    position:fixed;left:0;right:0;top:64px;background:#fff;
    padding:20px 16px;border-bottom:1px solid var(--line);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  .nav .link{padding:14px 16px;border-radius:10px}
  .actions .btn.lg{width:100%;text-align:center}
  .topbar[data-open="true"] .menu-toggle .material-symbols-outlined::before{content:"close"}
}

/* Opsiyonel küçük ayarlar */
@media (max-width:768px){
  :root{--container:680px}
  .brand-txt{font-size:18px}
}
@media (max-width:480px){
  :root{--container:100%}
  .topbar-inner{padding:10px 0}
}




:root{
  --bg:#f7f9fb; --card:#fff; --text:#0b1220; --muted:#4b5563;
  --brand:#1a73e8; --accent:#34a853; --line:#e5e7eb;
  --shadow:0 10px 28px rgba(2,6,23,.08);
  --container:1200px; --z-topbar:1000; --z-backdrop:999; --z-nav:1001;
}

/* Genel kap */
.container{max-width:var(--container); margin-inline:auto; padding-inline:16px}

/* Topbar */
.topbar{position:sticky; top:0; inset-inline:0; background:#fff; box-shadow:var(--shadow); z-index:var(--z-topbar)}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px; padding-top:env(safe-area-inset-top);
}

/* Brand */
.brand{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--text); font-weight:900; white-space:nowrap}
.brand-txt{font-size:1.05rem}
.brand-sub{font-size:.85rem; color:var(--muted)}

/* Nav (desktop) */
.nav{display:flex; align-items:center; gap:20px}
.nav .link{display:inline-block; padding:10px 4px; color:var(--text); text-decoration:none; font-weight:500; white-space:nowrap}
.nav .link[aria-current="page"]{color:var(--brand); position:relative}
.nav .link[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--brand); border-radius:2px}

/* Actions (desktop) */
.actions{display:flex; align-items:center; gap:14px}
.partner-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff}
.badge-box{font-size:18px; color:var(--accent)}
.phone{font-weight:700; text-decoration:none; color:var(--text)}
.btn{--p:12px; display:inline-flex; align-items:center; justify-content:center; padding:var(--p) 16px; background:var(--brand); color:#fff; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 6px 16px rgba(26,115,232,.18)}
.btn.lg{--p:13px}
.btn.block{width:100%}

/* Hamburger (desktop gizli) */
.menu-toggle{display:none; border:1px solid var(--line); background:#fff; border-radius:12px; width:44px; height:44px; align-items:center; justify-content:center}
.menu-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Backdrop */
.backdrop{position:fixed; inset:0; background:rgba(2,6,23,.42); z-index:var(--z-backdrop)}

/* Tablet ve altı */
@media (max-width:1024px){
  .topbar-inner{min-height:60px}
  .actions{display:none}
  .menu-toggle{display:inline-flex}

  .nav{
    position:fixed; inset-block:0; right:0; width:min(86vw,380px);
    background:#fff; box-shadow:var(--shadow); z-index:var(--z-nav);
    display:flex; flex-direction:column; align-items:stretch;
    padding:20px; gap:8px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .nav .link{padding:14px 8px; border-radius:10px; white-space:normal}
  .nav .link:active{background:var(--bg)}
  .nav-mobile-cta{margin-top:auto; display:grid; gap:10px; padding-top:12px; border-top:1px solid var(--line)}

  .nav.is-open{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  body.nav-open #navBackdrop[hidden]{display:block}
}

/* Küçük telefon düzeltmeleri */
@media (max-width:360px){ .brand-txt{font-size:1rem} }

/* Erişilebilir odak */
.link:focus-visible,.phone:focus-visible,.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:10px}

/* Animasyonları azalt tercihine saygı */
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
}


.reklam-modelleri .hero{
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  padding:60px 20px
}
.reklam-modelleri .hero .container{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap
}
.hero-text{max-width:500px}
.hero-text h1{font-size:2.2rem;margin-bottom:16px;color:#111827}
.hero-text p{font-size:1.1rem;color:#374151;line-height:1.6}
.hero-visual img{max-width:320px}

.reklam-modelleri .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;margin-top:40px
}
.reklam-modelleri .card{
  background:#fff;border:1px solid #e5e7eb;border-radius:20px;
  padding:24px;box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:transform .25s ease,box-shadow .25s ease
}
.reklam-modelleri .card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.1)
}
.card .icon{font-size:40px;color:#1a73e8;margin-bottom:12px}
.card h2{font-size:1.2rem;color:#111827;margin-bottom:8px}
.card p{font-size:.95rem;color:#4b5563;line-height:1.5}
.card ul{margin-top:10px;padding-left:20px;color:#374151;font-size:.9rem}
.card .preview{margin:12px 0;border-radius:12px;width:100%;object-fit:cover}


.reklam-modelleri .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;margin-top:32px
}
.reklam-modelleri .card{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;
  padding:20px;box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease
}
.reklam-modelleri .card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.1)
}
.reklam-modelleri .card .icon{
  font-size:36px;color:#1a73e8;margin-bottom:12px;display:block
}
.reklam-modelleri .card h2{
  font-size:1.2rem;margin-bottom:8px;color:#111827
}
.reklam-modelleri .card p{color:#4b5563;font-size:.95rem;line-height:1.5}
.reklam-modelleri .card ul{margin-top:8px;padding-left:18px;color:#374151;font-size:.9rem}


.ads-card[id]::before{
  content:"";
  display:block;
  height:80px; /* header yüksekliği */
  margin-top:-80px;
  visibility:hidden;
}