/* ==================================================================
   SADE — İÇ SAYFALAR
   -------------------------------------------------------------------
   Tema 66 sayfadan oluşuyor ve bunların 60'ı eski tasarımın temel
   sınıflarıyla yazılmış (.panel, .btn, .field, .empty, .section-tight…).
   60 şablonu tek tek yeniden yazmak yerine BU SINIFLARIN GÖRÜNÜMÜNÜ
   değiştiriyoruz: işaretlemeye hiç dokunulmadan tüm sayfalar yeni
   tasarım diline geçiyor.

   Yüklenme sırası: system.css → shop.css → koyu.css → sade.css →
   BU DOSYA. Sonda olduğu için eski kuralları ezer.

   Tasarım sözleşmesi (sade.css ile birebir aynı):
     yarıçap   kart/panel --radius-md, düğme/girdi --radius-sm, hap 99px
     kenarlık  1px var(--line)
     gölge     durağan halde YOK; yalnızca hover ve katmanlarda
     başlık    650 ağırlık, sıkı harf aralığı
     renk      yalnızca token; sabit renk yazılmaz (koyu mod bozulur)
   ================================================================== */

/* ==================================================================
   1. YERLEŞİM
   ================================================================== */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section,.section-tight{padding:56px 0}
.section-tight + .section-tight{padding-top:0}

/* eski bootstrap kalıntısı sarmalayıcılar */
.x_content-wrapper,.x_column,.x_panel{background:none;border:0;box-shadow:none;padding:0;margin:0}

.row{display:flex;flex-wrap:wrap;gap:16px}
.row.wrap{flex-wrap:wrap}
.row.full > *{flex:1 1 100%}
.col{flex:1 1 0;min-width:0}

/* sayfa başlığı şeridi */
.shop-hero{
  padding:38px 0 30px;background:var(--bg-soft);border-bottom:1px solid var(--line);margin-bottom:38px
}
.shop-hero h1{margin:0 0 8px;font-size:clamp(23px,3vw,32px);font-weight:650;letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
.shop-hero p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:66ch}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 14px;padding:0;list-style:none;font-size:13px;color:var(--muted-2)
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--primary-text,var(--primary))}
.breadcrumb li + li::before{content:"/";margin-right:6px;color:var(--line-strong)}

/* ==================================================================
   2. PANEL / KART
   ================================================================== */
.panel,.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:none;overflow:hidden
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  min-height:0;padding:16px 18px;margin:0;
  background:none;border-bottom:1px solid var(--line-soft)
}
.panel-head h1,.panel-head h2,.panel-head h3,.panel-head h4{
  margin:0;font-size:16px;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:var(--ink);
  display:flex;align-items:center;gap:9px
}
.panel-head h3 svg,.panel-head h4 svg{flex-shrink:0;width:17px;height:17px;color:var(--muted-2)}
.panel-head p{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.panel-body{padding:18px}
.panel-body > *:first-child{margin-top:0}
.panel-body > *:last-child{margin-bottom:0}
.panel-foot{padding:14px 18px;border-top:1px solid var(--line-soft);background:var(--bg-soft)}

/* ==================================================================
   3. DÜĞMELER  (.sd-btn ile birebir aynı biçim)
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;font-family:inherit;font-size:14px;font-weight:600;
  letter-spacing:-.01em;line-height:1;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--bg-soft);color:var(--ink);
  transition:background .18s,border-color .18s,color .18s
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:hover{background:var(--line-soft);color:var(--ink)}

.btn-primary,.btn-ana{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-primary:hover,.btn-ana:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink)}

.btn-ghost,.btn-cizgi{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover,.btn-cizgi:hover{border-color:var(--ink);background:var(--surface);color:var(--ink)}

.btn-soft{background:var(--primary-soft);border-color:transparent;color:var(--primary-text,var(--primary))}
.btn-soft:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-text,var(--primary))}

.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--bg)}

.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.94);color:#fff}

.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--radius-sm)}
.btn-lg{padding:13px 24px;font-size:15px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed}

/* ==================================================================
   4. FORMLAR
   ================================================================== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full,.form-group.full,.field.full{grid-column:1/-1}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

.field,.form-group,.offer-field,.yb-alan{display:grid;gap:6px;min-width:0}
.field > label,.form-group > label,.offer-field > label,.col-form-label,.yb-alan > label{
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2)
}
.field small,.form-group small,.offer-field small{font-size:12px;color:var(--muted-2);line-height:1.5}

input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=url],input[type=date],
select,textarea{
  width:100%;padding:11px 13px;font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);
  outline:none;transition:border-color .16s,background .16s,box-shadow .16s
}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:none;padding-right:34px;cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)
}
input[readonly],input[disabled],select[disabled],textarea[disabled]{
  background:var(--line-soft);color:var(--muted);cursor:not-allowed
}

/* --------------------------------------------------------------
   Bileşenlerin kendi girdi biçimleri
   Yukarıdaki genel kural (input[type=search] = 0,1,1) ile
   .sd-hero-ara input (0,1,1) AYNI özgüllükte. Bu dosya sonra
   yüklendiği için hero aramasının sol dolgusunu 50px'ten 13px'e
   düşürüyor ve arama ikonu metnin üstüne biniyordu.
   Bileşen seçicilerine form eklenerek (0,2,1) genel kuralın
   üstüne çıkılıyor — sıraya bağımlı kalmıyoruz.
   -------------------------------------------------------------- */
.sd-hero-ara form input{
  height:56px;padding:0 130px 0 50px;font-size:16px;
  background:var(--surface);border-color:var(--line-strong);border-radius:var(--radius)
}
.sd-alt-ara form input{
  height:46px;padding:0 46px 0 40px;font-size:15px;background:var(--bg-soft)
}
.sd-mobil-ara form input{
  height:42px;padding:0 14px 0 39px;font-size:14px;background:var(--bg-soft);border-radius:99px
}
.sd-footer-bulten form input{height:42px;padding:0 12px;font-size:14px;background:var(--surface)}
.search-overlay .search-form input{
  padding:11px 44px 11px 42px;border-radius:var(--radius-pill);background:var(--bg-soft);font-size:14px
}

@media (max-width:820px){
  .sd-hero-ara form input{height:52px;padding-right:56px;font-size:15px}
}

/* onay kutusu / radyo satırı */
.field-onay,.form-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.field-onay input,.form-check input{width:16px;height:16px;margin-top:2px;flex:0 0 auto;accent-color:var(--primary)}

/* ==================================================================
   5. DURUMLAR
   ================================================================== */
.empty{
  display:grid;justify-items:center;text-align:center;gap:12px;
  padding:52px 24px;background:var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--radius-md)
}
.empty-icon{
  width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;
  background:var(--bg-soft);color:var(--muted-2)
}
.empty-icon svg{width:24px;height:24px}
.empty h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.empty p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:52ch}

