:root {
  --navy: #0f1b33;
  --navy-2: #182a4d;
  --gold: #c9a227;
  --gold-2: #e3c565;
  --cream: #faf6ee;
  --ink: #1d2230;
  --muted: #6b7280;
  --burgundy: #7a1f2b;
  --bs-primary: var(--navy);
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-link-color: var(--navy-2);
  --bs-link-hover-color: var(--gold);
}
body { background: var(--cream); }
h1, h2, h3, h4, .brand, .display-font { font-family: 'Playfair Display', Georgia, serif; }

/* butonlar */
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-2); border-color: var(--gold-2); color: var(--navy); }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.text-gold { color: var(--gold) !important; }
.bg-navy { background: var(--navy) !important; }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .2); }

/* üst menü */
.topbar { background: var(--gold); color: var(--navy); font-size: .85rem; font-weight: 500; }
.navbar-kral { background: var(--navy); }
.navbar-kral .navbar-brand { color: #fff; font-size: 1.6rem; letter-spacing: .5px; }
.navbar-kral .navbar-brand i { color: var(--gold); }
.navbar-kral .nav-link { color: rgba(255, 255, 255, .8); }
.navbar-kral .nav-link:hover, .navbar-kral .nav-link.active { color: var(--gold); }
.cart-badge { background: var(--gold); color: var(--navy); font-size: .7rem; }

/* hero */
.hero {
  background: linear-gradient(120deg, rgba(15, 27, 51, .96), rgba(24, 42, 77, .88)),
    repeating-linear-gradient(45deg, #0f1b33 0 12px, #12213f 12px 24px);
  color: #fff; padding: 5rem 0; position: relative; overflow: hidden;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.hero .crown { font-size: clamp(8rem, 18vw, 15rem); color: var(--gold); opacity: .18; position: absolute; right: 6%; top: 50%; transform: translateY(-50%) rotate(8deg); }
.divider-gold { width: 70px; height: 3px; background: var(--gold); border: 0; opacity: 1; }

/* ürün kartı */
.product-card { border: 0; border-radius: .75rem; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(15, 27, 51, .07); transition: transform .2s, box-shadow .2s; height: 100%; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15, 27, 51, .15); }
.product-img { aspect-ratio: 3 / 4; background: linear-gradient(135deg, #e9e2d0, #f6f1e4); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-img .ph { font-size: 4rem; color: var(--gold); opacity: .6; }
.price { color: var(--navy); font-weight: 700; }
.badge-soldout { position: absolute; top: .6rem; left: .6rem; }
.category-pill { color: var(--navy); border: 1px solid rgba(15, 27, 51, .2); border-radius: 50rem; padding: .35rem .95rem; text-decoration: none; font-size: .9rem; background: #fff; }
.category-pill:hover, .category-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* beden seçimi */
.size-opt input { display: none; }
.size-opt label { min-width: 3rem; text-align: center; border: 1.5px solid #cfc8b6; border-radius: .5rem; padding: .45rem .8rem; cursor: pointer; background: #fff; font-weight: 600; }
.size-opt input:checked + label { background: var(--navy); color: #fff; border-color: var(--navy); }
.size-opt input:disabled + label { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.panel-card { background: #fff; border: 0; border-radius: .75rem; box-shadow: 0 2px 10px rgba(15, 27, 51, .07); }


footer.site { background: var(--navy); color: rgba(255, 255, 255, .75); }
footer.site a { color: rgba(255, 255, 255, .75); text-decoration: none; }
footer.site a:hover { color: var(--gold); }

/* takip zaman çizelgesi */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 2rem; border-left: 2px solid #ddd5bf; margin-left: .6rem; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -.55rem; top: .1rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--gold); }

/* ---- admin ---- */
.admin-wrap { display: flex; min-height: 100vh; }
.admin-side { width: 240px; background: var(--navy); color: #fff; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-side .brand { font-size: 1.35rem; padding: 1.25rem 1.25rem 1rem; display: block; color: #fff; text-decoration: none; }
.admin-side .brand i { color: var(--gold); }
.admin-side a.item { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.25rem; color: rgba(255, 255, 255, .75); text-decoration: none; border-left: 3px solid transparent; }
.admin-side a.item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.admin-side a.item.active { background: rgba(201, 162, 39, .14); color: var(--gold); border-left-color: var(--gold); }
.admin-main { flex: 1; min-width: 0; padding: 1.5rem; }
.stat-card { border-left: 4px solid var(--gold); }
.table > :not(caption) > * > * { vertical-align: middle; }
.wa-btn { background: #25d366; border-color: #25d366; color: #fff; }
.wa-btn:hover { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }
.thumb { width: 44px; height: 56px; object-fit: cover; border-radius: .4rem; background: #eee; }
.login-box { max-width: 400px; margin: 8vh auto; }

@media (max-width: 991px) {
  .admin-wrap { flex-direction: column; }
  .admin-side { width: 100%; height: auto; position: static; display: flex; flex-wrap: wrap; align-items: center; }
  .admin-side .brand { width: 100%; padding-bottom: .5rem; }
  .admin-side a.item { padding: .5rem .8rem; border-left: 0; }
  .admin-main { padding: 1rem; }
}

/* ================= admin v2 ================= */
.admin-wrap { background: #f2f3f7; }
.admin-side { width: 252px; background: linear-gradient(180deg, #0f1b33 0%, #0b1426 100%); }
.admin-side .brand { padding: 1.4rem 1.35rem 1.1rem; font-size: 1.4rem; }
.admin-side .grp { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 1rem 1.35rem .35rem; }
.admin-side a.item { margin: 1px .6rem; padding: .55rem .8rem; border-left: 0; border-radius: .6rem; font-size: .93rem; }
.admin-side a.item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.admin-side a.item.active { background: rgba(201,162,39,.18); color: var(--gold-2); }
.admin-main { padding: 0; }
.admin-top { background: #fff; border-bottom: 1px solid #e6e8ef; padding: .85rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 20; }
.admin-top h1 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.15rem; margin: 0; }
.admin-top .date { color: var(--muted); font-size: .85rem; }
#content { padding: 1.5rem; width: 100%; max-width: none; }
.panel-card { border: 1px solid #e9ebf1; box-shadow: 0 1px 2px rgba(15,27,51,.04); border-radius: .9rem; }
.panel-card .card-h { padding: .9rem 1.1rem; border-bottom: 1px solid #eef0f5; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; }
.kpi { padding: 1.1rem 1.2rem; display: flex; gap: .9rem; align-items: center; height: 100%; }
.kpi .ico { width: 46px; height: 46px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.kpi .lbl { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .val { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.kpi .sub { font-size: .78rem; color: var(--muted); }
.ico-blue { background: #e6eefb; color: #2a5fb0; } .ico-amber { background: #fbf0df; color: #b8741a; }
.ico-gold { background: #f8f0d3; color: #9a7b10; } .ico-green { background: #e1f3ec; color: #1d7a5a; }
.ico-red { background: #f9e3e5; color: #a3263a; } .ico-slate { background: #e8eaf0; color: #3c4560; }
.attn { display: flex; flex-wrap: wrap; gap: .6rem; }
.attn a { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid #e9ebf1; border-radius: .7rem; padding: .55rem .85rem; display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.attn a:hover { border-color: var(--gold); }
.attn a b { font-size: 1.05rem; } .attn a.hot { border-color: #e7b8bf; background: #fdf3f4; }
.chart-box { position: relative; height: 280px; }
.bar-row { display: flex; align-items: center; gap: .6rem; font-size: .88rem; margin-bottom: .7rem; }
.bar-row .track { flex: 1; height: 8px; background: #eef0f5; border-radius: 4px; overflow: hidden; }
.bar-row .fill { height: 100%; background: #2a5fb0; border-radius: 0 4px 4px 0; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: #fafbfd; border-bottom-color: #eef0f5; }
.table-hover > tbody > tr:hover > * { background: #fafbfe; }
.tag { display: inline-block; background: #eef0f6; color: #3c4560; border-radius: 50rem; padding: .1rem .6rem; font-size: .75rem; margin: 0 .2rem .2rem 0; }
.tag.vip { background: #f8f0d3; color: #7d610a; }
.note-item { border-left: 3px solid var(--gold); background: #fffdf5; padding: .55rem .8rem; border-radius: 0 .5rem .5rem 0; margin-bottom: .6rem; font-size: .9rem; }
.modal-content { border: 0; border-radius: 1rem; }
.modal-header { border-bottom-color: #eef0f5; } .modal-footer { border-top-color: #eef0f5; }
.text-money-in { color: #2a5fb0; } .text-money-out { color: #b8741a; }
.summary-text { white-space: pre-wrap; background: #f7f8fb; border: 1px dashed #cfd3df; border-radius: .6rem; padding: 1rem; font-size: .9rem; }
@media (max-width: 991px) {
  .admin-side { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .3rem; }
  .admin-side .grp, .admin-side .brand { display: none; }
  .admin-side a.item { white-space: nowrap; margin: .3rem .15rem; }
  .admin-top { position: static; padding: .7rem 1rem; } #content { padding: 1rem; }
}
@media print { .admin-side, .admin-top, .no-print { display: none !important; } #content { padding: 0; } }
.panel-card .table { --bs-table-bg: transparent; --bs-table-hover-bg: #fafbfe; background: #fff; }
.panel-card { background: #fff; overflow: hidden; }
.pay-opt { cursor: pointer; } .pay-opt:has(input:checked) { border-color: var(--gold) !important; background: #fffaf0; }

/* ana sayfa: özellik kartları, kategori hapları, bölüm başlığı */
.feature-card { height: 100%; background: #fff; border: 1px solid #ece6d3; border-radius: 1rem; padding: 1.4rem 1rem 1.2rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(15,27,51,.25); border-color: var(--gold-2); }
.feature-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 0 0 4px rgba(201,162,39,.18); margin-bottom: .8rem; }
.feature-ic i { font-size: 1.4rem; color: var(--gold-2); }
.feature-t { font-weight: 600; color: var(--navy); margin-bottom: .2rem; }
.feature-d { font-size: .84rem; color: var(--muted); line-height: 1.4; }
.cat-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cat-row .category-pill { display: inline-block; padding: .5rem 1.3rem; border: 1px solid #e0d9c2; border-radius: 50rem; background: #fff; color: var(--navy); font-size: .9rem; font-weight: 500; text-decoration: none; transition: .18s; }
.cat-row .category-pill:hover { background: var(--navy); border-color: var(--navy); color: var(--gold-2); transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(15,27,51,.6); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid #e6dfc9; position: relative; }
.sec-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--gold); border-radius: 2px; }
.sec-eyebrow { display: block; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .15rem; }
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--navy); }
.sec-link { color: var(--navy); font-weight: 600; font-size: .92rem; text-decoration: none; padding: .45rem 1rem; border: 1px solid var(--navy); border-radius: 50rem; transition: .18s; white-space: nowrap; }
.sec-link:hover { background: var(--navy); color: var(--gold-2); }
.sec-link i { transition: transform .18s; display: inline-block; }
.sec-link:hover i { transform: translateX(3px); }