/* =============================================================
   YILDIZ PIRLANTA | KUYUMCUKENT
   Tasarım: serin inci zemin · mürekkep siyahı · şampanya altını
   İmza: sekiz köşeli yıldız (marka adından)
   ============================================================= */

:root{
    --ink:      #241B33;
    --ink-soft: #3B3050;
    --bg:       #F5F3F9;
    --card:     #FFFFFF;
    --line:     #E7E2F0;
    --mor:      #4B2489;
    --mor-koyu: #311856;
    --mor-acik: #E7DEF4;
    --lila:     #9B79D4;
    --muted:    #6E6880;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans:  "Jost", system-ui, -apple-system, sans-serif;
    --kenar: 2px;
    --w: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; line-height:1.15; }

/* ---- Yıldız imza ---- */
.yildiz,.marka-yildiz,.alt-yildiz,.ayirac-yildiz{ fill:var(--mor); }
.marka-yildiz{ width:26px; height:26px; flex:0 0 auto; }
.alt-yildiz{ width:30px; height:30px; }

/* ---- Bölüm ayıracı (yıldız + hairline) ---- */
.ayirac{
    display:flex; align-items:center; justify-content:center; gap:16px;
    margin:0 auto 44px; max-width:340px;
}
.ayirac::before,.ayirac::after{
    content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--mor-acik));
}
.ayirac::after{ background:linear-gradient(90deg,var(--mor-acik),transparent); }
.ayirac-yildiz{ width:16px; height:16px; }

/* =============================================================
   ÜST / MENÜ
   ============================================================= */
