:root{
  --blue: #1279a8;
  --blue-dark: #0b5a80;
  --blue-deep: #0a3a56;
  --teal: #3aa9c9;
  --ink: #12232e;
  --gray: #647686;
  --line: #e3ebf0;
  --bg: #f5f9fb;
  --gold: #f5b301;
  --radius: 14px;
  /* Tema (dark/light) için ayrı değişkenler: --ink butonlarda/rozetlerde
     sabit koyu renk olarak kalmaya devam ediyor, gövde metni ise --text
     üzerinden yönetiliyor ki karanlık modda otomatik açık renge dönsün. */
  --text: var(--ink);
  --card-bg: #ffffff;
  --btn-secondary-bg: #F0F4F6;
  --btn-secondary-bg-hover: #e3ebf0;
  --shadow-color: rgba(10,58,86,.12);
}
html[data-theme="dark"]{
  --gray: #93a6b3;
  --line: #26333d;
  --bg: #0c1418;
  --text: #eef3f6;
  --card-bg: #131f26;
  --btn-secondary-bg: #1c2830;
  --btn-secondary-bg-hover: #24333d;
  --shadow-color: rgba(0,0,0,.45);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
/* Güvenlik ağı: bir sınıf herhangi bir sebeple uygulanamazsa bile
   ikonların/resimlerin dev boyutlarda görünüp sayfayı bozmasını engeller. */
svg{ max-width:100%; }
nav.main-nav svg, .all-cats-btn svg, .nav-item svg{ width:14px; height:14px; }
.feature-card .ic svg{ width:22px; height:22px; }
img{ max-width:100%; height:auto; }
body{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  transition: background .2s ease, color .2s ease;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* ===== Announcement ticker ===== */
.ticker-wrap{
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-dark) 55%, var(--blue));
  color:#fff; overflow:hidden; position:relative;
  height:38px; display:flex; align-items:center;
}
.ticker-wrap.hidden{ display:none; }
.ticker{ display:flex; white-space:nowrap; animation: scroll 28s linear infinite; font-size:13px; font-weight:600; }
.ticker span{ padding:0 28px; opacity:.96; }
.ticker span::after{ content:"•"; margin-left:28px; opacity:.6; }
@keyframes scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.ticker-close{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:#fff; opacity:.85; font-size:16px; cursor:pointer; background:none; border:none;
}

