@charset "UTF-8";
/* ============================================================================
   PELET SOBA OFFICIAL — CEKIRDEK STIL
   ----------------------------------------------------------------------------
   Vanilla CSS. Derleyici, preprocessor veya framework yok.
   Sira: 1 Token · 2 Reset · 3 Tipografi · 4 Yerlesim · 5 Bilesenler
         6 Header/Footer · 7 Quick-Buy · 8 Yardimcilar · 9 Duyarli · 10 Erisim
   ========================================================================= */

/* ============================================================================
   1. TOKEN SISTEMI
   ========================================================================= */
:root{
  /* --- Marka paleti --- */
  --ivory:#F9F8F6;          /* Fildisi  — zemin */
  --charcoal:#111111;       /* Derin Komur — murekkep */
  --ember:#D84315;          /* Kor Turuncusu — aksan */

  /* --- Destek tonlari (paletten turetildi) --- */
  --paper:#FFFFFF;
  --ash:#E7E3DD;            /* hatlar */
  --ash-soft:#F1EEE9;       /* ikincil zemin */
  --smoke:#6E6A64;          /* ikincil metin */
  --soot:#1B1917;           /* koyu paneller */
  --ember-deep:#A83210;
  --ember-tint:rgba(216,67,21,.08);
  --ember-ring:rgba(216,67,21,.20);
  --verdant:#1F6B3B;        /* stok / guven */
  --verdant-tint:rgba(31,107,59,.09);
  --alert:#B3261E;

  /* --- Tipografi --- */
  --font:"Schibsted Grotesk","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:.75rem;      --fs-sm:.8125rem;   --fs-cap:.875rem;
  --fs-base:1rem;      --fs-md:1.0625rem;  --fs-lg:1.1875rem;
  --fs-xl:1.4375rem;   --fs-2xl:1.8125rem;
  --fs-display-s:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);
  --fs-display-m:clamp(2.1rem,1.35rem + 3.3vw,3.4rem);
  --fs-display-l:clamp(2.5rem,1.4rem + 4.6vw,4.5rem);
  --lh-tight:1.08; --lh-snug:1.24; --lh-body:1.62;
  --tr-tight:-.035em; --tr-snug:-.02em; --tr-wide:.02em;

  /* --- Ritim (4px taban) --- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem;

  /* --- Bicim --- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --line:1px solid var(--ash);

  /* --- Golge: iki seviye, fazlasi degil --- */
  --lift:0 1px 2px rgba(17,17,17,.05), 0 6px 18px rgba(17,17,17,.05);
  --lift-hi:0 2px 4px rgba(17,17,17,.06), 0 18px 44px rgba(17,17,17,.10);
  --lift-ember:0 10px 30px rgba(216,67,21,.22);

  /* --- Hareket --- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s; --t-mid:.28s; --t-slow:.45s;

  /* --- Olcu --- */
  --shell:1320px;
  --shell-tight:760px;
  --header-h:72px;
}

/* ============================================================================
   2. RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s5))}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-body);
  font-weight:400;font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
img{background:var(--ash-soft)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:var(--line);margin:var(--s6) 0}
::selection{background:var(--ember);color:#fff}

/* ============================================================================
   3. TIPOGRAFI
   ========================================================================= */
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:var(--tr-snug);line-height:var(--lh-snug);text-wrap:balance}
h1{font-size:var(--fs-display-m);letter-spacing:var(--tr-tight);line-height:var(--lh-tight)}
h2{font-size:var(--fs-display-s);letter-spacing:var(--tr-tight)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:640}
small{font-size:var(--fs-sm)}

