/* ============================================================
   ASAY OTOMOTİV — Stil Sistemi (E-ticaret teması)
   Açık, ürün odaklı, logoya uygun amber/kırmızı vurgular.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#1b1c20;
  --ink-soft:#3a3c43;
  --paper:#ffffff;
  --paper-2:#f6f4ef;
  --paper-3:#efece3;
  --amber:#f2a531;
  --amber-deep:#dd8f1e;
  --amber-ink:#7a4c0a;
  --rust:#d3491f;
  --whatsapp:#25d366;
  --whatsapp-deep:#1fb959;
  --steel:#8a8f98;
  --steel-dark:#5c616b;
  --line:rgba(27,28,32,.1);
  --line-strong:rgba(27,28,32,.16);
  --line-on-dark:rgba(255,255,255,.14);
  --line-on-dark-strong:rgba(255,255,255,.26);
  --shadow-sm: 0 2px 10px -4px rgba(20,20,20,.12);
  --shadow-md: 0 16px 32px -16px rgba(20,20,20,.22);
  --shadow-lg: 0 30px 60px -24px rgba(20,20,20,.32);
  --font-display:'Sora', sans-serif;
  --font-body:'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --container: 1240px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; line-height:1.06; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }
@media (max-width:600px){ .wrap{ padding:0 18px; } }
@media (max-width:400px){ .wrap{ padding:0 14px; } }
body.pmodal-lock{ overflow:hidden; }

/* ---------- Texture ---------- */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:14px; color:var(--ink); }
.brand-mark{ height:50px; width:auto; display:block; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; padding-left:14px; border-left:1px solid var(--line-strong); }
.brand-txt strong{ font-family:var(--font-display); font-size:19px; letter-spacing:-.01em; font-weight:800; color:var(--ink); }
.brand-txt span{ font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.04em; color:var(--steel-dark); text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:8px; }
.nav a{
  font-family:var(--font-body); font-size:14.5px; font-weight:600;
  color:var(--ink-soft); position:relative; padding:10px 14px; border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
.nav a:hover{ background:var(--paper-2); color:var(--ink); }
.nav a.active{ color:var(--ink); background:var(--paper-2); }
.nav .cta{
  background:var(--whatsapp); color:#fff !important; padding:10px 18px; border-radius:999px;
  display:flex; align-items:center; gap:8px; margin-left:6px; box-shadow:var(--shadow-sm);
}
.nav .cta:hover{ background:var(--whatsapp-deep); }
.nav .cta svg{ width:16px; height:16px; }

.burger{ display:none; background:var(--paper-2); border:1px solid var(--line); color:var(--ink); padding:9px 12px; border-radius:10px; font-size:16px; }

@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; top:76px; left:0; right:0; z-index:49;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    flex-direction:column; align-items:stretch; gap:2px; padding:10px;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav.open{ max-height:420px; overflow-y:auto; }
  .nav a{ width:100%; padding:14px 16px; }
  .nav .cta{ margin:8px 4px 4px; justify-content:center; }
}

