:root{
  --bg:#0e0f12;
  --panel:#151821;
  --panel2:#0f1118;
  --text:#f5f6f8;
  --muted:#b7beca;
  --line:rgba(255,255,255,.09);
  --accent:#ff2b2b;
  --accent2:#ffd100;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.5);
}

/* GLOBAL BACKGROUND FIX (prevents white strips) */
html, body{
  background:#0b0c10;
  color: var(--text);
  min-height:100%;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 500px at 50% -10%, rgba(255,43,43,.22), transparent 60%),
              radial-gradient(600px 400px at 15% 10%, rgba(255,209,0,.13), transparent 60%),
              var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}

.siteHeader{position:sticky;top:0;z-index:50;background:rgba(14,15,18,.85);backdrop-filter: blur(10px);border-bottom:1px solid var(--line)}
.siteHeader .top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:0 auto;padding:12px 18px}
.logoWrap{display:flex;align-items:center;justify-content:center;flex:1}
.logo{height:52px;max-width:100%;object-fit:contain}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a{padding:10px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-weight:600}
.nav a.on,.nav a:hover{border-color:rgba(255,43,43,.45);color:var(--text);background:rgba(255,43,43,.08)}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.tickerTrack{display:flex;gap:10px;white-space:nowrap;will-change:transform;padding:10px 18px;animation:marquee 18s linear infinite}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:600;color:var(--text)}
.chip.ghost{opacity:.7}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:18px}
.heroText,.heroMedia{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.heroText{padding:22px}
.hero h1{margin:0 0 10px;font-size:36px;letter-spacing:-.02em}
.lead{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.6}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:999px;border:1px solid rgba(255,43,43,.45);
  background:linear-gradient(180deg, rgba(255,43,43,.95), rgba(210,0,0,.95));
  color:#fff;font-weight:800;cursor:pointer
}
.btn:hover{filter:brightness(1.03)}
.btn.outline{background:transparent;border-color:var(--line);color:var(--text);font-weight:700}
.btn.outline:hover{border-color:rgba(255,43,43,.35);background:rgba(255,255,255,.04)}
.link{color:var(--accent2);font-weight:700}
.link:hover{text-decoration:underline}

.quickInfo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.qi{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.15)}
.qiTitle{font-weight:800;margin-bottom:6px}
.qiText{color:var(--muted);line-height:1.4}

.heroMedia{overflow:hidden;display:flex;align-items:stretch;justify-content:center}
.heroMedia img{width:100%;height:100%;object-fit:cover}
.placeholder{padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;color:var(--muted)}
.phTitle{font-weight:900;color:var(--text)}
.phTiny{font-size:12px;opacity:.8}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.card{padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.04);box-shadow:var(--shadow)}
.cardTop{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.icon{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,209,0,.35);background:rgba(255,209,0,.08);display:flex;align-items:center;justify-content:center;font-weight:900}
.card h3{margin:0;font-size:18px}
.muted{color:var(--muted)}
.cardActions{align-items:center;display:flex;gap:12px;margin-top:12px}

.section{margin-top:18px}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sectionHead h2,.sectionHead h1{margin:0}
.sectionHead p{margin:6px 0 0}

.slider{position:relative;margin-top:12px}
.sliderTrack{display:flex;gap:12px;overflow:auto;scroll-behavior:smooth;padding:6px 2px}
.sliderTrack::-webkit-scrollbar{height:10px}
.sliderTrack::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.slide{min-width:260px;max-width:260px;height:170px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.03)}
.slide img{width:100%;height:100%;object-fit:cover}
.sliderBtn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(14,15,18,.8);color:#fff;font-size:22px;cursor:pointer}
.sliderBtn.left{left:-6px}
.sliderBtn.right{right:-6px}
.sliderBtn:hover{border-color:rgba(255,43,43,.35)}
.sliderEmpty{padding:18px;border:1px dashed rgba(255,255,255,.18);border-radius:var(--radius);color:var(--muted);min-width:100%}

