/* ============================================================
   Excel Sınıfı — Bilesenler
   ============================================================ */

/* ---------- HERO SLIDER ---------- */
.hero{position:relative;background:var(--ink-900);overflow:hidden}
.slider{position:relative;height:clamp(470px,56vw,610px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--e-out),visibility .9s}
.slide.is-on{opacity:1;visibility:visible}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 8s linear}
.slide.is-on .slide__bg{transform:scale(1)}
.slide__veil{position:absolute;inset:0}
.slide--a .slide__veil{background:linear-gradient(100deg,rgba(5,32,24,.96) 0%,rgba(5,32,24,.82) 42%,rgba(7,8,8,.35) 100%)}
.slide--b .slide__veil{background:linear-gradient(100deg,rgba(7,8,8,.96) 0%,rgba(7,8,8,.8) 45%,rgba(12,74,50,.4) 100%)}
.slide--c .slide__veil{background:linear-gradient(100deg,rgba(12,74,50,.95) 0%,rgba(7,8,8,.86) 50%,rgba(7,8,8,.4) 100%)}
.slide__in{
  position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);z-index:3;padding-bottom:76px;
}
.slide__text{max-width:600px;color:var(--bone-100)}
.slide__text > *{opacity:0;transform:translateY(26px)}
.slide.is-on .slide__text > *{animation:slideUp .8s var(--e-out) forwards}
.slide.is-on .slide__text > *:nth-child(1){animation-delay:.12s}
.slide.is-on .slide__text > *:nth-child(2){animation-delay:.24s}
.slide.is-on .slide__text > *:nth-child(3){animation-delay:.36s}
.slide.is-on .slide__text > *:nth-child(4){animation-delay:.48s}
.slide.is-on .slide__text > *:nth-child(5){animation-delay:.6s}
@keyframes slideUp{to{opacity:1;transform:none}}
.slide__kicker{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-300);background:rgba(63,214,150,.1);border:1px solid rgba(63,214,150,.3);
  padding:8px 15px;border-radius:99px;margin-bottom:22px;
}
.slide__kicker i{width:6px;height:6px;border-radius:50%;background:var(--green-300);animation:pulse 2s infinite}
.slide h1,.slide h2.slide__h{
  font-size:clamp(30px,4.4vw,54px);line-height:1.06;letter-spacing:-.04em;color:#fff;margin:0 0 18px;font-weight:800;
  overflow-wrap:anywhere;
}
.slide h1 em,.slide__h em{
  font-style:normal;background:linear-gradient(100deg,var(--green-300),var(--green-200) 60%,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide__p{font-size:clamp(15px,1.6vw,18px);color:rgba(248,245,237,.82);max-width:54ch;margin-bottom:30px}
.slide__acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
/* Koyu hero üzerinde ghost buton okunabilirliği */
.hero .btn--ghost{--btn-fg:var(--bone-100);border-color:rgba(255,255,255,.3)}
.hero .btn--ghost:hover{--btn-bg:var(--bone-100);--btn-fg:var(--ink-900);border-color:var(--bone-100)}

/* ---------- Hero görsel bloğu: lisans kartı mockup'ı ---------- */
.slide__art{
  position:relative;flex:none;width:min(44%,460px);align-self:center;
  pointer-events:none;z-index:2;perspective:1400px;
}
.slide__art::before{                 /* arkadaki yumuşak ışık */
  content:"";position:absolute;inset:-18% -12%;border-radius:50%;
  background:radial-gradient(circle at 60% 40%,rgba(63,214,150,.32),transparent 62%);
  filter:blur(10px);
}
.slide__art::after{                  /* ince nokta dokusu */
  content:"";position:absolute;inset:-6% 4% 8% -14%;border-radius:28px;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 40% 50%,#000 35%,transparent 72%);
          mask-image:radial-gradient(circle at 40% 50%,#000 35%,transparent 72%);
}

.hcard{
  position:relative;z-index:3;border-radius:26px;padding:22px 22px 20px;color:#fff;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 60%);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 44px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.24);
  transform:rotateY(-10deg) rotateX(7deg);
  animation:hcardFloat 9s ease-in-out infinite;
}
@keyframes hcardFloat{
  0%,100%{transform:rotateY(-10deg) rotateX(7deg) translateY(-9px)}
  50%    {transform:rotateY(-6deg)  rotateX(4deg) translateY(9px)}
}
.hcard--back{                        /* arkadaki ikinci kart */
  position:absolute;z-index:1;inset:34px -26px -26px 34px;border-radius:26px;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  transform:rotateY(-10deg) rotateX(7deg) rotate(3.5deg);
  animation:hcardFloat 9s ease-in-out infinite reverse;
}

.hcard__top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.hcard__logo{
  width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:rgba(7,8,8,.55);border:1px solid rgba(255,255,255,.16);
}
.hcard__logo img{width:100%;height:100%;object-fit:cover}
.hcard__ttl{flex:1;min-width:0}
.hcard__ttl b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:-.02em;line-height:1.2}
.hcard__ttl span{display:block;font-size:11.8px;color:rgba(255,255,255,.62);margin-top:3px}
.hcard__chk{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-500);color:#fff;box-shadow:0 0 0 5px rgba(34,178,119,.22);
}
.hcard__chk svg{width:16px;height:16px}

.hcard__key{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;margin-bottom:16px;
  background:rgba(6,8,8,.6);border:1px dashed rgba(63,214,150,.42);
}
.hcard__key span{
  font-family:var(--f-mono);font-size:12.6px;letter-spacing:.06em;color:var(--green-200);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hcard__key i{margin-left:auto;flex:none;width:16px;height:16px;color:rgba(255,255,255,.5)}

.hcard__rows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.hcard__rows div{
  padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
}
.hcard__rows span{display:block;font-size:10.4px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hcard__rows b{display:block;font-size:13px;margin-top:4px;white-space:nowrap}

.hcard__apps{display:flex;gap:8px;margin-bottom:16px}
.hcard__apps span{
  flex:1;height:44px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:15px;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
}
.hcard__apps span:nth-child(1){background:rgba(34,178,119,.28)}
.hcard__apps span:nth-child(3){background:rgba(34,178,119,.18)}

.hcard__chat{display:grid;gap:8px;margin-bottom:16px}
.hcard__chat p{
  margin:0;padding:11px 14px;border-radius:14px;font-size:12.6px;line-height:1.45;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.86);
}
.hcard__chat p.me{background:rgba(34,178,119,.24);border-color:rgba(63,214,150,.34);margin-left:34px}
.hcard__chat p.ai{margin-right:34px}
.hcard__chat p.ai::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green-300);
  margin-right:8px;vertical-align:middle;animation:pulse 2s infinite;
}

.hcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.hcard__price{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.hcard__price s{font-size:13px;font-weight:500;color:rgba(255,255,255,.45);margin-left:8px}
.hcard__badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;
  background:rgba(63,214,150,.16);border:1px solid rgba(63,214,150,.34);color:var(--green-200);
  font-size:11.5px;font-weight:700;white-space:nowrap;
}
.hcard__badge i{width:6px;height:6px;border-radius:50%;background:var(--green-300);animation:pulse 2s infinite}

/* yüzen bilgi rozetleri */
.hfloat{
  position:absolute;z-index:4;display:flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(248,245,237,.14);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-size:12.4px;font-weight:600;box-shadow:0 16px 34px rgba(0,0,0,.32);
}
.hfloat svg{width:15px;height:15px;color:var(--green-300);flex:none}
.hfloat--a{top:-7%;left:-15%;animation:hfloatA 6.5s ease-in-out infinite}
.hfloat--b{bottom:-9%;right:9%;animation:hfloatB 7.5s ease-in-out infinite}
@keyframes hfloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hfloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
.slide__facts{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.slide__fact b{display:block;font-family:var(--f-display);font-size:26px;color:#fff;letter-spacing:-.04em;line-height:1}
.slide__fact span{font-size:12.5px;color:var(--ink-300);margin-top:6px;display:block}

/* Slider kontrolleri — alt kontrol barı (yüzen butonlarla çakışmaz) */
.slider__ctrl{position:absolute;left:0;right:0;bottom:0;z-index:6;padding-bottom:26px}
.slider__ctrl-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.slider__nav{display:flex;align-items:center;gap:12px}
.slider__dots{display:flex;gap:10px}
.slider__dot{width:34px;height:4px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;position:relative;transition:width var(--t)}
.slider__dot.is-on{width:72px;background:rgba(255,255,255,.32)}
.slider__dot i{position:absolute;inset:0;width:0;background:var(--green-300);border-radius:99px}
.slider__dot.is-on i{animation:dotFill 7s linear forwards}
@keyframes dotFill{to{width:100%}}
.slider.is-paused .slider__dot.is-on i{animation-play-state:paused}
.slider__arrow{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff;display:grid;place-items:center;
  transition:all var(--t-fast);backdrop-filter:blur(6px);
}
.slider__arrow:hover{background:#fff;color:var(--ink-900);transform:scale(1.07)}
.slider__arrow svg{width:20px;height:20px}
.slider__count{font-family:var(--f-mono);font-size:13px;color:rgba(255,255,255,.65);letter-spacing:.1em;margin-right:6px}
.slider__count b{color:#fff;font-size:18px}

/* Hero altindaki guven seridi */
.trustbar{background:var(--ink-850);border-top:1px solid rgba(255,255,255,.07);position:relative;z-index:5}
.trustbar__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust{display:flex;align-items:center;gap:14px;padding:22px 24px;border-right:1px solid rgba(255,255,255,.07);transition:background var(--t-fast)}
.trust:last-child{border-right:0}
.trust:hover{background:rgba(255,255,255,.03)}
.trust__ico{width:42px;height:42px;border-radius:12px;background:rgba(34,178,119,.14);color:var(--green-300);display:grid;place-items:center;flex:none}
.trust__ico svg{width:21px;height:21px}
.trust b{display:block;color:var(--bone-50);font-size:14.5px;font-weight:600}
.trust span{display:block;color:var(--ink-400);font-size:12.5px;margin-top:2px}

/* ---------- Marka seridi (marquee) ---------- */
.marquee{overflow:hidden;padding:26px 0;background:var(--bone-200);border-block:1px solid var(--line-soft);position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bone-200),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bone-200),transparent)}
.marquee__track{display:flex;gap:56px;width:max-content;animation:scrollX 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee__item{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink-400);letter-spacing:-.03em;opacity:.75;transition:all var(--t-fast);white-space:nowrap}
.marquee__item:hover{color:var(--green-700);opacity:1}
.marquee__item svg{width:24px;height:24px}

/* ---------- Kategori kartlari ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat{
  position:relative;padding:30px 26px 26px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;min-height:238px;
}
.cat::before{
  content:"";position:absolute;inset:auto -30% -55% auto;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,var(--green-300),transparent 68%);opacity:.14;transition:transform var(--t-slow),opacity var(--t);
}
.cat:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:transparent}
.cat:hover::before{transform:scale(1.6);opacity:.24}
.cat__ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--ink-900);color:var(--green-300);margin-bottom:20px;transition:all var(--t);position:relative;z-index:2}
.cat:hover .cat__ico{background:var(--green-600);color:#fff;transform:rotate(-6deg) scale(1.05)}
.cat__ico svg{width:27px;height:27px}
.cat h3{font-size:19px;margin-bottom:8px;position:relative;z-index:2}
.cat p{font-size:13.7px;color:var(--text-soft);margin:0 0 18px;position:relative;z-index:2;flex:1}
.cat__foot{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;font-size:13px}
.cat__count{color:var(--ink-400);font-family:var(--f-mono);font-size:12px}
.cat__go{width:36px;height:36px;border-radius:50%;background:var(--bone-200);display:grid;place-items:center;color:var(--ink-700);transition:all var(--t)}
.cat:hover .cat__go{background:var(--green-600);color:#fff;transform:rotate(-45deg)}
.cat__go svg{width:16px;height:16px}

/* ---------- URUN KARTI ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;position:relative;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:transparent}
.card__media{
  position:relative;aspect-ratio:16/11;background:linear-gradient(160deg,var(--bone-200),var(--bone-300));
  display:grid;place-items:center;overflow:hidden;
}
.card__media img,.card__media svg{width:64%;height:auto;transition:transform var(--t-slow);filter:drop-shadow(0 12px 24px rgba(7,8,8,.14))}
.card:hover .card__media img,.card:hover .card__media svg{transform:scale(1.09) rotate(-2deg)}
.card__badges{position:absolute;top:13px;left:13px;display:flex;flex-direction:column;gap:6px;z-index:3;align-items:flex-start}
.card__wish{
  position:absolute;top:13px;right:13px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);
  display:grid;place-items:center;color:var(--ink-500);z-index:3;transition:all var(--t-fast);border:1px solid var(--line);
}
.card__wish:hover,.card__wish.is-on{background:var(--green-600);color:#fff;border-color:var(--green-600)}
.card__wish svg{width:17px;height:17px}
.card__quick{
  position:absolute;left:13px;right:13px;bottom:13px;z-index:3;padding:11px;border-radius:var(--r-pill);
  background:rgba(7,8,8,.9);color:var(--bone-100);font-size:13.3px;font-weight:600;text-align:center;
  transform:translateY(120%);opacity:0;transition:all var(--t);backdrop-filter:blur(6px);
}
.card:hover .card__quick{transform:none;opacity:1}
.card__quick:hover{background:var(--green-600)}
.card__body{padding:20px;display:flex;flex-direction:column;flex:1}
.card__brand{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);margin-bottom:9px}
.card__brand i{width:5px;height:5px;border-radius:50%;background:var(--green-500)}
.card h3{font-size:16.5px;line-height:1.32;margin-bottom:10px;letter-spacing:-.02em}
.card h3 a{transition:color var(--t-fast)}
.card:hover h3 a{color:var(--green-700)}
.card__rate{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.card__feats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.card__feats span{font-size:11.3px;color:var(--ink-500);background:var(--bone-200);padding:4px 9px;border-radius:7px;font-weight:500}
.card__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.price{display:flex;flex-direction:column;line-height:1.1}
.price s{font-size:13px;color:var(--ink-300);margin-bottom:3px}
.price b{font-family:var(--f-display);font-size:23px;font-weight:800;letter-spacing:-.04em;color:var(--ink-900)}
.price b span{font-size:14px;font-weight:600;color:var(--ink-400)}
.price em{font-style:normal;font-size:11.5px;color:var(--green-600);font-weight:600;margin-top:3px}
.card__add{
  width:46px;height:46px;border-radius:14px;background:var(--ink-900);color:var(--bone-100);display:grid;place-items:center;
  transition:all var(--t);flex:none;
}
.card__add:hover{background:var(--green-600);transform:rotate(-8deg) scale(1.06)}
.card__add svg{width:20px;height:20px}
.card__add.is-added{background:var(--green-600)}
.card__add.is-tukendi{background:var(--bone-400);color:var(--ink-500);cursor:not-allowed}
.card__add.is-tukendi:hover{transform:none;background:var(--bone-400)}
.card__stock{display:flex;align-items:center;gap:7px;font-size:11.8px;color:var(--green-700);font-weight:600;margin-bottom:12px}
.card__stock i{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px rgba(34,178,119,.2)}
.card__stock.is-low{color:var(--warn)}
.card__stock.is-low i{background:var(--warn);box-shadow:0 0 0 3px rgba(201,138,23,.18)}

/* Sekmeler */
.tabs{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Sayilar / istatistik ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{padding:30px 26px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;transition:all var(--t)}
.stat:hover{background:rgba(34,178,119,.08);border-color:rgba(63,214,150,.3);transform:translateY(-5px)}
.stat b{font-family:var(--f-display);font-size:clamp(32px,4vw,46px);font-weight:800;color:var(--green-300);letter-spacing:-.05em;display:block;line-height:1}
.stat span{display:block;margin-top:10px;color:var(--ink-300);font-size:14px}
.stat i{position:absolute;right:-8px;bottom:-18px;font-family:var(--f-display);font-size:88px;font-weight:800;color:rgba(255,255,255,.03);font-style:normal}

/* ---------- Nasil calisir ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.steps::before{content:"";position:absolute;top:36px;left:10%;right:10%;height:2px;background:repeating-linear-gradient(90deg,var(--bone-400) 0 8px,transparent 8px 16px)}
.step{text-align:center;position:relative;z-index:2}
.step__n{
  width:72px;height:72px;border-radius:24px;margin:0 auto 20px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--green-700);
  font-family:var(--f-display);font-size:23px;font-weight:800;box-shadow:var(--sh-1);transition:all var(--t);
}
.step:hover .step__n{background:var(--ink-900);color:var(--green-300);transform:translateY(-6px) rotate(-6deg);box-shadow:var(--sh-3)}
.step h3{font-size:17.5px;margin-bottom:9px}
.step p{font-size:14px;color:var(--text-soft);margin:0}

/* ---------- Ozellik / avantaj ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{padding:30px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:all var(--t);position:relative;overflow:hidden}
.feat:hover{border-color:var(--green-400);box-shadow:var(--sh-2);transform:translateY(-5px)}
.feat__ico{width:50px;height:50px;border-radius:15px;background:rgba(34,178,119,.11);color:var(--green-600);display:grid;place-items:center;margin-bottom:18px}
.feat__ico svg{width:24px;height:24px}
.feat h3{font-size:18px;margin-bottom:10px}
.feat p{font-size:14.2px;color:var(--text-soft);margin:0}

/* ---------- Yorumlar ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{padding:30px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);position:relative;transition:all var(--t)}
.rev:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.rev__q{position:absolute;top:18px;right:24px;font-family:var(--f-display);font-size:74px;color:var(--bone-300);line-height:1;font-weight:800}
.rev p{font-size:14.8px;color:var(--ink-600);position:relative;z-index:2;margin:16px 0 22px}
.rev__who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line-soft)}
.rev__ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,var(--green-500),var(--ink-800));color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:16px;flex:none}
.rev__who b{display:block;font-size:14.5px}
.rev__who span{font-size:12.5px;color:var(--text-soft)}
.rev__ver{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--green-700);font-weight:600}
.rev__ver svg{width:14px;height:14px}

/* ---------- SSS akordiyon ---------- */
.faq{display:grid;gap:12px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:all var(--t)}
.faq__item.is-open{border-color:var(--green-400);box-shadow:var(--sh-2)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:20px 24px;text-align:left;font-size:16px;font-weight:600;color:var(--ink-800)}
.faq__item.is-open .faq__q{color:var(--green-700)}
.faq__q i{width:30px;height:30px;border-radius:50%;background:var(--bone-200);display:grid;place-items:center;flex:none;transition:all var(--t)}
.faq__item.is-open .faq__q i{background:var(--green-600);color:#fff;transform:rotate(45deg)}
.faq__q i svg{width:16px;height:16px}
.faq__a{max-height:0;overflow:hidden;transition:max-height .42s var(--e-out)}
.faq__a p{padding:0 24px 22px;margin:0;font-size:14.8px;color:var(--text-soft);max-width:88ch}

/* ---------- CTA seridi ---------- */
.cta-band{
  border-radius:var(--r-xl);background:linear-gradient(120deg,var(--green-800),var(--green-600) 55%,var(--ink-900));
  padding:clamp(34px,5vw,58px);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px;
  flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--sh-green);
}
.cta-band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.1);top:-140px;right:6%}
.cta-band::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(0,0,0,.16);bottom:-110px;right:26%}
.cta-band h2{font-size:clamp(25px,3.4vw,38px);color:#fff;margin-bottom:10px;position:relative}
.cta-band p{color:rgba(255,255,255,.85);margin:0;max-width:52ch;position:relative}
.cta-band__acts{display:flex;gap:12px;flex-wrap:wrap;position:relative}

/* ---------- Sayfa basligi / breadcrumb ---------- */
.phead{background:var(--ink-900);color:var(--bone-100);padding:52px 0 58px;position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;inset:auto -10% -60% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--green-600),transparent 70%);opacity:.28}
.phead__in{position:relative;z-index:2}
.phead h1{font-size:clamp(28px,4.4vw,48px);color:#fff;margin:16px 0 12px}
.phead p{color:var(--ink-300);max-width:62ch;margin:0;font-size:15.5px}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-400);flex-wrap:wrap}
.crumbs a{color:var(--ink-300);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--green-300)}
.crumbs svg{width:14px;height:14px;opacity:.5}
.crumbs [aria-current]{color:var(--green-300)}

