/* NNB GIDA V300 — Premium Skin
   Yalnızca görsel katmandır. Veri, modal, admin ve kaydırma motoruna dokunmaz. */
:root{
  --v300-ink:#0b211a;
  --v300-muted:#66736d;
  --v300-green:#075f4d;
  --v300-green-deep:#073a31;
  --v300-gold:#c99a3f;
  --v300-surface:rgba(255,255,255,.88);
  --v300-line:rgba(11,33,26,.095);
  --v300-shadow:0 18px 44px rgba(19,38,31,.075),0 3px 12px rgba(19,38,31,.035);
}

body{
  color:var(--v300-ink);
  background:#f7f3eb;
}
body:before{
  background:
    linear-gradient(180deg,rgba(250,247,241,.93),rgba(247,243,235,.97)),
    url('/assets/catalog-bg.jpg') center/cover no-repeat;
  background-image:
    linear-gradient(180deg,rgba(250,247,241,.93),rgba(247,243,235,.97)),
    -webkit-image-set(url('/assets/catalog-bg.avif') 1x,url('/assets/catalog-bg.webp') 1x,url('/assets/catalog-bg.jpg') 1x);
  background-image:
    linear-gradient(180deg,rgba(250,247,241,.93),rgba(247,243,235,.97)),
    image-set(url('/assets/catalog-bg.avif') type('image/avif') 1x,url('/assets/catalog-bg.webp') type('image/webp') 1x,url('/assets/catalog-bg.jpg') type('image/jpeg') 1x);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
body:after{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.92),transparent 42%),
    radial-gradient(circle at 8% 18%,rgba(201,154,63,.055),transparent 22%),
    radial-gradient(circle at 94% 34%,rgba(7,95,77,.045),transparent 24%);
}

.app{width:min(100%,480px);padding-left:18px;padding-right:18px}
.topbar{height:60px;margin-bottom:16px}
.iconbtn{
  width:50px;height:50px;border-radius:18px;
  border:1px solid rgba(11,33,26,.09);
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 30px rgba(14,34,27,.075),inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.iconbtn:active{transform:scale(.965)}
.center-mark{
  width:62px;height:62px;border-radius:22px;
  background:linear-gradient(150deg,#fff,rgba(248,244,235,.92));
  border:1px solid rgba(201,154,63,.22);
  box-shadow:0 14px 34px rgba(17,33,27,.09),inset 0 0 0 7px rgba(255,255,255,.58);
}
.center-mark img{width:47px;height:47px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.10))}

.apple-hero{margin-bottom:18px!important}
.apple-hero-visual{
  border-radius:32px!important;
  border:1px solid rgba(11,33,26,.09)!important;
  box-shadow:0 26px 65px rgba(17,33,27,.13),0 4px 14px rgba(17,33,27,.05)!important;
  overflow:hidden;
  background:#fff;
}
.apple-hero-visual:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.64),inset 0 0 0 1px rgba(255,255,255,.16);
}
.banner-premium-shine:before{opacity:.42!important;animation-duration:9s!important}

