
/* ================================================================
   Erenköy Bilgisayar — UI3D modern arayüz katmanı (2026-08)
   style.css'ten SONRA yüklenir; tasarım dilini yeniler.
   ================================================================ */

/* ---------- 1. Tasarım jetonları ---------- */
:root, html[data-theme="light"]{
  --bg:#f2f6fc; --bg2:#ffffff; --surface:#ffffff;
  --surface2:#f7fafe;
  --border:rgba(13,26,51,.10); --border2:rgba(13,26,51,.06);
  --txt:#0d1728; --muted:#5a6b86;
  --accent:#0b74e5; --accent2:#7c3aed; --accent3:#06b6d4;
  --wa:#25d366;
  --radius:20px; --radius-sm:14px; --radius-lg:28px;
  --shadow:0 18px 45px -18px rgba(13,38,86,.28);
  --shadow-lg:0 40px 90px -30px rgba(13,38,86,.38);
  --glow:0 0 46px rgba(11,116,229,.14);
  --ring:0 0 0 3px rgba(11,116,229,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  --bg:#050810; --bg2:#0a1020; --surface:rgba(255,255,255,.045);
  --surface2:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.06);
  --txt:#e8eefb; --muted:#93a3bd;
  --accent:#38bdf8; --accent2:#a78bfa; --accent3:#22d3ee;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-lg:0 50px 110px -35px rgba(0,0,0,.85);
  --glow:0 0 52px rgba(56,189,248,.20);
  --ring:0 0 0 3px rgba(56,189,248,.25);
}

/* ---------- 2. Sahne: canlı arka plan ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:-25vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(11,116,229,.16), transparent 62%),
    radial-gradient(34vmax 34vmax at 84% 8%,  rgba(124,58,237,.14), transparent 62%),
    radial-gradient(40vmax 40vmax at 62% 88%, rgba(6,182,212,.13), transparent 64%);
  animation:ui3dDrift 34s ease-in-out infinite alternate;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(40vmax 40vmax at 16% 10%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(36vmax 36vmax at 86% 6%,  rgba(167,139,250,.18), transparent 62%),
    radial-gradient(44vmax 44vmax at 60% 92%, rgba(34,211,238,.14), transparent 64%);
}
@keyframes ui3dDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2.5vmax,-2vmax,0) scale(1.06); }
  100%{ transform:translate3d(-2vmax,2.5vmax,0) scale(1.02); }
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border2) 1px,transparent 1px),linear-gradient(90deg,var(--border2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 72%);
}

/* ---------- 3. Tipografi ---------- */
h1,h2,h3,h4{ letter-spacing:-.022em; }
h1{ font-weight:800; }
.sec-head h2, .psvc-head h2, .pwhy-head h2, .pblog-head h2, .ebshs-head h2, .pfaq-head h2{
  font-size:clamp(1.7rem,3.1vw,2.55rem); letter-spacing:-.03em;
}
.grad-txt, .pilan-grad, .psvc-grad{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent3) 44%,var(--accent2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chip, .psvc-kick, .pwhy-kick, .pblog-kick, .phero-kick, .ebshs-kick, .pfaq-kick,
.phome-contact-kick, .pilan-home-kick{
  color:var(--accent) !important; -webkit-text-fill-color:var(--accent) !important;
  text-shadow:none !important;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:999px; font-size:.8rem; font-weight:700;
  letter-spacing:.5px; text-transform:none;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  backdrop-filter:blur(8px);
}

/* ---------- 4. Butonlar ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--radius-sm); font-weight:700; letter-spacing:.1px;
  padding:12px 24px;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease);
}
.btn:hover::after{ left:130%; }
.btn-primary, .phero-btn-p, .pilan-btn-p{
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent3) 52%,var(--accent2) 118%);
  color:#fff !important; border:0;
  box-shadow:0 14px 34px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-primary:hover, .phero-btn-p:hover, .pilan-btn-p:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 22px 48px -14px color-mix(in srgb, var(--accent) 85%, transparent);
}
.btn-ghost{
  background:var(--surface) !important; color:var(--txt) !important;
  border:1px solid var(--border); backdrop-filter:blur(12px);
}
.phero-btn-g, .pilan-btn-g{ border:1px solid var(--border); }
.btn-ghost:hover, .phero-btn-g:hover, .pilan-btn-g:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 16px 34px -18px rgba(13,38,86,.5);
}
.btn-wa{ background:linear-gradient(120deg,#1fb455,#25d366); color:#fff !important; }
.btn-lg{ padding:16px 32px; font-size:1.03rem; }

/* Mıknatıs efekti (JS --mgx/--mgy verir) */
.ui3d-mag{ transform:translate3d(var(--mgx,0),var(--mgy,0),0); }

/* ---------- 5. Üst çubuk + başlık ---------- */
.topbar{
  background:color-mix(in srgb, var(--bg2) 60%, transparent);
  border-bottom:1px solid var(--border2);
  backdrop-filter:blur(10px);
}
.site-header{
  background:color-mix(in srgb, var(--bg2) 72%, transparent) !important;
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--border2);
  transition:padding .35s var(--ease), background .35s, box-shadow .35s, border-color .35s;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg2) 90%, transparent) !important;
  box-shadow:0 10px 40px -20px rgba(13,38,86,.55);
}
.header-in{ padding:12px 0; gap:16px; transition:padding .35s var(--ease); }
.site-header.scrolled .header-in{ padding:7px 0; }
.brand img{ border-radius:12px; transition:transform .4s var(--ease); }
.brand:hover img{ transform:rotate(-6deg) scale(1.06); }