/* ---------- Kenar cubugu / filtreler ---------- */
.shop{display:grid;grid-template-columns:286px 1fr;gap:36px;align-items:start}
.side{position:sticky;top:104px;display:grid;gap:18px}
.panelbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.panelbox h4{font-size:14.5px;margin:0 0 16px;display:flex;align-items:center;justify-content:space-between}
.panelbox h4 button{font-size:12px;color:var(--green-600);font-weight:600}
.flist li{margin-bottom:2px}
.flist label{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:9px;font-size:14px;color:var(--ink-600);cursor:pointer;transition:background var(--t-fast)}
.flist label:hover{background:var(--bone-200)}
.flist input{width:17px;height:17px;accent-color:var(--green-600);cursor:pointer}
.flist span.n{margin-left:auto;font-size:11.5px;color:var(--ink-300);font-family:var(--f-mono)}
.rangeline{display:flex;align-items:center;gap:10px;margin-top:8px}
.rangeline .input{padding:9px 11px;font-size:13.5px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px}
.toolbar__info{font-size:14px;color:var(--text-soft)}
.toolbar__info b{color:var(--ink-800)}
.toolbar__right{display:flex;align-items:center;gap:12px}
.pager{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pager a,.pager span{min-width:44px;height:44px;padding:0 12px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink-600);transition:all var(--t-fast)}
.pager a:hover{border-color:var(--green-500);color:var(--green-700)}
.pager .is-on{background:var(--ink-900);color:var(--bone-100);border-color:var(--ink-900)}

