:root{
--brand:#982231;
--brand-dark:#731826;
--brand-soft:#c66572;
--brand-rgb:152,34,49;
--gold:#d5b27a;
--gold-soft:#f0dfc3;
--cream:#f7f2ed;
--cream-2:#efe5da;
--surface:#fffdfb;
--surface-2:#fff7f0;
--text:#26191d;
--muted:#7e666c;
--line:rgba(152,34,49,.10);
--line-strong:rgba(152,34,49,.16);
--shadow-xl:0 26px 60px rgba(63,20,28,.16);
--shadow-lg:0 18px 42px rgba(63,20,28,.12);
--shadow-md:0 12px 28px rgba(63,20,28,.10);
--shadow-sm:0 8px 18px rgba(63,20,28,.08);
--radius-xxl:34px;
--radius-xl:28px;
--radius-lg:22px;
--radius-md:18px;
--radius-sm:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
min-height:100vh;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:
radial-gradient(circle at top left, rgba(var(--brand-rgb),.08) 0, rgba(var(--brand-rgb),0) 34%),
linear-gradient(180deg, #fcf8f4 0%, #f5eee7 50%, #f7f2ed 100%);
color:var(--text);
position:relative;
overflow-x:hidden;
}

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

.site-bg-shape{
position:fixed;
z-index:0;
pointer-events:none;
filter:blur(4px);
}
.site-bg-shape-1{
top:-120px;
right:-60px;
width:260px;
height:260px;
border-radius:50%;
background:radial-gradient(circle, rgba(var(--brand-rgb),.17) 0%, rgba(var(--brand-rgb),0) 72%);
}
.site-bg-shape-2{
bottom:-140px;
left:-80px;
width:300px;
height:300px;
border-radius:50%;
background:radial-gradient(circle, rgba(213,178,122,.20) 0%, rgba(213,178,122,0) 72%);
}

.app-shell{
position:relative;
z-index:2;
width:100%;
max-width:520px;
margin:0 auto;
min-height:100vh;
padding:14px 14px 34px;
}

.page-main{display:grid;gap:16px}
.page-main-detail{gap:14px}

.topbar{
position:sticky;
top:0;
z-index:110;
padding:4px 0 18px;
}

.topbar-card{
min-height:82px;
border-radius:30px;
padding:10px 10px 10px 5px;
display:flex;
align-items:center;
justify-content:space-between;
background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,247,240,.88) 100%);
border:1px solid rgba(255,255,255,.72);
box-shadow:var(--shadow-md);
}

.brand-link{
display:inline-flex;
align-items:center;
gap:12px;
}

.brand-logo{
width:124px;
height:60px;
object-fit:contain;
}

.menu-trigger{
width:50px;
height:50px;
padding:0;
border:none;
border-radius:100px;
background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
box-shadow:0 14px 28px rgba(var(--brand-rgb),.28);
display:flex;
align-items:center;
justify-content:center;
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.menu-trigger:hover,
.menu-trigger:focus{
transform:translateY(-1px);
box-shadow:0 18px 32px rgba(var(--brand-rgb),.34);
filter:saturate(1.05);
}
.menu-trigger:focus-visible{
outline:2px solid rgba(var(--brand-rgb),.22);
outline-offset:3px;
}

.custom-bars{
width:18px;
height:14px;
position:relative;
display:block;
}
.custom-bars span{
position:absolute;
left:0;
width:100%;
height:2.4px;
background:#fff;
border-radius:999px;
}
.custom-bars span:nth-child(1){top:0}
.custom-bars span:nth-child(2){top:5.6px}
.custom-bars span:nth-child(3){bottom:0}

.hero-panel,
.detail-hero{
position:relative;
overflow:hidden;
border-radius:15px;
background:linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 56%, #b63a4d 100%);
color:#fff;
box-shadow:var(--shadow-xl);
}

.hero-panel{padding:24px 22px 24px}
.detail-hero{padding:20px 18px 18px}
.ajax-detail-hero{margin-bottom:12px}

.hero-pattern,
.detail-hero::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top right, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 30%),
radial-gradient(circle at bottom left, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 32%);
pointer-events:none;
}

.hero-content,
.detail-hero-top,
.sayfa-title,
.sayfa-subtitle{position:relative;z-index:1}