.nav{ flex-wrap:nowrap; align-items:center; }
.nav > a{
  position:relative; white-space:nowrap;
  padding:8px 11px; font-size:.9rem; font-weight:600; border-radius:11px;
  transition:color .22s, background .22s;
}
.nav > a::before{
  content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav > a:hover::before, .nav > a.on::before{ transform:scaleX(1); }
.nav > a:hover, .nav > a.on{ background:color-mix(in srgb, var(--accent) 10%, transparent); }

/* Açılır "Daha fazla" menüsü */
.nav-more{ position:relative; }
.nav-more > button{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:none; border:0; cursor:pointer; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--muted); padding:8px 11px; border-radius:11px; transition:.22s;
}
.nav-more > button:hover, .nav-more.open > button{ color:var(--txt); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-more-panel{
  position:absolute; top:calc(100% + 12px); right:0; min-width:250px; padding:10px;
  display:grid; gap:2px; border-radius:18px; z-index:120;
  background:color-mix(in srgb, var(--bg2) 96%, transparent);
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-more.open .nav-more-panel{ opacity:1; visibility:visible; transform:none; }
.nav-more-panel a{
  display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px;
  color:var(--txt); font-size:.92rem; font-weight:600; transition:.2s;
}
.nav-more-panel a:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); transform:translateX(3px); }
.nav-more-panel small{ display:block; color:var(--muted); font-weight:500; font-size:.76rem; }
@media (max-width:1024px){
  .nav-more{ display:block; width:min(340px,86vw); }
  .nav-more > button{ display:none; }
  .nav-more-panel{ position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0; min-width:0;
    display:grid; gap:6px; backdrop-filter:none; }
  .nav-more-panel a{ justify-content:center; border:1px solid var(--border2); }
  .nav-more-panel small{ display:none; }
}

.theme-toggle{
  width:40px; height:40px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); color:var(--txt);
  transition:transform .35s var(--ease), box-shadow .3s, background .3s;
}
.theme-toggle:hover{ transform:translateY(-2px) rotate(-12deg); box-shadow:var(--shadow); }

