/* ============================================================
   BYEE — Ana Stil Dosyası
   İki tema: [data-theme="luxury"] ve [data-theme="minimal"]
   ============================================================ */
 
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
 
   /* ── CSS Değişkenleri — Lüks Tema ───────────────────────────── */
   :root,
   [data-theme="luxury"] {
     --bg:           #0a0a0a;
     --bg2:          #111111;
     --bg3:          #1a1a1a;
     --surface:      #161616;
     --border:       #2a2a2a;
     --gold:         #c9a96e;
     --gold-light:   #e8cfa0;
     --gold-dim:     #8a6a3a;
     --text:         #f0ead8;
     --text-muted:   #7a7060;
     --text-sub:     #b0a890;
     --accent:       #c9a96e;
     --accent-hover: #e8cfa0;
     --btn-bg:       #c9a96e;
     --btn-text:     #0a0a0a;
     --error:        #e07070;
     --success:      #70b890;
     --font-display: 'Cormorant Garamond', serif;
     --font-body:    'Jost', sans-serif;
     --radius:       2px;
     --shadow:       0 4px 40px rgba(0,0,0,0.6);
     --shadow-sm:    0 2px 12px rgba(0,0,0,0.4);
     --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
   }
    
   /* ── CSS Değişkenleri — Minimal Tema ────────────────────────── */
   [data-theme="minimal"] {
     --bg:           #faf9f7;
     --bg2:          #f4f1ee;
     --bg3:          #ede9e5;
     --surface:      #ffffff;
     --border:       #e0d8d0;
     --gold:         #b5899a;
     --gold-light:   #d4a8ba;
     --gold-dim:     #c8a0b2;
     --text:         #2a2220;
     --text-muted:   #9a8f8a;
     --text-sub:     #6a5e5a;
     --accent:       #b5899a;
     --accent-hover: #9a6e80;
     --btn-bg:       #2a2220;
     --btn-text:     #faf9f7;
     --error:        #c05060;
     --success:      #608070;
     --font-display: 'Playfair Display', serif;
     --font-body:    'Jost', sans-serif;
     --radius:       8px;
     --shadow:       0 4px 30px rgba(255, 255, 255, 0.08);
     --shadow-sm:    0 2px 10px rgba(0,0,0,0.06);
     --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
   }
    
   /* ── Reset ──────────────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
   html { scroll-behavior: smooth; }
    
   body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--font-body);
     font-weight: 300;
     font-size: 15px;
     line-height: 1.7;
     transition: background var(--transition), color var(--transition);
     min-height: 100vh;
   }
    
   img { display: block; max-width: 100%; }
   a  { color: inherit; text-decoration: none; }
   button { cursor: pointer; border: none; background: none; font-family: inherit; }
   input, select, textarea { font-family: inherit; }
    
   /* ── Tipografi ──────────────────────────────────────────────── */
   h1, h2, h3, h4 {
     font-family: var(--font-display);
     font-weight: 400;
     line-height: 1.2;
     color: var(--text);
   }
    
   /* ── Tema Butonu ────────────────────────────────────────────── */
   #theme-toggle {
     position: fixed;
     bottom: 24px;
     left: 24px;
     z-index: 999;
     background: var(--bg3);
     color: var(--gold);
     border: 1px solid var(--border);
     padding: 10px 16px;
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     border-radius: var(--radius);
     transition: all var(--transition);
     backdrop-filter: blur(10px);
     white-space: nowrap;
   }
   #theme-toggle:hover {
     background: var(--gold);
     color: var(--bg);
     border-color: var(--gold);
   }
    
   /* ── Header / Nav ───────────────────────────────────────────── */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: var(--bg);
     border-bottom: 1px solid var(--border);
     padding: 0 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 70px;
     transition: background var(--transition);
   }
    
   .site-logo {
     font-family: var(--font-display);
     font-size: 28px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: 0.25em;
     color: var(--gold);
   }
   [data-theme="minimal"] .site-logo { color: var(--text); }
    
   .nav-links {
     display: flex;
     gap: 32px;
     list-style: none;
   }
   .nav-links a {
     font-size: 12px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--text-sub);
     transition: color var(--transition);
   }
   .nav-links a:hover { color: var(--gold); }
    
   .nav-actions {
     display: flex;
     align-items: center;
     gap: 20px;
   }
    
   .cart-btn {
     position: relative;
     color: var(--text-sub);
     font-size: 20px;
     transition: color var(--transition);
   }
   .cart-btn:hover { color: var(--gold); }
    
   #cart-badge {
     position: absolute;
     top: -6px;
     right: -8px;
     background: var(--gold);
     color: var(--bg);
     font-size: 10px;
     font-weight: 500;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     display: none;
     align-items: center;
     justify-content: center;
   }
    
   /* Hamburger */
   .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
   }
   .hamburger span {
     display: block;
     width: 22px;
     height: 1.5px;
     background: var(--text);
     transition: all var(--transition);
   }
    
   .mobile-nav {
     display: none;
     position: fixed;
     inset: 0;
     background: var(--bg);
     z-index: 200;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 36px;
   }
   .mobile-nav.open { display: flex; }
   .mobile-nav a {
     font-family: var(--font-display);
     font-size: 32px;
     letter-spacing: 0.1em;
     color: var(--text);
   }
   .mobile-nav a:hover { color: var(--gold); }
   .mobile-nav-close {
     position: absolute;
     top: 24px;
     right: 28px;
     font-size: 28px;
     color: var(--text-muted);
   }
    
   /* ── Butonlar ───────────────────────────────────────────────── */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 14px 32px;
     background: var(--btn-bg);
     color: var(--btn-text);
     font-size: 12px;
     font-family: var(--font-body);
     font-weight: 400;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     border-radius: var(--radius);
     transition: all var(--transition);
     border: 1px solid transparent;
   }
   .btn:hover { opacity: 0.85; transform: translateY(-1px); }
   .btn:active { transform: translateY(0); }
    
   .btn-outline {
     background: transparent;
     border-color: var(--border);
     color: var(--text);
   }
   .btn-outline:hover {
     border-color: var(--gold);
     color: var(--gold);
     opacity: 1;
   }
    
   .btn-ghost {
     background: transparent;
     color: var(--gold);
     padding: 0;
     letter-spacing: 0.1em;
     font-size: 12px;
     text-decoration: underline;
     text-underline-offset: 4px;
   }
    
   /* ── Form Elemanları ─────────────────────────────────────────── */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }

   .form-row {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 12px;
   }

   .field {
       min-width: 0;
   }

   .field input,
   .field textarea,
   .field select {
       width: 100%;
       box-sizing: border-box;
   }
   
   @media (max-width: 768px) {
       .form-row {
          grid-template-columns: 1fr;
       }
   }

   .field {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-bottom: 20px;
   }
   .field label {
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-muted);
   }
   .field input,
   .field select,
   .field textarea {
     background: var(--bg2);
     border: 1px solid var(--border);
     color: var(--text);
     padding: 12px 16px;
     border-radius: var(--radius);
     font-size: 14px;
     transition: border-color var(--transition);
     outline: none;
   }
   .field input:focus,
   .field select:focus,
   .field textarea:focus {
     border-color: var(--gold);
   }
   .field select option { background: var(--bg2); }
    
   /* ── Ürün Kartı ─────────────────────────────────────────────── */
   .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 20px;
   }
   [data-theme="minimal"] .product-grid { gap: 20px; }
   [data-theme="luxury"] .product-grid { gap: 20px; }
    
   .product-card {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     background: var(--bg2);
   }
   .product-card:hover .card-img img {
     transform: scale(1.06);
   }
   .card-img {
     overflow: hidden;
     aspect-ratio: 3/4;
     background: var(--bg3);
   }
   .card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
   }
    
   .card-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background: var(--gold);
     color: var(--bg);
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: var(--radius);
   }
    
   .card-info {
     padding: 14px 14px 16px;
   }
   .card-name {
     font-family: var(--font-display);
     font-size: 17px;
     line-height: 1.25;
     margin-bottom: 6px;
     min-height: 1.25em;
   }
   .card-price {
     display: flex;
     gap: 10px;
     align-items: center;
     font-size: 13px;
     color: var(--text-sub);
     line-height: 1.4;
   }
   .card-price .new-price {
     color: var(--gold);
     font-weight: 500;
     font-size: 16px;
   }
   .card-price .old-price {
     text-decoration: line-through;
     font-size: 12px;
     color: var(--text-muted);
   }
    
   /* ── Toastlar ───────────────────────────────────────────────── */
   .toast {
     position: fixed;
     bottom: 80px;
     right: 24px;
     z-index: 9999;
     background: var(--bg3);
     color: var(--text);
     border: 1px solid var(--border);
     padding: 14px 24px;
     border-radius: var(--radius);
     font-size: 13px;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.35s;
     max-width: 300px;
   }
   .toast.show { opacity: 1; transform: translateY(0); }
   .toast-success { border-color: var(--success); color: var(--success); }
   .toast-error   { border-color: var(--error);   color: var(--error);   }
    
   /* ── Yüklenme ───────────────────────────────────────────────── */
   .spinner {
     width: 36px;
     height: 36px;
     border: 2px solid var(--border);
     border-top-color: var(--gold);
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
     margin: 40px auto;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
    
   /* ── Bölüm / Container ──────────────────────────────────────── */
   .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
   .section    { padding: 80px 0; }
    
   .section-title {
     font-family: var(--font-display);
     font-size: 42px;
     line-height: 1.2;
     text-align: center;
     margin-bottom: 12px;
   }
   .section-sub {
     text-align: center;
     color: var(--text-muted);
     font-size: 13px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 48px;
   }
    
   /* ── Hero ───────────────────────────────────────────────────── */
   .hero {
     position: relative;
     min-height: 90vh;
     display: flex;
     align-items: center;
     overflow: hidden;
   }
   .hero-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--bg) 40%, var(--bg3) 100%);
   }
   [data-theme="luxury"] .hero-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 70% 50%, rgba(201,169,110,0.07) 0%, transparent 70%);
   }

   .hero-content {
     position: relative;
     z-index: 2;
     max-width: 600px;
     padding: 0 32px;
     animation: fadeUp 0.9s ease both;
   }
   .hero-eyebrow {
     font-size: 11px;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 20px;
   }
   .hero-title {
     font-family: var(--font-display);
     font-size: clamp(52px, 8vw, 90px);
     font-weight: 300;
     line-height: 1;
     margin-bottom: 24px;
   }
   [data-theme="luxury"] .hero-title { color: var(--text); }
   .hero-title em {
     font-style: italic;
     color: var(--gold);
   }
   .hero-desc {
     color: var(--text-sub);
     font-size: 15px;
     margin-bottom: 40px;
     max-width: 380px;
   }
   .hero-image-col {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
   .hero-image-col video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.7;
   }
   [data-theme="luxury"] .hero-image-col::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(to right, var(--bg) 0%, transparent 50%);
   }
   [data-theme="minimal"] .hero-image-col::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, var(--bg) 0%, transparent 30%);
    }
   
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(30px); }
     to   { opacity: 1; transform: translateY(0); }
   }
    
   /* ── Footer ─────────────────────────────────────────────────── */
   .site-footer {
     border-top: 1px solid var(--border);
     padding: 48px 32px 32px;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 40px;
   }
   .footer-logo {
     font-family: var(--font-display);
     font-size: 22px;
     line-height: 1.2;
     letter-spacing: 0.2em;
     color: var(--gold);
     margin-bottom: 12px;
   }
   .footer-desc { color: var(--text-muted); font-size: 13px; max-width: 280px; }
   .footer-col {
     columns: 2;
   }
   .footer-col h4 {
     font-size: 11px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 16px;
   }
   .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
   .footer-col a { font-size: 13px; color: var(--text-sub); transition: color var(--transition); }
   .footer-col a:hover { color: var(--gold); }
   .footer-bottom {
     border-top: 1px solid var(--border);
     margin-top: 40px;
     padding-top: 24px;
     text-align: center;
     font-size: 12px;
     color: var(--text-muted);
   }
    
   /* ── Admin Panel ─────────────────────────────────────────────── */
   .admin-layout {
     display: grid;
     grid-template-columns: 240px 1fr;
     min-height: 100vh;
   }
   .admin-sidebar {
     background: var(--bg2);
     border-right: 1px solid var(--border);
     padding: 32px 0;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow-y: auto;
   }
   .admin-sidebar .logo {
     font-family: var(--font-display);
     font-size: 22px;
     letter-spacing: 0.2em;
     color: var(--gold);
     padding: 0 24px 32px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 16px;
   }
   .admin-nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 24px;
     font-size: 13px;
     letter-spacing: 0.08em;
     color: var(--text-sub);
     transition: all var(--transition);
   }
   .admin-nav-item:hover,
   .admin-nav-item.active {
     background: var(--bg3);
     color: var(--gold);
   }
   .admin-main { padding: 40px; }
   .admin-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 32px;
   }
   .admin-title { font-family: var(--font-display); font-size: 32px; line-height: 1.2; }
    
   .admin-table {
     width: 100%;
     border-collapse: collapse;
   }
   .admin-table th {
     text-align: left;
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-muted);
     padding: 12px 16px;
     border-bottom: 1px solid var(--border);
   }
   .admin-table td {
     padding: 14px 16px;
     border-bottom: 1px solid var(--border);
     font-size: 13px;
     vertical-align: middle;
   }
   .admin-table tr:hover td { background: var(--bg2); }
    
   .status-badge {
     display: inline-block;
     padding: 3px 12px;
     border-radius: 20px;
     font-size: 11px;
     letter-spacing: 0.08em;
   }
   .status-preparing { background: rgba(201,169,110,0.15); color: var(--gold); }
   .status-shipped    { background: rgba(112,184,144,0.15); color: var(--success); }
    
   /* ── Modal ───────────────────────────────────────────────────── */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.7);
     backdrop-filter: blur(4px);
     z-index: 500;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px;
   }
   .modal-overlay.open { display: flex; }
   .modal {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 40px;
     width: 100%;
     max-width: 560px;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
   }
   .modal-close {
     position: absolute;
     top: 16px;
     right: 20px;
     font-size: 22px;
     color: var(--text-muted);
   }
   .modal-title {
     font-family: var(--font-display);
     font-size: 26px;
     line-height: 1.2;
     margin-bottom: 24px;
   }
    
   /* ── Renk/Beden Seçici ──────────────────────────────────────── */
   .size-options, .color-options {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 8px;
   }
   .size-btn {
     width: 44px;
     height: 44px;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--text);
     font-size: 12px;
     letter-spacing: 0.05em;
     border-radius: var(--radius);
     transition: all var(--transition);
   }
   .size-btn:hover, .size-btn.active {
     border-color: var(--gold);
     color: var(--gold);
   }
   .size-btn.out-of-stock {
     opacity: 0.3;
     cursor: not-allowed;
     text-decoration: line-through;
   }
   .color-swatch {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 2px solid transparent;
     cursor: pointer;
     transition: all var(--transition);
   }
   .color-swatch.active { border-color: var(--gold); transform: scale(1.15); }
    
   /* ── Kargo Takip ────────────────────────────────────────────── */
   .tracking-card {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     max-width: 480px;
     margin: 0 auto;
   }
   .tracking-status {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 20px 0;
   }
   .tracking-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--gold);
     flex-shrink: 0;
   }
    
   /* ── Sepet ──────────────────────────────────────────────────── */
   .cart-layout {
     display: grid;
     grid-template-columns: 1fr 360px;
     gap: 40px;
     align-items: start;
   }
   .cart-item {
     display: grid;
     grid-template-columns: 100px 1fr auto;
     gap: 20px;
     padding: 20px 0;
     border-bottom: 1px solid var(--border);
     align-items: center;
   }
   .cart-item-img {
     aspect-ratio: 3/4;
     object-fit: cover;
     border-radius: var(--radius);
     width: 100px;
   }
   .cart-summary {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     position: sticky;
     top: 90px;
   }
   .summary-row {
     display: flex;
     justify-content: space-between;
     font-size: 13px;
     color: var(--text-sub);
     padding: 8px 0;
   }
   .summary-row.total {
     border-top: 1px solid var(--border);
     margin-top: 12px;
     padding-top: 16px;
     font-size: 18px;
     line-height: 1.3;
     font-family: var(--font-display);
     color: var(--text);
   }
   .coupon-row {
     display: flex;
     gap: 8px;
     margin: 12px 0;
   }
   .coupon-row input {
     flex: 1;
     background: var(--bg3);
     border: 1px solid var(--border);
     color: var(--text);
     padding: 10px 12px;
     border-radius: var(--radius);
     font-size: 13px;
     outline: none;
     transition: border-color var(--transition);
   }
   .coupon-row input:focus { border-color: var(--gold); }
    
   /* ── Galeri / Lightbox ──────────────────────────────────────── */
   .product-gallery {
     display: grid;
     grid-template-columns: 60px 1fr;
     gap: 12px;
   }
   .gallery-thumbs {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .gallery-thumb {
     aspect-ratio: 1;
     object-fit: cover;
     border: 1px solid transparent;
     border-radius: var(--radius);
     cursor: pointer;
     transition: border-color var(--transition);
   }
   .gallery-thumb.active { border-color: var(--gold); }
   .gallery-main {
     aspect-ratio: 3/4;
     object-fit: cover;
     border-radius: var(--radius);
     width: 100%;
   }
    
   /* ── Qty Input ──────────────────────────────────────────────── */
   .qty-control {
     display: flex;
     align-items: center;
     gap: 0;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
   }
   .qty-control button {
     width: 36px;
     height: 36px;
     background: var(--bg3);
     color: var(--text);
     font-size: 16px;
     transition: background var(--transition);
   }
   .qty-control button:hover { background: var(--gold); color: var(--bg); }
   .qty-control span {
     width: 40px;
     text-align: center;
     font-size: 14px;
   }
    
   /* ── Login ──────────────────────────────────────────────────── */
   .login-page {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg);
   }
   .login-box {
     width: 100%;
     max-width: 400px;
     padding: 48px;
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: var(--radius);
   }
   .login-logo {
     font-family: var(--font-display);
     font-size: 32px;
     line-height: 1.2;
     letter-spacing: 0.25em;
     color: var(--gold);
     text-align: center;
     margin-bottom: 40px;
   }
    
   /* ── Responsive ─────────────────────────────────────────────── */
   @media (max-width: 900px) {
     .nav-links { display: none; }
     .hamburger { display: flex; }
     .site-footer { grid-template-columns: 1fr 1fr; }
     .cart-layout { grid-template-columns: 1fr; }
     .cart-summary { position: static; }
     .admin-layout { grid-template-columns: 1fr; }
     .admin-sidebar { display: none; }
     .product-gallery { grid-template-columns: 1fr; }
     .gallery-thumbs { flex-direction: row; }
     .gallery-thumb { width: 60px; }
     .hero-image-col { width: 100%; opacity: 0.15; }
   }
    
   @media (max-width: 600px) {
     .container, .section { padding: 40px 16px; }
     .site-header { padding: 0 16px; }
     .product-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
     .product-grid { gap: 12px; }
     .site-footer { grid-template-columns: 1fr; }
     .cart-item { grid-template-columns: 72px 1fr auto; }
     .cart-item-img { width: 72px; }
     .modal { padding: 24px; }
     .hero-title { font-size: 48px; }
   }