.lede{font-size:var(--fs-lg);color:var(--smoke);max-width:62ch;line-height:1.55}
.muted{color:var(--smoke)}
.prose{max-width:68ch}
.prose h2{margin:var(--s7) 0 var(--s3)}
.prose h3{margin:var(--s6) 0 var(--s2)}
.prose ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:disc}
.prose ol{margin:0 0 var(--s4);padding-left:var(--s5);list-style:decimal}
.prose li{margin-bottom:var(--s2)}
.prose a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose img{border-radius:var(--r-md);margin:var(--s5) 0}
.prose blockquote{border-left:3px solid var(--ember);padding-left:var(--s5);margin:var(--s6) 0;font-size:var(--fs-lg);color:var(--smoke)}

/* Sayisal hizalama — fiyat, stok, teknik veri */
.num,.price,td.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================================
   4. YERLESIM
   ========================================================================= */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s5)}
.shell-tight{max-width:var(--shell-tight)}
.band{padding-block:var(--s9)}
.band-sm{padding-block:var(--s7)}
.band-flush{padding-block:0}
.band-dark{background:var(--soot);color:var(--ivory)}
.band-dark .muted,.band-dark .lede{color:rgba(249,248,246,.62)}
.band-soft{background:var(--ash-soft)}

/* --- Bolum basligi: Kor Cubugu ile ------------------------------------- */
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap}
.band-head > div{max-width:58ch}
.band-head h2{margin-bottom:var(--s2)}

/* Kor Cubugu — sobanin isi skalasindan turetilmis imza cizgisi */
.heat-bar{display:flex;gap:3px;align-items:flex-end;height:14px;margin-bottom:var(--s4)}
.heat-bar i{width:4px;border-radius:2px;background:var(--ash);display:block}
.heat-bar i:nth-child(1){height:5px}
.heat-bar i:nth-child(2){height:8px}
.heat-bar i:nth-child(3){height:11px}
.heat-bar i:nth-child(4){height:14px}
.heat-bar i.lit{background:var(--ember)}
.band-dark .heat-bar i{background:rgba(249,248,246,.22)}
.band-dark .heat-bar i.lit{background:var(--ember)}

