:root{
  --cream:#F6F0E6; --card:#FFFFFF; --ink:#2B2118; --muted:#6E6255; --line:#E6DCCD;
  --dark:#17120E; --green:#1E4632; --green-d:#143222; --chip:#EDE5D8; --gold:#B07A1E; --gold-bg:#F6EBD7;
  --serif:'DM Serif Display', Georgia, serif; --sans:'DM Sans', system-ui, -apple-system, sans-serif; --script:'Allura', cursive;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0f0c0a;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit}
img{display:block}
.app{max-width:480px;margin:0 auto;min-height:100%;min-height:100dvh;background:var(--cream);position:relative;overflow-x:hidden}
.screen{min-height:100vh;min-height:100dvh;position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* yükleme / hata */
.loading,.err{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--dark);color:#EFE6DA;font-size:15px;padding:24px;text-align:center}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err button{height:46px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:var(--ink);font-weight:700;font-size:15px;cursor:pointer}

/* marka yazısı */
.brand{display:flex;flex-direction:column;align-items:center;color:#fff;text-align:center}
.brand .b1{font-weight:600;letter-spacing:.22em;line-height:1;padding-left:.22em}
.brand .b2{font-weight:500;letter-spacing:.32em;padding-left:.32em;margin-top:3px}
.brand .b3{font-family:var(--script);line-height:1;margin-top:4px;transform:rotate(-6deg)}
.brand.lg .b1{font-size:27px}.brand.lg .b2{font-size:10.5px}.brand.lg .b3{font-size:40px}
.brand.sm .b1{font-size:19px}.brand.sm .b2{font-size:8px}.brand.sm .b3{font-size:28px}

/* ortak foto katmanları */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0}

/* 1) karşılama */
.welcome{background:var(--dark);color:#fff;overflow:hidden}
.welcome .shade{background:linear-gradient(180deg,rgba(20,14,10,.55) 0%,rgba(20,14,10,.3) 30%,rgba(20,14,10,.82) 62%,rgba(20,14,10,.95) 100%)}
.welcome-in{position:relative;min-height:100vh;min-height:100dvh;padding:64px 26px 28px;display:flex;flex-direction:column;align-items:center}
.welcome h1{margin:auto 0 0;padding-top:60px;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.12;text-align:center}
.welcome .lead{margin:14px 0 0;font-size:15px;line-height:1.5;text-align:center;color:#EFE6DA}
.langs{margin-top:28px;width:100%;display:flex;flex-direction:column;gap:12px}
.langs button{height:56px;border-radius:999px;background:#fff;color:var(--ink);border:0;display:flex;align-items:center;padding:0 18px;font-size:16px;font-weight:600;position:relative;cursor:pointer}
.langs button span{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.langs button:focus-visible{outline:3px solid #F2C46D;outline-offset:2px}
.wfoot{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:18px;font-size:12px;color:#E3D8CA}
.wfoot .dots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wfoot .loc{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.12em;font-weight:600}

/* 2) kategoriler */
.cats{background:var(--dark);color:#fff;padding-bottom:28px}
.cats .top{position:relative;height:330px}
.cats .top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cats .top .shade{background:linear-gradient(180deg,rgba(23,18,14,.5) 0%,rgba(23,18,14,.35) 40%,var(--dark) 100%)}
.cats .bar{position:absolute;left:0;right:0;top:0;padding:18px 12px 0;display:flex;justify-content:space-between;align-items:flex-start}
.iconbtn{min-width:44px;height:44px;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em}
.iconbtn.pill{background:rgba(20,14,10,.45);padding:0 12px}
.cats .title{position:absolute;left:26px;bottom:26px}
.cats h1{margin:0;font-family:var(--script);font-weight:400;font-size:78px;line-height:.9}
.cats h1.cyr{font-family:var(--serif);font-size:58px}
.cats .title p{margin:6px 0 0 36px;font-size:13px;color:#EFE6DA}
.table-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:600;margin:0 0 0 20px}
.krows{padding:0 18px;display:flex;flex-direction:column;gap:10px;margin-top:-6px}
.krow{position:relative;display:flex;align-items:center;height:70px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);text-decoration:none;color:#fff}
.krow img{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.krow .n{position:relative;padding-left:18px;font-family:var(--serif);font-size:21px;max-width:60%}
.krow .go{position:absolute;right:12px;width:36px;height:36px;border-radius:999px;background:rgba(20,14,10,.6);display:flex;align-items:center;justify-content:center}
.krow:focus-visible{outline:3px solid #F2C46D;outline-offset:2px}
.sube-link{display:block;margin:20px auto 0;text-align:center;color:#EFE6DA;font-size:13px;padding:12px}

/* 3) ürün listesi */
.list .hero{position:relative;height:160px;color:#fff}
.list .hero .shade{background:linear-gradient(90deg,rgba(20,14,10,.85) 0%,rgba(20,14,10,.45) 100%)}
.back{position:absolute;left:10px;top:12px;width:44px;height:44px;border-radius:999px;background:rgba(20,14,10,.45);border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.list .hero .t{position:absolute;left:22px;right:22px;bottom:32px}
.list h1{margin:0;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05}
.list .hero p{margin:4px 0 0;font-size:13px;color:#EFE6DA}
.sheet{position:relative;margin-top:-16px;background:var(--cream);border-radius:20px 20px 0 0;min-height:calc(100dvh - 144px)}
.chips{display:flex;gap:8px;padding:18px 16px 10px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:40px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0;border:1px solid var(--chip);background:var(--chip);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.items{padding:0 18px 12px}
.item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.item .ph,.item img{width:88px;height:82px;border-radius:12px;object-fit:cover;flex-shrink:0;background:#EADFCF}
.item .tx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.item .nm{font-family:var(--serif);font-size:17.5px;line-height:1.2}
.item .ds{font-size:12.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .pr{font-weight:700;font-size:15px;margin-top:auto}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--gold-bg);color:#7A4E0E}
.tag.aci{background:#F8DDD7;color:#8E2A1D}.tag.vej{background:#DDEBD5;color:#2F5D2A}.tag.cok{background:#E4ECE6;color:var(--green)}
.empty{padding:40px 10px;text-align:center;color:var(--muted);font-size:14px}
.note{padding:14px 26px 30px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

/* 4) ürün detayı */
.detail{background:var(--card)}
.detail .hero{position:relative;height:330px;background:#EADFCF}
.detail .hero img{width:100%;height:100%;object-fit:cover}
.dcard{position:relative;margin-top:-26px;background:var(--card);border-radius:24px 24px 0 0;padding:26px 22px 34px;display:flex;flex-direction:column;gap:16px;min-height:calc(100dvh - 304px)}
.dhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dhead h1{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1}
.dhead .pr{font-family:var(--serif);font-size:26px;white-space:nowrap}
.dcard p{margin:0;font-size:15px;line-height:1.55;color:#5C5146}
.alg{display:flex;gap:10px 18px;flex-wrap:wrap}
.alg span{display:flex;align-items:center;gap:8px;font-size:13px;color:#5C5146}
.alg i{width:30px;height:30px;border-radius:999px;background:var(--gold-bg);display:flex;align-items:center;justify-content:center}
.info{margin:0;display:grid;grid-template-columns:24px auto 1fr;gap:14px 10px;align-items:center;font-size:14px;border-top:1px solid #EEE6DA;padding-top:16px}
.info dt{color:#5C5146}.info dd{margin:0}

/* 5) şube */
.branch{background:var(--card)}
.branch .hero{position:relative;height:300px}
.branch .hero .shade{background:linear-gradient(180deg,rgba(20,14,10,.6) 0%,rgba(20,14,10,.1) 60%)}
.branch .hero .brand{position:absolute;top:28px;left:0;right:0}
.bcard{position:relative;margin-top:-30px;background:var(--card);border-radius:24px 24px 0 0;padding:26px 22px 34px;display:flex;flex-direction:column;gap:14px}
.bcard h1{margin:0;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.1}
.bcard .sl{font-family:var(--serif);font-size:16px;color:#5C5146;margin-top:-8px}
.bcard p{margin:0;font-size:14px;line-height:1.55;color:#5C5146}
.rows{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.row{display:flex;gap:14px;align-items:flex-start;padding:8px 0;text-decoration:none;color:var(--ink)}
.row svg{flex-shrink:0;margin-top:2px}
.row b{display:block;font-size:14px;font-weight:600}
.row span{display:block;font-size:13.5px;color:#5C5146;margin-top:2px;white-space:pre-line}

@media (min-width:481px){ body{padding:0} .app{box-shadow:0 0 60px rgba(0,0,0,.4)} }