/* Okuma ilerleme çubuğu */
#ui3dProgress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9999;
  background:linear-gradient(90deg,var(--accent),var(--accent3),var(--accent2));
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:width .12s linear;
}
/* ---------- 6. Kart sistemi: cam + 3B ---------- */
.glass, .card, .why-item, .stat, .t-card, .side-box, .svc-body,
.psvc-card, .pwhy-item, .pproc-step, .pblog-card, .pilan-card,
.ebshs-card, .pstat, .pdaily-card, .pareas-in, .g-item, .faq{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
html[data-theme="light"] .glass,
html[data-theme="light"] .card,
html[data-theme="light"] .why-item,
html[data-theme="light"] .psvc-card,
html[data-theme="light"] .pwhy-item,
html[data-theme="light"] .pproc-step,
html[data-theme="light"] .pblog-card,
html[data-theme="light"] .pilan-card,
html[data-theme="light"] .ebshs-card,
html[data-theme="light"] .t-card,
html[data-theme="light"] .pstat{ background:rgba(255,255,255,.92); }

/* Kartın üstünde ince ışık çizgisi */
.psvc-card, .pwhy-item, .pproc-step, .pblog-card, .pilan-card, .ebshs-card,
.card, .why-item, .t-card, .pstat{ position:relative; overflow:hidden; }
.psvc-card::before, .pwhy-item::before, .pproc-step::before, .pblog-card::before,
.pilan-card::before, .ebshs-card::before, .card::before, .why-item::before,
.t-card::before, .pstat::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--accent) 70%, transparent),transparent);
  opacity:0; transition:opacity .4s;
}
.psvc-card:hover::before, .pwhy-item:hover::before, .pproc-step:hover::before,
.pblog-card:hover::before, .pilan-card:hover::before, .ebshs-card:hover::before,
.card:hover::before, .why-item:hover::before, .t-card:hover::before, .pstat:hover::before{ opacity:1; }

/* JS ile eklenen 3B sarmalayıcı */
.ui3d-tilt{ transform-style:preserve-3d; will-change:transform; }
.ui3d-tilt:hover{ box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 40%, transparent); z-index:3; }
.ui3d-glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.20), transparent 48%);
}
html[data-theme="light"] .ui3d-glare{ background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.75), transparent 46%); }
.ui3d-tilt:hover .ui3d-glare{ opacity:1; }

/* ---------- 7. Bölümler ve başlıklar ---------- */
.section{ padding:clamp(56px,7vw,96px) 0; }
.sec-head{ margin-bottom:clamp(32px,4vw,54px); }
.sec-head p, .psvc-sub, .pblog-sub, .ebshs-sub, .pilan-home-sub{ color:var(--muted); font-size:1.02rem; }

/* Sayı şeridi */
.pstat, .stat{ padding:30px 18px; text-align:center; }
.pstat-n, .stat-num, .stat-suffix{
  font-family:'Sora',sans-serif; font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  background:linear-gradient(120deg,var(--accent),var(--accent3) 60%,var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pstat-ic, .stat-ic, .stat-ico{ filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent)); }

/* Süreç adımları */
.pproc-no{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; box-shadow:0 12px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* Hero */
.phero{ position:relative; perspective:1200px; }
.phero-glow, .phero-fx{ filter:blur(60px); }
.phero h1{ font-size:clamp(2.15rem,5vw,4rem); line-height:1.06; letter-spacing:-.035em; }
.phero-lead{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--muted); max-width:58ch; }
.phero-vcard{ box-shadow:var(--shadow-lg), var(--glow) !important; border-radius:var(--radius) !important; }
.ui3d-orb{
  position:absolute; border-radius:50%; filter:blur(72px); pointer-events:none; z-index:0;
  opacity:.34; animation:ui3dOrb 18s ease-in-out infinite;
}
html[data-theme="light"] .ui3d-orb{ opacity:.20; }
@keyframes ui3dOrb{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(34px,-40px,0) scale(1.18); } }
@media (max-width:900px){ .ui3d-orb{ display:none; } }

/* ---------- 8. Görünüme girme animasyonu ---------- */
.reveal, [data-rv]{ opacity:0; transform:translateY(28px); }
.reveal.vis, [data-rv].vis{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-rv="left"]{ transform:translateX(-34px); }
[data-rv="right"]{ transform:translateX(34px); }
[data-rv="zoom"]{ transform:scale(.94); }