/* --- Bento Grid --------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4)}
.bento > *{min-width:0}
.b-3{grid-column:span 3}  .b-4{grid-column:span 4}
.b-5{grid-column:span 5}  .b-6{grid-column:span 6}
.b-7{grid-column:span 7}  .b-8{grid-column:span 8}
.b-9{grid-column:span 9}  .b-12{grid-column:span 12}
.b-tall{grid-row:span 2}

/* --- Genel akis --------------------------------------------------------- */
.row{display:flex;gap:var(--s4);align-items:center}
.row-between{justify-content:space-between}
.row-wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-sm{gap:var(--s2)}
.grid-auto{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ============================================================================
   5. BILESENLER
   ========================================================================= */

/* --- Butonlar ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.85rem 1.5rem;border-radius:var(--r-full);
  font-size:var(--fs-base);font-weight:580;letter-spacing:var(--tr-snug);
  background:var(--charcoal);color:var(--ivory);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-mid) var(--ease),color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--soot);transform:translateY(-1px);box-shadow:var(--lift)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ember{background:var(--ember);color:#fff}
.btn-ember:hover{background:var(--ember-deep);box-shadow:var(--lift-ember)}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--ash)}
.btn-ghost:hover{background:var(--paper);border-color:var(--charcoal);box-shadow:var(--lift)}
.btn-quiet{background:var(--ash-soft);color:var(--charcoal)}
.btn-quiet:hover{background:var(--ash)}
.btn-lg{padding:1.05rem 2rem;font-size:var(--fs-lg)}
.btn-sm{padding:.55rem 1rem;font-size:var(--fs-cap)}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn svg{flex-shrink:0}
.band-dark .btn-ghost{color:var(--ivory);border-color:rgba(249,248,246,.24)}
.band-dark .btn-ghost:hover{background:rgba(249,248,246,.08);border-color:var(--ivory)}

/* Ikon butonu */
.btn-icon{width:42px;height:42px;padding:0;border-radius:var(--r-full);
  display:inline-grid;place-items:center;background:transparent;color:var(--charcoal);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn-icon:hover{background:var(--ash-soft);color:var(--ember)}

/* --- Kartlar ------------------------------------------------------------ */
.card{background:var(--paper);border:var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.card-flush{padding:0;overflow:hidden}
.card-soft{background:var(--ash-soft);border-color:transparent}
.card-dark{background:var(--soot);color:var(--ivory);border-color:transparent}
.card-dark .muted{color:rgba(249,248,246,.6)}

/* --- Urun karti --------------------------------------------------------- */
.product{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease);
}
.product:hover{border-color:var(--charcoal);box-shadow:var(--lift-hi);transform:translateY(-3px)}
.product-media{position:relative;aspect-ratio:4/3;background:var(--ash-soft);overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.product:hover .product-media img{transform:scale(1.035)}
.product-body{padding:var(--s4) var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.product-name{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tr-snug);line-height:1.35}
.product-spec{font-size:var(--fs-sm);color:var(--smoke);display:flex;gap:var(--s3);flex-wrap:wrap}
.product-spec span{display:inline-flex;align-items:center;gap:5px}
.product-foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.price{font-size:var(--fs-xl);font-weight:660;letter-spacing:var(--tr-tight)}
.price-old{font-size:var(--fs-cap);color:var(--smoke);text-decoration:line-through;margin-right:var(--s2);font-weight:400}

/* --- Rozetler ----------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:.3rem .7rem;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tr-wide);background:var(--ash-soft);color:var(--smoke)}
.badge-ember{background:var(--ember-tint);color:var(--ember-deep)}
.badge-stock{background:var(--verdant-tint);color:var(--verdant)}
.badge-out{background:rgba(179,38,30,.08);color:var(--alert)}
.badge-float{position:absolute;top:var(--s3);left:var(--s3);background:var(--charcoal);color:var(--ivory);z-index:2}

/* Guven seridi — ikon + tek satir */
.trust{display:flex;gap:var(--s5);flex-wrap:wrap}
.trust li{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-cap);color:var(--smoke)}
.trust svg{color:var(--ember);flex-shrink:0}

/* --- Yildiz puani ------------------------------------------------------- */
.rating{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--smoke)}
.stars{display:inline-flex;gap:1px;color:var(--ember)}
.stars svg{width:14px;height:14px}
.stars .dim{color:var(--ash)}

/* --- Formlar ------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field label{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--tr-wide)}
.field label span{font-weight:400;color:var(--smoke)}
.input,select.input,textarea.input{
  width:100%;padding:.8rem 1rem;background:var(--paper);
  border:1px solid var(--ash);border-radius:var(--r-sm);
  font-size:var(--fs-base);color:var(--charcoal);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.input::placeholder{color:#A8A39C}
.input:hover{border-color:#CFC9C1}
.input:focus{outline:0;border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-ring)}
textarea.input{min-height:130px;resize:vertical;line-height:1.55}
select.input{appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6A64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.field-error .input{border-color:var(--alert)}
.hint{font-size:var(--fs-sm);color:var(--smoke)}
.hint-error{color:var(--alert)}

/* Secim kutulari — asistan ve odeme adiminda */
.choice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
  border:1px solid var(--ash);border-radius:var(--r-md);background:var(--paper);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.choice:hover{border-color:#CFC9C1}
.choice input{margin-top:4px;accent-color:var(--ember);width:18px;height:18px;flex-shrink:0}
.choice:has(input:checked){border-color:var(--ember);background:var(--ember-tint)}
.choice strong{display:block;font-weight:600;font-size:var(--fs-base)}
.choice small{color:var(--smoke);font-size:var(--fs-sm);line-height:1.45}

/* Adet sayaci */
.qty{display:inline-flex;align-items:center;border:1px solid var(--ash);border-radius:var(--r-full);background:var(--paper);overflow:hidden}
.qty button{width:40px;height:44px;display:grid;place-items:center;color:var(--smoke);transition:background var(--t-fast),color var(--t-fast)}
.qty button:hover{background:var(--ash-soft);color:var(--ember)}
.qty input{width:44px;height:44px;border:0;text-align:center;font-weight:600;background:transparent;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:0}

/* --- Akordeon (SSS) ----------------------------------------------------- */
.accordion{border-top:var(--line)}
.accordion details{border-bottom:var(--line)}
.accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-lg);font-weight:580;letter-spacing:var(--tr-snug);
  transition:color var(--t-fast) var(--ease);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--ember)}