.infoBar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.infoItem{padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.infoLabel{font-weight:900;margin-bottom:6px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.input,.select{
  width:100%;
  padding:12px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
.input:focus,.select:focus{border-color:rgba(255,43,43,.35)}
.toolbar .input{max-width:320px}
.toolbar .select{max-width:200px}

.products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pCard{border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.pMedia{position:relative;height:170px;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.pMedia img{width:100%;height:100%;object-fit:cover}
.pPlaceholder{color:var(--muted);font-weight:700}
.pBody{padding:14px;display:flex;flex-direction:column;gap:8px}
.pTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pTitle{font-weight:900}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,209,0,.35);background:rgba(255,209,0,.08)}
.pPrice{font-weight:900;color:var(--accent2)}
.pDesc{color:var(--muted);font-size:14px;line-height:1.45}
.pActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.services{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sCard{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03);overflow:hidden;box-shadow:var(--shadow)}
.sMedia{min-height:180px;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.sMedia img{width:100%;height:100%;object-fit:cover}
.sBody{padding:16px}
.sBody h3{margin:0 0 8px}
.sActions{margin-top:10px}

.contactGrid{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.contactCard,.mapCard{border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03);box-shadow:var(--shadow)}
.contactCard{padding:18px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.k{font-weight:900}
.v{color:var(--muted)}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mapCard{overflow:hidden}
.mapCard iframe{width:100%;height:420px;border:0}
.mapHint{padding:10px 14px;color:var(--muted);border-top:1px solid var(--line);background:rgba(0,0,0,.18)}

.siteFooter{margin-top:24px;border-top:1px solid var(--line);background:rgba(0,0,0,.18)}
.footerGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:center}
.brand{font-weight:900;font-size:18px}
.footerLinks{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tiny{font-size:12px;color:var(--muted);text-align:center;padding:12px}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:1fr}
  .sCard{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .footerLinks{justify-content:flex-start}
  .grid3{grid-template-columns:1fr}
  .logoWrap{flex:0}
  .siteHeader .top{flex-wrap:wrap;justify-content:center}
  .nav{justify-content:center}
}

.adminBody{min-height:100vh;display:flex;align-items:center;justify-content:center}
.adminCard{width:min(520px,92vw);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.alert{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,43,43,.35);background:rgba(255,43,43,.08);margin:10px 0}
.lbl{display:block;font-weight:800;margin:10px 0 6px}
.adminWrap{background:var(--bg)}
.adminNav{position:sticky;top:0;display:flex;gap:8px;align-items:center;padding:10px 14px;background:rgba(14,15,18,.92);border-bottom:1px solid var(--line);flex-wrap:wrap}
.adminNav a{padding:9px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-weight:800}
.adminNav a.on,.adminNav a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,43,43,.35);color:var(--text)}
.adminNav .spacer{flex:1}
.adminContainer{max-width:1100px;margin:0 auto;padding:16px}
.adminGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.statNum{font-size:28px;font-weight:900}
.statLabel{color:var(--muted);margin-top:2px}
.adminCardWide{margin-top:14px;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.formGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.row3{display:grid;grid-template-columns:1fr .6fr 1.6fr auto;gap:10px;align-items:center;margin-bottom:10px}
.thumbRow{display:flex;gap:12px;align-items:center;margin-top:8px}
.thumb{width:90px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.thumbGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
.thumbCard{border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03);padding:10px}
.thumbCard img{width:100%;height:100px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-bottom:8px}
.adminSplit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.list{display:flex;flex-direction:column;gap:10px}
.listItem{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.listTitle{font-weight:900}
.listActions{display:flex;gap:8px;align-items:center}
@media (max-width: 900px){
  .adminGrid{grid-template-columns:repeat(2,1fr)}
  .formGrid{grid-template-columns:1fr}
  .thumbGrid{grid-template-columns:repeat(2,1fr)}
  .adminSplit{grid-template-columns:1fr}
  .row3{grid-template-columns:1fr}
}


/* Social icons */
.btn i{margin-right:8px;font-size:18px;line-height:0}
.btn.whatsapp{background:#25D366;border:none}
.btn.whatsapp:hover{filter:brightness(1.02)}


/* Floating WhatsApp */
.floating-whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:32px;
    box-shadow:0 8px 25px rgba(0,0,0,0.4);
    z-index:9999;
    transition:0.3s;
}

.floating-whatsapp:hover{
    transform:scale(1.08);
}

.btn.whatsapp{
    background:#25D366;
    border:none;
    color:white;
}

.infoLabel i{margin-right:8px;opacity:.95}

/* Card Icons */
.icon i{
    font-size:20px;
}

/* Link icons spacing */
.link i{
    margin-right:6px;
}

/* Product stock/deal badge */
.pBadge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-weight:900;
}
.pBadge.deal{
  border-color:rgba(255,209,0,.45);
  background:rgba(255,209,0,.12);
  color:var(--accent2);
}

/* Premium iOS vibe */
.heroText,.heroMedia,.card,.pCard,.sCard,.contactCard,.mapCard,.infoItem{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(14px);
}
.siteHeader{backdrop-filter: blur(16px)}
.btn{box-shadow: 0 10px 30px rgba(0,0,0,.28)}
.btn.outline{box-shadow:none}
.hero h1{font-size:40px; line-height:1.1}
.heroVideo{width:100%;height:100%;object-fit:cover}

/* Campaign popup */
.popupOverlay{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:9998;
  padding:18px;
}
.popupModal{
  width:min(920px, 96vw);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(20,22,30,.96), rgba(10,11,16,.96));
  box-shadow: 0 22px 80px rgba(0,0,0,.65);
  position:relative;
  overflow:hidden;
}
.popupClose{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.popupBody{display:grid; grid-template-columns: 1.2fr .8fr; gap:0}
.popupText{padding:20px}
.popupTitle{font-weight:900; font-size:22px; margin-bottom:8px}
.popupDesc{color:var(--muted); line-height:1.6}
.popupActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.popupImg{background:rgba(255,255,255,.03); border-left:1px solid rgba(255,255,255,.08)}
.popupImg img{width:100%; height:100%; object-fit:cover}
@media(max-width:900px){
  .popupBody{grid-template-columns:1fr}
  .popupImg{display:none}
}

.footerLinks i{margin-right:8px}






.floating-whatsapp img{filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));}

/* iPhone motion */
:root{
  --font-sans: "Inter","Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --glass2: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 70px rgba(0,0,0,.55);
}

body{font-family:var(--font-sans); letter-spacing:-0.01em}
h1,h2,h3{letter-spacing:-0.03em}
.siteHeader{
  transition: .25s ease;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.siteHeader.isScrolled{
  background: rgba(10,11,16,.65);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* hero shimmer */
.hero h1{
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

/* parallax feel */
.heroMedia{transform: translateZ(0);}
.heroVideo, .heroMedia img{
  transform: scale(1.04);
  transition: transform .6s ease;
}
.hero:hover .heroVideo, .hero:hover .heroMedia img{ transform: scale(1.08); }

/* reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

/* product hover */
.pCard{
  transition: .25s ease;
  border:1px solid rgba(255,255,255,.10);
}
.pCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}
.pMedia img{ transition: transform .35s ease, filter .35s ease; }
.pCard:hover .pMedia img{ transform: scale(1.06); filter: saturate(1.05); }

/* softer buttons */
.btn{border-radius:14px}
.btn.outline{background: transparent}

/* badge placement ensure */
.pMedia{position:relative}
.pBadge{position:absolute; top:10px; left:10px}

/* order modal */
.orderOverlay{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  z-index:9999;
  padding:18px;
}
.orderModal{
  width:min(860px, 96vw);
  border-radius:24px;
  background: rgba(18,20,28,.92);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.orderGrid{display:grid; grid-template-columns: 1fr 1fr; gap:0}
.orderLeft{padding:18px}
.orderRight{padding:18px; border-left:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.orderTitle{font-weight:900; font-size:20px; margin-bottom:6px}
.orderMeta{color:var(--muted); line-height:1.5}
.orderField{margin-top:10px}
.orderField .lbl{display:block; margin-bottom:6px}
.orderClose{
  position:absolute;
  top:12px; right:12px;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
@media(max-width:900px){
  .orderGrid{grid-template-columns:1fr}
  .orderRight{border-left:none; border-top:1px solid rgba(255,255,255,.10)}
}


/* Bigger social icons */
.footerLinks 

.btn 


/* ===== LUXURY ICON STYLE ===== */

.brandIcon{
  width:32px;
  height:32px;
  margin-right:12px;
  vertical-align:-7px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  transition: .25s ease;
}

/* hover glow */
a:hover .brandIcon,
.btn:hover .brandIcon{
  transform: scale(1.18);
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.65));
}

/* WhatsApp floating ultra luxury */
.brandIcon.big{
  width:58px;
  height:58px;
}

/* Social row bigger */
.footerLinks .brandIcon{
  width:34px;
  height:34px;
}

/* glass button feel */
.btn{
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

/* premium hover */
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
}



/* ===== LUX FIX: SOCIAL ICON SIZES (scoped) ===== */
/* Keep big only for floating WhatsApp. Make others premium but not huge. */
.infoBar .brandIcon{
  width:22px !important;
  height:22px !important;
  margin-right:10px !important;
  vertical-align:-4px !important;
  transform:none !important;
}
.infoBar a:hover .brandIcon{ transform:none !important; }

.footerLinks .brandIcon{
  width:26px !important;
  height:26px !important;
}

.btn .brandIcon{
  width:22px !important;
  height:22px !important;
  vertical-align:-4px !important;
}

/* Floating WhatsApp icon (still prominent) */
.floating-whatsapp .brandIcon,
.floating-whatsapp .brandIcon.big{
  width:46px !important;
  height:46px !important;
  margin-right:0 !important;
  vertical-align:0 !important;
}

/* ICON CLAMP (fix) */
.brandIcon{max-width:32px;max-height:32px}
.infoBar .brandIcon{max-width:24px;max-height:24px}
.footerLinks .brandIcon{max-width:28px;max-height:28px}
.floating-whatsapp .brandIcon{max-width:44px;max-height:44px}
/* disable icon scaling in info cards */
.infoBar a:hover .brandIcon{transform:none !important}


/* LAYOUT FIX */
.infoBar .infoItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.infoBar .infoLabel{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.infoBar a{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.footerLinks a,
.links a,
.pActions a,
.sActions a{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
/* prevent icons from breaking line height */
.brandIcon{display:inline-block; flex:0 0 auto}

/* Floating WhatsApp clarity */
.floating-whatsapp{
  width:68px;
  height:68px;
  border-radius:999px;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 50px rgba(0,0,0,.55);
  z-index:9999;
}
.floating-whatsapp .floatingMark{
  width:36px !important;
  height:36px !important;
  margin-right:0 !important;
  vertical-align:0 !important;
  filter:none !important;
}

.floating-whatsapp .floatingMark{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}


/* SCROLLBAR FIX (removes white bars on Windows) */
body{overflow-x:hidden;}
/* Make all scrollbars dark */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.30)}
/* Avoid reserved gutter that can look like a white stripe */
.sliderTrack{scrollbar-gutter:auto;}


/* ACTIONS INLINE FIX (Detay + WhatsApp same line) */
.cardActions,
.links,
.pActions,
.sActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  flex-wrap:nowrap;
}

.cardActions a,
.links a,
.pActions a,
.sActions a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  line-height:1;
}

/* If container is too narrow, allow horizontal scroll instead of wrapping */
.cardActions{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cardActions::-webkit-scrollbar{display:none}


}


/* Moving band (chips) - make yellow text black */
.ticker .chip, .ticker .pill, .marquee .chip, .marquee .pill, .scrollBand .chip, .scrollBand .pill, .badgeYellow, .chipYellow{
  color:#000 !important;
  text-shadow:none !important;
}


/* ===== YELLOW MOVING BOXES FIX ===== */
/* Force yellow background + black text */
.ticker *,
.marquee *,
.scrollBand *,
.chip,
.pill{
    color:#000 !important;
}

/* if background is controlled elsewhere ensure contrast */
.chip,
.pill{
    background:#FFD400 !important;
    border:none !important;
    font-weight:700;
}



/* pause on hover (premium feel) */
.ticker:hover .tickerTrack{
  animation-play-state:paused;
}


/* ===== APPLE-STYLE TICKER (SEAMLESS + FADE) ===== */
.appleTicker{ padding: 10px 0; }
.tickerShell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
}

/* Fade edges */
.tickerShell::before,
.tickerShell::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}
.tickerShell::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,12,16,1) 0%, rgba(11,12,16,0) 100%);
}
.tickerShell::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,12,16,1) 0%, rgba(11,12,16,0) 100%);
}