/* ---------- URUN DETAY ---------- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start}
.pd__media{position:sticky;top:104px}
.pd__stage{background:linear-gradient(160deg,var(--bone-200),var(--bone-300));border:1px solid var(--line);border-radius:var(--r-xl);aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}
.pd__stage svg,.pd__stage img{width:56%;filter:drop-shadow(0 22px 40px rgba(7,8,8,.18))}
.pd__stage .tag{position:absolute;top:20px;left:20px}
.pd__stage img{transition:opacity .26s var(--e-soft),transform .5s var(--e-out);cursor:zoom-in}
.pd__stage img.is-swapping{opacity:0;transform:scale(.94)}
.pd__caption{
  position:absolute;left:20px;bottom:18px;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(7,8,8,.86);color:var(--bone-100);font-size:12px;font-weight:600;letter-spacing:.01em;
}
.pd__thumbs{display:flex;gap:12px;margin-top:16px}
.pd__thumb{
  position:relative;overflow:hidden;width:88px;aspect-ratio:1;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;
  cursor:pointer;transition:all var(--t-fast);padding:12px;
}
.pd__thumb:hover,.pd__thumb.is-on{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(34,178,119,.14)}
.pd__thumb img{transition:transform var(--t)}
.pd__thumb:hover img{transform:scale(1.08)}
.pd__thumb::after{
  content:"";position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:3px;
  background:var(--green-500);transform:scaleX(0);transition:transform var(--t);
}
.pd__thumb.is-on::after{transform:scaleX(1)}
.pd h1{font-size:clamp(25px,3.4vw,38px);margin:12px 0 14px}
.pd__meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px;font-size:13.5px;color:var(--text-soft)}
.pd__meta b{color:var(--ink-700)}
.pd__price{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);margin-bottom:22px}
.pd__price .now{font-family:var(--f-display);font-size:40px;font-weight:800;letter-spacing:-.05em;color:var(--ink-900);line-height:1}
.pd__price s{font-size:18px;color:var(--ink-300)}
.pd__price .save{margin-left:auto;text-align:right}
.pd__price .save b{display:block;color:var(--green-700);font-size:15px}
.pd__price .save span{font-size:12px;color:var(--text-soft)}
.pd__opts{display:grid;gap:10px;margin-bottom:22px}
.opt{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:all var(--t-fast)}
.opt:hover{border-color:var(--green-400)}
.opt.is-on{border-color:var(--green-500);background:rgba(34,178,119,.05);box-shadow:0 0 0 3px rgba(34,178,119,.1)}
.opt input{accent-color:var(--green-600);width:19px;height:19px}
.opt b{font-size:14.7px}
.opt small{display:block;font-size:12.3px;color:var(--text-soft);margin-top:2px}
.opt .p{margin-left:auto;font-family:var(--f-display);font-weight:700;font-size:18px;white-space:nowrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.qty button{width:44px;height:48px;display:grid;place-items:center;color:var(--ink-600);transition:all var(--t-fast)}
.qty button:hover{background:var(--bone-200);color:var(--green-700)}
.qty input{width:52px;text-align:center;border:0;background:none;font-weight:700;font-size:15.5px;outline:0}
.pd__buy{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.pd__buy .btn{flex:1;min-width:190px}
.pd__assure{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.assure{display:flex;gap:11px;align-items:center;padding:14px;border-radius:var(--r-sm);background:var(--bone-200);font-size:13.3px;color:var(--ink-600)}
.assure svg{width:19px;height:19px;color:var(--green-600);flex:none}
.ptabs{margin-top:56px}
.ptabs__nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:30px;overflow-x:auto}
.ptabs__nav button{padding:14px 22px;font-size:14.7px;font-weight:600;color:var(--ink-400);border-bottom:2px solid transparent;white-space:nowrap;transition:all var(--t-fast)}
.ptabs__nav button:hover{color:var(--ink-800)}
.ptabs__nav button.is-on{color:var(--green-700);border-bottom-color:var(--green-600)}
.ptabs__panel{display:none;animation:fadeIn .4s var(--e-out)}
.ptabs__panel.is-on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.prose{max-width:76ch;font-size:15.4px;color:var(--ink-600)}
.prose h3{font-size:20px;margin:30px 0 12px;color:var(--ink-900)}
.prose h4{font-size:17px;margin:24px 0 10px;color:var(--ink-900)}
.prose ul{margin:0 0 18px;padding-left:0}
.prose ul li{position:relative;padding-left:26px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:3px;background:var(--green-500)}
.prose strong{color:var(--ink-900)}
.spec{width:100%;font-size:14.5px}
.spec tr{border-bottom:1px solid var(--line-soft)}
.spec td{padding:14px 6px}
.spec td:first-child{color:var(--text-soft);width:36%;font-weight:500}
.spec td:last-child{font-weight:600;color:var(--ink-800)}

/* ---------- SEPET ---------- */
.cart-wrap{display:grid;grid-template-columns:1fr 388px;gap:34px;align-items:start}
.cart-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cart-row{display:grid;grid-template-columns:96px 1fr auto auto auto;gap:20px;align-items:center;padding:20px;border-bottom:1px solid var(--line-soft)}
.cart-row:last-child{border-bottom:0}
.cart-row__img{width:96px;height:76px;border-radius:var(--r-sm);background:linear-gradient(160deg,var(--bone-200),var(--bone-300));display:grid;place-items:center;padding:10px}
.cart-row__img svg,.cart-row__img img{width:78%}
.cart-row h4{font-size:15.5px;margin-bottom:6px}
.cart-row .meta{font-size:12.5px;color:var(--text-soft)}
.cart-row .line-total{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.03em;min-width:110px;text-align:right}
.cart-row .rm{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-400);transition:all var(--t-fast)}
.cart-row .rm:hover{background:rgba(196,54,47,.1);color:var(--danger)}
.cart-row .rm svg{width:18px;height:18px}
.summary{position:sticky;top:104px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.summary h3{font-size:19px;margin-bottom:20px}
.sum-line{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-600);padding:9px 0}
.sum-line b{color:var(--ink-900);font-weight:600}
.sum-line.is-off b{color:var(--green-600)}
.sum-total{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 0 22px;margin-top:12px;border-top:2px solid var(--ink-900)}
.sum-total span{font-size:15px;font-weight:600}
.sum-total b{font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:-.04em}
.coupon{display:flex;gap:8px;margin:16px 0}
.coupon .input{padding:12px 14px;font-size:14px}
.cart-empty{text-align:center;padding:70px 24px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg)}
.cart-empty svg{width:76px;height:76px;color:var(--bone-400);margin:0 auto 20px}
.cart-empty h3{font-size:21px;margin-bottom:10px}
.cart-empty p{color:var(--text-soft);margin-bottom:24px}