.hero-eyebrow,
.section-eyebrow,
.offcanvas-kicker,
.detail-badge{
display:inline-flex;
align-items:center;
min-height:28px;
padding:6px 12px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
}

.hero-eyebrow,
.detail-badge{
background:rgba(255,255,255,.14);
color:#fff;
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(8px);
}

.hero-title{
margin:14px 0 10px;
font-size:32px;
font-weight:900;
line-height:1.04;
}

.hero-text,
.sayfa-subtitle{
margin:0;
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.65;
max-width:340px;
}

.hero-actions{
margin-top:18px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.hero-chip{
min-height:38px;
padding:9px 14px;
display:inline-flex;
align-items:center;
border-radius:999px;
background:#fff;
color:var(--brand-dark);
font-size:12px;
font-weight:800;
box-shadow:0 10px 20px rgba(0,0,0,.10);
}
.hero-chip-outline{
background:rgba(255,255,255,.10);
color:#fff;
border:1px solid rgba(255,255,255,.18);
box-shadow:none;
}

.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
padding:2px 4px 0;
}
.section-eyebrow{
background:rgba(var(--brand-rgb),.08);
color:var(--brand);
border:1px solid rgba(var(--brand-rgb),.08);
}
.section-title{
margin:8px 0 0;
font-size:24px;
font-weight:900;
line-height:1.08;
letter-spacing:-.04em;
}

.kategori-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.kategori-card{
position:relative;
overflow:hidden;
display:block;
border-radius:26px;
aspect-ratio:1 / 0.50;
background:linear-gradient(180deg, #d8d1cc 0%, #bcaea3 100%);
box-shadow:var(--shadow-lg);
transition:transform .28s ease, box-shadow .28s ease;
}
.kategori-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 44px rgba(63,20,28,.16);
}

.kategori-media,
.kategori-media img{width:100%;height:100%}
.kategori-media img{object-fit:cover}

.kategori-overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(21,12,13,.06) 12%, rgba(21,12,13,.20) 42%, rgba(21,12,13,.72) 100%),
linear-gradient(180deg, rgba(var(--brand-rgb),.03) 0%, rgba(var(--brand-rgb),.28) 100%);
}

.kategori-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:10px;
padding:18px;
}

.kategori-mini-badge{
align-self:flex-start;
min-height:28px;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(8px);
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}

.kategori-title{
color:#fff;
font-size:22px;
font-weight:700;
line-height:1.08;
letter-spacing:-.03em;
text-shadow:0 4px 18px rgba(0,0,0,.14);
text-align: center;
}

.kategori-arrow{
display:inline-flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:35px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.95);
color:var(--brand-dark);
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
box-shadow:0 12px 26px rgba(0,0,0,.12);
display: none;
}
.kategori-arrow::after{content:"→"}

.detail-hero-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}

.geri-btn{
min-height:42px;
padding:0 16px;
display:inline-flex;
align-items:center;
justify-content:center;
border:none;
border-radius:999px;
background:rgba(255,255,255,.92);
color:var(--brand-dark);
font-size:13px;
font-weight:900;
box-shadow:0 10px 22px rgba(0,0,0,.12);
transition:transform .22s ease, box-shadow .22s ease;
}
.geri-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 26px rgba(0,0,0,.14);
color:var(--brand-dark);
}

.sayfa-title{
position:relative;
z-index:1;
margin:0;
font-size:28px;
font-weight:900;
line-height:1.04;
letter-spacing:-.04em;
}
.sayfa-subtitle{margin-top:10px}

.kategori-tabs{
display:flex;
gap:10px;
overflow:auto;
padding:2px 2px 6px;
scrollbar-width:none;
}
.kategori-tabs::-webkit-scrollbar{display:none}

.kategori-tab{
flex:0 0 auto;
min-height:42px;
padding:10px 16px;
border:none;
border-radius:999px;
background:linear-gradient(180deg, #ffffff 0%, #f7efe8 100%);
color:#5b4348;
font-size:13px;
font-weight:800;
white-space:nowrap;
transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.kategori-tab:hover{transform:translateY(-1px)}
.kategori-tab.active{
background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
color:#fff;
border-color:transparent;
}

.urun-listesi{display:grid;gap:14px}

.urun-card{
display:grid;
grid-template-columns:100px 1fr;
gap:14px;
padding:14px;
border-radius:26px;
background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,250,246,.94) 100%);
border:1px solid rgba(255,255,255,.85);
box-shadow:var(--shadow-md);
}