.tickerInner{
  display:flex;
  width:max-content;
  gap:18px;
  padding:10px 16px;
  animation: tickerSeamless 22s linear infinite;
  will-change: transform;
}
.tickerRow{
  display:flex;
  gap:18px;
  align-items:center;
}

/* Ensure chips never wrap and are consistent */
.tickerRow .chip,
.tickerRow .pill{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-radius:999px;
}

/* Perfect seamless: move exactly one row width (50% of doubled content) */
@keyframes tickerSeamless{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Smoothness improvements */
@media (prefers-reduced-motion: reduce){
  .tickerInner{ animation:none; }
}

/* Premium: pause on hover */
.tickerShell:hover .tickerInner{ animation-play-state:paused; }


/* ===== CINEMATIC HERO (Apple style) ===== */
.heroMedia{
  position:relative;
  overflow:hidden;
}

.heroVideoWrap{
  position:relative;
  width:100%;
  height:100%;
}

.heroOverlayGradient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 50% 30%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.70) 100%);
  pointer-events:none;
  mix-blend-mode: normal;
}

/* subtle vignette */
.heroOverlayGradient::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(closest-side at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* center glass sound button */
.heroGlassSound{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  transition: .25s cubic-bezier(.2,.7,.2,1);
  z-index:3;
}

.heroGlassSound .hgsIcon{font-size:18px}
.heroGlassSound .hgsText{font-weight:900; letter-spacing:-0.02em}

/* premium hover */
.heroGlassSound:hover{
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}

/* soft hide after enable */
.heroGlassSound.hideSoft{
  opacity:.0;
  transform: translate(-50%, -50%) scale(.92);
}
.heroGlassSound.gone{
  display:none;
}

/* cinematic polish: sharpen + contrast */
.heroVideo{
  filter: contrast(1.05) saturate(1.05);
}

/* Optional: film grain (very subtle) */
.heroMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode: overlay;
}