.apple-tools{
  padding:12px!important;
  border-radius:28px!important;
  border:1px solid rgba(11,33,26,.085)!important;
  background:rgba(255,253,249,.73)!important;
  box-shadow:0 16px 38px rgba(18,38,30,.055),inset 0 1px 0 rgba(255,255,255,.88)!important;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.search,.apple-search{
  height:60px;border-radius:20px;
  border:1px solid rgba(11,33,26,.085);
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(14,34,27,.04),inset 0 1px 0 #fff;
}
.search svg{width:22px;height:22px;stroke:var(--v300-green);stroke-width:2.35}
.search input{font-size:16px;font-weight:750;letter-spacing:-.015em}
.search:focus-within{border-color:rgba(7,95,77,.30);box-shadow:0 0 0 4px rgba(7,95,77,.07),0 10px 26px rgba(14,34,27,.05)}

.chips{gap:9px;padding:12px 1px 1px;scroll-padding-inline:1px}
.chip{
  min-height:45px;padding:0 17px;border-radius:16px;
  border:1px solid rgba(11,33,26,.085);
  background:rgba(255,255,255,.91);
  color:#283d35;
  box-shadow:0 7px 17px rgba(14,34,27,.035);
  font-size:13px;letter-spacing:-.01em;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.chip:active{transform:scale(.97)}
.chip.active{
  background:linear-gradient(145deg,var(--v300-green-deep),var(--v300-green));
  border-color:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:0 12px 25px rgba(7,58,49,.19),inset 0 1px 0 rgba(255,255,255,.16);
}

.section-head{margin:24px 3px 15px;align-items:flex-end}
.section-kicker{font-size:10px!important;letter-spacing:.18em!important;color:var(--v300-green)!important;font-weight:950!important}
.section-head h2,.section-head h1{font-size:31px!important;line-height:.95!important;letter-spacing:-.055em!important;color:var(--v300-ink)!important}
.section-head p,#count{font-size:11px!important;color:var(--v300-muted)!important;letter-spacing:.02em}

.grid{gap:13px}
.card{
  border-radius:25px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(253,251,246,.96));
  border:1px solid var(--v300-line);
  box-shadow:var(--v300-shadow);
  transform:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:before{border-radius:25px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.card:hover{transform:none}
.card:active{transform:scale(.986);box-shadow:0 10px 28px rgba(19,38,31,.08);border-color:rgba(7,95,77,.16)}
.card-top{padding:11px 11px 0}
.card-visual{
  border-radius:20px;
  border:1px solid rgba(11,33,26,.055);
  background:
    radial-gradient(circle at 50% 13%,#fff 0,rgba(255,255,255,.96) 34%,rgba(247,244,237,.97) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -16px 30px rgba(15,36,28,.018);
}
.card-visual:before{inset:auto 19px 8px;height:19px;filter:blur(9px);opacity:.36}
.card-visual:after{opacity:.55}
.card-visual img{padding:15px;filter:drop-shadow(0 13px 18px rgba(0,0,0,.095))}
.card-body{padding:13px 14px 15px}
.card-brandline{font-size:9.5px;letter-spacing:.15em;margin-bottom:6px;color:#7c8782}
.cat{font-size:10.5px;margin-bottom:6px;color:var(--v300-green)}
.name{font-size:16.5px;line-height:1.12;letter-spacing:-.035em;color:var(--v300-ink)}
.card.featured .name{font-size:26px}
.card-badge,.card-weight{min-height:25px;padding:0 9px;font-size:9.5px}
.card-badge{background:rgba(7,95,77,.07);border-color:rgba(7,95,77,.09);color:var(--v300-green)}
.card-weight{background:rgba(11,33,26,.045);border-color:rgba(11,33,26,.055)}
.card-bottom{padding-top:11px;border-top-color:rgba(11,33,26,.065)}
.card-note{font-size:9px;letter-spacing:.10em}
.card-link{font-size:11px;color:var(--v300-green-deep)}

/* Ürün detayı: mevcut davranış aynı, yalnızca yüzey iyileştirmesi */
.modal-back{background:rgba(4,18,14,.42)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#detailModal{
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background:#fbfaf7!important;
  box-shadow:0 30px 90px rgba(0,0,0,.30)!important;
}
.detail-wrap{background:#fbfaf7!important}
.detail-stage,.detail-photo{
  background:radial-gradient(circle at 50% 15%,#fff 0,#faf8f2 62%,#f0ece3 100%)!important;
}
.detail-photo{border-radius:24px!important;border:1px solid rgba(11,33,26,.065)!important}
.detail-photo img{filter:drop-shadow(0 18px 28px rgba(0,0,0,.11))!important}
.detail-info{padding-left:19px!important;padding-right:19px!important}
.detail-kicker{color:var(--v300-green)!important;letter-spacing:.14em!important}
.detail-title{color:var(--v300-ink)!important;letter-spacing:-.055em!important}
.detail-sub{color:var(--v300-muted)!important}
.detail-spec{border-color:rgba(11,33,26,.07)!important;background:#fff!important;border-radius:17px!important}
.detail-browser-close,.detail-close{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(11,33,26,.09)!important;
  box-shadow:0 10px 26px rgba(10,29,22,.10)!important;
}

.drawer{
  border-radius:30px;
  background:rgba(253,251,246,.97);
  border-color:rgba(255,255,255,.76);
  box-shadow:0 28px 85px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.drawer-head{background:linear-gradient(145deg,rgba(7,95,77,.095),rgba(201,154,63,.09))}
.drawer button.primary{background:linear-gradient(145deg,var(--v300-green-deep),var(--v300-green));box-shadow:0 12px 28px rgba(7,58,49,.16)}

.signature-footer{margin-top:46px!important;padding-top:31px!important;border-top:1px solid rgba(11,33,26,.075)!important}
.signature-logo{filter:drop-shadow(0 8px 14px rgba(0,0,0,.08))}
.signature-name{letter-spacing:.14em!important;color:#20372f!important}
.signature-role,.signature-link{color:#76817c!important}

/* Hızlı kaydırmada V200.1 optimizasyonları üstün gelsin */
body.nnb-scrolling .card,
body.nnb-scrolling .chip,
body.nnb-scrolling .apple-hero-visual,
body.nnb-scrolling .iconbtn{transition:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.nnb-scrolling .card-visual img{filter:none!important}

@media(max-width:390px){
  .app{padding-left:14px;padding-right:14px}
  .grid{gap:11px}
  .card{border-radius:22px}
  .card-top{padding:9px 9px 0}
  .card-body{padding:11px 12px 13px}
  .card-visual{border-radius:18px}
  .name{font-size:15.5px}
  .apple-tools{padding:10px!important;border-radius:24px!important}
}

@media(prefers-reduced-motion:reduce){
  .chip,.card,.iconbtn{transition:none!important}
  .banner-premium-shine:before{animation:none!important}
}