/* =====================================================================
   esya.css — /sell/<slug> + /prices (2026-10-17). Sitenin yuzeyleri ustune; koyu tema token'larla. Hover yok.
   ===================================================================== */
.es-sayfa .kayar { padding-bottom:30px; }
.es-ic { display:grid; gap:14px; max-width:1060px; margin:0 auto; }
.es-ic h2 { margin:0 0 12px; font-size:17px; font-weight:850; letter-spacing:-.02em; }
.es-ic h2 small { font-size:12px; font-weight:700; color:var(--ink-3); margin-left:6px; }
.es-yol { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3); margin:4px 2px 0; }
.es-yol a { color:var(--ink-2); text-decoration:none; font-weight:700; } .es-yol b { color:var(--ink); }

.es-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:300px minmax(0,1fr); gap:26px; align-items:center; padding:26px; border-radius:26px; animation:dvEs .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dvEs { from { opacity:0; transform:translateY(12px); } }
.es-gorsel { position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:22px;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--nadir) 30%, transparent), transparent 70%), color-mix(in srgb, var(--nadir) 8%, var(--buz, #EEF3FB));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--nadir) 35%, transparent); }
.es-gorsel img { position:relative; z-index:1; width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(15,23,42,.3)); animation:esSuz 4s ease-in-out infinite; }
@keyframes esSuz { 50% { transform:translateY(-8px) rotate(-3deg); } }
.es-isik { position:absolute; inset:14%; border-radius:50%; background:conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--nadir) 45%, transparent), transparent 40%); filter:blur(14px); animation:esDon 7s linear infinite; }
@keyframes esDon { to { transform:rotate(360deg); } }
.es-bilgi { display:grid; gap:12px; justify-items:start; min-width:0; }
.es-cipler { display:flex; flex-wrap:wrap; gap:6px; }
.es-cipler em { font-style:normal; font-size:12px; font-weight:800; padding:4px 10px; border-radius:8px; color:var(--ink-2); background:var(--buz, rgba(15,42,86,.06)); }
.es-cipler .es-nadir { color:#fff; background:var(--nadir); }
.es-cipler .es-gunun { color:#B45309; background:rgba(245,158,11,.15); }
.es-bilgi h1 { margin:0; font-size:clamp(28px, 4vw, 40px); line-height:1.05; font-weight:850; letter-spacing:-.045em; }
.es-bilgi h1 small { display:block; font-size:.5em; font-weight:750; letter-spacing:-.02em; color:var(--ink-3); margin-top:4px; }
.es-bilgi p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:520px; }
.es-kapali { padding:10px 14px; border-radius:12px; color:#B45309 !important; background:rgba(245,158,11,.12); }
.es-fiyat { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 22px; }
.es-fiyat span { display:grid; gap:2px; }
.es-fiyat small { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.es-fiyat b { font-size:38px; font-weight:900; letter-spacing:-.05em; line-height:1; color:#15803D; font-variant-numeric:tabular-nums; }
html[data-tema="koyu"] .es-fiyat b { color:#4ADE80; }
.es-fiyat .es-rbx { font-size:20px; color:var(--ink); } .es-deg b { font-size:17px; } .es-deg.yukari b { color:#15803D; } .es-deg.asagi b { color:#B45309; }
.es-dugmeler { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.es-btn { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 18px; border-radius:13px; font-size:14.5px; font-weight:800; text-decoration:none; color:var(--ink);
  background:var(--buz, #EEF3FB); box-shadow:inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.1)); }
.es-btn:active { transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(15,42,86,.2); }
.es-btn.ana { color:#fff; background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6); box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 12px 24px -12px rgba(37,99,235,.9); }

.es-kutu { padding:20px 22px; border-radius:22px; }
.es-grafik { display:block; width:100%; height:160px; overflow:visible; }
.es-alan { fill:url(#esg); } .es-cizgi { fill:none; stroke:#3B82F6; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:2000; stroke-dashoffset:2000; animation:esCiz 1.6s .2s cubic-bezier(.2,.8,.2,1) forwards; vector-effect:non-scaling-stroke; }
@keyframes esCiz { to { stroke-dashoffset:0; } }
.es-nokta { fill:#3B82F6; stroke:#fff; stroke-width:3; vector-effect:non-scaling-stroke; animation:t3Nabiz 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes t3Nabiz { 50% { transform:scale(1.3); } }
.es-adim { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; counter-reset:es; }
.es-adim li { counter-increment:es; display:grid; gap:4px; padding:14px 16px 16px; border-radius:16px; background:var(--buz, rgba(37,99,235,.05)); }
.es-adim li::before { content:counter(es); width:30px; height:30px; display:grid; place-items:center; margin-bottom:4px; border-radius:10px; font-weight:900; color:#fff; background:linear-gradient(150deg,#1E40AF,#3B82F6); }
.es-adim b { font-size:14px; } .es-adim span { font-size:13px; line-height:1.5; color:var(--ink-2); }
.es-sss { border-top:1px solid var(--cizgi, rgba(15,42,86,.08)); } .es-sss:first-of-type { border-top:0; }
.es-sss summary { cursor:pointer; padding:13px 2px; font-size:14px; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:10px; }
.es-sss summary::-webkit-details-marker { display:none; }
.es-sss summary::after { content:"+"; font-size:18px; line-height:1; color:var(--ink-3); transition:transform .25s; } .es-sss[open] summary::after { transform:rotate(45deg); }
.es-sss p { margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }

.es-benzer h2 { margin-left:4px !important; }
.es-izgara { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.es-kart { display:grid; justify-items:center; gap:3px; padding:12px 10px 14px; border-radius:18px; text-align:center; text-decoration:none; color:var(--ink); background:var(--cam);
  box-shadow:inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.08)); }
.es-kart:active { transform:translateY(1px); }
.es-kart[hidden] { display:none; }
.es-kart-g { width:100%; aspect-ratio:1.25; display:grid; place-items:center; border-radius:13px; margin-bottom:6px; background:radial-gradient(circle, color-mix(in srgb, var(--nadir) 22%, transparent), transparent 70%); }
.es-kart-g img { width:72%; height:72%; object-fit:contain; }
.es-kart b { font-size:13px; font-weight:800; line-height:1.25; } .es-kart small { font-size:11.5px; color:var(--ink-3); } .es-kart em { font-style:normal; font-size:14px; font-weight:900; color:#15803D; margin-top:2px; }
html[data-tema="koyu"] .es-kart em { color:#4ADE80; }

.es-ust { display:grid; gap:12px; margin:6px 2px 4px; } .es-ust h1 { margin:0; font-size:clamp(28px, 4vw, 38px); font-weight:850; letter-spacing:-.045em; } .es-ust p { margin:0; max-width:680px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.es-ara { display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:14px; background:var(--cam); box-shadow:inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.1)); max-width:520px; }
.es-ara svg { width:18px; height:18px; color:var(--ink-3); flex:none; } .es-ara input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:15px; color:var(--ink); }
.es-filtre { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.es-filtre button { flex:none; height:36px; padding:0 12px; border:0; border-radius:10px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; color:var(--ink-2); background:var(--buz, #EEF3FB); }
.es-filtre button i { font-style:normal; font-size:11px; color:var(--ink-3); margin-left:3px; } .es-filtre button.on { color:#fff; background:#2563EB; } .es-filtre button.on i { color:rgba(255,255,255,.75); }
.es-bos { text-align:center; color:var(--ink-3); padding:20px; }

@media (max-width:760px) {
  .es-hero { grid-template-columns:1fr; padding:18px 16px 20px; gap:16px; }
  .es-gorsel { width:min(240px, 70%); justify-self:center; }
  .es-bilgi { justify-items:stretch; } .es-dugmeler { display:grid; } .es-fiyat b { font-size:34px; }
  .es-adim { grid-template-columns:1fr; } .es-kutu { padding:16px; }
  .es-izgara { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { .es-sayfa *, .es-sayfa *::after { animation:none !important; } .es-cizgi { stroke-dashoffset:0; } }