/* SOUND PILL (Apple style) */
.soundPill{
  position:fixed;
  right:18px;
  bottom:18px;
  background: rgba(0,0,0,.55);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  transition:.35s cubic-bezier(.2,.7,.2,1);
  z-index:9999;
}

.soundPill.show{
  opacity:1;
  transform:translateY(0);
}
/* =========================
   MOBILE PREMIUM FIX
========================= */
@media (max-width: 768px){

  /* header/nav */
  .topbar{ padding: 12px 12px !important; }
  .tabs{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px !important;
  }
  .tabs .tab{
    padding:10px 14px !important;
    font-size:15px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* ticker (sarı geçen kutular) */
  .tickerShell{
    border-radius:14px !important;
  }
  .tickerInner{
    padding: 8px 10px !important;
    animation-duration: 26s !important; /* daha akıcı */
  }
  .chip, .pill{
    padding: 8px 14px !important;
    font-size: 14px !important;
  }

  /* hero alanı */
  .hero{ padding: 22px 14px !important; }
  .heroCard{
    width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }
  .heroCard h1{
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
  }
  .heroCard p{
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* CTA butonu mobil full */
  .heroCTA, .heroCTA .btn, .heroCTA a{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  /* WhatsApp balonu hero'nun üstüne binmesin */
  .floating-whatsapp, .whatsapp-float{
    width:56px !important;
    height:56px !important;
    right:14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    z-index:9999 !important;
  }

  /* Kartlar alt alta */
  .cards, .grid, .servicesGrid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Genel taşmaları önle */
  body{ overflow-x:hidden !important; }
}
/* MOBILE: LOGO FIX */
@media (max-width: 768px){
  .topbar{
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
  }

  .brand, .logoWrap, .siteLogo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin-bottom:10px !important;
  }

  .brand img, .logoWrap img, .siteLogo img, header img[alt*="FAYSTORE"], header img[alt*="Faystore"]{
    display:block !important;
    height:42px !important;
    width:auto !important;
    max-width:90vw !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Menü satırı logo altına insin */
  .tabs{
    width:100% !important;
    justify-content:center !important;
  }
}