/* ---------- ODEME ---------- */
.checkout{display:grid;grid-template-columns:1fr 388px;gap:34px;align-items:start}
.cstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:20px}
.cstep__h{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.cstep__n{width:34px;height:34px;border-radius:11px;background:var(--ink-900);color:var(--green-300);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:15px;flex:none}
.cstep__h h3{font-size:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.paymethods{display:grid;gap:10px}
.stepline{display:flex;align-items:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.stepline__i{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-300)}
.stepline__i.is-on{color:var(--green-700)}
.stepline__i i{width:26px;height:26px;border-radius:50%;background:var(--bone-300);color:var(--ink-500);display:grid;place-items:center;font-size:12px;font-weight:800;font-style:normal}
.stepline__i.is-on i{background:var(--green-600);color:#fff}
.stepline__d{flex:1;height:1px;background:var(--line);min-width:20px}

/* ---------- MUSTERI PANELI ---------- */
.acc{display:grid;grid-template-columns:272px 1fr;gap:32px;align-items:start}
.accnav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:104px}
.accnav__me{padding:26px 22px;background:linear-gradient(150deg,var(--ink-900),var(--green-900));color:var(--bone-100);text-align:center}
.accnav__ava{width:66px;height:66px;border-radius:50%;margin:0 auto 13px;background:linear-gradient(145deg,var(--green-400),var(--green-700));display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:24px;color:#fff;border:3px solid rgba(255,255,255,.16)}
.accnav__me b{display:block;font-size:16px;color:#fff}
.accnav__me span{font-size:12.5px;color:var(--ink-300)}
.accnav__tier{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 12px;border-radius:99px;background:rgba(63,214,150,.16);border:1px solid rgba(63,214,150,.3);color:var(--green-300);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.accnav ul{padding:10px}
.accnav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;font-size:14.4px;color:var(--ink-600);transition:all var(--t-fast);font-weight:500}
.accnav a svg{width:18px;height:18px;color:var(--ink-300);transition:color var(--t-fast)}
.accnav a:hover{background:var(--bone-200);color:var(--green-700)}
.accnav a:hover svg{color:var(--green-600)}
.accnav a.is-on{background:var(--ink-900);color:var(--bone-100)}
.accnav a.is-on svg{color:var(--green-300)}
.accnav a .n{margin-left:auto;background:var(--green-600);color:#fff;font-size:11px;font-weight:700;min-width:21px;height:21px;border-radius:99px;display:grid;place-items:center;padding:0 6px}
.accnav a.danger:hover{background:rgba(196,54,47,.08);color:var(--danger)}
.accnav a.danger:hover svg{color:var(--danger)}

.accbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:22px}
.accbox__h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.accbox__h h2{font-size:20px}
.accbox__h p{margin:4px 0 0;font-size:13.7px;color:var(--text-soft)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:all var(--t)}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.kpi__ico{width:38px;height:38px;border-radius:11px;background:rgba(34,178,119,.11);color:var(--green-600);display:grid;place-items:center;margin-bottom:14px}
.kpi__ico svg{width:18px;height:18px}
.kpi b{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.04em;display:block;line-height:1}
.kpi span{font-size:12.8px;color:var(--text-soft);margin-top:6px;display:block}
.kpi--dark{background:var(--ink-900);border-color:var(--ink-900);color:var(--bone-100)}
.kpi--dark b{color:var(--green-300)}
.kpi--dark .kpi__ico{background:rgba(63,214,150,.14);color:var(--green-300)}
.kpi--dark span{color:var(--ink-300)}

.dtable{width:100%;font-size:14.2px}
.dtable th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);font-weight:600;padding:0 12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:16px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr{transition:background var(--t-fast)}
.dtable tbody tr:hover{background:var(--bone-100)}
.dtable .oid{font-family:var(--f-mono);font-size:13px;color:var(--green-700);font-weight:600}
.status{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:11.8px;font-weight:700}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.status--ok{background:rgba(34,178,119,.12);color:var(--green-700)}
.status--wait{background:rgba(201,138,23,.13);color:#8A5E0B}
.status--cancel{background:rgba(196,54,47,.1);color:#8E2721}
.status--info{background:rgba(7,8,8,.06);color:var(--ink-600)}

.lic{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.lickey{padding:22px;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--bone-100));position:relative;overflow:hidden;transition:all var(--t)}
.lickey:hover{border-color:var(--green-400);box-shadow:var(--sh-2)}
.lickey::after{content:"";position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--green-300),transparent 70%);opacity:.16}
.lickey__top{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative}
.lickey__logo{width:42px;height:42px;border-radius:12px;background:var(--ink-900);display:grid;place-items:center;padding:8px;flex:none}
.lickey__logo svg{width:100%;color:var(--green-300)}
.lickey__top b{font-size:15px;display:block}
.lickey__top span{font-size:12px;color:var(--text-soft)}
.keybox{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:10px;background:var(--ink-900);color:var(--green-300);font-family:var(--f-mono);font-size:13.5px;letter-spacing:.06em;position:relative;overflow:hidden}
.keybox span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .25s}
.keybox.is-hidden span{filter:blur(6px);user-select:none}
.keybox button{color:var(--bone-200);opacity:.7;transition:all var(--t-fast);padding:3px;line-height:0}
.keybox button:hover{opacity:1;color:var(--green-300)}
.keybox svg{width:17px;height:17px}
.lickey__meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px;font-size:12.3px;color:var(--text-soft)}
.lickey__meta b{color:var(--ink-800);font-weight:600}