@media (max-width:560px){
  .brand-txt{ display:none; }
  .brand{ gap:10px; }
  .brand-mark{ height:38px; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-size:15px; font-weight:700;
  padding:14px 24px; border-radius:999px; border:1px solid transparent; transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; }
.btn-whatsapp:hover{ background:var(--whatsapp-deep); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ border-color:var(--line-on-dark-strong); color:#fff; background:transparent; }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-sm{ padding:9px 15px; font-size:13px; }
.btn svg{ width:16px; height:16px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding:88px 0 60px;
}
.hero-bg{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(27,28,32,.85) 0%, rgba(27,28,32,.94) 55%, var(--ink) 100%),
             url('https://images.unsplash.com/photo-1767681092416-bccf9410bda4?w=1900&q=70&auto=format&fit=crop&fm=jpg') center/cover no-repeat;
}
.hero-inner{ position:relative; z-index:2; }
.eyebrow{
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--amber); display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  background:rgba(242,165,49,.13); border:1px solid rgba(242,165,49,.3); padding:7px 14px; border-radius:999px;
}
.hero h1{
  font-size:clamp(36px,5.6vw,68px); max-width:820px; color:#fff; letter-spacing:-.02em;
}
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero-sub{
  max-width:560px; margin-top:20px; font-size:17px; color:#fff; opacity:.75;
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
@media (max-width:560px){
  .hero{ padding:64px 0 44px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
}

.hero-search{
  margin-top:40px; max-width:640px; background:#fff; border-radius:999px; padding:6px;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-lg);
}
.hero-search svg{ width:19px; height:19px; color:var(--steel); flex:none; margin-left:12px; }
.hero-search input{
  border:none; outline:none; flex:1; font-family:var(--font-body); font-size:15px; color:var(--ink); background:transparent; min-width:0;
}
.hero-search input::placeholder{ color:var(--steel); }
.hero-search button{
  background:var(--ink); color:#fff; border:none; border-radius:999px; padding:13px 22px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px; flex:none;
}
.hero-search button:hover{ background:#000; }

.stat-strip{
  position:relative; z-index:2; margin-top:56px;
  display:flex; gap:0; flex-wrap:wrap;
}
.stat-strip div{ padding:0 30px 0 0; margin-right:30px; border-right:1px solid var(--line-on-dark); }
.stat-strip div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.stat-num{ font-family:var(--font-display); font-size:32px; font-weight:800; color:#fff; line-height:1; }
.stat-lbl{ font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#fff; opacity:.55; margin-top:6px; }

/* ---------- Section shell ---------- */
.section{ padding:88px 0; position:relative; }
.section.tight{ padding:60px 0; }
.section.on-tint{ background:var(--paper-2); }
@media (max-width:760px){
  .section{ padding:52px 0; }
  .section.tight{ padding:38px 0; }
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:40px; flex-wrap:wrap;
}
.tag{
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--rust); display:flex; align-items:center; gap:8px; margin-bottom:14px; text-transform:uppercase;
}
.tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rust); display:inline-block; }
.section-head h2{ font-size:clamp(26px,3.6vw,42px); }
.section-head p{ max-width:420px; color:var(--steel-dark); font-size:15px; }

/* ---------- Featured products (home) ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1080px){ .feat-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .feat-grid{ grid-template-columns:repeat(2,1fr); gap:12px;} }

/* ---------- Category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.cat-card{
  position:relative; background:var(--paper); border-radius:var(--radius); overflow:hidden; display:block;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-card.in{ opacity:1; transform:translateY(0); }
.cat-card:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); transform:translateY(-3px); }
.cat-card-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.cat-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.cat-card:hover .cat-card-media img{ transform:scale(1.07); }
.cat-count{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--font-body); font-size:11px; color:var(--ink); background:#fff; padding:5px 10px;
  font-weight:700; border-radius:999px; box-shadow:var(--shadow-sm);
}
.cat-body{ padding:14px 16px 18px; }
.cat-body h3{ font-size:15.5px; font-weight:700; line-height:1.25; font-family:var(--font-body); letter-spacing:0; }
.cat-body span{
  font-family:var(--font-body); font-size:12.5px; color:var(--rust); font-weight:700;
  display:flex; align-items:center; gap:5px; margin-top:8px;
}

@media (max-width:980px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat-strip{ display:grid; grid-template-columns:1fr 1fr; gap:18px 0; margin-top:36px; }
  .stat-strip div{ border-right:none; margin-right:0; padding-right:0; }
}

/* ---------- About / split ---------- */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.split-media{ position:relative; }
.split-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.split-num{
  position:absolute; bottom:-20px; right:-16px; background:var(--ink); color:var(--amber);
  font-family:var(--font-display); font-size:52px; font-weight:800; padding:12px 24px; line-height:1; border-radius:var(--radius);
}
.lede{ font-size:21px; line-height:1.5; color:var(--ink); margin-bottom:18px; font-weight:700; letter-spacing:-.01em; }
.body-txt{ color:var(--steel-dark); font-size:15.5px; max-width:520px; }
.body-txt + .body-txt{ margin-top:14px; }
.mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.mini-item{ background:var(--paper-2); border-radius:var(--radius-sm); padding:18px; }
.mini-item h4{ font-size:14.5px; font-family:var(--font-body); font-weight:700; }
.mini-item p{ font-size:13.5px; color:var(--steel-dark); margin-top:6px; }

@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:44px; } }
@media (max-width:480px){
  .mini-grid{ grid-template-columns:1fr; gap:12px; }
  .split-num{ font-size:34px; padding:9px 18px; bottom:-14px; right:-8px; }
}

