/* ============================================================
   Modern Theme — Oğuzlar Shop
   Mobil-uyumlu, sade, modern.
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #0f172a;
  background: var(--bg, #f8fafc);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; color: #0f172a; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  background: #fff;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}
.topbar {
  background: var(--dark, #0f172a);
  color: #cbd5e1;
  font-size: 12px;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 14px; }
.topbar-left, .topbar-right { display: flex; gap: 18px; align-items: center; }
.topbar-link { color: #cbd5e1; }
.lang { padding: 2px 6px; border-radius: 4px; font-weight: 600; opacity: .65; }
.lang.active { background: var(--primary, #2563eb); color:#fff; opacity: 1; }

.navbar { padding: 14px 0; }
.navbar-inner { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #0f172a; }
.brand-mark { width: 38px; height: 38px; display:grid; place-items:center; background: var(--primary); color: #fff; border-radius: 10px; font-size: 18px; }
.brand-text { white-space: nowrap; }

.main-nav { flex: 1; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px;
  font-weight: 500; font-size: 14px; color: #334155;
  transition: .15s;
}
.main-nav > ul > li > a:hover { background: #f1f5f9; color: var(--primary); }
.chev { font-size: 10px; opacity: .6; }

/* Mega menü */
.mega {
  position: absolute; top: 100%; left: 0;
  min-width: 480px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 50px -10px rgba(15,23,42,.18);
  padding: 20px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .18s;
  z-index: 50;
}
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.mega-title { font-weight: 700; color: #0f172a; display: block; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin-bottom: 8px; }
.mega-col ul li a { display: block; padding: 6px 0; font-size: 14px; color: #475569; }
.mega-col ul li a:hover { color: var(--primary); }

.navbar-search { flex-basis: 320px; }
.navbar-search form {
  display: flex; align-items: center; background: #f1f5f9; border-radius: 10px; padding: 4px;
}
.navbar-search input {
  flex: 1; border: 0; background: transparent; padding: 8px 12px; font-size: 14px; color: #0f172a; outline: none;
}
.navbar-search button { background: var(--primary); color:#fff; border:0; border-radius: 8px; width: 36px; height: 36px; }

.menu-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 4px; align-items: center; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: #0f172a; border-radius: 2px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--primary, #2563eb); color: #fff; }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(37,99,235,.45); }
.btn-outline { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-light { background: #fff; color: #0f172a; }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.25); }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* ============================================================
   Hero (fallback) — turuncu kampanya kartı + iki ürün
   Ekran görüntüsündeki stil
   ============================================================ */
.hero-fallback { padding: 28px 0; }
.hero-fallback-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 20px;
  align-items: stretch;
}
.hero-card {
  position: relative;
  border-radius: 22px;
  padding: 40px;
  color: #fff;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-card-accent {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 60%, #c2410c 100%);
}
.hero-card::before, .hero-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.hero-card::before { width: 220px; height: 220px; top: -60px; right: -60px; }
.hero-card::after  { width: 140px; height: 140px; bottom: -50px; right: 60px; background: rgba(255,255,255,.05); }
.hero-card .tag {
  display: inline-block; padding: 8px 16px;
  background: rgba(255,255,255,.95); color: #c2410c;
  border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  align-self: flex-start;
}
.hero-card h1 { color:#fff; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; margin: 18px 0 14px; }
.hero-card p { color: rgba(255,255,255,.92); font-size: 15px; max-width: 320px; }
.hero-price { display: flex; flex-direction: column; gap: 4px; margin: 20px 0; }
.hero-from { font-size: 12px; opacity: .85; letter-spacing: .5px; }
.hero-amount { font-size: 44px; font-weight: 800; line-height: 1; }

.hero-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ============================================================
   Slider
   ============================================================ */
.hero-slider { position: relative; overflow: hidden; }
.slides .slide { display: none; padding: 60px 0; min-height: 420px; }
.slides .slide.active { display: block; }
.slide-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.slide-tag { display:inline-block; padding:6px 14px; background: rgba(255,255,255,.15); border-radius: 100px; font-size: 12px; font-weight: 700; }
.slide-content h1 { font-size: clamp(28px, 4vw, 48px); }
.slider-dots { display: flex; justify-content: center; gap: 8px; padding: 16px 0; }
.slider-dots .dot { width: 8px; height: 8px; border-radius:50%; border:0; background: #cbd5e1; }
.slider-dots .dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

/* ============================================================
   Sections
   ============================================================ */
.section { padding: 50px 0; }
.section-alt { background: #f1f5f9; }
.section-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;
}
.section-head h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(20px, 2.4vw, 28px);
}
.section-head .bar { display:inline-block; width: 4px; height: 24px; background: var(--primary); border-radius: 4px; }
.section-head .link { color: var(--primary); font-weight: 600; font-size: 14px; }

/* ============================================================
   Product grid + card
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.product-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: .18s;
  position: relative;
}
.product-card:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -10px rgba(15,23,42,.15);
}
.product-card-media {
  position: relative;
  aspect-ratio: 1;
  background: #f8fafc;
  display: grid; place-items: center;
  overflow: hidden;
}
.product-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.product-placeholder { font-size: 64px; opacity: .25; }
.product-placeholder.large { font-size: 128px; }
.badge {
  position: absolute; padding: 4px 10px; font-size: 10px; font-weight: 700; border-radius: 6px; letter-spacing: .5px;
}
.badge-campaign { top: 10px; left: 10px; background: #ef4444; color:#fff; }
.badge-energy { top: 38px; left: 10px; background: #10b981; color: #fff; }
.badge-brand { top: 10px; right: 10px; background: rgba(255,255,255,.9); color: #334155; backdrop-filter: blur(4px); }

.product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-cat { font-size: 11px; color: #64748b; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.product-name { font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.35; min-height: 38px; }
.product-price { font-size: 20px; font-weight: 800; color: #0f172a; margin: 4px 0; }
.product-card-actions { display: flex; gap: 6px; margin-top: auto; }
.btn-buy { flex: 1; padding: 9px 12px; font-size: 13px; }
.btn-detail { padding: 9px 12px; font-size: 13px; }

/* ============================================================
   Page heads / product detail
   ============================================================ */
.page-head { background: #fff; padding: 40px 0 30px; border-bottom: 1px solid #e2e8f0; }
.page-head h1 { font-size: clamp(24px, 3vw, 36px); }
.page-sub { color: #64748b; max-width: 720px; }

.empty-state { padding: 60px 20px; text-align: center; color: #64748b; }

.pd-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 30px 0; }
.pd-main { background: #fff; border-radius: 16px; aspect-ratio: 1; display:grid; place-items:center; overflow: hidden; border: 1px solid #e2e8f0; }
.pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 30px; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs img { width: 72px; height: 72px; object-fit: contain; padding: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.pd-thumbs img:hover { border-color: var(--primary); }

.pd-brand { color: var(--primary); font-weight: 600; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.pd-title { font-size: clamp(22px, 3vw, 32px); margin-top: 4px; }
.pd-short { color: #475569; margin: 10px 0 20px; }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.pd-compare { color: #94a3b8; text-decoration: line-through; font-size: 16px; }
.pd-price { font-size: 34px; font-weight: 800; color: #0f172a; }
.pd-stock { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; display: inline-block; margin: 8px 0 18px; }
.pd-stock.in { background: #ecfdf5; color: #047857; }
.pd-stock.out { background: #fef2f2; color: #b91c1c; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.qty { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.qty button { width: 40px; height: 44px; background: #f8fafc; border: 0; font-size: 18px; }
.qty input { width: 56px; height: 44px; border: 0; text-align: center; font-size: 15px; font-weight: 600; outline: none; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 18px; border-top: 1px solid #e2e8f0; color: #475569; font-size: 13px; }
.pd-meta li { display: flex; align-items: center; gap: 6px; }

.pd-tabs, .pd-reviews { padding: 30px 0; border-top: 1px solid #e2e8f0; }
.pd-desc, .prose { color: #334155; line-height: 1.7; }
.prose p { margin: 0 0 14px; }

.review { padding: 18px 0; border-bottom: 1px solid #e2e8f0; }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.review-head .muted { color: #94a3b8; font-size: 12px; }
.review-head .stars { color: #f59e0b; }
.review-title { display:block; margin: 4px 0; }

/* ============================================================
   Features row
   ============================================================ */
.features-row { padding: 40px 0; background: #fff; border-top: 1px solid #e2e8f0; }
.features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.feature { display: flex; gap: 14px; align-items: center; }
.feature .ico { font-size: 32px; }
.feature strong { display: block; color: #0f172a; font-size: 14px; }
.feature span { display: block; font-size: 12px; color: #64748b; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--dark, #0f172a); color: #cbd5e1; padding: 60px 0 24px; margin-top: 40px; }
.site-footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.footer-about { font-size: 13px; color: #94a3b8; max-width: 280px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid #1e293b; }
.site-footer ul li a { display: block; padding: 4px 0; font-size: 13px; color: #cbd5e1; }
.site-footer ul li a:hover { color: #fff; }
.contact li { padding: 4px 0; font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; font-size: 12px; color: #64748b; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   Cart count
   ============================================================ */
.cart-count {
  display: inline-block; min-width: 18px; height: 18px;
  padding: 0 5px; background: var(--accent, #f97316); color:#fff;
  border-radius: 100px; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-fallback-grid { grid-template-columns: 1fr; }
  .pd-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .navbar-search { display: none; }
}

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .main-nav {
    position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh;
    background: #fff; padding: 80px 20px 20px;
    transition: right .25s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,.1);
    overflow-y: auto;
  }
  body.menu-open .main-nav { right: 0; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 16px 12px; min-width: 0; }
  .mega-inner { grid-template-columns: 1fr; gap: 12px; }
  .navbar-inner { gap: 12px; }

  .topbar-left { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card-actions { flex-direction: column; }
  .btn-detail { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }

  .hero-card { min-height: 360px; padding: 28px; }
  .hero-card h1 { font-size: 28px; }
  .hero-amount { font-size: 34px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-name { font-size: 13px; }
  .product-price { font-size: 17px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAZ 3 — Sepet, Checkout, Order Thanks
   ============================================================ */

.page-title{font-size:28px;font-weight:700;margin:24px 0 20px;color:#0f172a}

/* Empty state */
.empty-state{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:60px 30px;text-align:center}
.empty-state-icon{font-size:60px;margin-bottom:14px;opacity:.4}
.empty-state h3{font-size:20px;margin-bottom:8px}
.empty-state p{color:#64748b;margin-bottom:18px}

/* ----------- SEPET ----------- */
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:24px}
.cart-table-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;padding:14px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:12px;text-transform:uppercase;color:#64748b;letter-spacing:.5px}
.cart-table td{padding:14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.cart-table tbody tr:last-child td{border-bottom:0}
.cart-img{width:80px}
.cart-img img{width:64px;height:64px;object-fit:contain;background:#f8fafc;border-radius:8px;padding:4px}
.cart-img .ph{width:64px;height:64px;background:#f1f5f9;border-radius:8px;display:grid;place-items:center;color:#94a3b8;font-size:24px}
.cart-name strong{display:block;font-size:14px}
.cart-name .sku{font-size:11px;color:#94a3b8;margin-top:2px}
.qty-input{width:60px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;text-align:center}
.btn-remove{width:28px;height:28px;border-radius:50%;background:#fee2e2;color:#dc2626;border:0;cursor:pointer;font-size:16px;line-height:1}
.btn-remove:hover{background:#fecaca}
.cart-actions{padding:16px;display:flex;justify-content:space-between;gap:10px;background:#f8fafc;border-top:1px solid #e2e8f0}

.cart-summary{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;height:fit-content;position:sticky;top:90px}
.cart-summary h3{font-size:16px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #e2e8f0}
.sum-row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:#475569}
.sum-row strong{color:#0f172a}
.sum-total{padding:12px 0;border-top:1px solid #e2e8f0;margin-top:8px;font-size:16px}
.sum-total strong{font-size:18px;color:#0f172a}

.btn-block{display:block;width:100%;text-align:center;margin-top:14px}
.btn-lg{padding:14px 24px;font-size:15px}

/* ----------- CHECKOUT ----------- */
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:24px}
.checkout-main{display:flex;flex-direction:column;gap:18px}
.co-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:22px}
.co-card h3{font-size:15px;margin-bottom:16px;color:#0f172a;font-weight:600}
.co-card h4{font-size:14px;margin-bottom:10px}

.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-3{grid-template-columns:1fr 2fr 1fr}
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.fg input,.fg textarea,.fg select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;background:#fff}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.fg .hint{font-size:12px;margin-top:4px}

/* Kargo seçimleri */
.ship-grid{display:flex;flex-direction:column;gap:10px}
.ship-option{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:.12s}
.ship-option:hover{border-color:#cbd5e1}
.ship-option.selected{border-color:#2563eb;background:#eff6ff}
.ship-option input{margin:0}
.ship-body{flex:1;display:flex;justify-content:space-between;align-items:center}
.ship-price{color:#16a34a;font-weight:600;font-size:14px}

/* Ödeme yöntemi kartları */
.pay-list{display:flex;flex-direction:column;gap:10px}
.pay-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:.12s}
.pay-option:hover{border-color:#cbd5e1}
.pay-option.selected{border-color:#2563eb;background:#eff6ff}
.pay-option input{margin-top:3px}
.pay-body{flex:1}
.pay-title{display:flex;align-items:center;gap:8px;font-size:14px}
.pay-icon{font-size:18px}
.pay-desc{font-size:12px;color:#64748b;margin-top:4px}
.adj-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:auto}
.adj-down{background:#dcfce7;color:#166534}
.adj-up{background:#fee2e2;color:#991b1b}

/* Kart formu */
.card-fields{margin-top:14px;padding:18px;background:linear-gradient(135deg,#1e293b,#334155);border-radius:12px;color:#fff}
.card-fields-inner .card-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-fields-inner h4{color:#fff;margin:0}
.card-fields-inner label{color:#cbd5e1}
.card-fields-inner input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.card-fields-inner input:focus{border-color:#60a5fa;background:rgba(255,255,255,.15)}
.card-fields-inner input::placeholder{color:rgba(255,255,255,.4)}
.card-brand-pill{padding:3px 10px;background:rgba(255,255,255,.15);border-radius:100px;font-size:12px;font-weight:600;display:none}
.card-secure-note{font-size:12px;color:#94a3b8;margin-bottom:14px;padding:8px 12px;background:rgba(0,0,0,.2);border-radius:6px}

/* Sözleşmeler */
.contract-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;font-size:13.5px}
.contract-row input{margin-top:2px}
.contract-row a{color:#2563eb;text-decoration:underline}

/* Checkout summary (sağ panel) */
.checkout-summary{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;height:fit-content;position:sticky;top:90px}
.checkout-summary h3{font-size:16px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #e2e8f0}
.co-items{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}
.co-item{display:flex;gap:10px}
.co-item-img{position:relative;flex-shrink:0}
.co-item-img img{width:50px;height:50px;object-fit:contain;background:#f8fafc;border-radius:6px;padding:3px;border:1px solid #e2e8f0}
.co-item-img .ph{width:50px;height:50px;background:#f1f5f9;border-radius:6px;display:grid;place-items:center;color:#94a3b8}
.qty-badge{position:absolute;top:-6px;right:-6px;background:#0f172a;color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:11px;font-weight:700}
.co-item-info{flex:1;min-width:0}
.co-item-info .name{font-size:13px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-item-info .price{font-size:13px;color:#64748b;margin-top:2px}
.co-totals{padding-bottom:14px;border-bottom:1px solid #e2e8f0;margin-bottom:14px}
.secure-note{font-size:12px;color:#64748b;text-align:center;margin-top:10px}

/* Alert (sepet uyarıları) */
.alert{padding:12px 16px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
.alert-warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}

/* ----------- ORDER THANKS ----------- */
.thanks-hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-radius:18px;margin-bottom:24px}
.check-mark{width:80px;height:80px;background:#16a34a;color:#fff;font-size:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 10px 25px rgba(22,163,74,.3)}
.thanks-hero h1{font-size:30px;color:#14532d;margin-bottom:8px}
.thanks-sub{color:#166534;margin-bottom:18px}
.order-no-box{display:inline-flex;flex-direction:column;align-items:center;background:#fff;padding:10px 24px;border-radius:10px;border:1px solid #16a34a}
.order-no-box .lbl{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
.order-no-box strong{font-size:18px;color:#0f172a;font-family:Consolas,Monaco,monospace}

.thanks-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-table{width:100%;font-size:14px}
.info-table td{padding:9px 0;border-bottom:1px solid #f1f5f9;vertical-align:top}
.info-table td:first-child{color:#64748b;width:38%}
.info-table tr:last-child td{border-bottom:0}
.next-step{padding:14px;background:#f8fafc;border-radius:10px;border-left:3px solid #2563eb;margin-bottom:10px}
.next-step strong{display:block;margin-bottom:6px;font-size:14px}
.next-step p{font-size:13px;color:#475569;line-height:1.5}
.iban-box{margin-top:10px;padding:12px;background:#fff;border:1px dashed #cbd5e1;border-radius:8px;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.8}

/* Responsive */
@media (max-width: 900px){
  .cart-grid,.checkout-grid,.thanks-grid{grid-template-columns:1fr}
  .cart-summary,.checkout-summary{position:static}
  .row,.row-3{grid-template-columns:1fr}
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{padding:10px 0;border-bottom:1px solid #f1f5f9}
  .cart-table td{padding:6px 14px;border:0}
  .cart-img{width:auto}
}

/* ============================================================
   PAYTR TARZI HEADER + MEGA MENU
   ============================================================ */

/* Reset eski header stillerini */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.06)}

/* Üst utility bar */
.topbar{background:#0f172a;color:#cbd5e1;font-size:12px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0;gap:20px}
.topbar-link{display:inline-flex;align-items:center;gap:5px;color:#cbd5e1;text-decoration:none;font-size:12px;transition:color .15s}
.topbar-link:hover{color:#fff}
.topbar-link svg{flex-shrink:0}
.topbar-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar-right{display:flex;gap:14px;align-items:center}
.topbar .lang{font-weight:600;padding:2px 7px;border-radius:4px;font-size:11px;color:#cbd5e1;text-decoration:none}
.topbar .lang.active{background:#2563eb;color:#fff}

/* Ana mavi navbar — PayTR tarzı */
.navbar{background:linear-gradient(180deg,#1e40af 0%,#1e3a8a 100%);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.navbar-inner{display:flex;align-items:center;gap:18px;padding:0;min-height:64px}

/* Logo */
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;font-size:17px;padding:14px 0;letter-spacing:.2px;white-space:nowrap}
.brand-mark{width:36px;height:36px;background:linear-gradient(135deg,#f97316,#ea580c);border-radius:9px;display:grid;place-items:center;color:#fff;box-shadow:0 2px 6px rgba(249,115,22,.4)}
.brand-text{font-weight:700}

/* Hamburger */
.menu-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* Ana nav */
.main-nav{flex:1}
.main-nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.main-nav li{position:relative}
.main-nav .nav-link{display:inline-flex;align-items:center;gap:6px;padding:13px 12px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;border-radius:7px;transition:background .15s;line-height:1}
.main-nav .nav-link:hover{background:rgba(255,255,255,.1)}
.main-nav .nav-ico{font-size:14px}
.main-nav .chev{font-size:10px;opacity:.7}

/* MEGA MENU — PayTR tarzı */
.has-mega .mega-wrap{position:absolute;top:100%;left:0;width:780px;max-width:90vw;padding-top:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:99}
.has-mega:hover .mega-wrap{opacity:1;visibility:visible;transform:translateY(0)}
.mega{background:#fff;border-radius:0 0 12px 12px;box-shadow:0 20px 40px -10px rgba(0,0,0,.18),0 0 0 1px rgba(15,23,42,.06);overflow:hidden;display:grid;grid-template-columns:220px 1fr;min-height:280px}

/* Sol açıklama paneli */
.mega-side{background:linear-gradient(160deg,#eff6ff,#dbeafe);padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between}
.mega-side-ico{font-size:44px;line-height:1;margin-bottom:14px}
.mega-side h4{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;line-height:1.2}
.mega-side p{font-size:12.5px;color:#475569;line-height:1.55;margin:0 0 18px}
.mega-side-cta{display:inline-block;background:#2563eb;color:#fff;padding:9px 14px;border-radius:7px;text-decoration:none;font-size:12.5px;font-weight:600;text-align:center;transition:background .15s}
.mega-side-cta:hover{background:#1d4ed8}

/* Sağ kategori grid */
.mega-grid{padding:22px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px 18px;align-content:flex-start}
.mega-col .mega-title{display:block;font-size:13.5px;font-weight:600;color:#0f172a;text-decoration:none;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #e2e8f0;transition:color .15s}
.mega-col .mega-title:hover{color:#2563eb}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col ul li{margin:0 0 6px}
.mega-col ul a{display:block;font-size:12.5px;color:#64748b;text-decoration:none;padding:3px 0;transition:color .15s}
.mega-col ul a:hover{color:#2563eb}

/* Navbar tools — arama + sepet */
.navbar-tools{display:flex;align-items:center;gap:10px}
.search-form{display:flex;background:rgba(255,255,255,.12);border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.search-form input{background:transparent;border:0;color:#fff;padding:8px 12px;font-size:13px;width:170px;outline:none}
.search-form input::placeholder{color:rgba(255,255,255,.6)}
.search-form button{background:transparent;border:0;color:#fff;padding:0 10px;cursor:pointer;display:grid;place-items:center}
.search-form button:hover{background:rgba(255,255,255,.08)}

.cart-btn{display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff;padding:9px 14px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;position:relative;transition:background .15s}
.cart-btn:hover{background:#ea580c}
.cart-btn .cart-count{position:absolute;top:-6px;right:-6px;background:#fff;color:#ea580c;border-radius:50%;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;font-weight:700;padding:0 5px}

/* Mobil */
@media (max-width:1100px){
  .search-form input{width:120px}
  .main-nav .nav-link{padding:11px 9px;font-size:13px}
}
@media (max-width:900px){
  .menu-toggle{display:flex}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#1e3a8a;padding:14px;max-height:0;overflow:hidden;transition:max-height .25s}
  body.menu-open .main-nav{max-height:80vh;overflow-y:auto}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .has-mega .mega-wrap{position:static;width:100%;opacity:1;visibility:visible;transform:none;padding-top:0}
  .mega{grid-template-columns:1fr;min-height:auto}
  .mega-side{padding:14px}
  .mega-grid{grid-template-columns:1fr 1fr;padding:14px;gap:14px}
  .search-form{display:none}
  .cart-label{display:none}
  .topbar-left{gap:8px}
  .topbar-left .topbar-link:nth-child(n+3){display:none}
}

/* ============================================================
   HERO SLIDER — Oğuzlar DTM fotoğraf birebir
   ============================================================ */
.hero-slider{position:relative;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#1e40af 100%);min-height:560px;overflow:hidden}
.hslide{display:none;min-height:560px;align-items:center}
.hslide.active{display:flex}
.hslide-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:60px 0;width:100%}

/* Sol içerik */
.hslide-content{color:#fff;max-width:540px}
.hslide-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:#fff;padding:8px 16px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:0.4px;margin-bottom:24px;border:1px solid rgba(255,255,255,0.2)}
.hslide-tag .ico{color:#f97316;font-size:9px;line-height:1}
.hslide-title{font-size:48px;font-weight:800;line-height:1.1;color:#fff;margin:0 0 18px;letter-spacing:-0.5px}
.hslide-desc{font-size:15px;line-height:1.6;color:rgba(255,255,255,0.85);margin:0 0 32px;max-width:480px}
.hslide-cta{display:inline-block;background:#0f172a;color:#fff;padding:15px 28px;border-radius:100px;text-decoration:none;font-size:14px;font-weight:600;transition:transform .15s,background .15s;box-shadow:0 8px 20px rgba(0,0,0,0.25)}
.hslide-cta:hover{background:#1e293b;transform:translateY(-1px)}

/* Sağ görsel */
.hslide-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.hslide-img{max-width:100%;max-height:480px;border-radius:18px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.4)}
.hslide-placeholder{width:100%;max-width:420px;height:420px;border:2px dashed rgba(255,255,255,0.25);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,0.4);font-size:13px}

/* Yüzen yeşil badge'ler */
.hslide-badge{position:absolute;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:9px 18px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:0.5px;box-shadow:0 8px 20px rgba(16,185,129,0.4);white-space:nowrap;z-index:2}
.hslide-badge.badge-tl{top:6%;left:-2%}
.hslide-badge.badge-tr{top:6%;right:-2%}
.hslide-badge.badge-bl{bottom:6%;left:-2%}
.hslide-badge.badge-br{bottom:6%;right:-2%}
.hslide-badge.badge-ml{top:50%;left:-4%;transform:translateY(-50%)}
.hslide-badge.badge-mr{top:50%;right:-4%;transform:translateY(-50%)}

/* Alt navigasyon */
.hslide-nav{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;z-index:5}
.hsnav-arrow{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;transition:background .15s;backdrop-filter:blur(6px)}
.hsnav-arrow:hover{background:rgba(255,255,255,0.22)}
.hsnav-dots{display:flex;gap:8px;align-items:center}
.hsnav-dot{width:32px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,0.3);cursor:pointer;padding:0;transition:background .2s,width .2s}
.hsnav-dot.active{background:#fff;width:48px}

/* Eski hero-fallback kaldır */
.hero-fallback{display:none !important}

/* Responsive */
@media (max-width:900px){
  .hero-slider{min-height:auto}
  .hslide{min-height:auto;padding:30px 0}
  .hslide-inner{grid-template-columns:1fr;gap:30px;padding:0}
  .hslide-title{font-size:32px}
  .hslide-desc{font-size:14px}
  .hslide-visual{min-height:280px}
  .hslide-placeholder{height:260px;max-width:100%}
  .hslide-badge{font-size:10px;padding:7px 12px}
  .hslide-badge.badge-tl,.hslide-badge.badge-tr,.hslide-badge.badge-bl,.hslide-badge.badge-br{left:0;right:auto}
  .hslide-badge.badge-tr,.hslide-badge.badge-br{left:auto;right:0}
  .hslide-nav{bottom:14px}
}