@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif; background:#F6F5F2; color:#22201C;
  max-width:560px; margin:0 auto; position:relative;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

:root{
  --vurgu:#F3711B; --vurgu-koyu:#D65C0C; --koyu:#22201C; --beyaz:#fff; --krem:#F6F5F2;
  --cizgi:#EAE6DE; --gri:#847E73; --golge:0 10px 30px rgba(34,32,28,.12); --header-h:84px;
  --header-bg1:var(--vurgu); --header-bg2:var(--vurgu-koyu); --header-gradient-aci:120deg; --header-gradient-stop:100%;
}

/* ================= HEADER (logo solda, kontroller sağda) ================= */
.km-header{ position:sticky; top:0; z-index:50; background:linear-gradient(var(--header-gradient-aci), var(--header-bg1) 0%, var(--header-bg2) var(--header-gradient-stop)); }
.km-gecis-katman{ height:46px; margin-bottom:-46px; position:relative; z-index:5; background:linear-gradient(180deg, var(--header-bg2) 0%, rgba(0,0,0,0) 100%); pointer-events:none; }
.km-header-ic{ max-width:560px; margin:0 auto; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:8px; }
.km-header-logo-link{ min-width:0; max-width:52%; overflow:hidden; display:flex; }
.km-header-logo{ height:60px; width:auto; max-width:100%; object-fit:contain; flex:none; }
.km-header-logo-yer{ height:60px; padding:0 18px; border-radius:12px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.35); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; flex:none; }
.km-sol-grup{ display:flex; align-items:center; gap:10px; }
.km-ikon-buton{ width:36px; height:36px; border-radius:11px; border:1.5px solid rgba(255,255,255,.55); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.km-sag-grup{ display:flex; align-items:center; gap:6px; flex:none; }
.km-garson-buton{ display:flex; align-items:center; gap:6px; background:#fff; color:var(--koyu); font-size:12.5px; font-weight:700; padding:9px 13px; border-radius:11px; opacity:.75; }
.km-garson-buton .yakinda{ font-size:8.5px; font-weight:800; text-transform:uppercase; background:var(--krem); padding:2px 6px; border-radius:100px; margin-left:2px; }
.km-dil-wrap{ position:relative; flex:none; }
.km-dil-buton{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.55); color:#fff; padding:0 9px; border-radius:11px; height:36px; font-size:12px; font-weight:700; }
.km-dil-buton img{ width:19px; height:14px; border-radius:2px; object-fit:cover; }
.km-dil-menu{ position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:12px; box-shadow:var(--golge); padding:6px; min-width:150px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; z-index:60; }
.km-dil-wrap.acik .km-dil-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.km-dil-menu a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--koyu); }
.km-dil-menu a:hover, .km-dil-menu a.aktif{ background:var(--krem); }
.km-dil-menu img{ width:18px; border-radius:2px; }