/* ---------- 9. Formlar ---------- */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea{
  border-radius:var(--radius-sm) !important;
  border:1px solid var(--border) !important;
  background:var(--surface2) !important;
  color:var(--txt) !important;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:var(--ring) !important;
}
::placeholder{ color:color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---------- 10. Alt bilgi ---------- */
.site-footer{
  border-top:1px solid var(--border2);
  background:color-mix(in srgb, var(--bg2) 55%, transparent);
  backdrop-filter:blur(14px);
}
.f-col a{ transition:color .2s, padding-left .2s; }
.f-col a:hover{ color:var(--accent); padding-left:4px; }
.socials a{ border-radius:11px; border:1px solid var(--border); transition:.25s; }
.socials a:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); transform:translateY(-2px); }

.cta-band-in{
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2) 16%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:var(--shadow-lg);
}

/* ---------- 11. Reklam yuvaları ---------- */
.ebs-ad{ margin:22px auto; text-align:center; max-width:1180px; }
.ebs-ad-ust{ margin:0 auto; padding:6px 0; }
.ebs-ad ins, .ebs-ad iframe, .ebs-ad img{ max-width:100%; }
.ebs-ad-box{
  border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:14px; background:var(--surface2);
}
.ebs-ad-label{ display:block; font-size:.66rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }

/* Öne çıkarılmış ilan / ürün rozeti */
.ebs-feat{
  position:relative;
  border-color:color-mix(in srgb, #f59e0b 55%, transparent) !important;
  box-shadow:0 0 0 1px color-mix(in srgb,#f59e0b 30%,transparent), 0 22px 50px -22px rgba(245,158,11,.5) !important;
}
.ebs-feat-badge{
  position:absolute; top:12px; left:12px; z-index:6;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.4px;
  background:linear-gradient(120deg,#f59e0b,#fbbf24); color:#2a1a00;
  box-shadow:0 8px 20px -8px rgba(245,158,11,.9);
}

/* ---------- 12. Yukarı çık ---------- */
#ui3dTop{
  position:fixed; right:22px; bottom:92px; z-index:199;
  width:46px; height:46px; border-radius:15px; cursor:pointer;
  display:grid; place-items:center; font-size:1.15rem;
  background:color-mix(in srgb, var(--bg2) 88%, transparent); color:var(--txt);
  border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
#ui3dTop.on{ opacity:1; visibility:visible; transform:none; }
#ui3dTop:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
@media (max-width:720px){ #ui3dTop{ bottom:140px; right:16px; } }

/* ---------- 13. Kaydırma çubuğu ---------- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:99px; border:3px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--accent) 70%, transparent); background-clip:content-box; }
::selection{ background:color-mix(in srgb, var(--accent) 32%, transparent); color:var(--txt); }

/* ---------- 14. Mobil ---------- */
@media (max-width:1024px){
  #mainNav.nav{
    background:color-mix(in srgb, var(--bg) 97%, transparent) !important;
    backdrop-filter:blur(22px);
  }
  #mainNav.nav a{ color:var(--txt) !important; border:1px solid var(--border2); }
  #mainNav.nav a.on{ color:var(--accent) !important; border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
}
@media (max-width:720px){
  .call-bar a{ font-size:.95rem; }
  .section{ padding:44px 0; }
}

/* ---------- 15. Hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,[data-rv]{ opacity:1 !important; transform:none !important; }
}
/* ---------- 16. Marka ve başlık düzeltmeleri ---------- */
.brand{ gap:12px; align-items:center; }
.brand img{
  width:46px !important; height:46px !important; flex:0 0 auto;
  object-fit:contain; filter:none;
}
.brand-txt{ min-width:0; }
.brand-txt strong{
  color:var(--txt) !important; -webkit-text-fill-color:var(--txt) !important;
  background:none !important; text-shadow:none !important;
  font-size:1.04rem; letter-spacing:-.02em; white-space:nowrap; line-height:1.15;
}
.brand-txt small{
  color:var(--muted) !important; -webkit-text-fill-color:var(--muted) !important;
  background:none !important; text-shadow:none !important; white-space:nowrap;
}
.phero h1, .phero-copy h1, .page-head h1, .sec-head h2,
.psvc-head h2, .pwhy-head h2, .pblog-head h2, .ebshs-head h2{ text-shadow:none !important; }
.phero-lead, .psvc-sub, .pblog-sub, .sec-head p{ text-shadow:none !important; }

/* Duyuru şeritleri biraz daha zarif */
.ebs-ticker-wrapper{ border-block:1px solid var(--border2); }
/* ---------- 17. Başlık gölgesi normalizasyonu ---------- */
h1, h2, h3, h4, .grad-txt, .phero h1, .page-head h1, .sec-head h2{ filter:none !important; }
html[data-theme="dark"] .phero h1,
html[data-theme="dark"] .page-head h1{ filter:drop-shadow(0 8px 26px rgba(56,189,248,.30)) !important; }

/* İlan kartları da cam + 3B sisteme dahil */
.listing-card{
  position:relative; border-radius:var(--radius); border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
html[data-theme="light"] .listing-card{ background:rgba(255,255,255,.93); }
.listing-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 38%, transparent); }
/* ---------- 18. Koyu tema: hero arka planı düzeltmesi ---------- */
html[data-theme="dark"] .phero{
  background:
    radial-gradient(1200px 620px at 82% -8%, rgba(56,189,248,.13) 0%, rgba(56,189,248,0) 62%),
    linear-gradient(160deg, #080f22 0%, #050810 65%) !important;
}
/* .phero-vcard ve .psvc-media beyaz kalir; uzerlerindeki yazi koyu renk tasarlanmis */

/* Açık temada hero biraz daha ferah */
html[data-theme="light"] .phero{
  background:
    radial-gradient(1200px 620px at 82% -8%, rgba(11,116,229,.10) 0%, rgba(11,116,229,0) 62%),
    linear-gradient(160deg, #ffffff 0%, #eef4fd 70%) !important;
}
/* ---------- 19. Koyu tema okunabilirlik düzeltmeleri ---------- */
/* Beyaz zeminli küçük kartlar: yazı her zaman koyu kalsın */
html[data-theme="dark"] .phero-vcard,
html[data-theme="dark"] .phero-vcard *,
html[data-theme="dark"] .psvc-badge,
html[data-theme="dark"] .ebshs-feat,
html[data-theme="dark"] .pdaily-cta{
  color:#0d1728 !important; -webkit-text-fill-color:#0d1728 !important;
}
html[data-theme="dark"] .phero-vcard small,
html[data-theme="dark"] .phero-vcard span{ color:#3b4a63 !important; -webkit-text-fill-color:#3b4a63 !important; }

/* Beyaz zeminli hafif butonlar (hero / ilan) koyu yazı ile okunur kalsın */
html[data-theme="dark"] .phero-btn-g{ color:#0d1728 !important; -webkit-text-fill-color:#0d1728 !important; }
/* ================================================================
   20. Ürünler sayfası (ebsp-*) — koyu tema uyumu
   Bu bileşenler yalnızca açık tema için tasarlanmıştı; koyu temada
   beyaz kart üzerine açık yazı çıkıyor ve okunmuyordu.
   ================================================================ */
html[data-theme="dark"] .ebsp-card,
html[data-theme="dark"] .ebsp-modal-content,
html[data-theme="dark"] .ebsp-qv-main,
html[data-theme="dark"] .ebsp-view-btn{
  background:#0e1626 !important;
  border-color:rgba(255,255,255,.10) !important;
  color:var(--txt) !important;
}
html[data-theme="dark"] .ebsp-img,
html[data-theme="dark"] .ebsp-detail,
html[data-theme="dark"] .ebsp-thumbs,
html[data-theme="dark"] .ebsp-qv-images,
html[data-theme="dark"] .ebsp-qv-detail,
html[data-theme="dark"] .ebsp-soldinfo{
  background:rgba(255,255,255,.045) !important;
  color:var(--txt) !important;
}
html[data-theme="dark"] .ebsp-more,
html[data-theme="dark"] .ebsp-soldbtn{
  background:rgba(255,255,255,.09) !important;
  color:var(--txt) !important;
  border-color:rgba(255,255,255,.14) !important;
}
html[data-theme="dark"] .ebsp-qv-prev,
html[data-theme="dark"] .ebsp-qv-next{
  background:rgba(15,23,42,.86) !important; color:#e8eefb !important;
}
html[data-theme="dark"] .ebsp-cat{
  background:rgba(56,189,248,.16) !important; color:#7dd3fc !important;
}
/* Kart içindeki koyu renge sabitlenmiş yazılar açık renge dönsün */
html[data-theme="dark"] .ebsp-card h3,
html[data-theme="dark"] .ebsp-card h2,
html[data-theme="dark"] .ebsp-title,
html[data-theme="dark"] .ebsp-name,
html[data-theme="dark"] .ebsp-short-desc,
html[data-theme="dark"] .ebsp-detail,
html[data-theme="dark"] .ebsp-detail *,
html[data-theme="dark"] .ebsp-qv-detail,
html[data-theme="dark"] .ebsp-qv-detail *,
html[data-theme="dark"] .ebsp-modal-content h2,
html[data-theme="dark"] .ebsp-modal-content h3,
html[data-theme="dark"] .ebsp-modal-content p,
html[data-theme="dark"] .ebsp-modal-content li{
  color:var(--txt) !important; -webkit-text-fill-color:var(--txt) !important;
}

/* ================================================================
   21. Açık mavi zeminli rozet/butonlarda okunabilirlik
   Beyaz yazı #38bdf8 üzerinde 2.1 kontrast veriyordu (okunmuyor).
   ================================================================ */
.btn-ilan-ver, .cat-tab.active, .listing-badge{
  color:#04202f !important; -webkit-text-fill-color:#04202f !important;
  font-weight:700;
}
/* ================================================================
   22. Otomatik kontrast koruması (ui3d.js sınıfları)
   Yalnızca tek temaya göre yazılmış başlık/gradyanları düzeltir.
   ================================================================ */
.ui3d-fixgrad{ background-image:linear-gradient(120deg,#0b74e5,#0891b2 45%,#7c3aed) !important; }
.ui3d-fixgrad-d{ background-image:linear-gradient(120deg,#7dd3fc,#38bdf8 45%,#c4b5fd) !important; }
.ui3d-fixtxt{ color:#0d1728 !important; -webkit-text-fill-color:#0d1728 !important; }
.ui3d-fixtxt-d{ color:#e8eefb !important; -webkit-text-fill-color:#e8eefb !important; }
/* ---------- 23. Açık temada zayıf kalan vurgu renkleri ---------- */
html[data-theme="light"] .ebsp-price,
html[data-theme="light"] .ebsp-cat,
html[data-theme="light"] .ebsp-kicker,
html[data-theme="light"] .pblog-date{
  color:#0b63c5 !important; -webkit-text-fill-color:#0b63c5 !important;
}
html[data-theme="light"] .stars,
html[data-theme="light"] .price-note{ color:#b45309 !important; }
/* ---------- 24. Açık mavi butonlarda beyaz yazı kontrastı ---------- */
/* #38bdf8 üzerine beyaz yazı 2.1 kontrast veriyor (WCAG AA 4.5 ister).
   Yazıyı beyaz bırakıp zemini bir ton koyulaştırıyoruz. */
.kbtn, .ksub, .sv-btn, .pgdl{
  background-color:#0369a1 !important;
  background-image:linear-gradient(120deg,#0b74e5,#0369a1) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.btn-wa-ilan{
  background-color:#128a41 !important;
  background-image:linear-gradient(120deg,#16a34a,#0f7a3a) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}