:root{
  --black:#050505;
  --bg-page:#0B0B0B;
  --surface-card:#161616;
  --surface-card-alt:#1D1D1D;
  --border-card:rgba(255,255,255,0.07);
  --border-card-strong:rgba(255,255,255,0.14);
  --gray-900:#F2F2F2;
  --gray-700:#C7C7C7;
  --gray-500:#8F8F8F;
  --gray-300:#5C5C5C;
  --white:#FFFFFF;
  --gold:#E9B749;
  --gold-light:#F6D896;
  --gold-dark:#B8791F;
  --gold-tint-bg:rgba(233,183,73,0.14);
  --shadow: 0 10px 28px rgba(0,0,0,0.45);
  --radius: 20px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--bg-page);
  color:var(--gray-900);
  overflow-x:hidden;
  min-height:100vh;
}
::selection{ background:var(--gold); color:var(--black); }

/* ---------------- SPLASH SCREEN ---------------- */
#splash{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(120% 120% at 50% 0%, #1A1512 0%, var(--black) 65%, #000 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--white);
  transition: opacity .7s ease, visibility .7s ease;
  cursor:pointer;
  padding:24px;
}
#splash.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:400px; }

.splash-logo-lockup{
  display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap;
  row-gap:4px;
}
.logo-777{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:clamp(48px,14vw,72px);
  line-height:0.85;
  color:var(--white);
  letter-spacing:-1px;
  animation: digitPop .6s cubic-bezier(.2,.9,.3,1.3) both;
}
.logo-script{
  font-family:'Alex Brush', cursive;
  font-size:clamp(34px,10.5vw,52px);
  line-height:0.85;
  color:var(--gold-light);
  margin-left:-8px;
  animation: scriptPop .6s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay:.18s;
}
.logo-leaf{
  width:26px; height:auto; margin-left:2px; margin-bottom:6px;
  animation: leafPop .6s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay:.32s;
}
@keyframes digitPop{
  0%{ opacity:0; transform:translateY(14px) scale(.85); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes scriptPop{
  0%{ opacity:0; transform:translateY(14px) rotate(-2deg) scale(.85); }
  100%{ opacity:1; transform:translateY(-2px) rotate(-2deg) scale(1); }
}
@keyframes leafPop{
  0%{ opacity:0; transform:translateY(14px) rotate(8deg) scale(.85); }
  100%{ opacity:1; transform:translateY(0) rotate(8deg) scale(1); }
}
/* Kampanya kartı (splash) */
.campaign-card{
  position:relative;
  margin-top:30px;
  width:100%;
  background:rgba(233,183,73,0.06);
  border:1px solid rgba(233,183,73,0.35);
  border-radius:16px;
  padding:18px 20px;
  text-align:center;
  backdrop-filter: blur(4px);
}
.campaign-ring{
  position:absolute; inset:-1px; border-radius:16px;
  border:1px solid rgba(233,183,73,0.55);
  opacity:0; animation: ringPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes ringPulse{
  0%{ transform:scale(1); opacity:.55; }
  80%{ transform:scale(1.035); opacity:0; }
  100%{ opacity:0; }
}
.campaign-label{
  font-size:10.5px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:8px;
}
.campaign-body{
  display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap;
}
.campaign-desc{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; color:var(--white);
}
.campaign-plus{ color:var(--gray-500); font-size:15px; }
.campaign-price{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:var(--gold-light);
  border-bottom:2px solid var(--gold); padding-bottom:1px;
}
.campaign-note{
  margin-top:8px; font-size:11px; color:var(--gray-500); letter-spacing:.3px;
}

.splash-cta{
  margin-top:32px; font-size:12.5px; color:var(--gray-300); opacity:.85;
  display:flex; align-items:center; gap:8px; letter-spacing:.5px;
  animation: pulseFade 1.8s ease-in-out infinite;
}
@keyframes pulseFade{ 0%,100%{opacity:.4} 50%{opacity:.9} }
.splash-cta svg{ width:14px; height:14px; color:var(--gold-light); }

/* ---------------- KAMPANYA EKRANI (splash'tan sonra, sadece butonla kapanır) ---------------- */
#campaignScreen{
  position:fixed; inset:0; z-index:99;
  background: radial-gradient(120% 120% at 50% 0%, #1A1512 0%, var(--black) 65%, #000 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--white);
  opacity:0; visibility:hidden;
  transition: opacity .5s ease, visibility .5s ease;
  padding:24px;
  cursor:pointer;
}
#campaignScreen.visible{ opacity:1; visibility:visible; }
#campaignScreen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.campaign-screen-inner{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:360px; }
.campaign-screen-inner .campaign-card{ margin-top:0; }

.campaign-enter-btn{
  margin-top:28px; display:flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--black); border:none; border-radius:100px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; letter-spacing:.3px;
  padding:13px 26px; cursor:pointer; box-shadow:0 8px 22px rgba(233,183,73,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.campaign-enter-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(233,183,73,.4); }
.campaign-enter-btn:active{ transform:translateY(0); }
.campaign-enter-btn svg{ width:16px; height:16px; }

/* ---------------- HEADER ---------------- */
header{
  position:sticky; top:0; z-index:40;
  background:var(--bg-page);
  border-bottom:1px solid var(--border-card);
}
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 10px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; line-height:1; color:var(--white); letter-spacing:.3px; }
.brand-text span{ color:var(--gold-light); }
.brand-sub{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray-500); margin-top:3px; }
.table-pill{
  font-size:11.5px; font-weight:700; color:var(--black);
  background:var(--gold-light); padding:6px 12px; border-radius:100px;
  letter-spacing:.3px; white-space:nowrap;
}

/* Kampanya şeridi (header altı, ana sayfada) */
.campaign-strip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--gold-tint-bg); border:1px solid rgba(233,183,73,0.35); color:var(--gold-light);
  padding:9px 16px 9px 18px; margin:0 20px 12px; border-radius:12px;
}
.campaign-strip-content{ display:flex; align-items:center; gap:9px; font-size:12.5px; line-height:1.4; }
.campaign-strip-content svg{ width:16px; height:16px; flex:none; color:var(--gold-light); }
.campaign-strip-content strong{ font-weight:800; color:var(--white); }
.campaign-strip-close{
  flex:none; background:transparent; border:none; color:var(--gray-500); cursor:pointer;
  padding:4px; display:flex; align-items:center; justify-content:center;
}
.campaign-strip-close svg{ width:15px; height:15px; }
.campaign-strip.hidden-strip{ display:none; }