.ust{
    position:sticky; top:0; z-index:50;
    background:rgba(238,240,239,.92);
    backdrop-filter:saturate(1.2) blur(8px);
    border-bottom:1px solid var(--line);
}
.ust-ic{
    max-width:var(--w); margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.marka{ display:flex; align-items:center; gap:12px; }
.marka-yazi{ display:flex; flex-direction:column; line-height:1; }
.marka-ad{
    font-family:var(--serif); font-size:22px; font-weight:600;
    letter-spacing:.06em;
}
.marka-alt{
    font-family:var(--sans); font-size:10px; font-weight:400;
    letter-spacing:.42em; color:var(--mor); margin-top:4px;
}

.menu{ display:flex; align-items:center; gap:30px; }
.menu a{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft); position:relative; padding:6px 0;
}
.menu a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--mor); transition:right .3s ease;
}
.menu a:hover::after,.menu a.aktif::after{ right:0; }
.menu a.aktif{ color:var(--ink); }
.menu-wa{
    border:1px solid var(--mor); color:var(--mor)!important;
    padding:9px 16px!important; border-radius:2px;
    transition:background .25s,color .25s;
}
.menu-wa::after{ display:none; }
.menu-wa:hover{ background:var(--mor); color:#fff!important; }

/* mobil menü butonu */
.menu-ac{ display:none; }
.menu-ortu,.menu-kapat,.mobil-menu{ display:none; }
.menu-dugme{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.menu-dugme span{ width:24px; height:2px; background:var(--ink); transition:.3s; }

/* =============================================================
   GÖVDE
   ============================================================= */
.govde{ min-height:60vh; }
.kesit{ max-width:var(--w); margin:0 auto; padding:72px 24px; }
.kesit-dar{ max-width:840px; }
.kesit-baslik{ text-align:center; margin-bottom:8px; }
.kesit-baslik h2{ font-size:38px; letter-spacing:.01em; }
.kesit-ustyazi{
    display:block; text-align:center; font-size:12px; letter-spacing:.34em;
    text-transform:uppercase; color:var(--mor); margin-bottom:14px;
}

/* =============================================================
   HERO (Anasayfa)
   ============================================================= */
.hero{
    position:relative; background:var(--ink); color:#F3F0FA;
    padding:110px 24px 118px; text-align:center; overflow:hidden;
}
.hero::before{ /* pırlanta parıltısı */
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.5px 1.5px at 82% 62%, rgba(255,255,255,.6), transparent),
      radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,.45), transparent),
      radial-gradient(600px 300px at 50% -10%, rgba(120,80,190,.34), transparent);
}
.hero-ic{ position:relative; max-width:760px; margin:0 auto; }
.hero .yildiz{ width:34px; height:34px; margin:0 auto 26px; animation:parilti 4s ease-in-out infinite; }
@keyframes parilti{ 0%,100%{opacity:.55; transform:scale(.92);} 50%{opacity:1; transform:scale(1);} }
.hero h1{
    font-size:clamp(40px,7vw,76px); font-weight:500; letter-spacing:.02em;
    color:#F5F1FC;
}
.hero h1 em{ font-style:italic; color:var(--mor); }
.hero-alt{
    font-size:13px; letter-spacing:.4em; text-transform:uppercase;
    color:var(--mor); margin:18px 0 26px;
}
.hero p{ color:#C7C1D8; font-size:18px; max-width:520px; margin:0 auto 38px; }
.hero-dugmeler{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =============================================================
   DÜĞMELER
   ============================================================= */
.dugme{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    padding:14px 30px; border-radius:2px; cursor:pointer; transition:.25s; border:1px solid transparent;
}
.dugme-altin{ background:var(--mor); color:#fff; }
.dugme-altin:hover{ background:var(--mor); }
.dugme-cizgi{ border-color:currentColor; color:#F3F0FA; }
.dugme-cizgi:hover{ background:#F3F0FA; color:var(--ink); }
.dugme-koyu{ background:var(--ink); color:#fff; }
.dugme-koyu:hover{ background:var(--ink-soft); }
.dugme svg{ width:15px; height:15px; fill:currentColor; }

/* =============================================================
   KATEGORİ IZGARASI
   ============================================================= */
.kategori-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.kategori-kart{
    position:relative; display:block; background:var(--card);
    border:1px solid var(--line); border-radius:var(--kenar); overflow:hidden;
    transition:transform .3s, box-shadow .3s, border-color .3s;
}
.kategori-kart:hover{ transform:translateY(-4px); box-shadow:0 16px 40px -22px rgba(23,25,31,.4); border-color:var(--mor-acik); }
.kategori-gorsel{ aspect-ratio:1/1; background:#F6F5F2; display:flex; align-items:center; justify-content:center; padding:22px; }
.kategori-gorsel img{ width:100%; height:100%; object-fit:contain; }
.kategori-bos{ width:56px; height:56px; opacity:.5; }
.kategori-ad{
    padding:18px 16px; text-align:center; font-family:var(--serif);
    font-size:20px; border-top:1px solid var(--line);
}
.kategori-kart:hover .kategori-ad{ color:var(--mor); }

/* =============================================================
   ÜRÜN IZGARASI (4'lü)
   ============================================================= */
.urun-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.urun-kart{
    display:flex; flex-direction:column; background:var(--card);
    border:1px solid var(--line); border-radius:var(--kenar); overflow:hidden;
    transition:transform .3s, box-shadow .3s, border-color .3s;
}
.urun-kart:hover{ transform:translateY(-4px); box-shadow:0 18px 44px -24px rgba(23,25,31,.45); border-color:var(--mor-acik); }
.urun-gorsel{ aspect-ratio:1/1; background:#F7F6F3; padding:18px; }
.urun-gorsel img{ width:100%; height:100%; object-fit:contain; transition:transform .5s; }
.urun-kart:hover .urun-gorsel img{ transform:scale(1.05); }
.urun-govde{ padding:16px 16px 20px; text-align:center; border-top:1px solid var(--line); }
.urun-ad{ font-family:var(--serif); font-size:18px; line-height:1.3; }
.urun-model{ display:block; margin-top:7px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.urun-bos{ width:48px; height:48px; opacity:.45; margin:auto; }

/* =============================================================
   KATEGORİ GRUPLARI (ana kategori sayfası)
   ============================================================= */
.grup{ margin-bottom:56px; }
.grup:last-child{ margin-bottom:0; }
.grup-baslik{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding-bottom:16px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.grup-baslik h3{ font-size:26px; }
.grup-baslik h3 a:hover{ color:var(--mor); }
.grup-link{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mor); white-space:nowrap; transition:opacity .2s;
}
.grup-link:hover{ opacity:.7; }
.grup-adet{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.grup-daha{ text-align:center; margin-top:28px; }

.liste-ozet{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); text-align:center; margin:0 0 30px;
}

/* Sayfalama */
.sayfalama{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
    margin-top:52px;
}
.sayfalama a,.sayfalama span{
    min-width:42px; height:42px; padding:0 12px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:2px; background:var(--card);
    font-size:13px; letter-spacing:.06em; color:var(--ink-soft); transition:.2s;
}
.sayfalama a:hover{ border-color:var(--mor); color:var(--mor); }
.sayfalama .simdiki{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* =============================================================
   BREADCRUMB
   ============================================================= */
.iz{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); margin-bottom:34px;
}
.iz a:hover{ color:var(--mor); }
.iz span.ayrac{ color:var(--mor); }
.iz .simdiki{ color:var(--ink); }

/* =============================================================
   ÜRÜN DETAY
   ============================================================= */
.detay{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start; }
.detay-gorseller .ana-gorsel{
    background:var(--card); border:1px solid var(--line); border-radius:var(--kenar);
    aspect-ratio:1/1; padding:32px; display:flex; align-items:center; justify-content:center;
}
.detay-gorseller .ana-gorsel img{ max-width:100%; max-height:100%; object-fit:contain; }
.kucuk-gorseller{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.kucuk-gorseller button{
    width:74px; height:74px; padding:8px; background:var(--card);
    border:1px solid var(--line); border-radius:var(--kenar); cursor:pointer; transition:border-color .2s;
}
.kucuk-gorseller button.secili{ border-color:var(--mor); }
.kucuk-gorseller img{ width:100%; height:100%; object-fit:contain; }

.detay-bilgi h1{ font-size:40px; margin-bottom:10px; }
.detay-model{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mor); }
.detay-cizgi{ height:1px; background:var(--line); margin:26px 0; }
.detay-aciklama{ color:var(--ink-soft); font-size:16.5px; }
.detay-aciklama img{ margin:14px 0; border-radius:var(--kenar); }
.detay-aciklama p{ margin:0 0 14px; }
.detay-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.detay-not{ margin-top:18px; font-size:14px; color:var(--muted); }

/* =============================================================
   BİLGİ ŞERİTLERİ (Hakkımızda / genel)
   ============================================================= */
.ikili{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ikili p{ color:var(--ink-soft); }
.metin-blok h2{ font-size:34px; margin-bottom:8px; }
.metin-blok .kesit-ustyazi{ text-align:left; margin-bottom:16px; }
.deger-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:14px; }
.deger{ background:var(--card); border:1px solid var(--line); border-radius:var(--kenar); padding:30px 24px; text-align:center; }
.deger .yildiz{ width:22px; height:22px; margin:0 auto 14px; }
.deger h3{ font-size:22px; margin-bottom:8px; }
.deger p{ font-size:15px; color:var(--muted); margin:0; }

.pano{
    background:var(--ink); color:#EAE4F5; border-radius:var(--kenar);
    padding:56px; text-align:center;
}
.pano .yildiz{ width:26px; height:26px; margin:0 auto 18px; }
.pano h2{ color:#F4F0FC; font-size:34px; margin-bottom:12px; }
.pano p{ color:#C6C0D6; max-width:520px; margin:0 auto 28px; }

/* =============================================================
   MAĞAZAMIZ / İLETİŞİM
   ============================================================= */
.harita{ width:100%; height:420px; border:1px solid var(--line); border-radius:var(--kenar); filter:grayscale(.25); }
.bilgi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
.bilgi-kart{ background:var(--card); border:1px solid var(--line); border-radius:var(--kenar); padding:32px 28px; text-align:center; }
.bilgi-kart .yildiz{ width:22px; height:22px; margin:0 auto 14px; }
.bilgi-kart h3{ font-size:22px; margin-bottom:10px; }
.bilgi-kart p,.bilgi-kart a{ color:var(--muted); font-size:15px; }
.bilgi-kart a:hover{ color:var(--mor); }

/* =============================================================
   BOŞ DURUM
   ============================================================= */
.bos-durum{ text-align:center; padding:60px 20px; color:var(--muted); }
.bos-durum .yildiz{ width:30px; height:30px; margin:0 auto 16px; opacity:.6; }

/* =============================================================
   ALT (Footer)
   ============================================================= */
.alt{ background:var(--ink); color:#C6C0D6; margin-top:20px; }
.alt-ic{
    max-width:var(--w); margin:0 auto; padding:60px 24px 40px;
    display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:40px;
}
.alt-blok h4{ font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--mor); margin-bottom:18px; }
.alt-blok a{ display:block; color:#C6C0D6; font-size:15px; padding:4px 0; }
.alt-blok a:hover{ color:#fff; }
.alt-marka{ display:flex; gap:14px; align-items:flex-start; }
.alt-marka .marka-ad{ font-family:var(--serif); font-size:22px; color:#F3F0FA; }
.alt-marka .marka-alt{ font-size:10px; letter-spacing:.4em; color:var(--mor); margin-top:5px; }
.alt-adres{ font-size:15px; line-height:1.6; margin:0 0 14px; }
.alt-wa{ color:var(--mor)!important; font-weight:400; }
.alt-wa:hover{ color:#fff!important; }
.alt-telif{ border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:20px; font-size:12px; letter-spacing:.1em; color:#8B84A2; }

/* =============================================================
   KOYU ZEMİN VURGULARI (hero / pano / footer) — parlak lila
   ============================================================= */
.hero .yildiz{ fill:var(--lila); }
.hero h1 em{ color:var(--lila); }
.hero-alt{ color:var(--lila); }
.hero .dugme-altin,
.pano .dugme-altin{ background:var(--lila); color:var(--ink); }
.hero .dugme-altin:hover,
.pano .dugme-altin:hover{ background:#B79BE4; }
.pano .yildiz{ fill:var(--lila); }
.alt-blok h4{ color:var(--lila); }
.alt-wa{ color:var(--lila)!important; }
.alt-marka .marka-alt{ color:var(--lila); }
.alt-marka .yildiz{ fill:var(--lila); }

/* =============================================================
   ÜST İLETİŞİM ŞERİDİ (kurumsal)
   ============================================================= */
.ust-serit{ background:linear-gradient(90deg,var(--mor-koyu),var(--mor)); color:#EEE7F8; font-size:12.5px; }
.ust-serit-ic{
    max-width:var(--w); margin:0 auto; padding:9px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ust-serit a{ display:inline-flex; align-items:center; gap:7px; color:#EEE7F8; letter-spacing:.02em; transition:color .2s; }
.ust-serit a:hover{ color:#fff; }
.ust-serit svg{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; }
.serit-adres span{ opacity:.92; }
.serit-iletisim{ display:flex; align-items:center; gap:22px; }
.serit-wa svg{ width:15px; height:15px; }

.menu-wa{ display:inline-flex!important; align-items:center; gap:8px; }
.menu-wa svg{ width:15px; height:15px; fill:currentColor; }

/* =============================================================
   MARKALI KOLEKSİYON KARTI (görselsiz kategoriler)
   ============================================================= */
.kategori-kart{ display:flex; flex-direction:column; }
.kategori-kart--marka{ border-color:transparent; }
.marka-tile{
    flex:1; min-height:210px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px;
    padding:34px 20px; text-align:center; position:relative; overflow:hidden;
    background:linear-gradient(150deg,#5a2fa1 0%,#3a1c6e 62%,#2c1552 100%);
}
.marka-tile::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(140px 100px at 50% 28%, rgba(255,255,255,.16), transparent 70%);
}
.marka-tile-gem{ width:46px; height:46px; fill:#fff; position:relative; filter:drop-shadow(0 6px 16px rgba(0,0,0,.32)); }
.marka-tile-ad{ position:relative; color:#fff; font-family:var(--serif); font-size:21px; letter-spacing:.01em; }
.kategori-kart--marka:hover .marka-tile{ background:linear-gradient(150deg,#6a3ac0,#3f1f77); }

/* =============================================================
   YÜZEN BUTONLAR (WhatsApp + Telefon)
   ============================================================= */
.yuzen-butonlar{
    position:fixed; right:20px; bottom:20px; z-index:80;
    display:flex; flex-direction:column; gap:12px;
}
.yuzen{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.45); transition:transform .2s, box-shadow .2s;
}
.yuzen svg{ width:28px; height:28px; fill:#fff; }
.yuzen:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -8px rgba(0,0,0,.55); }
.yuzen-wa{ background:#25D366; position:relative; }
.yuzen-tel{ background:var(--mor); }
.yuzen-etiket{ display:none; }
.yuzen-wa::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:nabiz 2.2s infinite;
}
@keyframes nabiz{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
    70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* =============================================================
   ÜRÜN AÇIKLAMASI (temizlenmiş içerik normalizasyonu)
   ============================================================= */
.detay-aciklama{ font-family:var(--sans); color:var(--ink-soft); font-size:16px; line-height:1.75; }
.detay-aciklama *{ max-width:100%; }
.detay-aciklama p{ margin:0 0 12px; }
.detay-aciklama b,.detay-aciklama strong{ color:var(--ink); }
.detay-aciklama ul,.detay-aciklama ol{ margin:0 0 14px; padding-left:1.25em; }
.detay-aciklama li{ margin:5px 0; }
.detay-aciklama a{ color:var(--mor); text-decoration:underline; }
.detay-aciklama img{ height:auto; border-radius:var(--kenar); margin:12px 0; }
.detay-aciklama table{ width:100%!important; border-collapse:collapse; margin:12px 0; font-size:14px; display:block; overflow-x:auto; }
.detay-aciklama td,.detay-aciklama th{ border:1px solid var(--line); padding:8px; }
.detay-aciklama h1,.detay-aciklama h2,.detay-aciklama h3{ font-family:var(--serif); margin:16px 0 8px; line-height:1.25; }

/* =============================================================
   YENİ ÖĞELER — MOBİL
   ============================================================= */
@media (max-width:820px){
    .ust-serit-ic{ padding:8px 14px; justify-content:center; font-size:12px; }
    .ust-serit .serit-adres{ display:none; }
    .serit-iletisim{ gap:20px; flex-wrap:nowrap; }
}
@media (max-width:380px){
    .ust-serit-ic{ font-size:11px; }
    .serit-iletisim{ gap:14px; }
}
@media (max-width:720px){
    .yuzen-butonlar{ right:14px; bottom:14px; gap:10px; }
    .yuzen{ width:52px; height:52px; }
    .yuzen svg{ width:25px; height:25px; }
    .marka-tile{ min-height:150px; padding:24px 14px; gap:12px; }
    .marka-tile-gem{ width:34px; height:34px; }
    .marka-tile-ad{ font-size:17px; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:980px){
    .kategori-grid,.urun-grid{ grid-template-columns:repeat(3,1fr); }
    .detay{ grid-template-columns:1fr; gap:32px; }
    .ikili{ grid-template-columns:1fr; gap:32px; }
    .deger-grid,.bilgi-grid{ grid-template-columns:1fr; }
    .alt-ic{ grid-template-columns:1fr 1fr; }

    /* menü: 980px altında hamburger'a geç (yatay menü taşmasın) */
    .menu{ display:none; }
    .menu-dugme{ display:flex; }
    .mobil-menu{
        display:flex; flex-direction:column; align-items:flex-start;
        position:fixed; top:0; right:0; bottom:0; width:min(82vw,330px);
        background:var(--bg); padding:78px 30px 34px; gap:18px;
        transform:translateX(100%); transition:transform .3s ease;
        box-shadow:-16px 0 46px -20px rgba(20,14,30,.6);
        z-index:95; overflow-y:auto; -webkit-overflow-scrolling:touch;
    }
    .menu-ac:checked ~ .mobil-menu{ transform:translateX(0); }
    .menu-ortu{
        display:none; position:fixed; inset:0; z-index:90;
        background:rgba(20,14,30,.5); border:0; cursor:pointer;
    }
    .menu-ac:checked ~ .menu-ortu{ display:block; }
    .menu-kapat{
        display:block; position:absolute; top:14px; right:16px;
        width:42px; height:42px; line-height:40px; text-align:center;
        font-size:32px; color:var(--ink); cursor:pointer; border-radius:50%;
    }
    .menu-kapat:hover{ background:var(--mor-acik); color:var(--mor); }
    .mobil-menu a{
        font-size:15px; letter-spacing:.14em; text-transform:uppercase;
        color:var(--ink-soft); width:100%; padding:9px 0; border-bottom:1px solid var(--line);
    }
    .mobil-menu a.aktif{ color:var(--mor); }
    .mobil-wa{
        margin-top:12px; display:inline-flex!important; align-items:center; justify-content:center; gap:8px;
        width:100%; padding:14px!important; border:none!important; border-radius:2px;
        background:var(--mor); color:#fff!important; text-transform:uppercase;
        font-size:13px; letter-spacing:.14em; border-bottom:none!important;
    }
    .mobil-wa svg{ width:16px; height:16px; fill:currentColor; }
}
@media (max-width:720px){
    .kategori-grid,.urun-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .kesit{ padding:52px 18px; }
    .kesit-baslik h2{ font-size:30px; }
    .pano{ padding:40px 24px; }
    .alt-ic{ grid-template-columns:1fr; gap:32px; }
}

/* erişilebilirlik */
a:focus-visible,.dugme:focus-visible,button:focus-visible,.menu-dugme:focus-visible{
    outline:2px solid var(--mor); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
    *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}