.accordion summary svg{flex-shrink:0;color:var(--smoke);transition:transform var(--t-mid) var(--ease),color var(--t-fast)}
.accordion details[open] summary svg{transform:rotate(180deg);color:var(--ember)}
.accordion .answer{padding:0 0 var(--s5);color:var(--smoke);max-width:70ch;line-height:1.65}

/* --- Sekmeler ----------------------------------------------------------- */
.tabs{display:flex;gap:var(--s1);border-bottom:var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:var(--s3) var(--s4);font-size:var(--fs-base);font-weight:560;color:var(--smoke);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast)}
.tab:hover{color:var(--charcoal)}
.tab[aria-selected="true"]{color:var(--charcoal);border-bottom-color:var(--ember)}

/* --- Teknik ozellik tablosu --------------------------------------------- */
.spec-table td{padding:var(--s3) 0;border-bottom:var(--line);font-size:var(--fs-base)}
.spec-table tr:last-child td{border-bottom:0}
.spec-table td:first-child{color:var(--smoke);width:45%}
.spec-table td:last-child{font-weight:560;text-align:right;font-variant-numeric:tabular-nums}

/* --- Kirinti yolu ------------------------------------------------------- */
.crumbs{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--smoke);flex-wrap:wrap;padding-block:var(--s4)}
.crumbs a:hover{color:var(--ember)}
.crumbs svg{opacity:.5}
.crumbs [aria-current]{color:var(--charcoal)}

/* --- Uyari kutulari ----------------------------------------------------- */
.note{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);font-size:var(--fs-base);line-height:1.55}
.note svg{flex-shrink:0;margin-top:2px}
.note-info{background:var(--ember-tint);color:var(--ember-deep)}
.note-ok{background:var(--verdant-tint);color:var(--verdant)}
.note-warn{background:rgba(179,38,30,.07);color:var(--alert)}

/* --- Sayfalama ---------------------------------------------------------- */
.pager{display:flex;gap:var(--s2);justify-content:center;align-items:center;margin-top:var(--s7);flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding-inline:var(--s3);
  border-radius:var(--r-sm);font-size:var(--fs-cap);font-weight:560;border:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast)}
.pager a:hover{background:var(--paper);border-color:var(--ash)}
.pager .now{background:var(--charcoal);color:var(--ivory)}

/* --- Bos durum ---------------------------------------------------------- */
.empty{text-align:center;padding:var(--s9) var(--s5);max-width:46ch;margin-inline:auto}
.empty .ring{width:64px;height:64px;border-radius:var(--r-lg);background:var(--ember-tint);color:var(--ember);
  display:grid;place-items:center;margin:0 auto var(--s4)}
.empty h3{margin-bottom:var(--s2)}
.empty p{color:var(--smoke);margin-bottom:var(--s5)}

/* --- Bildirim (toast) --------------------------------------------------- */
.toast-dock{position:fixed;right:var(--s5);bottom:calc(var(--s5) + 76px);z-index:80;
  display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s3);background:var(--soot);color:var(--ivory);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:var(--lift-hi);
  font-size:var(--fs-cap);max-width:330px;pointer-events:auto;
  animation:toast-in var(--t-mid) var(--ease-out)}
