/* =========================================================
   TAZE DİREKT — organik market teması (tema-10)
   Bootstrap 5 üzerine yazılmış özel stiller
   ========================================================= */

:root{
  --yesil:#1f4d2f;            /* ana koyu yeşil */
  --yesil-2:#2f7a4c;          /* degrade açık ucu */
  --yesil-3:#3fa06a;
  --yesil-soft:#eaf9f2;       /* aktif kategori zemini */
  --yesil-cizgi:#d3ecdf;
  --sari:#ffebb2;             /* indirim rozeti */
  --sari-metin:#6b5200;
  --metin:#1b1b1b;
  --metin-2:#6f7472;
  --metin-3:#9aa09d;
  --cizgi:#e8e8e6;
  --zemin:#ffffff;
  --zemin-2:#f9f9f9;
  --zemin-3:#fcfcfc;
  --golge:0 2px 10px rgba(20,40,30,.06);
  --golge-2:0 10px 30px -12px rgba(20,40,30,.25);
  --r:14px;
  --ff-baslik:'Lora', Georgia, 'Times New Roman', serif;
  --ff-govde:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  font-family:var(--ff-govde);
  color:var(--metin);
  background:var(--zemin);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.kap{width:100%;max-width:1440px;margin:0 auto;padding:0 24px}

/* ---------------- üst şerit ---------------- */
.ust-serit{background:var(--zemin-2);border-bottom:1px solid var(--cizgi);font-size:12.5px}
.ust-serit__ic{display:flex;align-items:center;gap:26px;height:42px}
.ust-serit a{color:#3d423f;white-space:nowrap}
.ust-serit a:hover{color:var(--yesil)}
.ust-serit__sag{margin-left:auto;display:flex;align-items:center;gap:8px;font-weight:500}
.ust-serit__ok{width:20px;height:20px;border-radius:50%;background:var(--yesil);color:#fff;
  display:grid;place-items:center;font-size:10px}

/* ---------------- başlık ---------------- */
.tepe{background:#fff;border-bottom:1px solid var(--cizgi);position:sticky;top:0;z-index:40}
.tepe__ic{display:flex;align-items:center;gap:28px;padding:14px 0}

.logo{display:inline-flex;font-family:var(--ff-baslik);color:var(--yesil);
  line-height:.94;font-weight:700;letter-spacing:-.5px}
.logo__yazi > span{display:block;position:relative}
.logo__ust{font-size:26px;padding-right:20px}
.logo__alt{font-size:26px}
.logo__yaprak{position:absolute;right:-4px;top:-4px;width:22px;height:22px;transform:rotate(6deg)}

.ara{flex:1;max-width:560px;position:relative}
.ara input{width:100%;height:46px;border:1px solid var(--cizgi);border-radius:10px;
  padding:0 16px 0 44px;font-size:14px;outline:none;transition:.18s;background:#fff}
.ara input::placeholder{color:var(--metin-3)}
.ara input:focus{border-color:var(--yesil-2);box-shadow:0 0 0 3px rgba(47,122,76,.12)}
.ara__ikon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--metin-3);font-size:16px}

/* giriş / üyelik bağlantıları */
.hesap{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:14px;font-weight:600}
.hesap a{color:var(--yesil)}
.hesap a:hover{text-decoration:underline}
.hesap__ayrac{width:1px;height:16px;background:var(--cizgi)}

/* sepet — zeminsiz, sade ikon */
.sepet-btn{position:relative;width:48px;height:48px;border:0;background:none;padding:0;flex:none;
  color:var(--yesil);font-size:27px;display:grid;place-items:center;transition:.18s}
.sepet-btn:hover{transform:translateY(-1px);color:#163c24}
.sepet-btn__adet{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;
  background:var(--yesil);color:#fff;font-size:11px;font-weight:700;line-height:18px;padding:0 5px}

/* ---------------- gövde ızgarası ---------------- */
.govde{display:grid;grid-template-columns:262px minmax(0,1fr) 224px;gap:24px;padding:22px 0 8px;align-items:start}

/* kategori listesi */
/* overflow:hidden YOK — alt kategori paneli listenin dışına taşıyor; köşeleri
   ilk/son satıra yarıçap vererek yuvarlıyoruz */
.kategoriler{border:1px solid var(--cizgi);border-radius:var(--r);background:#fff;position:relative}
.kategori-satir:first-child .kategori-oge{border-radius:var(--r) var(--r) 0 0}
.kategori-satir:last-child .kategori-oge{border-radius:0 0 var(--r) var(--r)}
.kategori-satir:last-child .kategori-oge{border-bottom:0}
.kategori-oge{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;font-size:13.5px;color:#2d312f;border-bottom:1px solid #f1f1ef;position:relative;transition:.15s}
.kategori-oge i{color:var(--metin-3);font-size:12px}
.kategori-oge:hover{background:#f7fbf9;color:var(--yesil)}
.kategori-oge--aktif{background:var(--yesil-soft);color:var(--yesil);font-weight:600}
.kategori-oge--aktif::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yesil)}

/* mega panel — her kategorinin kendi alt kategori paneli var */
.kategori-sar{position:relative}
.kategoriler{position:relative}
/* panel kendi satırının hizasında açılır */
.kategori-satir{position:relative}
.mega{position:absolute;left:100%;top:0;width:520px;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r);box-shadow:var(--golge-2);padding:26px 30px;z-index:30;
  opacity:0;visibility:hidden;transform:translateX(6px);transition:.18s}
.mega--dar{width:300px}
/* Listenin altındaki satırlarda panel aşağı taşmasın diye yukarı açılır.
   :nth-child(n+8) şartı ŞART: yoksa kısa listelerde (ör. 2 kategorili mağaza)
   ilk satırlar da "son 7" sayılıp panel yukarı açılıyor ve başlığın üstünü
   kapatıyordu. Artık yalnız 8. satırdan sonrakiler yukarı açılır. */
.kategori-satir:nth-last-child(-n+7):nth-child(n+8) .mega{top:auto;bottom:0}
/* fare kategoriden panele geçerken boşlukta kaybolmasın */
.mega::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:14px}
.kategori-satir:hover .mega{opacity:1;visibility:visible;transform:none}
.mega__baslik{font-family:var(--ff-baslik);font-size:17px;font-weight:700;margin:0 0 12px}
.mega__baslik + .mega__liste{margin-bottom:22px}
.mega__liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mega__liste a{font-size:13.5px;color:#414643}
.mega__liste a:hover{color:var(--yesil)}

/* ---------------- vitrin ---------------- */
.vitrin{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.vitrin__slider{position:relative;border-radius:var(--r);overflow:hidden;background:#f3f4f2;aspect-ratio:16/9}
.vitrin__slider .carousel,.vitrin__slider .carousel-inner,.vitrin__slider .carousel-item{height:100%}
.vitrin__slider img{width:100%;height:100%;object-fit:cover}
.vitrin__ok{position:absolute;top:50%;right:-22px;transform:translateY(-50%);z-index:6;width:52px;height:52px;
  border-radius:50%;background:#fff;border:1px solid var(--cizgi);color:#2d312f;font-size:20px;
  display:grid;place-items:center;box-shadow:var(--golge-2)}
.vitrin__ok:hover{color:var(--yesil)}

/* tanıtım kartları */
.tanitim-kolon{display:grid;gap:16px}
.tanitim{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;display:block}
.tanitim img{width:100%;height:100%;object-fit:cover;transition:.5s}
.tanitim:hover img{transform:scale(1.05)}
.tanitim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,20,15,.72) 12%,rgba(12,20,15,.18) 55%,rgba(12,20,15,0) 85%)}
.tanitim__yazi{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;
  font-family:var(--ff-baslik);font-size:21px;font-weight:700;line-height:1.18;text-shadow:0 2px 10px rgba(0,0,0,.45)}

/* ---------------- bölüm başlıkları ---------------- */
.bolum{padding:34px 0}
.bolum__bas{text-align:center;margin-bottom:6px}
.bolum__bas h2{font-family:var(--ff-baslik);font-size:30px;font-weight:600;margin:0;letter-spacing:-.3px}
.tumunu{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:#3d423f;font-weight:500}
.tumunu span{width:34px;height:1.5px;background:#8fbf6f;position:relative}
.tumunu span::after{content:"";position:absolute;right:0;top:-3px;border:4px solid transparent;border-left-color:#8fbf6f}
.tumunu:hover{color:var(--yesil)}
.bolum__sag{display:flex;justify-content:flex-end;margin:6px 0 16px}

/* ---------------- ürün kartı ---------------- */
.urun-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}
.urun-izgara--genis{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:0 auto}

.urun{position:relative}
.urun__gorsel{position:relative;border-radius:var(--r);overflow:hidden;background:#f4f4f2;aspect-ratio:1/1;
  border:1px solid #f0f0ee}
.urun__gorsel img{width:100%;height:100%;object-fit:cover;transition:.45s}
.urun:hover .urun__gorsel img{transform:scale(1.04)}

.urun__marka{margin:11px 0 3px;font-size:13px;font-weight:600;color:#232725}
.urun__ad{font-size:13px;color:var(--metin-2);line-height:1.42;min-height:36px;margin:0}
.urun__fiyat{margin-top:7px;font-size:17px;font-weight:700;letter-spacing:-.2px}
.urun__fiyat small{font-size:11.5px;font-weight:500;color:var(--metin-2);margin-left:3px}
.urun__rozet{display:inline-block;margin-top:8px;background:var(--sari);color:var(--sari-metin);
  font-size:11px;font-weight:600;border-radius:4px;padding:4px 8px}

/* ---------------- alt bilgi (ortak footer) ---------------- */
.atl-footer{
  --f-zemin:var(--zemin, #fff);
  --f-cizgi:var(--cizgi, #e6e1d7);
  --f-metin:var(--metin, #17150f);
  --f-sessiz:var(--metin-2, #7b7568);
  --f-vurgu:var(--yesil, #26463b);
  background:var(--f-zemin);
  border-top:1px solid var(--f-cizgi);
  padding-top:clamp(48px,6vw,80px);
  margin-top:clamp(40px,6vw,90px);
  color:var(--f-metin);
}
.atl-footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}

.atl-footer__brand .atl-brand{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.atl-footer__brand p{color:var(--f-sessiz);max-width:34ch;font-size:.92rem;margin:0}

.atl-footer h5{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f-metin);margin:0 0 1.1rem}
.atl-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.atl-footer ul a{color:var(--f-sessiz);font-size:.92rem}
.atl-footer ul a:hover{color:var(--f-vurgu)}

.atl-social{display:flex;gap:.5rem;margin-top:1.2rem}
.atl-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--f-cizgi);
  display:grid;place-items:center;color:var(--f-metin);transition:.18s}
.atl-social a:hover{background:var(--f-vurgu);color:#fff;border-color:var(--f-vurgu)}
.atl-social svg{width:18px;height:18px}

.atl-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--f-cizgi);margin-top:clamp(34px,4vw,56px);padding:1.6rem 0;
  color:var(--f-sessiz);font-size:.84rem}
.atl-footer__pay{display:flex;gap:.4rem;align-items:center}
.atl-footer__pay svg{height:30px;width:auto;display:block}

.atl-footer__credit{display:flex;justify-content:center;align-items:center;gap:.35rem;flex-wrap:wrap;
  padding:0 0 1.5rem;color:var(--f-sessiz);font-size:.8rem}
.atl-footer__credit a{color:var(--f-metin);text-decoration:underline;text-underline-offset:3px}
.atl-footer__credit a:hover{color:var(--f-vurgu)}

@media (max-width:1100px){
  .atl-footer__top{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width:760px){
  .atl-footer__top{grid-template-columns:1fr 1fr}
  .atl-footer__brand{grid-column:1/-1;margin-bottom:1rem}
}
@media (max-width:480px){
  .atl-footer__top{grid-template-columns:1fr}
  .atl-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------------- duyarlılık ---------------- */
@media (max-width:1300px){
  .govde{grid-template-columns:238px minmax(0,1fr)}
  .tanitim-kolon--yan{display:none}
}
@media (max-width:1100px){
  .mega{display:none}
}
@media (max-width:992px){
  .govde{grid-template-columns:minmax(0,1fr)}
  .kategoriler{display:flex;overflow-x:auto;border-radius:10px}
  .kategori-satir{flex:none}
  .kategori-oge{border-bottom:0;border-right:1px solid #f1f1ef;white-space:nowrap}
  .kategori-oge i{display:none}
  .kategori-oge--aktif::before{width:100%;height:3px;top:auto;bottom:0}
}
@media (max-width:768px){
  .tepe__ic{flex-wrap:wrap;gap:14px}
  .ara{order:3;flex:1 0 100%;max-width:none}
  .sepet-btn{width:42px;height:42px;font-size:23px}
  .urun-izgara,.urun-izgara--genis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bolum__bas h2{font-size:24px}
  .vitrin__ok{right:8px}
}
@media (max-width:600px){
  /* dar ekranda ilk iki link kalsın; Sipariş Takibi her zaman görünür */
  .ust-serit__ic a:nth-child(n+3):not(.ust-serit__sag){display:none}
  .ust-serit__ic{gap:18px}
}
@media (max-width:480px){
  .ust-serit{display:none}
  .urun__ad{min-height:0}
}

/* =========================================================
   GOYOMOD ENTEGRASYON EKLERİ (tema-10)
   Statik şablonda olmayan, gerçek mağazada gereken parçalar.
   ========================================================= */

/* Mağazanın kendi logosu yüklüyse yazı yerine görsel basılıyor. */
.logo__resim{max-height:44px;width:auto}

/* Mobil menü düğmesi — tema 9'un offcanvas menüsünü açar.
   Masaüstünde gizli: orada kategoriler zaten sol sütunda. */
.tepe__burger{display:none;background:none;border:0;padding:0 2px;font-size:24px;
  color:var(--yesil);line-height:1;cursor:pointer}
@media (max-width:992px){
  .tepe__burger{display:inline-flex;align-items:center}
}

/* Ürün kartı: statik şablonda yalnız düz fiyat vardı; mağazada
   indirimli eski fiyat, tükendi ve üyeye özel fiyat durumları da var. */
.urun__gorsel{display:block}
.urun__ad a{color:inherit}
.urun__eski{margin-left:6px;font-size:12px;font-weight:500;color:var(--metin-3);
  text-decoration:line-through}
.urun__tukendi{font-size:13px;font-weight:600;color:var(--metin-3)}
.urun__gizli{font-size:12px;font-weight:600;color:var(--yesil)}

/* Slayt bağlantılıysa <a> araya giriyor; görsel yine kutuyu doldursun. */
.vitrin__slider .carousel-item > a{display:block;height:100%}
.vitrin__slider .carousel-item > a img{height:100%;object-fit:cover}

/* =========================================================
   MAĞAZA GÖRÜNÜMÜ BAĞLANTISI  (Panel > Temalar > Mağaza Görünümü)

   `Gorunum::css()` :root'a şu değişkenleri basıyor:
     --accent/--accent-2/--accent-3, --paper/--surface/--ink/--ink-soft/
     --muted/--line/--line-2, --radius*, --ff-display/--ff-body, --maxw
   Tema-10 kendi adlarını kullandığı için (--yesil, --metin, --zemin, --r…)
   mağazacının panelden seçtiği renk/font/köşe tema-10'a HİÇ işlemiyordu.
   Aşağıda tema-10'un değişkenleri Gorunum'unkilere bağlandı; ayar
   seçilmemişse var() yedeği devreye girip temanın kendi değeri kalıyor.
   ========================================================= */
:root{
  --yesil:       var(--accent,     #1f4d2f);
  --yesil-2:     var(--accent,     #2f7a4c);
  --yesil-3:     var(--accent,     #3fa06a);
  --yesil-soft:  var(--accent-2,   #eaf9f2);
  --yesil-cizgi: var(--accent-2,   #d3ecdf);
  --metin:       var(--ink,        #1b1b1b);
  --metin-2:     var(--ink-soft,   #6f7472);
  --metin-3:     var(--muted,      #9aa09d);
  --cizgi:       var(--line,       #e8e8e6);
  --zemin:       var(--paper,      #ffffff);
  --zemin-2:     var(--surface,    #f9f9f9);
  --zemin-3:     var(--surface,    #fcfcfc);
  --r:           var(--radius,     14px);
  --ff-baslik:   var(--ff-display, 'Lora', Georgia, 'Times New Roman', serif);
  --ff-govde:    var(--ff-body,    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Sayfa genişliği ayarı (Dar / Normal / Geniş / Tam ekran). */
.kap{max-width:var(--maxw, 1440px)}

/* Mobilde kategori sütunu gizlenir: aynı kategoriler ☰ menüsünde (tema 9'un
   offcanvas'ı) zaten listeleniyor. Temanın kendi duyarlı kuralı burada listeyi
   yatay kaydırmalı bir şeride çeviriyordu ve slider'ın üstünde ikinci bir menü
   gibi duruyordu — tekrar oluyordu. (20 Eylül 2026) */
@media (max-width:992px){
  .kategori-sar{display:none}
}

/* Ürün listeleri (kategori, arama, favoriler, karşılaştırma, benzer ürünler)
   tema 9'dan gelen `.atl-grid` / `.swiper-slide` kaplarını kullanıyor.
   Kart hücreyi doldursun ki satırdaki kartlar eşit boyda dursun. */
.atl-grid > .urun,
.swiper-slide > .urun{height:100%;display:flex;flex-direction:column}
.atl-grid > .urun .urun__fiyat,
.swiper-slide > .urun .urun__fiyat{margin-top:auto}

/* /* ---- mobil yan boşluk (2026-09-26) ----
   .govde ve .tepe__ic kendi padding kısa yazımıyla .kap'ın yan boşluğunu
   sıfırlıyordu; masaüstünde içerik ortalandığı için görünmüyor, telefonda
   içerik ekran kenarına yapışıyordu. */
.kap.govde,.kap.tepe__ic{padding-left:24px;padding-right:24px}
@media (max-width:600px){
  .kap,.kap.govde,.kap.tepe__ic{padding-left:16px;padding-right:16px}
  /* Giriş/Üye Ol bağlantıları burger menüsünde de var; başlık tek satır kalsın. */
  .hesap{display:none}
  .tepe__ic{gap:12px}
  .logo{flex:1 1 0;min-width:0}
  .logo__resim{max-width:100%;max-height:36px;object-fit:contain;object-position:left center}
}