/* ================= BANNER ================= */
.km-banner{ position:relative; height:170px; background-size:cover; background-position:center; }
.km-banner.yok{ background:linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu)); }
.km-kart{ background:var(--beyaz); margin:-22px 14px 0; border-radius:20px; box-shadow:var(--golge); padding:24px 20px 18px; position:relative; z-index:2; text-align:center; }
.km-kart-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--vurgu); margin-bottom:8px; }
.km-kart-eyebrow::before, .km-kart-eyebrow::after{ content:""; width:14px; height:1.5px; background:var(--vurgu); opacity:.4; }
.km-firma-adi{ font-family:'Poppins', sans-serif; font-weight:800; font-size:24px; letter-spacing:-.01em; margin-bottom:10px; color:var(--koyu); }
.km-tagline{ font-size:13.5px; line-height:1.65; color:var(--gri); font-style:italic; max-width:380px; margin:0 auto; }
.km-bilgi-satir{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--koyu); margin-bottom:7px; }
.km-bilgi-satir svg{ color:var(--vurgu); flex:none; }
.km-sosyal-satir{ display:flex; gap:9px; margin-top:12px; }
.km-sosyal-satir a{ width:32px; height:32px; border-radius:50%; background:var(--krem); display:flex; align-items:center; justify-content:center; color:var(--koyu); }
.km-sosyal-satir a:hover{ background:var(--vurgu); color:#fff; }

/* ================= KATEGORİ IZGARASI ================= */
.km-bolum-baslik{ font-family:'Poppins', sans-serif; font-weight:700; font-size:16px; padding:26px 16px 12px; }
.km-kat-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px 28px; }
.km-kat-tile{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(34,32,28,.1); background:var(--beyaz); text-align:left; }
.km-kat-tile-gorsel{ position:relative; height:100px; overflow:hidden; }
.km-kat-tile-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--vurgu); transition:transform .35s ease; }
.km-kat-tile:hover .km-kat-tile-bg, .km-kat-tile:active .km-kat-tile-bg{ transform:scale(1.08); }
.km-kat-tile-alt{ display:flex; align-items:center; gap:8px; padding:11px 12px; }
.km-kat-tile-ikon{ width:26px; height:26px; border-radius:8px; background:var(--krem); color:var(--vurgu); display:flex; align-items:center; justify-content:center; flex:none; }
.km-kat-tile-alt span{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--koyu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================= DETAY GÖRÜNÜMÜ (kategori -> ürünler) ================= */
.km-detay-ust-bar{ position:sticky; top:var(--header-h); z-index:40; background:var(--krem); display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--cizgi); }
.km-geri-buton{ display:flex; align-items:center; gap:5px; font-weight:700; font-size:14px; color:var(--koyu); flex:none; }
.km-detay-baslik{ flex:1; font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.km-gorunum-toggle{ display:flex; gap:4px; background:var(--beyaz); border:1px solid var(--cizgi); border-radius:10px; padding:3px; flex:none; }
.km-gorunum-buton{ width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--gri); }
.km-gorunum-buton.aktif{ background:var(--vurgu); color:#fff; }

/* Ürün listesi - ızgara (kart) görünümü */
.km-urun-liste.km-izgara-mod{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.km-urun-liste.km-izgara-mod .km-urun-kart{ flex-direction:column; padding:0; overflow:hidden; }
.km-urun-liste.km-izgara-mod .km-urun-foto, .km-urun-liste.km-izgara-mod .km-urun-foto-yer{ width:100%; height:110px; border-radius:0; }
.km-urun-liste.km-izgara-mod .km-urun-bilgi{ padding:10px 11px 12px; }
.km-urun-liste.km-izgara-mod .km-urun-ad{ font-size:13.5px; }
.km-urun-liste.km-izgara-mod .km-urun-aciklama{ display:none; }
.km-urun-liste.km-izgara-mod .km-urun-ust-satir{ flex-direction:column; align-items:flex-start; gap:2px; }
.km-urun-liste.km-izgara-mod .km-urun-alt-satir{ flex-wrap:wrap; gap:6px; }
.km-urun-liste.km-izgara-mod .km-ekle-buton{ font-size:11px; padding:5px 9px; }

/* ================= ÜRÜN LİSTESİ ================= */
.km-kategori-blok{ scroll-margin-top:70px; }
.km-urun-liste{ padding:6px 16px 28px; display:flex; flex-direction:column; gap:12px; }
.km-urun-kart{ display:flex; gap:12px; background:var(--beyaz); border-radius:16px; padding:10px; box-shadow:0 2px 8px rgba(34,32,28,.05); text-align:left; width:100%; align-items:stretch; }
.km-urun-foto{ width:86px; height:86px; border-radius:12px; object-fit:cover; flex:none; }
.km-urun-foto-yer{ width:86px; height:86px; border-radius:12px; background:var(--krem); flex:none; display:flex; align-items:center; justify-content:center; color:var(--gri); }
.km-urun-bilgi{ flex:1; min-width:0; display:flex; flex-direction:column; }
.km-urun-ust-satir{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.km-urun-ad{ font-family:'Poppins', sans-serif; font-weight:600; font-size:14.5px; line-height:1.3; }
.km-urun-fiyat{ font-family:'Poppins', sans-serif; font-weight:700; font-size:14.5px; color:var(--vurgu); white-space:nowrap; }
.km-urun-aciklama{ font-size:12px; color:var(--gri); line-height:1.4; margin:4px 0 8px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.km-urun-alt-satir{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.km-etiket-satir{ display:flex; gap:5px; }
.km-etiket-ikon{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.km-etiket-ikon.vegan{ background:#DCE8D0; color:#4C7A2E; }
.km-etiket-ikon.acili{ background:#FCE0D0; color:var(--vurgu); }
.km-etiket-ikon.glutensiz{ background:#E4E0F3; color:#5B4E9E; }
.km-ekle-buton{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--vurgu); border:1.5px solid var(--vurgu); padding:6px 12px; border-radius:100px; }
.km-ekle-buton:hover{ background:var(--vurgu); color:#fff; }
.km-bos-durum{ text-align:center; padding:60px 20px; color:var(--gri); font-size:14px; }

/* ================= MODALLAR (Hakkımızda / Ara / Garson) ================= */
.km-modal-katman{ position:fixed; inset:0; background:rgba(34,32,28,.55); z-index:220; display:none; align-items:flex-start; justify-content:center; padding:70px 16px 20px; overflow-y:auto; }
#kmNotModal{ z-index:280; align-items:center; padding:24px; }
.km-modal-katman.acik{ display:flex; }
.km-modal-panel{ background:var(--beyaz); border-radius:18px; max-width:520px; width:100%; margin:auto; max-height:80vh; overflow-y:auto; }
.km-modal-ust{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--cizgi); position:sticky; top:0; background:var(--beyaz); border-radius:18px 18px 0 0; }
.km-modal-ust b{ font-family:'Poppins',sans-serif; font-size:16px; }
.km-modal-kapat{ width:30px; height:30px; border-radius:50%; background:var(--krem); display:flex; align-items:center; justify-content:center; }
.km-modal-ic{ padding:20px; }
.km-modal-ic p{ font-size:14px; line-height:1.7; color:var(--koyu); margin-bottom:14px; }
.km-arama-input{ width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--cizgi); font-size:14px; margin-bottom:16px; }
.km-arama-input:focus{ outline:none; border-color:var(--vurgu); }
.km-arama-sonuc{ display:flex; flex-direction:column; gap:10px; }
.km-arama-bos{ text-align:center; padding:30px 10px; color:var(--gri); font-size:13.5px; }
.km-form-alan{ margin-bottom:14px; }
.km-form-alan label{ display:block; font-size:12.5px; font-weight:700; color:var(--gri); margin-bottom:6px; }
.km-form-alan input{ width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--cizgi); font-size:16px; }
.km-not-ekle-buton{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--vurgu); border:1.5px solid var(--vurgu); padding:8px 13px; border-radius:100px; flex:none; white-space:nowrap; }
.km-not-ekle-buton:hover{ background:var(--vurgu); color:#fff; }
.km-gonder-buton{ width:100%; background:var(--vurgu); color:#fff; font-weight:700; font-size:14px; padding:14px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px; opacity:.55; }
.km-yakinda-not{ font-size:12px; color:var(--gri); text-align:center; margin-top:10px; }

/* ================= ÜRÜN DETAY (ortalanmış popup) ================= */
.detay-katman{ position:fixed; inset:0; background:rgba(20,18,15,.65); z-index:250; display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px); overflow-y:auto; }
.detay-katman.acik{ display:flex; }
.detay-panel{ background:var(--beyaz); width:100%; max-width:380px; margin:auto; border-radius:22px; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.detay-foto{ width:100%; height:180px; object-fit:cover; display:block; border-radius:22px 22px 0 0; }
.detay-foto-yer{ width:100%; height:120px; background:var(--krem); border-radius:22px 22px 0 0; }
.detay-ust-sarmal{ position:relative; line-height:0; }
.detay-kapat{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--koyu); display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:0 3px 10px rgba(0,0,0,.2); }
.detay-ic{ padding:20px 22px 26px; }
.detay-tutamac{ display:none; }
.detay-ad{ font-family:'Poppins', sans-serif; font-weight:700; font-size:19px; margin-bottom:10px; line-height:1.3; }
.detay-etiketler{ display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.detay-etiket{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:100px; }
.detay-etiket.vegan{ background:#DCE8D0; color:#4C7A2E; }
.detay-etiket.acili{ background:#FCE0D0; color:var(--vurgu); }
.detay-etiket.glutensiz{ background:#E4E0F3; color:#5B4E9E; }
.detay-aciklama{ font-size:13.5px; line-height:1.7; color:var(--gri); margin-bottom:16px; }
.detay-fiyat{ font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; color:var(--vurgu); padding-top:12px; border-top:1px solid var(--cizgi); }

/* ================= HAMBURGER ÇEKMECESİ ================= */
.site-karartma{ position:fixed; inset:0; background:rgba(34,32,28,.55); z-index:90; display:none; }
.site-karartma.acik{ display:block; }
.site-cekmece{
  position:fixed; top:0; right:-100%; width:84%; max-width:340px; height:100vh; height:100dvh;
  background:var(--beyaz); z-index:210; transition:.3s; overflow-y:auto; padding:22px;
}
.site-cekmece.acik{ right:0; }
.cekmece-ust{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cekmece-baslik-buyuk{ font-family:'Poppins', sans-serif; font-weight:700; font-size:17px; }
.cekmece-kapat{ width:32px; height:32px; border-radius:50%; background:var(--krem); display:flex; align-items:center; justify-content:center; }
.cekmece-alt-link{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--vurgu); margin-bottom:18px; }
.cekmece-bolum{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--cizgi); }
.cekmece-bolum:last-child{ border-bottom:none; }
.cekmece-bolum-baslik{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gri); margin-bottom:10px; }
.cekmece-iletisim-satir{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13.5px; }
.cekmece-iletisim-satir svg{ color:var(--vurgu); flex:none; }
.cekmece-sosyal-satir{ display:flex; gap:10px; }
.cekmece-yasal-satir{ display:flex; flex-direction:column; gap:9px; margin-top:8px; padding-top:16px; border-top:1px solid var(--cizgi); }
.cekmece-yasal-satir a{ font-size:11.5px; color:var(--gri); text-decoration:underline; }
.cekmece-sosyal-satir a{ width:36px; height:36px; border-radius:50%; background:var(--krem); display:flex; align-items:center; justify-content:center; }
.cekmece-servis-buton{ width:100%; display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:14px; background:var(--krem); font-size:14px; font-weight:700; color:var(--gri); opacity:.75; }
.yakinda-etiket{ margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; background:rgba(34,32,28,.08); padding:3px 8px; border-radius:100px; }

@media (min-width:561px){
  .km-header-ic, .detay-katman, .km-modal-katman{ border-left:1px solid rgba(0,0,0,.05); border-right:1px solid rgba(0,0,0,.05); }
}

/* ================= FOOTER BAR ================= */
.km-footer{ background:linear-gradient(var(--header-gradient-aci), var(--header-bg1) 0%, var(--header-bg2) var(--header-gradient-stop)); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; margin-top:auto; }
.km-footer-sol{ font-size:12px; opacity:.9; }
.km-footer-sag{ display:flex; align-items:center; }
.km-footer-sag img{ height:22px; width:auto; opacity:.95; }

/* ================= BUTON SATIRINA EŞLEŞMİŞ REYTİNG ROZETİ ================= */
.km-satir-reyting-ek{ margin-left:auto; display:flex; align-items:center; gap:7px; padding-left:12px; }
.km-satir-reyting-ek b{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--koyu); }
.km-satir-reyting-ek span{ color:#E0A526; font-size:13px; letter-spacing:1px; }