.toast svg{color:var(--ember);flex-shrink:0}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ============================================================================
   6. HEADER & FOOTER
   ========================================================================= */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--header-h);
  background:rgba(249,248,246,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),height var(--t-mid) var(--ease);
}
.site-header.is-stuck{background:rgba(249,248,246,.88);border-bottom-color:var(--ash)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:var(--ivory)}
}
body{padding-top:var(--header-h)}

.header-in{display:flex;align-items:center;gap:var(--s4);height:100%}
.logo{display:flex;align-items:center;gap:var(--s2);font-weight:680;font-size:var(--fs-md);letter-spacing:var(--tr-tight);flex-shrink:0}
.logo-mark{width:34px;height:34px;border-radius:var(--r-sm);background:var(--charcoal);color:var(--ember);display:grid;place-items:center}
.logo small{display:block;font-size:10px;font-weight:500;color:var(--smoke);letter-spacing:.08em;line-height:1}

.nav{display:flex;align-items:center;gap:2px;margin-inline:auto;
  flex-wrap:nowrap;overflow:hidden;min-width:0}
.nav a{padding:.5rem .7rem;border-radius:var(--r-sm);font-size:var(--fs-cap);font-weight:540;
  color:var(--charcoal);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast)}
.nav a:hover{background:rgba(17,17,17,.055)}
.nav a.on{color:var(--ember)}