/* ---------- Brand marquee ---------- */
.marquee-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--paper-2); }
.marquee{ display:flex; gap:56px; padding:22px 0; width:max-content; animation:scroll 38s linear infinite; }
.marquee span{ font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--steel-dark); white-space:nowrap; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Dark CTA band ---------- */
.cta-band{ background:var(--ink); color:#fff; position:relative; overflow:hidden; border-radius:var(--radius-lg); }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:56px 40px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(24px,3.4vw,38px); max-width:520px; color:#fff; }
.cta-band h2 em{ color:var(--amber); font-style:normal; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:#fff; padding:64px 0 0; margin-top:20px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-on-dark); }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.foot-brand .brand-mark{ height:58px; width:auto; display:block; }
.foot-brand strong{ font-family:var(--font-display); font-size:20px; }
.foot-col h5{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; }
.foot-col p, .foot-col a{ display:block; font-size:14px; color:#fff; opacity:.72; margin-bottom:10px; line-height:1.6; }
.foot-col a:hover{ opacity:1; color:var(--amber); }
.foot-bottom{ display:flex; justify-content:space-between; padding:20px 0; font-family:var(--font-body); font-size:12.5px; opacity:.5; flex-wrap:wrap; gap:10px; }

@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } .cta-band .wrap{ flex-direction:column; align-items:flex-start; padding:40px 26px;} }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } .cta-band .wrap{ padding:32px 20px; } .cta-band .wrap > div{ width:100%; } .cta-band .btn{ width:100%; justify-content:center; } }

/* ============================================================
   KATALOG SAYFASI
   ============================================================ */