.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 15px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg-soft);color:var(--ink-2);font-size:13.5px;line-height:1.55
}
.alert svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px}
.alert.is-info{background:var(--primary-soft);border-color:transparent;color:var(--primary-text,var(--primary))}
.alert.is-ok,.alert.is-success{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.alert.is-warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.alert.is-bad,.alert.is-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}

.status{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  background:var(--bg-soft);color:var(--muted)
}
.status.is-ok{background:var(--ok-soft);color:var(--ok)}
.status.is-warn{background:var(--warn-soft);color:var(--warn)}
.status.is-bad{background:var(--danger-soft);color:var(--danger)}
.status.is-info{background:var(--primary-soft);color:var(--primary-text,var(--primary))}

/* ==================================================================
   6. METİN
   ================================================================== */
.muted{color:var(--muted)}
.prose{font-size:15px;line-height:1.75;color:var(--ink-2)}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose h2{margin:30px 0 12px;font-size:20px;font-weight:650;letter-spacing:-.025em;color:var(--ink)}
.prose h3{margin:24px 0 10px;font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:6px}
.prose a{color:var(--primary-text,var(--primary));text-decoration:underline;text-underline-offset:2px}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.prose th{background:var(--bg-soft);font-weight:650}
.prose blockquote{
  margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--primary);
  background:var(--bg-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-2)
}

/* ==================================================================
   7. TABLOLAR
   ================================================================== */
table.tablo,.panel table{width:100%;border-collapse:collapse;font-size:14px}
.panel table th,.panel table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-soft)}
.panel table th{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);background:var(--bg-soft);white-space:nowrap
}
.panel table tr:last-child td{border-bottom:0}
.panel table tbody tr:hover{background:var(--bg-soft)}

/* ==================================================================
   8. SEPET & SİPARİŞ
   ================================================================== */
.cart-line{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)
}
.cart-line:last-child{border-bottom:0}
.cart-line img,.thumbnail{
  width:64px;height:64px;flex:0 0 auto;object-fit:cover;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--bg-soft)
}
.cart-line-ad{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.cart-line-ad:hover{color:var(--primary-text,var(--primary))}
.cart-line-fiyat{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.qty button{
  width:32px;height:34px;border:0;background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:15px;line-height:1;transition:background .15s
}
.qty button:hover{background:var(--bg-soft)}
.qty input{
  width:40px;height:34px;padding:0;text-align:center;border:0;border-radius:0;
  background:var(--surface);font-size:14px;font-weight:600
}
.qty input:focus{box-shadow:none;background:var(--bg-soft)}

/* sipariş adımları */
.checkout-step{
  display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--bg-soft);font-size:13.5px;font-weight:600;color:var(--muted)
}
.checkout-step.is-active{background:var(--primary-soft);color:var(--primary-text,var(--primary))}
.checkout-step.is-done{background:var(--ok-soft);color:var(--ok)}

/* toplam kutusu */
.ozet-satir{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;color:var(--ink-2)}
.ozet-satir.toplam{
  margin-top:8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)
}