nav#tabs{
  display:flex; gap:8px; overflow-x:auto; padding:4px 20px 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scroll-behavior:smooth;
  cursor:grab;
  user-select:none;
}
nav#tabs.dragging{ cursor:grabbing; scroll-behavior:auto; }
nav#tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:none; padding:9px 16px; border-radius:100px; border:1px solid var(--border-card-strong);
  background:var(--surface-card); color:var(--gray-700); font-family:'Poppins',sans-serif;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:.2s ease;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.tab-btn svg{ width:15px; height:15px; opacity:.7; }
.tab-btn.active{ background:var(--gold-light); border-color:var(--gold-light); color:var(--black); box-shadow:0 4px 14px rgba(233,183,73,.28); }
.tab-btn.active svg{ opacity:1; }

/* search */
.search-wrap{ padding:0 20px 14px; }
.search-box{
  display:flex; align-items:center; gap:9px;
  background:var(--surface-card); border:1px solid var(--border-card); border-radius:14px; padding:11px 14px;
}
.search-box svg{ width:17px; height:17px; color:var(--gray-500); flex:none; }
.search-box input{
  border:none; background:transparent; outline:none; width:100%;
  font-family:'Manrope'; font-size:14px; color:var(--white);
}
.search-box input::placeholder{ color:var(--gray-500); }

/* ---------------- MAIN ---------------- */
main{ padding:6px 20px 60px; max-width:640px; margin:0 auto; }

.section-block{ margin-top:30px; }
.section-block.hidden-section{ display:none; }
.section-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.section-head h2{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:27px; margin:0; color:var(--white); letter-spacing:-.3px;
}
.section-head .count{ font-size:12px; color:var(--gray-500); font-weight:600; margin-left:auto; }
.head-divider{ width:28px; height:2px; background:var(--gold); flex:none; border-radius:2px; }

.card{
  position:relative;
  display:flex; gap:14px; background:var(--surface-card); border-radius:var(--radius);
  padding:14px 40px 14px 14px; margin-bottom:12px; box-shadow:var(--shadow);
  border:1px solid var(--border-card);
  transition: transform .15s ease, border-color .15s ease;
}
.card.hidden-card{ display:none; }
.card:active{ transform:scale(.985); }
.card-icon{
  flex:none; width:84px; height:84px; border-radius:16px;
  background:linear-gradient(155deg, var(--surface-card-alt), #262220);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.35);
}
.card-icon svg{ width:38px; height:38px; }
.card-icon img{
  width:100%; height:100%; object-fit:cover; object-position:center; border-radius:16px; display:block;
}
.fallback-icon{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.card-body{ flex:1; min-width:0; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card-name{ font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; color:var(--white); line-height:1.3; }
.card-price{
  flex:none; font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--gold-light);
  white-space:nowrap; margin-top:8px; display:block;
}
.card-desc{ font-size:12.8px; color:var(--gray-500); margin-top:5px; line-height:1.55; }
.card-tags{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.tag{ font-size:10px; font-weight:700; letter-spacing:.4px; color:var(--gray-700); background:rgba(255,255,255,0.04); border:1px solid var(--border-card-strong); padding:3px 8px; border-radius:100px; }

/* Popüler rozeti (kartın sağ üstü) */
.badge-popular{
  position:absolute; top:14px; right:38px;
  display:flex; align-items:center; gap:4px;
  background:var(--gold-tint-bg); border:1px solid rgba(233,183,73,0.4);
  color:var(--gold-light); font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:3px 8px; border-radius:100px;
}
.badge-popular svg{ width:10px; height:10px; }

/* Kartın sağ kenarındaki ok işareti */
.card-chevron{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--gray-300); width:16px; height:16px;
}

.no-results{ text-align:center; padding:60px 20px; color:var(--gray-500); display:none; }
.no-results.show{ display:block; }
.no-results svg{ width:40px; height:40px; margin-bottom:10px; opacity:.5; }

footer{
  background:var(--black); color:var(--gray-500); padding:34px 20px 28px; margin-top:20px;
  border-top:1px solid var(--border-card);
}
.foot-brand{ font-family:'Poppins',sans-serif; font-weight:700; font-size:21px; color:var(--white); margin-bottom:6px; letter-spacing:.3px; }
.foot-brand span{ color:var(--gold-light); }
.foot-line{ font-size:12.5px; color:var(--gray-500); line-height:1.7; }
.foot-row{ display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
.foot-chip{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gray-500); }
.foot-chip svg{ width:14px; height:14px; color:var(--gold-light); }

@media (min-width:520px){
  .card-icon{ width:96px; height:96px; }
}