.ticket{display:flex;gap:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;transition:all var(--t-fast);background:var(--surface)}
.ticket:hover{border-color:var(--green-400)}
.ticket__ico{width:42px;height:42px;border-radius:12px;background:var(--bone-200);display:grid;place-items:center;color:var(--ink-500);flex:none}
.ticket__ico svg{width:19px;height:19px}
.ticket b{font-size:14.8px;display:block;margin-bottom:4px}
.ticket p{font-size:13.3px;color:var(--text-soft);margin:0}
.ticket__meta{margin-left:auto;text-align:right;flex:none}
.ticket__meta span{display:block;font-size:11.8px;color:var(--ink-300);margin-top:8px}

/* Giris / kayit ekrani */
.auth{min-height:calc(100vh - 200px);display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.auth__art{background:linear-gradient(160deg,var(--ink-900),var(--green-900) 78%);color:var(--bone-100);padding:clamp(34px,5vw,66px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__art::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--green-500),transparent 68%);opacity:.4;top:-120px;right:-120px}
.auth__art h2{font-size:clamp(26px,3.4vw,40px);color:#fff;margin:22px 0 14px;position:relative}
.auth__art p{color:var(--ink-200);position:relative;max-width:44ch}
.auth__list{margin-top:34px;position:relative;display:grid;gap:14px}
.auth__list li{display:flex;gap:12px;align-items:flex-start;font-size:14.4px;color:var(--bone-200)}
.auth__list svg{width:21px;height:21px;color:var(--green-300);flex:none;margin-top:1px}
.auth__form{padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center;background:var(--bone-100)}
.auth__form-in{width:min(100%,430px);margin-inline:auto}
.auth__form h1{font-size:29px;margin-bottom:8px}
.auth__form > .auth__form-in > p{color:var(--text-soft);font-size:14.7px;margin-bottom:26px}
.demo-note{padding:13px 16px;border-radius:var(--r-sm);background:rgba(34,178,119,.09);border:1px dashed rgba(34,178,119,.4);font-size:13.3px;color:var(--green-700);margin-bottom:22px}
.demo-note b{font-family:var(--f-mono)}
.divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ink-300);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.pwtoggle{position:relative}
.pwtoggle button{position:absolute;right:12px;top:38px;color:var(--ink-400);padding:6px;line-height:0}
.pwtoggle button svg{width:19px;height:19px}