/* ==================================================================
   9. KATALOG / FİLTRE
   ================================================================== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
@media (max-width:820px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.catalog-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)
}
.catalog-count{font-size:14px;color:var(--muted)}
.catalog-count b{color:var(--ink);font-weight:700}
.catalog-sort{display:flex;align-items:center;gap:8px}
.catalog-sort select{width:auto;min-width:180px;padding:8px 12px;font-size:13.5px}

.filter-opt{
  display:flex;align-items:center;gap:9px;padding:7px 2px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer
}
.filter-opt input{width:16px;height:16px;accent-color:var(--primary);flex:0 0 auto}
.filter-opt:hover{color:var(--ink)}

/* sayfalama */
.sayfalama{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:32px}
.sayfalama a,.sayfalama span{
  min-width:38px;height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;
  transition:border-color .16s,color .16s,background .16s
}
.sayfalama a:hover{border-color:var(--primary);color:var(--primary-text,var(--primary))}
.sayfalama .is-active,.sayfalama .aktif{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}

/* ==================================================================
   10. ÜRÜN DETAYI
   ================================================================== */
.pd-trust-item{
  display:flex;align-items:flex-start;gap:10px;padding:12px;
  background:var(--bg-soft);border-radius:var(--radius-sm);font-size:13px;line-height:1.5;color:var(--ink-2)
}
.pd-trust-item svg{flex:0 0 auto;width:17px;height:17px;color:var(--primary-text,var(--primary));margin-top:1px}
.pd-trust-item b{display:block;font-size:13.5px;font-weight:650;color:var(--ink);margin-bottom:2px}

.pd-variant-opts{display:flex;flex-wrap:wrap;gap:7px}
.variant-pill{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .16s,background .16s,color .16s
}
.variant-pill:hover{border-color:var(--primary);color:var(--primary-text,var(--primary))}
.variant-pill.is-selected,.variant-pill.is-active{
  background:var(--primary);border-color:var(--primary);color:var(--primary-ink)
}

.pd-thumb{
  width:66px;height:66px;flex:0 0 auto;object-fit:cover;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft);
  transition:border-color .16s
}
.pd-thumb:hover,.pd-thumb.is-active{border-color:var(--primary)}

/* sekmeler */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{
  padding:11px 16px;border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .16s,border-color .16s
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--primary-text,var(--primary));border-bottom-color:var(--primary)}

/* ==================================================================
   11. HESAP SAYFALARI
   ================================================================== */
.account-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.account-grid{grid-template-columns:1fr}}
.account-main{min-width:0}
.account-nav{display:grid;gap:2px}
.account-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s
}
.account-nav a svg{width:17px;height:17px;color:var(--muted-2)}
.account-nav a:hover{background:var(--bg-soft);color:var(--ink)}
.account-nav a.is-active{background:var(--primary-soft);color:var(--primary-text,var(--primary))}
.account-nav a.is-active svg{color:var(--primary-text,var(--primary))}

/* ==================================================================
   12. SSS / AKORDİYON
   ================================================================== */
.faq-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);margin-bottom:9px;overflow:hidden}
.faq-item > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border:0;background:none;cursor:pointer;font-family:inherit;text-align:left;
  font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)
}
.faq-item > button svg{flex:0 0 auto;width:17px;height:17px;color:var(--muted-2);transition:transform .2s}
.faq-item.is-open > button svg{transform:rotate(180deg)}
.faq-item.is-open > button{color:var(--primary-text,var(--primary))}
.faq-govde,.faq-item > div{padding:0 17px 16px;font-size:14px;line-height:1.7;color:var(--muted)}

/* ==================================================================
   13. ESKİ SÜS KALINTILARI — kapatılıyor
   Eski tasarımın dekoratif parçaları bazı sayfalarda hâlâ basılıyor.
   Silmek 60 şablona dokunmak demek; görünümden kaldırmak yeterli.
   ================================================================== */
.hero-daire,.hero-daire-isik,.hero-ring,.hero-orbit,
.trust-strip,.entegre-serit-alan,.wizard-section,
.blob,.deco,.pattern-dots{display:none !important}

/* ==================================================================
   14. KOYU MOD DÜZELTMELERİ
   Eski kurallarda sabit #fff / rgba(255,255,255,…) kullanılan yerler.
   ================================================================== */
:root[data-tema="koyu"] .card,
:root[data-tema="koyu"] .panel,
:root[data-tema="koyu"] .empty,
:root[data-tema="koyu"] .faq-item{background:var(--surface)}
:root[data-tema="koyu"] .qty button,
:root[data-tema="koyu"] .qty input{background:var(--surface);color:var(--ink-2)}
:root[data-tema="koyu"] .btn-dark{background:var(--ink);color:var(--bg)}
:root[data-tema="koyu"] .sayfalama a,
:root[data-tema="koyu"] .sayfalama span{background:var(--surface)}

/* ==================================================================
   15. HAREKET AZALTMA
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .btn,.variant-pill,.sayfalama a,.tab,.account-nav a,
  input,select,textarea,.pd-thumb,.qty button{transition:none}
}