/* ===== Header ===== */
header.site-header{ background:var(--card-bg); border-bottom:1px solid var(--line); transition:background .2s ease, border-color .2s ease; }
.header-inner{ max-width:1320px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:32px; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.logo img{ height:46px; width:auto; }

.header-actions{ display:flex; align-items:center; gap:14px; white-space:nowrap; font-size:13px; font-weight:600; margin-left:auto; }
.order-btn{ background:var(--ink); color:#fff; border:none; padding:11px 18px; border-radius:8px; font-weight:700; font-size:12.5px; cursor:pointer; text-align:center; transition:background .15s, transform .15s; }
.order-btn:hover{ background:#25d366; transform:translateY(-1px); }
.admin-btn{ display:flex; align-items:center; gap:6px; color:#fff; cursor:pointer; background:var(--blue-deep); border:none; font-weight:700; font-size:13px; padding:11px 18px; border-radius:8px; transition:background .15s, transform .15s; }
.admin-btn:hover{ background:#061f2f; transform:translateY(-1px); }

.acc-links{ display:flex; align-items:center; }
.acc-link{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text); padding:9px 14px; border:1px solid var(--line); transition:.15s; }
.acc-links .acc-link:first-child{ border-radius:8px 0 0 8px; }
.acc-links .acc-link:last-child{ border-radius:0 8px 8px 0; border-left:none; }
.acc-link:hover{ border-color:var(--blue); color:var(--blue); }
.acc-link.primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.acc-link.primary:hover{ background:var(--blue-dark); }
.acc-link svg{ width:15px; height:15px; }

.admin-link{ font-size:11px; color:var(--gray); font-weight:600; display:flex; align-items:center; gap:4px; }
.admin-link:hover{ color:var(--blue); }

/* ===== Hesabım açılır menüsü (giriş yapınca) ===== */
.acc-menu{ position:relative; }
.acc-menu-btn{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text);
  padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card-bg); cursor:pointer; transition:.15s;
}
.acc-menu-btn:hover{ border-color:var(--blue); color:var(--blue); }
.acc-menu-btn svg{ width:15px; height:15px; flex-shrink:0; }
.acc-menu-btn span{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-menu-caret{ width:11px !important; height:11px !important; transition:transform .15s; }
.acc-menu.open .acc-menu-caret{ transform:rotate(180deg); }
.acc-menu-panel{
  position:absolute; top:calc(100% + 6px); right:0; min-width:190px;
  background:var(--card-bg); border:1px solid var(--line); border-top:3px solid var(--blue);
  box-shadow:0 12px 28px var(--shadow-color); padding:8px 0; display:none; z-index:70; border-radius:10px; overflow:hidden;
}
.acc-menu.open .acc-menu-panel{ display:block; }
.acc-menu-panel a{ display:flex; align-items:center; gap:9px; padding:11px 18px; font-size:13.5px; color:var(--text); }
.acc-menu-panel a:hover{ background:var(--bg); color:var(--blue); }
.acc-menu-panel a svg{ width:16px; height:16px; flex-shrink:0; }
@media (max-width: 640px){
  .acc-menu-panel{ right:auto; left:0; }
  .acc-menu-btn span{ max-width:80px; }
}

/* ===== Nav / Kategori Menüsü ===== */
nav.main-nav{ background:var(--blue-deep); border-bottom:1px solid var(--line); position:relative; z-index:40; }
.nav-inner{ max-width:1320px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:10px; }
.all-cats-btn{
  background:var(--gold); color:var(--ink); font-weight:700; font-size:13.5px;
  padding:13px 18px; display:flex; align-items:center; gap:8px; white-space:nowrap;
  border-radius:9px; margin:10px 0; cursor:pointer; border:none;
  box-shadow:0 6px 14px rgba(245,179,1,.25); transition:filter .15s, transform .15s;
}
.all-cats-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.all-cats-btn svg{ width:16px; height:16px; flex-shrink:0; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-item > a{
  display:flex; align-items:center; gap:6px; padding:16px 14px; font-size:13.5px; font-weight:600;
  color:#dfeef7; border-radius:7px; transition:background .15s, color .15s;
}
.nav-item > a svg{ width:10px; height:10px; transition:transform .15s; opacity:.75; }
.nav-item:hover > a{ color:#fff; background:rgba(255,255,255,.08); }
.nav-item:hover > a svg{ transform:rotate(180deg); opacity:1; }
.nav-item > a[href="magaza.html"]{ color:var(--gold); }
.nav-item > a[href="magaza.html"]:hover{ color:#ffd75e; }

.dropdown{
  position:absolute; top:100%; left:0; min-width:280px;
  background:var(--card-bg); border:1px solid var(--line); border-top:3px solid var(--blue);
  box-shadow:0 14px 32px var(--shadow-color); padding:8px 0; display:none; z-index:50; border-radius:0 0 12px 12px; overflow:hidden;
  animation: navDropIn .16s ease;
}
@keyframes navDropIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.nav-item:hover .dropdown{ display:block; }
.dropdown a{ display:block; padding:10.5px 20px; font-size:13.5px; color:var(--text); border-left:2px solid transparent; transition:background .12s, border-color .12s, color .12s; }
.dropdown a:hover{ background:var(--bg); color:var(--blue); border-left-color:var(--blue); }

/* Görünmez checkbox: panelin JS'e hiç ihtiyaç duymadan, saf CSS ile
   açılıp kapanmasını sağlar. Her ekran genişliğinde gizli olmalı —
   önceden sadece mobil medya sorgusunun içindeydi, bu yüzden
   masaüstü/geniş ekranlarda kare bir kutucuk olarak görünüyordu. */
.all-cats-checkbox{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.all-cats-panel{
  position:absolute; top:100%; left:24px; width:400px; max-width:calc(100vw - 48px);
  background:var(--card-bg); border:1px solid var(--line); box-shadow:0 18px 38px var(--shadow-color);
  padding:0; display:none; z-index:60; max-height:70vh; border-radius:12px;
  animation: navDropIn .16s ease; flex-direction:column; overflow:hidden;
}
.all-cats-btn:hover + .all-cats-panel, .all-cats-panel:hover{ display:flex; }
.all-cats-panel.force-open{ display:flex; }
.all-cats-panel-head{ display:none; }
.all-cats-panel-body{ overflow-y:auto; padding:8px 0; }
.all-cats-panel a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 20px; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--line); }
.all-cats-panel a:last-of-type{ border-bottom:none; }
.all-cats-panel a:hover{ color:var(--blue); background:var(--bg); }
.all-cats-panel a span{ flex-shrink:0; font-size:11px; font-weight:700; color:var(--gray); background:var(--bg); border-radius:10px; padding:2px 8px; }
.all-cats-panel .view-all{ display:block; text-align:left; padding:13px 20px; font-size:13px; font-weight:700; color:var(--blue); background:var(--bg); cursor:pointer; border-top:1px solid var(--line); }

/* ===== Hero ===== */
.hero-wrap{ max-width:1320px; margin:24px auto; padding:0 24px; }
.hero{
  position:relative; border-radius:20px; overflow:hidden;
  background: radial-gradient(circle at 85% 15%, rgba(58,169,201,.35), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(18,121,168,.4), transparent 50%),
    linear-gradient(120deg, #0a2c40 0%, #0d3d59 55%, #0a2c40 100%);
  min-height:420px; display:flex; align-items:center; padding:60px 64px;
}
.hero-glow{ position:absolute; inset:0; background:radial-gradient(circle at 20% 120%, rgba(58,169,201,.25), transparent 55%); }
.hero-mark{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:420px; height:420px; opacity:.12; }
.hero-content{ position:relative; z-index:2; max-width:600px; }
.hero-tag{ display:inline-block; background:rgba(58,169,201,.18); border:1px solid rgba(58,169,201,.5); color:#a9e4f5; font-size:12px; font-weight:700; padding:6px 14px; border-radius:16px; margin-bottom:18px; }
.hero-title{ color:#fff; font-size:42px; font-weight:800; line-height:1.2; margin-bottom:18px; }
.hero-title em{ color:var(--teal); font-style:normal; }
.hero-sub{ color:#c7d9e3; font-size:15px; line-height:1.6; margin-bottom:28px; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-btn-primary{ background:var(--gold); color:var(--ink); font-weight:800; font-size:14px; padding:14px 26px; border-radius:9px; }
.hero-btn-primary:hover{ background:#ffc933; }
.hero-btn-secondary{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; font-size:14px; padding:14px 26px; border-radius:9px; }
.hero-btn-secondary:hover{ background:rgba(255,255,255,.16); }
.hero-badge{ background:rgba(58,169,201,.18); border:1px solid rgba(58,169,201,.5); color:#a9e4f5; font-size:12px; font-weight:700; padding:6px 12px; border-radius:16px; }

/* ===== Section / product grid ===== */
.section-wrap{ max-width:1320px; margin:0 auto; padding:36px 24px 56px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-head h2{ font-size:22px; font-weight:800; }
.section-head a{ color:var(--blue); font-weight:700; font-size:13.5px; }
.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.product-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s, background .2s; }
.product-card:hover{ box-shadow:0 14px 30px var(--shadow-color); transform:translateY(-3px); border-color:var(--blue); }
.product-thumb{ position:relative; aspect-ratio:1/1; background:#eef4f7; overflow:hidden; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-card:hover .product-thumb img{ transform:scale(1.05); }
.product-thumb .tag{ position:absolute; top:10px; left:10px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:5px; z-index:2; }
.product-thumb .tag.stock0{ background:#9c9c9c; }
.product-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-name{ font-size:13.5px; font-weight:600; line-height:1.35; min-height:36px; cursor:pointer; }
.product-name a{ color:inherit; }
.product-card.has-detail .product-body{ cursor:pointer; }
.product-card.has-detail .product-body .add-btn{ cursor:pointer; }
.product-stars{ color:var(--gold); font-size:12px; letter-spacing:1px; }
.product-price{ font-weight:800; font-size:17px; color:var(--blue-dark); margin-top:2px; transition:color .2s; }
.product-price .old{ font-weight:500; font-size:12.5px; color:var(--gray); text-decoration:line-through; margin-left:6px; }
.add-btn{
  margin-top:auto; background:var(--ink); color:#fff; border:none; padding:11px; border-radius:8px;
  font-weight:700; font-size:13px; cursor:pointer; transition:background .15s;
}
.add-btn:hover{ background:#25d366; }
.add-btn:disabled{ background:#ccc; cursor:not-allowed; }

@media(max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); } .hero{ padding:40px 28px; } .hero-title{ font-size:30px; } }

/* ===== Feature strip ===== */
.feature-strip{ max-width:1320px; margin:8px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; gap:14px; align-items:center; }
.feature-card .ic{ width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--teal)); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.feature-card .ic svg{ width:22px; height:22px; }
.feature-card h4{ font-size:13.5px; margin-bottom:3px; }
.feature-card p{ font-size:12px; color:var(--gray); }
@media(max-width:900px){ .feature-strip{ grid-template-columns:repeat(2,1fr); } }

/* ===== Footer ===== */
footer.site-footer{ background:var(--blue-deep); color:#c9dbe4; margin-top:40px; }
.footer-inner{ max-width:1320px; margin:0 auto; padding:44px 24px 28px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-col h4{ color:#fff; font-size:14px; margin-bottom:14px; }
.footer-col p, .footer-col a{ font-size:13px; color:#a9c2cf; line-height:2; display:block; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:12px; color:#7f9aa8; padding:16px; }
.footer-bottom a{ color:#a9c2cf; }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:8px; font-size:13.5px; font-weight:600;
  z-index:999; opacity:0; pointer-events:none; transition:all .25s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; background:rgba(10,30,42,.55); z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal-box{ background:var(--card-bg); border-radius:var(--radius); width:420px; max-width:100%; padding:28px; max-height:90vh; overflow-y:auto; position:relative; }
.modal-box h3{ font-size:19px; margin-bottom:6px; }
.modal-box p.sub{ color:var(--gray); font-size:13px; margin-bottom:18px; }
.form-field{ margin-bottom:14px; }
.form-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:13.5px; font-family:inherit; outline:none; transition:border-color .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--blue); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.btn{ padding:12px 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; border:none; transition:.15s; }
.btn-primary{ background:var(--blue); color:#fff; flex:1; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-secondary{ background:var(--btn-secondary-bg); color:var(--text); }
.btn-secondary:hover{ background:var(--btn-secondary-bg-hover); }
.modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--gray); }

/* ===== Breadcrumb ===== */
.breadcrumb{ max-width:1320px; margin:18px auto 0; padding:0 24px; font-size:12.5px; color:var(--gray); }
.breadcrumb a:hover{ color:var(--blue); }

/* ===== Store / catalog page ===== */
.store-head{ max-width:1320px; margin:0 auto; padding:16px 24px 0; display:flex; justify-content:space-between; align-items:flex-end; }
.store-head h1{ font-size:26px; font-weight:800; }
.store-head p{ color:var(--gray); font-size:13px; margin-top:4px; }
.store-layout{ max-width:1320px; margin:0 auto; padding:20px 24px 60px; display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start; }
.store-sidebar{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:sticky; top:16px; }
.store-sidebar h4{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gray); margin-bottom:10px; }
.store-sidebar .cat-link{ display:flex; justify-content:space-between; padding:10px 10px; font-size:13.5px; border-radius:8px; cursor:pointer; }
.store-sidebar .cat-link:hover{ background:var(--bg); color:var(--blue); }
.store-sidebar .cat-link.active{ background:var(--blue); color:#fff; font-weight:700; }
.store-sidebar .cat-link span{ color:inherit; opacity:.7; font-size:12px; }
.store-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.result-count{ font-size:13px; color:var(--gray); }
.empty-state{ text-align:center; padding:80px 20px; color:var(--gray); }
.cat-section{ max-width:1320px; margin:0 auto; padding:0 0 6px; }
.cat-section h2{ font-size:20px; font-weight:800; border-bottom:3px solid var(--blue); display:inline-block; padding-bottom:6px; }
.sub-section{ margin:0 auto; padding:18px 0 4px; }
.sub-section h3{ font-size:13px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.4px; }

/* ===== Account / Auth pages ===== */
.auth-wrap{ max-width:440px; margin:60px auto 100px; padding:0 24px; }
.auth-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:18px; padding:36px 32px; box-shadow:0 20px 50px rgba(10,58,86,.08); }
.auth-card h1{ font-size:22px; font-weight:800; margin-bottom:6px; }
.auth-card p.sub{ color:var(--gray); font-size:13.5px; margin-bottom:24px; }
.auth-card .form-field{ margin-bottom:16px; }
.auth-submit{ width:100%; background:var(--blue); color:#fff; border:none; padding:13px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; margin-top:6px; transition:.15s; }
.auth-submit:hover{ background:var(--blue-dark); }
.auth-submit:disabled{ background:#a9c2cf; cursor:not-allowed; }
.auth-switch{ text-align:center; font-size:13px; color:var(--gray); margin-top:18px; }
.auth-switch a{ color:var(--blue); font-weight:700; }
.auth-msg{ font-size:13px; padding:11px 14px; border-radius:8px; margin-bottom:16px; display:none; }
.auth-msg.show{ display:block; }
.auth-msg.error{ background:#fdeaea; color:#a02020; }
.auth-msg.success{ background:#e6f7ee; color:#0f7a45; }
.auth-icon{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--teal)); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px; }
.auth-icon svg{ width:26px; height:26px; }

/* ===== Admin panel ===== */
.admin-wrap{ max-width:1100px; margin:34px auto 80px; padding:0 24px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.admin-topbar h1{ font-size:24px; font-weight:800; }
.admin-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px; }
.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat-box{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.stat-box .num{ font-size:26px; font-weight:800; color:var(--blue-dark); }
.stat-box .lbl{ font-size:12.5px; color:var(--gray); margin-top:4px; }
table.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.admin-table th{ text-align:left; padding:10px 12px; background:var(--bg); color:var(--gray); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
table.admin-table td{ padding:12px; border-bottom:1px solid var(--line); }
.role-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; }
.role-badge.admin{ background:#fdeecb; color:#8a5a00; }
.role-badge.user{ background:#e6f0f5; color:var(--blue-dark); }
.admin-empty{ text-align:center; color:var(--gray); padding:40px; font-size:13.5px; }
@media(max-width:760px){ .admin-stats{ grid-template-columns:1fr; } table.admin-table{ display:block; overflow-x:auto; } }

/* ===== Instagram / WhatsApp balonu ===== */
.insta-btn{ display:flex; align-items:center; gap:6px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); border:none; font-weight:700; font-size:13px; padding:11px 16px; border-radius:8px; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.insta-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(221,42,123,.35); }
.ecrin-wa-bubble{ position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:200; transition:transform .15s; }
.ecrin-wa-bubble:hover{ transform:scale(1.08); }
.ecrin-insta-bubble{ position:fixed; right:22px; bottom:88px; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:200; transition:transform .15s; }
.ecrin-insta-bubble:hover{ transform:scale(1.08); }

/* ===== Sepet Yan Paneli ===== */
.ecrin-overlay{ position:fixed; inset:0; background:rgba(10,20,30,.5); z-index:299; opacity:0; pointer-events:none; transition:opacity .2s; }
.ecrin-overlay.open{ opacity:1; pointer-events:auto; }
.ecrin-cart-drawer{ position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:var(--card-bg); z-index:300; box-shadow:-10px 0 30px rgba(0,0,0,.2); transition:right .25s ease; display:flex; flex-direction:column; }
.ecrin-cart-drawer.open{ right:0; }
.ecrin-cart-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.ecrin-cart-head h3{ font-size:17px; font-weight:800; }
.ecrin-x{ background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--gray); }
.ecrin-cart-items{ flex:1; overflow-y:auto; padding:14px 18px; }
.ecrin-cart-empty{ text-align:center; color:var(--gray); font-size:13.5px; padding:60px 10px; }
.ecrin-cart-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.ecrin-cart-item img{ width:60px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.ecrin-cart-noimg{ width:60px; height:60px; border-radius:8px; background:var(--bg); }
.ecrin-cart-item-info{ flex:1; }
.ecrin-cart-item-name{ font-size:13px; font-weight:700; margin-bottom:4px; }
.ecrin-cart-item-price{ font-size:12.5px; color:var(--blue-dark); font-weight:700; margin-bottom:6px; }
.ecrin-qty-row{ display:flex; align-items:center; gap:8px; }
.ecrin-qty-btn{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--card-bg); cursor:pointer; font-size:14px; line-height:1; }
.ecrin-remove-btn{ margin-left:auto; background:none; border:none; color:#c0392b; font-size:11.5px; cursor:pointer; font-weight:700; }
.ecrin-cart-foot{ padding:16px 20px; border-top:1px solid var(--line); }
.ecrin-cart-total-row{ display:flex; justify-content:space-between; font-size:15px; margin-bottom:12px; }
.ecrin-checkout-btn{ width:100%; background:var(--blue); color:#fff; border:none; padding:13px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; }
.ecrin-checkout-btn:hover{ background:var(--blue-dark); }

.ecrin-header-count{ background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; border-radius:10px; padding:1px 7px; margin-left:4px; }

.ecrin-checkout-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:460px; max-width:92vw; max-height:88vh; overflow-y:auto; background:var(--card-bg); border-radius:16px; z-index:301; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 30px 60px rgba(0,0,0,.3); }
.ecrin-checkout-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.ecrin-checkout-body{ padding:20px 22px 26px; }
.ecrin-checkout-body textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:13.5px; font-family:inherit; outline:none; resize:vertical; }
.ecrin-checkout-msg{ font-size:13px; padding:11px 14px; border-radius:8px; margin-bottom:14px; display:none; }
.ecrin-checkout-msg.show{ display:block; }
.ecrin-checkout-msg.error{ background:#fdeaea; color:#a02020; }
.ecrin-checkout-msg.success{ background:#e6f7ee; color:#0f7a45; }

.ecrin-toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600; z-index:400; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.ecrin-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Admin sekmeleri ===== */
.admin-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.admin-tab-btn{ background:var(--card-bg); border:1px solid var(--line); padding:10px 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; color:var(--gray); transition:.15s; }
.admin-tab-btn.active, .admin-tab-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn{ border:none; border-radius:7px; padding:9px 14px; font-weight:700; font-size:12.5px; cursor:pointer; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-secondary{ background:var(--bg); color:var(--text); border:1px solid var(--line); }
.btn-danger{ background:#fdeaea; color:#a02020; }
.btn-danger:hover{ background:#fbd4d4; }
.btn-sm{ padding:6px 11px; font-size:11.5px; }
.role-select, .status-select{ border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12.5px; font-family:inherit; }
.order-items-cell{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge{ display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; }
.badge-gray{ background:#e6f0f5; color:var(--blue-dark); }
.badge-green{ background:#e6f7ee; color:#0f7a45; }
.badge-red{ background:#fdeaea; color:#a02020; }
.badge-blue{ background:#dbeeff; color:#0b5a80; }
.cat-add-form{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cat-add-form input{ flex:1; min-width:200px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13.5px; font-family:inherit; }
.cat-hint{ font-size:12px; color:var(--gray); margin-bottom:16px; }

/* ===== Siparişlerim (üye sayfası) ===== */
.my-orders-list{ display:flex; flex-direction:column; gap:14px; }
.order-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.order-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.order-card-date{ font-size:12px; color:var(--gray); margin-bottom:8px; }
.order-card-items{ font-size:13px; color:var(--text); margin-bottom:10px; }
.order-card-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.iade-btn{ }

/* ===== Videolar / telefon vitrini ===== */
.video-section{ max-width:1320px; margin:0 auto; padding:10px 24px 56px; }
.video-scroll{ display:flex; gap:26px; overflow-x:auto; padding:20px 4px 12px; scroll-snap-type:x mandatory; }
.phone-mock{ flex:0 0 auto; width:220px; scroll-snap-align:start; }
.phone-frame{ width:220px; height:452px; background:#0b0b0f; border-radius:34px; padding:10px; box-shadow:0 20px 40px rgba(10,30,50,.25); position:relative; border:2px solid #1c1c22; }
.phone-frame::before{ content:''; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:70px; height:16px; background:#0b0b0f; border-radius:10px; z-index:2; }
.phone-screen{ width:100%; height:100%; border-radius:24px; overflow:hidden; background:#000; }
.phone-screen video{ width:100%; height:100%; object-fit:cover; display:block; }
.phone-mock .cap{ text-align:center; font-size:12.5px; color:var(--gray); margin-top:12px; font-weight:600; }

/* ===== Hakkımızda ===== */
.tservis-banner-wrap{ max-width:1320px; margin:36px auto 0; padding:0 24px; }
.tservis-banner-wrap img{ border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.12); }
.about-section{ background:var(--card-bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-inner{ max-width:1200px; margin:0 auto; padding:60px 24px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.about-copy .hero-tag{ margin-bottom:14px; }
.about-copy h2{ font-size:28px; font-weight:800; margin-bottom:10px; line-height:1.3; }
.about-copy > p{ color:var(--gray); font-size:14.5px; line-height:1.7; margin-bottom:18px; }
.about-block{ margin-bottom:18px; }
.about-block h4{ font-size:14.5px; font-weight:800; margin-bottom:5px; color:var(--blue-dark); }
.about-block p{ font-size:13.5px; color:var(--gray); line-height:1.6; }
.about-why{ background:var(--bg); border-radius:var(--radius); padding:28px; }
.about-why h3{ font-size:16px; font-weight:800; margin-bottom:16px; }
.about-why ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.about-why li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text); font-weight:600; }
.about-why li svg{ flex-shrink:0; width:18px; height:18px; color:#0f7a45; margin-top:1px; }
.about-stats{ display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; }
.about-stats div{ text-align:center; }
.about-stats .n{ font-size:22px; font-weight:800; color:var(--blue-dark); }
.about-stats .l{ font-size:11.5px; color:var(--gray); font-weight:600; }
@media(max-width:880px){ .about-inner{ grid-template-columns:1fr; } }

/* ============================================================
   MOBİL / TELEFON UYUMLULUĞU
   Ana sorun: header ve nav içindeki butonlar satır kaydırmıyordu
   (white-space:nowrap + flex-wrap yok), bu da dar ekranlarda tüm
   sayfanın yatay taşmasına ve telefonda "sıkışmış/uzaktan görünüyor"
   gibi bir görünüme sebep oluyordu. Mağaza sayfasındaki 260px sabit
   genişlikli kenar çubuğu da aynı şekilde dar ekranda taşıyordu.
   ============================================================ */
html, body{ overflow-x:hidden; max-width:100%; }

@media(max-width:900px){
  .header-inner{ flex-wrap:wrap; row-gap:10px; padding:14px 16px; gap:12px; }
  .header-actions{ white-space:normal; flex-wrap:wrap; row-gap:8px; margin-left:0; width:100%; justify-content:flex-start; }
  .acc-links{ flex-wrap:wrap; }

  .nav-inner{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .nav-inner::-webkit-scrollbar{ display:none; }
  .nav-links{ flex-wrap:nowrap; }
  .nav-item > a{ white-space:nowrap; }
  .all-cats-btn{ white-space:nowrap; }
  .all-cats-panel{ left:16px; width:min(400px, 90vw); }

  .store-layout{ grid-template-columns:1fr; }
  .store-sidebar{ position:static; background:transparent; border:none; padding:0; border-radius:0; margin-bottom:6px; }
  .store-sidebar h4{ padding:0 2px; }
  .store-sidebar .cat-link{ border-bottom:1px solid var(--line); border-radius:0; padding:12px 2px; }
  .store-sidebar .cat-link:last-child{ border-bottom:none; }
  .store-sidebar .cat-link.active{ background:transparent; color:var(--blue); }
  .store-sidebar .cat-link:hover{ background:transparent; }

  .hero-mark{ width:260px; height:260px; right:-60px; opacity:.08; }
  .hero-content{ max-width:100%; }
}

@media(max-width:600px){
  .header-inner{ padding:12px 14px; gap:8px; }
  .logo img{ height:36px; }
  .header-actions{ gap:8px; font-size:12px; }
  .acc-link{ padding:7px 10px; font-size:11.5px; }
  .order-btn, .admin-btn{ padding:9px 12px; font-size:11.5px; }

  .ticker span{ padding:0 16px; font-size:12px; }

  .hero{ padding:32px 20px; min-height:auto; }
  .hero-title{ font-size:24px; }
  .hero-sub{ font-size:13.5px; }
  .hero-actions{ gap:10px; }
  .hero-btn-primary, .hero-btn-secondary{ padding:12px 18px; font-size:13px; }

  .section-wrap, .hero-wrap, .breadcrumb, .store-head, .store-layout, .video-section, .feature-strip{ padding-left:16px; padding-right:16px; }
  .section-head{ flex-wrap:wrap; gap:8px; }

  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .feature-strip{ grid-template-columns:1fr; }

  .store-head{ flex-direction:column; align-items:flex-start; gap:6px; }

  .footer-inner{ grid-template-columns:1fr; gap:22px; padding:32px 20px 20px; }

  .admin-wrap{ padding:0 14px; }
  .admin-topbar h1{ font-size:20px; }
  .cat-add-form{ flex-direction:column; }
  .cat-add-form input, .cat-add-form select{ min-width:0; width:100%; }
  #productAddForm{ flex-direction:column; }
  #productAddForm input, #productAddForm select{ width:100%; }

  .ecrin-cart-drawer{ width:100%; max-width:100vw; }
  .ecrin-checkout-modal{ width:94vw; }

  .about-why{ padding:20px; }
}

/* ===== Ürün fotoğrafı büyütme (lightbox) ===== */
.product-thumb{ cursor:zoom-in; }
.ecrin-zoom-overlay{
  position:fixed; inset:0; background:rgba(6,20,30,.88); z-index:500;
  display:none; align-items:center; justify-content:center; padding:30px;
}
.ecrin-zoom-overlay.open{ display:flex; }
.ecrin-zoom-overlay img{ max-width:min(92vw,900px); max-height:88vh; object-fit:contain; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default; }
.ecrin-zoom-close{
  position:absolute; top:18px; right:22px; background:rgba(255,255,255,.12); color:#fff; border:none;
  width:40px; height:40px; border-radius:50%; font-size:22px; cursor:pointer; line-height:1;
}
.ecrin-zoom-close:hover{ background:rgba(255,255,255,.25); }

/* ===== Ürün yorumları ===== */
.review-section{ margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.review-section h4{ font-size:14px; margin-bottom:10px; }
.review-list{ display:flex; flex-direction:column; gap:12px; max-height:220px; overflow-y:auto; margin-bottom:6px; }
.review-item{ background:var(--bg); border-radius:10px; padding:12px 14px; }
.review-item-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.review-item-date{ font-size:11px; color:var(--gray); margin:2px 0 6px; }
.review-item p{ font-size:13px; line-height:1.5; }
.review-stars-static span{ color:#dfe4e8; font-size:14px; }
.review-stars-static span.on{ color:var(--gold); }
.review-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.review-stars-input{ font-size:24px; letter-spacing:2px; cursor:pointer; }
.review-stars-input span{ color:#dfe4e8; }
.review-stars-input span.on{ color:var(--gold); }
#ecrinReviewAvg{ font-size:13px; font-weight:600; color:var(--gray); }

/* ===== IBAN / ödeme bilgisi kutusu ===== */
.iban-box{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:12px; }
.iban-box h4{ font-size:13.5px; margin-bottom:10px; color:var(--blue-dark); }
.iban-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 0; flex-wrap:wrap; }
.iban-row span{ color:var(--gray); min-width:60px; }
.iban-row strong{ word-break:break-all; }
.iban-copy-row strong{ flex:1; }
.iban-note{ font-size:12px; color:var(--gray); margin-top:8px; }

/* ===== Hesap ayarları / şifre değiştirme ===== */
.account-settings-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-top:20px; max-width:440px; }
.account-settings-card h3{ font-size:16px; margin-bottom:14px; }

@media(max-width:600px){
  .ecrin-zoom-overlay{ padding:14px; }
  .review-list{ max-height:180px; }
  .modal-box{ padding:22px 18px; }
  .account-settings-card{ padding:18px; max-width:none; }
  #tab-ayarlar form{ max-width:none !important; }
  .review-stars-input{ font-size:28px; }
}

/* ===== Ürün Detay Sayfası (urun.html) ===== */
.pd-page{ max-width:1100px; margin:0 auto; padding:26px 20px 60px; }
.pd-breadcrumb{ font-size:12.5px; color:var(--gray); margin-bottom:18px; }
.pd-breadcrumb a{ color:var(--gray); text-decoration:none; }
.pd-breadcrumb a:hover{ color:var(--blue); text-decoration:underline; }
.pd-breadcrumb span{ margin:0 4px; }
.pd-grid{ display:grid; grid-template-columns:minmax(260px,420px) 1fr; gap:36px; align-items:start; }
.pd-grid > *{ min-width:0; }
.pd-image-box{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; min-width:0; max-width:100%; overflow:hidden; }
.pd-image-box img{ max-width:100%; max-height:420px; object-fit:contain; }

/* ----- Ürün fotoğrafı: fareyle büyüteç (zoom) efekti -----
   .pd-zoom-wrap ve .pd-image-box her ikisi de overflow:hidden ile
   sınırlı; resim mouse ile büyütüldüğünde bu kutunun dışına
   taşamaz, sayfayı kaplayamaz. */
.pd-zoom-wrap{
  position:relative; width:100%; max-width:100%; max-height:420px;
  overflow:hidden; border-radius:10px; cursor:zoom-in;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y; contain:layout paint; isolation:isolate;
}
.pd-zoom-wrap img{ max-width:100%; max-height:420px; object-fit:contain; transition:transform .12s ease-out; will-change:transform; user-select:none; -webkit-user-drag:none; }
.pd-zoom-wrap.is-zooming img{ transition:none; }

/* ----- Küçük fotoğraf şeridi (otomatik geçişli) ----- */
.pd-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.pd-thumb{ width:60px; height:60px; border-radius:8px; overflow:hidden; border:2px solid var(--line); cursor:pointer; opacity:.65; transition:.15s; padding:0; background:var(--card-bg); flex-shrink:0; }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover{ opacity:1; }
.pd-thumb.active{ border-color:var(--blue); opacity:1; box-shadow:0 0 0 2px rgba(18,121,168,.18); }
.pd-info h1#pdName{ font-size:24px; line-height:1.3; margin-bottom:10px; }
.pd-stars-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pd-review-count-label{ font-size:12.5px; color:var(--gray); }
.pd-price{ font-size:26px; font-weight:800; color:var(--blue-dark, var(--blue)); margin-bottom:18px; }
.pd-actions{ display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.pd-actions .btn{ padding:13px 22px; }
.pd-like-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--card-bg); border:1.5px solid var(--line); border-radius:9px; padding:11px 18px; font-weight:700; font-size:13.5px; cursor:pointer; color:var(--text); transition:.15s; }
.pd-like-btn:hover{ border-color:#f2b8c6; background:#fff5f7; }
.pd-desc{ font-size:14px; line-height:1.75; color:var(--text); white-space:pre-line; border-top:1px solid var(--line); padding-top:18px; }
.pd-review-section{ margin-top:38px; max-width:720px; }
.pd-review-section .review-list{ max-height:none; }
#pdReviewAvg{ font-size:13px; font-weight:600; color:var(--gray); }

.pd-review-write-box{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-top:26px; }
.pd-review-write-box h4{ font-size:15px; margin-bottom:4px; }
.pd-review-write-sub{ font-size:12.5px; color:var(--gray); margin-bottom:18px; }
.pd-review-form{ gap:16px; }
.pd-review-field{ display:flex; flex-direction:column; gap:6px; }
.pd-review-field label{ font-size:12.5px; font-weight:700; color:var(--text); }
.pd-review-field-row{ display:flex; gap:14px; }
.pd-review-field-row .pd-review-field{ flex:1; }
.pd-review-form input[type="text"],
.pd-review-form textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:13.5px; font-family:inherit; background:var(--card-bg); outline:none; resize:vertical;
  transition:.15s;
}
.pd-review-form input[type="text"]:focus,
.pd-review-form textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,121,168,.12); }
.pd-review-form .review-stars-input{ font-size:30px; letter-spacing:6px; }
.pd-review-form .review-stars-input span{ transition:.1s; display:inline-block; }
.pd-review-form .review-stars-input span:hover{ transform:scale(1.12); }
.pd-review-form #pdReviewSubmitBtn{ align-self:flex-start; padding:12px 26px; }
.pd-review-form .ecrin-checkout-msg{ margin-bottom:0; }

@media(max-width:600px){
  .pd-review-write-box{ padding:18px; }
  .pd-review-field-row{ flex-direction:column; gap:16px; }
  .pd-review-form #pdReviewSubmitBtn{ width:100%; }
}

/* ============================================================
   KATEGORİ MENÜSÜ — MOBİL (sıfırdan)
   Telefonda alt kategori sekmeleri (yatay kaydırma + küçük
   açılır kutular) tamamen kaldırıldı — taşma/kesilme sorununa
   sebep oluyordu. Bunun yerine tek bir "Tüm Kategoriler" düğmesi
   tam ekran, kendi arka planı olan bir çekmece (drawer) açar.
   Bu çekmece her zaman ekranı tam kaplar; hiçbir içeriğin
   üstüne binmez, kenardan taşmaz.
   ============================================================ */
@media(max-width:900px){
  .nav-inner{ display:block; padding:10px 16px; }
  .nav-links{ display:none; } /* alt kategori sekmeleri: sadece masaüstünde */
  .nav-item{ position:static; }

  /* JS çalışsa da çalışmasa da (önbellek, engelleme, hata, geç yükleme
     vb.) buton her zaman çalışsın diye saf CSS yedek kuralı: */
  .all-cats-checkbox:checked ~ .all-cats-panel{ display:flex !important; }

  .all-cats-btn{
    margin:0; width:100%; justify-content:center; padding:13px 16px;
    font-size:14px; border-radius:10px;
  }
  .all-cats-btn.force-open-btn{ filter:brightness(1.05); }

  /* "Tüm Kategoriler" paneli mobilde tam ekran çekmece olur.
     Masaüstündeki :hover ile açılma davranışı telefonda dokunuşu
     "hover" sanıp menüyü istemsiz açabildiği için burada kapatılıyor;
     mobilde panel SADECE nav-mobile.js'in eklediği .force-open
     sınıfıyla açılır. */
  .all-cats-panel{
    position:fixed; inset:0; top:0; left:0; right:0; bottom:0;
    width:100%; max-width:none; height:100%; max-height:none;
    margin:0; border-radius:0; border:none; box-shadow:none;
    display:none; z-index:200; background:var(--card-bg);
  }
  .all-cats-btn:hover + .all-cats-panel{ display:none !important; }
  .all-cats-panel:hover{ display:none !important; }
  /* Not: yukarıdaki iki kural (:hover + üç sınıf seviyesi) telefonda
     dokunmanın "hover" sanılıp menüyü istemsiz açmasını engellemek
     için var. Ama aynı yüksek özgüllük (specificity) yüzünden,
     kullanıcı düğmeye dokunduğunda tarayıcı :hover durumunu "takılı"
     bırakırsa, bu kurallar nav-mobile.js'in eklediği .force-open
     durumunu da eziyordu — panel hiç görünmüyordu. body.cat-menu-open
     ile özgüllüğü eşitleyip kaynak sırasında en sona koyarak
     .force-open her zaman kazanır hale getirildi. */
  body.cat-menu-open .all-cats-panel.force-open{ display:flex !important; }

  .all-cats-panel-head{
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
    padding:16px 18px; border-bottom:1px solid var(--line);
    font-size:15px; font-weight:800; color:var(--text);
  }
  .all-cats-panel-close{
    width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
    background:var(--bg); color:var(--text); font-size:16px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .all-cats-panel-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 0 24px; }
  .all-cats-panel a{ padding:14px 18px; font-size:14.5px; }

  /* Çekmece açıkken arka sayfa kaydırılmasın */
  body.cat-menu-open{ overflow:hidden; }
  .nav-menu-backdrop{ display:none; }
}
@keyframes navFadeIn{ from{ opacity:0; } to{ opacity:1; } }

@media(max-width:600px){
  .all-cats-btn span, .all-cats-btn{ font-size:13px; }
}

/* ============================================================
   FORM ELEMANLARI — tema (dark/light) uyumlu görünüm
   ============================================================ */
input, select, textarea{
  color:var(--text);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--card-bg); color:var(--text); border-color:var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:var(--gray); opacity:.85; }
html[data-theme="dark"] .store-sidebar .cat-link:hover{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .dropdown a:hover,
html[data-theme="dark"] .all-cats-panel a:hover,
html[data-theme="dark"] .acc-menu-panel a:hover{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .all-cats-panel a span{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .review-item{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .iban-box{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .cat-list-item{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .btn-secondary{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] .toast{ background:#eef3f6; color:#12232e; }
html[data-theme="dark"] .badge-gray{ background:rgba(219,238,255,.12); color:#bcd8ea; }
html[data-theme="dark"] .badge-green{ background:rgba(15,122,69,.22); color:#7fe0ac; }
html[data-theme="dark"] .badge-red{ background:rgba(160,32,32,.25); color:#ff9d9d; }
html[data-theme="dark"] .badge-blue{ background:rgba(11,90,128,.3); color:#9fd6f5; }
html[data-theme="dark"] .btn-danger{ background:rgba(160,32,32,.22); color:#ff9d9d; }
html[data-theme="dark"] .btn-danger:hover{ background:rgba(160,32,32,.32); }
html[data-theme="dark"] .pd-like-btn:hover{ border-color:#c23458; background:rgba(194,52,88,.12); }
html[data-theme="dark"] .warn-box{ background:rgba(138,90,0,.25); color:#ffd27a; }
html[data-theme="dark"] .file-drop{ background:var(--btn-secondary-bg); }
html[data-theme="dark"] ::selection{ background:var(--blue); color:#fff; }

/* Fiyatların karanlık modda belirgin ("patlayan") görünmesi */
html[data-theme="dark"] .product-price{
  color:var(--gold); text-shadow:0 0 16px rgba(245,179,1,.35);
}
html[data-theme="dark"] .product-price .old{ color:#7e8c95; }
html[data-theme="dark"] .pd-price{ color:var(--gold); text-shadow:0 0 18px rgba(245,179,1,.3); }

/* ============================================================
   TEMA DEĞİŞTİRME BUTONU (theme.js tarafından eklenir)
   ============================================================ */
.theme-toggle-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--card-bg); color:var(--text);
  cursor:pointer; flex-shrink:0; transition:background .15s, border-color .15s, transform .15s, color .15s;
}
.theme-toggle-btn:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.theme-toggle-btn svg{ width:18px; height:18px; }
.theme-toggle-floating{
  position:fixed; right:18px; bottom:18px; z-index:250;
  width:46px; height:46px; box-shadow:0 10px 24px var(--shadow-color);
}
@media(max-width:600px){
  .theme-toggle-btn{ width:34px; height:34px; }
  .theme-toggle-btn svg{ width:16px; height:16px; }
}

@media(max-width:760px){
  .pd-grid{ grid-template-columns:1fr; gap:20px; }
  .pd-image-box{ min-height:220px; padding:14px; }
  .pd-info h1#pdName{ font-size:20px; }
  .pd-price{ font-size:22px; }
}