/* ---------- Modal / hizli bakis ---------- */
.modal{position:fixed;inset:0;z-index:1300;display:none;place-items:center;padding:20px;background:rgba(7,8,8,.62);backdrop-filter:blur(5px)}
.modal.is-open{display:grid}
.modal__box{background:var(--bone-100);border-radius:var(--r-lg);width:min(880px,100%);max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:modalIn .38s var(--e-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;z-index:5;transition:all var(--t-fast)}
.modal__close:hover{background:var(--ink-900);color:var(--bone-100)}
.modal__close svg{width:18px;height:18px}
.modal__grid{display:grid;grid-template-columns:1fr 1.12fr;gap:0}
.modal__media{background:linear-gradient(160deg,var(--bone-200),var(--bone-300));display:grid;place-items:center;padding:40px}
.modal__media svg{width:70%}
.modal__body{padding:34px}

/* ---------- Bildirim (toast) ---------- */
.toasts{position:fixed;right:20px;bottom:92px;z-index:1500;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-md);background:var(--ink-900);
  color:var(--bone-100);font-size:14px;box-shadow:var(--sh-3);min-width:280px;max-width:360px;
  animation:toastIn .4s var(--e-out);border-left:3px solid var(--green-400);
}
.toast.out{animation:toastOut .3s var(--e-soft) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}
.toast svg{width:20px;height:20px;color:var(--green-300);flex:none}
.toast b{display:block;font-size:14.2px}
.toast span{font-size:12.5px;color:var(--ink-300)}

/* ---------- Iletisim / harita ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:start}
.cbox{display:grid;gap:14px}
.cinfo{display:flex;gap:15px;padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:all var(--t)}
.cinfo:hover{border-color:var(--green-400);transform:translateX(4px)}
.cinfo__ico{width:44px;height:44px;border-radius:13px;background:var(--ink-900);color:var(--green-300);display:grid;place-items:center;flex:none}
.cinfo__ico svg{width:20px;height:20px}
.cinfo b{display:block;font-size:15px;margin-bottom:4px}
.cinfo p{margin:0;font-size:14px;color:var(--text-soft)}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);height:340px;background:var(--bone-300);position:relative}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}

/* Kurumsal degerler */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{padding:28px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:all var(--t)}
.val:hover{background:rgba(34,178,119,.08);border-color:rgba(63,214,150,.28);transform:translateY(-5px)}
.val i{font-family:var(--f-mono);font-size:12px;color:var(--green-300);letter-spacing:.16em;font-style:normal}
.val h3{font-size:19px;margin:14px 0 10px}
.val p{font-size:14px;color:var(--ink-300);margin:0}

/* Zaman cizelgesi */
.tl{position:relative;padding-left:38px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--green-500),var(--bone-400))}
.tl__i{position:relative;padding-bottom:32px}
.tl__i::before{content:"";position:absolute;left:-34px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--green-500)}
.tl__i b{font-family:var(--f-display);color:var(--green-700);font-size:15px;display:block;margin-bottom:6px}
.tl__i h4{font-size:17.5px;margin-bottom:6px}
.tl__i p{font-size:14.2px;color:var(--text-soft);margin:0}