/* Secim Asistani bir kategori degil, bir arac — ayri bir dugme olarak durur */
.btn-nav{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 .95rem;
  border-radius:var(--r-full);background:var(--ember-tint);color:var(--ember-deep);
  font-size:var(--fs-cap);font-weight:620;white-space:nowrap;flex-shrink:0;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn-nav:hover{background:var(--ember);color:#fff}

.header-tools{display:flex;align-items:center;gap:var(--s1);flex-shrink:0}
.cart-btn{position:relative}
.cart-count[hidden]{display:none}
.cart-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding-inline:4px;
  background:var(--ember);color:#fff;border-radius:var(--r-full);font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1;border:2px solid var(--ivory)}
.header-phone{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 .95rem;border-radius:var(--r-full);border:1px solid var(--ash);
  font-size:var(--fs-cap);font-weight:580;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex-shrink:0;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.header-phone:hover{border-color:var(--ember);color:var(--ember)}
.burger{display:none}

/* --- Mobil cekmece ------------------------------------------------------ */
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer-veil{position:absolute;inset:0;background:rgba(17,17,17,.4);opacity:0;transition:opacity var(--t-mid) var(--ease)}
.drawer.open .drawer-veil{opacity:1}
.drawer-panel{position:absolute;inset:0 0 0 auto;width:min(370px,86vw);background:var(--ivory);
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);
  display:flex;flex-direction:column;padding:var(--s5);overflow-y:auto}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{padding:var(--s3) var(--s3);border-radius:var(--r-sm);font-size:var(--fs-lg);font-weight:560;
  display:flex;align-items:center;justify-content:space-between}
.drawer nav a:hover{background:var(--ash-soft)}
.drawer-foot{margin-top:auto;padding-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}

/* --- Arama katmani ------------------------------------------------------ */
.search-layer{position:fixed;inset:0;z-index:75;display:none;background:rgba(249,248,246,.85);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding-top:14vh}
.search-layer.open{display:block}
.search-box{max-width:660px;margin-inline:auto;padding-inline:var(--s5)}
.search-box form{display:flex;gap:var(--s3);align-items:center;background:var(--paper);
  border:1px solid var(--ash);border-radius:var(--r-full);padding:.5rem .5rem .5rem 1.25rem;box-shadow:var(--lift-hi)}
.search-box input{flex:1;border:0;background:none;font-size:var(--fs-lg);padding:.6rem 0}
.search-box input:focus{outline:0}

/* --- Footer ------------------------------------------------------------- */
.site-footer{background:var(--soot);color:var(--ivory);padding-top:var(--s9);margin-top:var(--s10)}
.site-footer a{color:rgba(249,248,246,.68);transition:color var(--t-fast)}
.site-footer a:hover{color:var(--ember)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s8)}
.footer-brand .logo{color:var(--ivory);margin-bottom:var(--s4)}
.footer-brand .logo-mark{background:var(--ember);color:#fff}
.footer-brand p{color:rgba(249,248,246,.6);font-size:var(--fs-cap);max-width:34ch}
.footer-col h4{font-size:var(--fs-cap);font-weight:640;margin-bottom:var(--s4);letter-spacing:var(--tr-wide)}
.footer-col li{margin-bottom:var(--s2);font-size:var(--fs-cap)}
.footer-contact li{display:flex;gap:var(--s2);align-items:flex-start;color:rgba(249,248,246,.68)}
.footer-contact svg{flex-shrink:0;margin-top:3px;color:var(--ember)}
.newsletter{display:flex;gap:var(--s2);margin-top:var(--s4)}
.newsletter input{flex:1;background:rgba(249,248,246,.07);border:1px solid rgba(249,248,246,.14);
  border-radius:var(--r-full);padding:.7rem 1.1rem;color:var(--ivory);font-size:var(--fs-cap)}
.newsletter input::placeholder{color:rgba(249,248,246,.4)}
.newsletter input:focus{outline:0;border-color:var(--ember)}
.socials{display:flex;gap:var(--s2);margin-top:var(--s5)}
.socials a{width:38px;height:38px;border-radius:var(--r-full);border:1px solid rgba(249,248,246,.16);
  display:grid;place-items:center;transition:border-color var(--t-fast),background var(--t-fast)}
.socials a:hover{border-color:var(--ember);background:rgba(216,67,21,.14)}
.footer-bottom{border-top:1px solid rgba(249,248,246,.1);padding-block:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--fs-sm);color:rgba(249,248,246,.5)}
.footer-bottom ul{display:flex;gap:var(--s4);flex-wrap:wrap}
.pay-marks{display:flex;gap:var(--s2);align-items:center;opacity:.8}

/* ============================================================================
   7. QUICK-BUY — yapiskan satin alma cubugu
   ========================================================================= */
.quick-buy{
  position:fixed;inset:auto 0 0;z-index:55;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--ash);
  transform:translateY(105%);transition:transform var(--t-slow) var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
}
.quick-buy.show{transform:none}
.quick-buy-in{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s3)}
.qb-thumb{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover;flex-shrink:0}
.qb-info{flex:1;min-width:0}
.qb-name{font-size:var(--fs-cap);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-meta{font-size:var(--fs-xs);color:var(--smoke);display:flex;gap:var(--s3)}
.qb-price{font-size:var(--fs-lg);font-weight:660;letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums;white-space:nowrap}
.qb-actions{display:flex;gap:var(--s2);align-items:center;flex-shrink:0}

/* Ucretsiz kargo esigi — Kor Cubugu mantigiyla ilerleme */
.ship-meter{height:3px;background:var(--ash);border-radius:2px;overflow:hidden;margin-top:6px}
.ship-meter i{display:block;height:100%;background:var(--ember);border-radius:2px;
  transition:width var(--t-slow) var(--ease-out)}

/* ============================================================================
   8. YARDIMCILAR
   ========================================================================= */
.center{text-align:center}
.center .lede{margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide{display:none !important}
.mt-0{margin-top:0}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}.mb-6{margin-bottom:var(--s6)}
.ember{color:var(--ember)}
.flame-ico{color:var(--ember)}
.ratio-1{aspect-ratio:1/1;object-fit:cover}
.ratio-43{aspect-ratio:4/3;object-fit:cover}
.ratio-169{aspect-ratio:16/9;object-fit:cover}
.divider{height:1px;background:var(--ash);border:0}

/* ============================================================================
   9. DUYARLI DAVRANIS
   ========================================================================= */
@media (max-width:1040px){
  .footer-top{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .b-3{grid-column:span 6}.b-4{grid-column:span 6}.b-5{grid-column:span 6}
  .b-7{grid-column:span 12}.b-8{grid-column:span 12}.b-9{grid-column:span 12}
}
/* --- Ust menu kademeleri -------------------------------------------------
   >=1320  logo + menu + Asistan dugmesi + telefon numarasi + ikonlar
   1100-1319  telefon ve Asistan yalnizca ikon
   <1100   menu cekmeceye taşinir
   ------------------------------------------------------------------------ */
@media (max-width:1319px){
  .header-phone{width:42px;padding:0;border-color:transparent}
  .header-phone span{display:none}
  .header-phone:hover{background:var(--ash-soft)}
  .btn-nav{width:42px;padding:0;justify-content:center}
  .btn-nav span{display:none}
}
@media (max-width:1099px){
  .nav,.header-phone,.btn-nav{display:none}
  .burger{display:inline-grid}
}

@media (max-width:860px){
  :root{--header-h:64px}
  .band{padding-block:var(--s7)}
  .bento{gap:var(--s3)}
  .b-6{grid-column:span 12}
  .b-3,.b-4,.b-5{grid-column:span 6}
  .b-tall{grid-row:span 1}
}
@media (max-width:640px){
  :root{--fs-md:1rem}
  .shell{padding-inline:var(--s4)}
  .b-3,.b-4,.b-5,.b-6{grid-column:span 12}
  .footer-top{grid-template-columns:1fr;gap:var(--s6)}
  .footer-bottom{flex-direction:column;gap:var(--s3)}
  .card{padding:var(--s4)}
  .qb-thumb,.qb-meta{display:none}
  .quick-buy-in{gap:var(--s3)}
  .btn-lg{padding:.95rem 1.4rem;font-size:var(--fs-base)}
  .toast-dock{left:var(--s4);right:var(--s4);bottom:calc(var(--s4) + 86px)}
  .toast{max-width:none}
}

/* ============================================================================
   10. ERISILEBILIRLIK & YAZDIRMA
   ========================================================================= */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:var(--r-xs)}
.skip-link{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--charcoal);color:var(--ivory);
  padding:.7rem 1.2rem;border-radius:var(--r-sm);transition:top var(--t-fast)}