.urun-gorsel{
width:100px;
height:100px;
border-radius:20px;
overflow:hidden;
background:linear-gradient(135deg, #e5d7cf 0%, #d1c0b4 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.urun-gorsel img{width:100%;height:100%;object-fit:cover}

.urun-icerik{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
min-width:0;
}

.urun-ust-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}

.urun-baslik-blok{
display:grid;
gap:7px;
min-width:0;
}

.urun-adi{
margin:0;
font-size:17px;
font-weight:900;
line-height:1.14;
letter-spacing:-.03em;
color:#23171a;
}

.urun-aciklama{
margin:0;
color:var(--muted);
font-size:12.5px;
line-height:1.6;
}

.urun-fiyat-pill{
flex:0 0 auto;
min-height:38px;
padding:8px 12px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(var(--brand-rgb),.08);
color:var(--brand);
font-size:13px;
font-weight:900;
letter-spacing:-.01em;
border:1px solid rgba(var(--brand-rgb),.08);
}

.urun-alt-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}

.urun-kalori,
.urun-etiket{
min-height:28px;
padding:6px 10px;
display:inline-flex;
align-items:center;
border-radius:999px;
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}

.urun-etiket{
background:linear-gradient(180deg, rgba(var(--brand-rgb),.10) 0%, rgba(var(--brand-rgb),.06) 100%);
color:var(--brand-dark);
}

.premium-offcanvas.offcanvas-top{
height:auto;
max-height:84vh;
border:none;
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;
background:linear-gradient(180deg, var(--brand-dark) 0%, var(--brand) 100%);
box-shadow:0 26px 56px rgba(63,20,28,.34);
}

.offcanvas-header{
padding:18px 18px 10px;
align-items:flex-start;
}

.offcanvas-kicker{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.10);
margin-bottom:10px;
}

.offcanvas-title{
margin:0;
font-size:24px;
font-weight:700;
line-height:1.06;
letter-spacing:-.04em;
color:#fff;
}

.top-menu-list{
padding:0 18px 20px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.top-menu-link{
min-height:58px;
padding:12px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border-radius:18px;
background:rgba(255,255,255,.10);
color:#fff;
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(10px);
font-size:13px;
font-weight:800;
transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
@media (max-width: 380px){
.top-menu-list{
grid-template-columns:1fr;
}
}
.top-menu-link:hover,
.top-menu-link.is-active{
color:#fff;
transform:translateY(-1px);
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.18);
}
.menu-link-arrow{font-size:18px;line-height:1}

.bos-kutu{
padding:28px 20px;
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,251,247,.94) 100%);
border:1px solid rgba(var(--brand-rgb),.08);
box-shadow:var(--shadow-sm);
text-align:center;
color:var(--muted);
font-size:14px;
font-weight:700;
}

@media (max-width: 480px){
.app-shell{padding:12px 12px 30px}
.topbar-card{min-height:78px;border-radius:100px}
.brand-logo{width:116px;height:56px}
.hero-title{font-size:28px}
.section-title{font-size:22px}
.sayfa-title{font-size:24px}
.kategori-grid{gap:12px}
.kategori-card{border-radius:5px}
.kategori-content{padding:16px}
.kategori-title{font-size:16px}
.urun-card{grid-template-columns:88px 1fr;padding:12px;border-radius:15px}
.urun-gorsel{width:88px;height:88px;border-radius:10px}
.urun-adi{font-size:15px}
}

@media (max-width: 380px){
.hero-panel{padding:22px 18px 22px}
.detail-hero{padding:18px 16px}
.hero-title{font-size:26px}
.kategori-grid{grid-template-columns:1fr 1fr}
.urun-card{grid-template-columns:1fr;gap:12px}
.urun-gorsel{width:100%;height:160px}
.urun-ust-row{flex-direction:column}
.urun-fiyat-pill{align-self:flex-start}
}