.cat-hero{ background:var(--ink); color:#fff; padding:130px 0 40px; position:relative; }
.cat-hero h1{ font-size:clamp(32px,4.6vw,54px); color:#fff; }
.cat-hero p{ color:#fff; opacity:.68; max-width:520px; margin-top:14px; font-size:15px; }
@media (max-width:760px){ .cat-hero{ padding:100px 0 28px; } }

.filter-bar{
  position:sticky; top:77px; z-index:40; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.filter-inner{ display:flex; gap:14px; align-items:center; padding:16px 0; flex-wrap:wrap; }
@media (max-width:760px){
  .filter-bar{ position:static; top:auto; }
  .filter-inner{ padding:12px 0; gap:10px; }
  .search-box{ flex:1 1 100%; }
  .cat-select, #brand-select{ flex:1 1 100%; min-width:0; width:100%; }
  .result-count{ flex:1 1 100%; text-align:left; }
}
.search-box{
  flex:1 1 320px; display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:999px;
  padding:12px 16px; background:var(--paper-2);
}
.search-box svg{ width:17px; height:17px; color:var(--steel); flex:none; }
.search-box input{
  border:none; outline:none; flex:1; font-family:var(--font-body); font-size:14.5px; background:transparent; color:var(--ink);
}
.search-box input::placeholder{ color:var(--steel); }
.cat-select{
  border:1px solid var(--line-strong); background:var(--paper-2); padding:12px 16px; font-family:var(--font-body);
  font-size:13.5px; font-weight:600; color:var(--ink); min-width:230px; border-radius:999px;
}
.result-count{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--steel-dark); white-space:nowrap; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 0 0; }
@media (max-width:760px){
  .chips{ flex-wrap:nowrap; overflow-x:auto; padding:12px 0 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }
}
.chip{
  font-family:var(--font-body); font-size:13px; font-weight:600;
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 15px; color:var(--steel-dark); cursor:pointer;
  transition:all .15s ease; background:#fff;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.catalog-body{ padding:36px 0 100px; }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcard{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
.pcard.in{ opacity:1; transform:translateY(0); }
.pcard:hover{ box-shadow:var(--shadow-md); border-color:var(--line-strong); transform:translateY(-2px); }
.pcard:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.pcard-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pcard:hover .pcard-media img{ transform:scale(1.06); }
.pcard-cat{
  position:absolute; left:10px; top:10px; background:#fff; color:var(--ink); font-family:var(--font-body);
  font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.pcard-body{ padding:15px 15px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard-name{ font-size:14px; font-weight:700; line-height:1.35; color:var(--ink); font-family:var(--font-body); }
.pcard-meta{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--steel-dark); }
.pcard-brand{ font-weight:700; color:var(--ink-soft); }
.pcard-code{ opacity:.7; font-family:var(--font-mono); font-size:10.5px; }
.pcard-cta{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:13px; font-weight:700;
  color:#fff; background:var(--whatsapp); padding:10px 14px; border-radius:999px; transition:background .15s ease;
}
.pcard-cta:hover{ background:var(--whatsapp-deep); }
.pcard-cta svg{ width:15px; height:15px; }

@media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .product-grid{ grid-template-columns:1fr 1fr; gap:10px; } .pcard-body{ padding:11px 11px 12px; gap:8px; } .pcard-name{ font-size:12.5px; } }

.load-more-wrap{ display:flex; justify-content:center; margin-top:44px; }
.empty-state{ text-align:center; padding:90px 20px; color:var(--steel-dark); font-family:var(--font-body); font-size:14px; }

/* ============================================================
   İLETİŞİM SAYFASI
   ============================================================ */
.contact-hero{ background:var(--ink); color:#fff; padding:130px 0 70px; }
.contact-hero h1{ font-size:clamp(32px,4.6vw,54px); max-width:760px; color:#fff; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-panel{ background:var(--paper); padding:40px; border-radius:var(--radius-lg); border:1px solid var(--line); }
.contact-panel.dark{ background:var(--ink); color:#fff; padding:0; overflow:hidden; }
.contact-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-row:first-child{ padding-top:0; }
.contact-row:last-of-type{ border-bottom:none; }
.contact-row svg{ width:21px; height:21px; color:var(--rust); flex:none; margin-top:2px; }
.contact-row h4{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rust); margin-bottom:7px; }
.contact-row p, .contact-row a{ font-size:15.5px; line-height:1.6; }
.contact-row a.wa-link{ color:var(--whatsapp-deep); font-weight:700; }
.map-frame{ width:100%; height:100%; min-height:420px; border:none; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .contact-hero{ padding:100px 0 44px; }
  .contact-panel{ padding:24px; }
  .map-frame{ min-height:280px; }
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:var(--whatsapp);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform .18s ease, background .18s ease;
}
.wa-float:hover{ background:var(--whatsapp-deep); transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; color:#fff; }

/* ---------- Reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   ÜRÜN DETAY MODALI
   ============================================================ */
.pmodal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(20,20,22,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.pmodal-overlay.open{ opacity:1; pointer-events:auto; }
.pmodal{
  background:#fff; border-radius:var(--radius-lg); max-width:560px; width:100%; max-height:88vh; overflow-y:auto;
  position:relative; box-shadow:var(--shadow-lg); transform:translateY(18px) scale(.98); transition:transform .22s ease;
}
.pmodal-overlay.open .pmodal{ transform:translateY(0) scale(1); }
.pmodal-close{
  position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.pmodal-close:hover{ background:#fff; border-color:var(--ink); }
.pmodal-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.pmodal-media img{ width:100%; height:100%; object-fit:cover; }
.pmodal-cat{
  position:absolute; left:16px; top:16px; background:#fff; color:var(--ink); font-family:var(--font-body);
  font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.pmodal-body{ padding:24px 26px 28px; }
.pmodal-body h3{ font-size:20px; line-height:1.3; font-family:var(--font-body); font-weight:800; margin-bottom:18px; }
.pmodal-rows{ display:flex; flex-direction:column; margin-bottom:22px; border-top:1px solid var(--line); }
.pmodal-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.pmodal-row span:first-child{ color:var(--steel-dark); font-weight:600; }
.pmodal-row span:last-child{ font-weight:700; color:var(--ink); text-align:right; }
.pmodal-row span.mono{ font-family:var(--font-mono); font-size:12px; font-weight:600; }
.pmodal-body .btn{ width:100%; justify-content:center; }

@media (max-width:560px){
  .pmodal-overlay{ padding:0; align-items:flex-end; }
  .pmodal{ max-width:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; max-height:92vh; }
  .pmodal-overlay.open .pmodal{ transform:translateY(0); }
  .pmodal-body{ padding:20px 18px 22px; }
  .pmodal-body h3{ font-size:17px; }
}

/* ---------- Scrollbar ---------- */
::selection{ background:var(--amber); color:var(--ink); }