.skip-link:focus{top:var(--s3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .product:hover{transform:none}
  .btn:hover{transform:none}
}

@media print{
  .site-header,.site-footer,.quick-buy,.drawer,.search-layer,.toast-dock{display:none !important}
  body{padding-top:0;background:#fff}
  .card,.product{border:1px solid #ddd;box-shadow:none}
}

/* Alt bilgi yasal satiri */
.footer-legal{border-top:1px solid rgba(249,248,246,.08);padding-block:var(--s4);margin:0;
  font-size:var(--fs-xs);color:rgba(249,248,246,.38);line-height:1.6}
.footer-slogan{color:var(--ember);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.02em;margin-bottom:var(--s2)}

/* ---------------------------------------------------------------------------
   Cerez onayi — KVKK / cerez politikasi
   ------------------------------------------------------------------------ */
.cookie{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:65;
  max-width:560px;margin-inline:auto;background:var(--soot);color:var(--ivory);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--lift-hi);
  display:none;gap:var(--s4);align-items:flex-start}
.cookie.show{display:flex}
.cookie svg{color:var(--ember);flex-shrink:0;margin-top:2px}
.cookie p{margin:0 0 var(--s4);font-size:var(--fs-cap);line-height:1.55;color:rgba(249,248,246,.78)}
.cookie a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.cookie-acts{display:flex;gap:var(--s2);flex-wrap:wrap}
@media(max-width:560px){
  .cookie{padding:var(--s4);bottom:calc(var(--s4) + 72px)}
  .cookie-acts .btn{flex:1}
}