/* ---------- Güvenli kart ödemesi (PayTR iFrame) ---------- */
.payhead{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(17,105,74,.05),transparent)}
.payhead__ico{width:40px;height:40px;border-radius:12px;background:var(--ink-900);color:var(--green-300);display:grid;place-items:center;flex:none}
.payhead b{display:block;font-size:15.5px;line-height:1.3}
.payhead small{display:block;font-size:12.8px;color:var(--text-soft);margin-top:3px}
.payhead__test{margin-left:auto;flex:none;background:rgba(201,138,23,.14);color:#8A5E0B;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:6px 11px;border-radius:99px}
.payframe{position:relative;min-height:520px;background:var(--surface)}
.payframe iframe{min-height:520px;opacity:0;transition:opacity .35s ease}
.payframe.is-ready iframe{opacity:1}
.payframe__load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:var(--surface);z-index:2}
.payframe__load p{font-size:14px;color:var(--text-soft);margin:0}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green-600);display:inline-block;animation:lp-spin .8s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .payframe,.payframe iframe{min-height:600px}
  .payhead{padding:15px 16px}
  .payhead small{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* ---------- Katalog filtreleri ---------- */
.fopt{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:9px;font-size:14px;color:var(--ink-600);cursor:pointer;transition:background var(--t-fast);text-decoration:none}
.fopt:hover{background:var(--bone-200);color:var(--ink-800)}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--ink-300);font-family:var(--f-mono)}
.fopt__mark{width:17px;height:17px;flex:none;border:1.6px solid var(--line-strong,#cfd6d3);border-radius:50%;position:relative;transition:border-color var(--t-fast)}
.fopt__box{width:17px;height:17px;flex:none;border:1.6px solid var(--line-strong,#cfd6d3);border-radius:5px;position:relative;transition:all var(--t-fast)}
.fopt.is-on{background:rgba(17,105,74,.07);color:var(--green-700);font-weight:600}
.fopt.is-on .fopt__mark{border-color:var(--green-600)}
.fopt.is-on .fopt__mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green-600)}
.fopt--check input{position:absolute;opacity:0;width:0;height:0}
.fopt--check input:checked ~ .fopt__box{background:var(--green-600);border-color:var(--green-600)}
.fopt--check input:checked ~ .fopt__box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.fopt--check input:checked ~ .fopt__mark{border-color:var(--green-600)}
.fopt--check input:checked ~ .fopt__mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green-600)}
.fopt--check input:focus-visible ~ .fopt__box,
.fopt--check input:focus-visible ~ .fopt__mark{outline:2px solid var(--green-600);outline-offset:2px}
.filtre-uygula{position:sticky;bottom:12px}

/* etkin filtre rozetleri */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-700);text-decoration:none;transition:all var(--t-fast)}
.fchip svg{width:13px;height:13px;opacity:.55}
.fchip:hover{border-color:var(--danger);color:var(--danger)}
.fchip:hover svg{opacity:1}
.fchip--clear{background:transparent;border-style:dashed;color:var(--ink-400)}
.fchip--clear:hover{border-color:var(--green-600);color:var(--green-700)}

/* ---------- Canlı arama önerileri ---------- */
.sugg{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 60px rgba(11,26,21,.16);max-height:min(72vh,540px);overflow-y:auto;padding:8px;animation:sugg-in .16s ease}
@keyframes sugg-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sugg__bas{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-300);padding:12px 12px 6px}
.sugg__row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;text-decoration:none;color:var(--ink-800);transition:background var(--t-fast)}
.sugg__row:hover,.sugg__row.is-on{background:var(--bone-200)}
.sugg__img{width:44px;height:44px;flex:none;border-radius:10px;background:var(--bone-200);display:grid;place-items:center;overflow:hidden;color:var(--green-700)}
.sugg__img img{width:100%;height:100%;object-fit:contain}
.sugg__img svg{width:22px;height:22px}
.sugg__ad{flex:1;min-width:0;font-size:14.2px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sugg__ad small{display:block;font-size:12px;font-weight:500;color:var(--ink-400);margin-top:2px;-webkit-line-clamp:1}
.sugg__ad small b.yok{color:var(--danger);font-weight:700}
.sugg__ad mark{background:rgba(34,178,119,.22);color:inherit;border-radius:3px;padding:0 1px}
.sugg__fiyat{flex:none;text-align:right;font-family:var(--f-display);font-weight:800;font-size:14.5px;color:var(--green-700)}
.sugg__fiyat s{display:block;font-family:var(--f-body);font-weight:500;font-size:11.5px;color:var(--ink-300)}
.sugg__adet{flex:none;font-size:11.5px;color:var(--ink-300);font-family:var(--f-mono)}
.sugg__row--sade .sugg__ad{font-weight:600;font-size:13.6px}
.sugg__tumu{display:block;text-align:center;padding:12px;margin-top:6px;border-top:1px solid var(--line-soft);font-size:13.4px;font-weight:700;color:var(--green-700);text-decoration:none}
.sugg__tumu:hover{background:var(--bone-200);border-radius:10px}
.sugg__bos{padding:26px 16px;text-align:center;font-size:14px;color:var(--ink-600)}
.sugg__bos span{display:block;margin-top:6px;font-size:12.6px;color:var(--ink-300)}
.sugg__bekle{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px;font-size:13.5px;color:var(--ink-400)}
.sugg__bekle .spin{width:18px;height:18px;border-width:2px}
@media (max-width:700px){
  .sugg{position:fixed;left:12px;right:12px;top:auto;max-height:64vh}
  .sugg__fiyat{font-size:13.5px}
}

/* ---------- Destek yazışması (müşteri paneli) ---------- */
.ticket--link{text-decoration:none;color:inherit;transition:border-color var(--t-fast),background var(--t-fast)}
.ticket--link:hover{border-color:var(--green-500);background:rgba(34,178,119,.04)}
.ticket--link.is-on{border-color:var(--green-600);background:rgba(34,178,119,.06)}
.ticket__yeni{display:inline-block;margin-left:8px;background:var(--green-600);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;padding:2px 8px;border-radius:99px;vertical-align:middle;text-transform:uppercase}
.sohbet{display:flex;flex-direction:column;gap:14px;max-height:58vh;overflow-y:auto;padding:2px}
.sohbet__b{max-width:80%;border-radius:15px;padding:13px 17px;font-size:14.4px;line-height:1.7}
.sohbet__b p{margin:0}
.sohbet__bas{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.sohbet__bas b{font-size:12.6px}
.sohbet__bas span{font-size:11px;color:var(--ink-300);font-family:var(--f-mono)}
.sohbet__b--ben{align-self:flex-end;background:rgba(34,178,119,.09);border:1px solid rgba(34,178,119,.25)}
.sohbet__b--ekip{align-self:flex-start;background:var(--bone-200);border:1px solid var(--line)}
.sohbet__b--ekip .sohbet__bas b{color:var(--green-700)}
@media (max-width:700px){.sohbet__b{max-width:94%}}

/* ---------- Fatura düğmeleri (müşteri paneli) ---------- */
.fbtn{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.fbtn .btn{white-space:nowrap}
@media (max-width:700px){.fbtn{justify-content:flex-start}}