/* ============================================================
YAPIMCI : OFISIMO 
Versiyon: v8.0.0

    CSS INDEX OFISIMO SOFTWARE
   fg-fixes.css'TEN SONRA yüklenir. Tümü .fg-home altında scope'lu,
   site genelini etkilemez. Yeni dosya olduğu için yeniden üretimde
   ezilmez (fg-style.css gibi rejenere edilmez).
   Bölümler: tech_hero, category_showcase, deal_spotlight,
             promo_split, brand_strip.
   ============================================================ */
.fg-home {
  --th-accent:  #6366f1;
  --th-accent2: #22d3ee;
  --th-grad:    linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --th-ink:     #0a0a0f;
  --th-surface: #15151d;
  --th-line:    rgba(255,255,255,.10);
  --th-text:    #f4f4f5;
  --th-muted:   #a1a1aa;
}

/* ─────────────────────── TECH HERO (slider) ─────────────────────── */
.fg-thero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 80% -10%, #1c1c2b 0%, #0d0d15 45%, #08080c 100%);
  color: var(--th-text);
  padding: 0 0 32px;
  isolation: isolate;
}
.fg-thero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; z-index: 0;
  pointer-events: none;
}
.fg-thero-glow--1 { width: 420px; height: 420px; background: #6366f1; top: -120px; left: -80px; }
.fg-thero-glow--2 { width: 360px; height: 360px; background: #22d3ee; bottom: -120px; right: 10%; opacity: .35; }

/* slider mekaniği */
.fg-thero-slides { position: relative; z-index: 1; }
.fg-thero-slide { display: none; position: relative; padding: 72px 0 30px; }
.fg-thero-slide.is-active { display: block; animation: fgTHeroFade .55s ease; }
@keyframes fgTHeroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fg-thero-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
/* metin okunabilir kalsın diye sol taraftan koyulaşan degrade overlay */
.fg-thero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,12,.94) 0%, rgba(8,8,12,.78) 42%, rgba(8,8,12,.32) 100%);
}
.fg-thero-inner { position: relative; z-index: 1; }
.fg-thero-copy { max-width: 640px; }

/* oklar */
.fg-thero-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--th-line);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background .2s, border-color .2s;
}
.fg-thero-arr:hover { background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.6); }
.fg-thero-arr--prev { left: 18px; }
.fg-thero-arr--next { right: 18px; }
/* noktalar */
.fg-thero-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 8px; z-index: 4; }
.fg-thero-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: background .25s, width .25s; }
.fg-thero-dot.is-active { background: var(--th-grad); width: 26px; border-radius: 99px; }

.fg-thero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; color: #c7d2fe;
  background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.4);
}
.fg-thero-eyebrow i { color: var(--th-accent2); }
.fg-thero-title {
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; font-weight: 800;
  letter-spacing: -.03em; margin: 18px 0 0; color: #fff;
}
.fg-thero-em {
  background: var(--th-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fg-thero-sub {
  margin: 18px 0 0; max-width: 540px; font-size: 16px; line-height: 1.65; color: var(--th-muted);
}
.fg-thero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fg-thero-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px;
  border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.fg-thero-btn--primary { background: var(--th-grad); color: #0a0a0f; box-shadow: 0 10px 30px rgba(99,102,241,.35); }
.fg-thero-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(34,211,238,.4); color: #0a0a0f; }
.fg-thero-btn--ghost { background: rgba(255,255,255,.05); color: #fff; border: 1px solid var(--th-line); }
.fg-thero-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }

.fg-thero-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.fg-thero-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: rgba(255,255,255,.04); border: 1px solid var(--th-line); border-radius: 14px;
  text-decoration: none; color: #fff; backdrop-filter: blur(6px);
  transition: transform .15s, border-color .2s, background .2s;
}
.fg-thero-card:hover { transform: translateX(4px); border-color: rgba(99,102,241,.55); background: rgba(99,102,241,.10); color: #fff; }
.fg-thero-card-ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--th-grad); color: #0a0a0f;
}
.fg-thero-card-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; }
.fg-thero-card-txt strong { font-size: 14.5px; font-weight: 650; }
.fg-thero-card-txt small { font-size: 12px; color: var(--th-muted); }
.fg-thero-card-arr { color: var(--th-muted); font-size: 12px; transition: transform .15s; }
.fg-thero-card:hover .fg-thero-card-arr { transform: translateX(3px); color: var(--th-accent2); }

/* ────────────────── KATEGORİ VİTRİNİ ────────────────── */
.fg-catnav-sub { margin: 4px 0 0; color: var(--fg-500, #71717a); font-size: 14px; }
.fg-catnav-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.fg-catnav-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 20px; border: 1px solid var(--fg-200, #e4e4e7); border-radius: 16px; background: #fff;
  text-decoration: none; color: var(--fg-900, #18181b); overflow: hidden;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.fg-catnav-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(34,211,238,.06));
}
.fg-catnav-card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.5); box-shadow: 0 14px 30px rgba(15,23,42,.08); color: var(--fg-950, #09090b); }
.fg-catnav-card:hover::after { opacity: 1; }
.fg-catnav-ic {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; background: linear-gradient(135deg, #1e1e2a, #0a0a0f); position: relative; z-index: 1;
  transition: background .25s;
}
.fg-catnav-card:hover .fg-catnav-ic { background: var(--th-grad); color: #0a0a0f; }
.fg-catnav-name { font-size: 15px; font-weight: 650; position: relative; z-index: 1; }
.fg-catnav-arr { position: absolute; right: 18px; bottom: 20px; font-size: 12px; color: var(--fg-300, #d4d4d8); transition: transform .15s, color .2s; z-index: 1; }
.fg-catnav-card:hover .fg-catnav-arr { transform: translateX(3px); color: var(--th-accent); }

/* ────────────────── GÜNÜN FIRSATI ────────────────── */
.fg-deal-wrap { padding: 8px 0 14px; }
.fg-deal {
  position: relative; overflow: hidden; border-radius: 24px;
  background: radial-gradient(120% 160% at 100% 0%, #20203a 0%, #111118 55%, #0a0a0f 100%);
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px;
  padding: 40px 44px; color: var(--th-text);
}
.fg-deal-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: #6366f1; filter: blur(100px); opacity: .4; top: -120px; right: 8%; pointer-events: none; }
.fg-deal-body { position: relative; z-index: 1; }
.fg-deal-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--th-grad); color: #0a0a0f;
}
.fg-deal-title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 16px 0 0; color: #fff; }
.fg-deal-sub { margin: 10px 0 0; color: var(--th-muted); font-size: 15px; max-width: 460px; line-height: 1.6; }
.fg-deal-price { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; }
.fg-deal-pnew { font-size: 30px; font-weight: 800; color: #fff; }
.fg-deal-pold { font-size: 18px; color: var(--th-muted); text-decoration: line-through; }
.fg-deal-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.fg-deal-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 12px;
  background: #fff; color: #0a0a0f; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .2s;
}
.fg-deal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.18); color: #0a0a0f; }
.fg-deal-note { font-size: 13px; color: #fca5a5; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.fg-deal-media { position: relative; z-index: 1; text-align: center; }
.fg-deal-media img { max-width: 100%; max-height: 260px; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.fg-deal-media--icon { font-size: 150px; color: rgba(255,255,255,.06); }

/* ────────────────── İKİLİ PROMO ────────────────── */
.fg-psplit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fg-psplit-card {
  position: relative; overflow: hidden; border-radius: 20px; min-height: 270px;
  display: flex; align-items: flex-end; text-decoration: none; color: #fff;
  transition: transform .2s, box-shadow .25s;
}
.fg-psplit-card:nth-child(1) { background: linear-gradient(135deg, #312e81 0%, #0e7490 100%); }
.fg-psplit-card:nth-child(2) { background: linear-gradient(135deg, #1e293b 0%, #0f766e 100%); }
.fg-psplit-card:nth-child(3) { background: linear-gradient(135deg, #4c1d95 0%, #9d174d 100%); }
.fg-psplit-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15,23,42,.22); color: #fff; }
.fg-psplit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fg-psplit-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,15,.05) 0%, rgba(10,10,15,.55) 70%, rgba(10,10,15,.8) 100%); }
.fg-psplit-copy { position: relative; z-index: 2; padding: 30px 32px; }
.fg-psplit-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e0e7ff; opacity: .9; }
.fg-psplit-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 0; color: #fff; }
.fg-psplit-text { margin: 8px 0 0; font-size: 14px; color: rgba(255,255,255,.82); max-width: 360px; line-height: 1.55; }
.fg-psplit-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 650; font-size: 14.5px; color: #fff; }
.fg-psplit-card:hover .fg-psplit-btn i { transform: translateX(4px); }
.fg-psplit-btn i { transition: transform .15s; }

/* ────────────────── MARKALAR ────────────────── */
.fg-brands-row { display: flex; flex-wrap: wrap; gap: 14px; }
.fg-brands-card {
  flex: 1 1 130px; min-width: 120px; height: 78px; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; border: 1px solid var(--fg-200, #e4e4e7); border-radius: 14px; background: #fff;
  text-decoration: none; transition: transform .15s, border-color .2s, box-shadow .2s;
}
.fg-brands-card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.5); box-shadow: 0 12px 26px rgba(15,23,42,.08); }
.fg-brands-card img { max-width: 100%; max-height: 46px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.fg-brands-card:hover img { filter: grayscale(0); opacity: 1; }
.fg-brands-name { font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: var(--fg-700, #3f3f46); transition: color .2s; }
.fg-brands-card:hover .fg-brands-name { color: var(--fg-950, #09090b); }

/* ────────────────── RESPONSIVE ────────────────── */
@media (max-width: 992px) {
  .fg-thero-cards { grid-template-columns: 1fr 1fr; }
  .fg-deal { grid-template-columns: 1fr; padding: 32px 28px; }
  .fg-deal-media { display: none; }
}
@media (max-width: 768px) {
  .fg-thero-slide { padding: 48px 0 26px; }
  .fg-thero-arr { display: none; }
  .fg-thero-cards { grid-template-columns: 1fr; }
  .fg-psplit { grid-template-columns: 1fr; }
  .fg-catnav-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .fg-catnav-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-thero-btn { flex: 1 1 auto; justify-content: center; }
  .fg-brands-card { flex-basis: calc(50% - 7px); }
}

/* ────────────── GÜVEN ŞERİDİ — modern restyle ──────────────
   fg-style.css'teki .fg-trust-* kurallarını ezer (.fg-home daha özgül
   + sonra yüklenir). İkon gradyan çipi, hover vurgusu, temiz kart.        */
.fg-home .fg-trust-row {
  background: #fff; border: 1px solid var(--fg-200, #e4e4e7); border-radius: 18px;
  padding: 10px; gap: 0; box-shadow: 0 12px 34px rgba(15,23,42,.05);
}
.fg-home .fg-trust-item {
  padding: 16px 20px; border-radius: 14px; transition: background .2s, transform .15s;
}
.fg-home .fg-trust-item + .fg-trust-item { border-left: none; padding-left: 20px; }
.fg-home .fg-trust-item:hover { background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(34,211,238,.07)); }
.fg-home .fg-trust-item > i {
  width: 48px; height: 48px; border-radius: 13px; border: none;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(34,211,238,.14));
  color: var(--th-accent, #6366f1); font-size: 20px; transition: background .25s, color .25s;
}
.fg-home .fg-trust-item:hover > i { background: var(--th-grad); color: #fff; }
.fg-home .fg-trust-t { font-size: 14px; }
@media (max-width: 768px) {
  .fg-home .fg-trust-item + .fg-trust-item { padding-left: 20px; }
}

/* ────────────── ÜRÜN KARTI — hover'da görsel taşması fix ──────────────
   border-radius + hover transform birlikteyken bazı tarayıcılar ölçeklenen
   görseli yuvarlak köşeden kırpamaz. Görsel alanına da köşe yarıçapı verip
   kartı temiz bir kırpma bağlamına alıyoruz.                              */
.fg-home .fg-pcard { transform: translateZ(0); }
.fg-home .fg-pcard:hover { transform: translateZ(0) translateY(-4px); }
.fg-home .fg-pcard-img {
  border-top-left-radius: var(--fg-r-lg, 14px);
  border-top-right-radius: var(--fg-r-lg, 14px);
}
.fg-home .fg-pcard:hover .fg-pcard-img img { transform: scale(1.05); }

/* ────────────── İKON YERİNE GÖRSEL (ops.) ──────────────
   Kategori kartı ve hero hızlı-erişim kartı: görsel seçilirse ikon
   yerine görseli gösterir; çip beyaz/temiz olur, gradyan bindirmez.       */
.fg-catnav-ic--img {
  background: #fff; border: 1px solid var(--fg-200, #e4e4e7); padding: 7px;
  overflow: hidden;
}
.fg-catnav-ic--img img { width: 100%; height: 100%; object-fit: contain; }
.fg-catnav-card:hover .fg-catnav-ic--img { background: #fff; color: inherit; }

.fg-thero-card-ic--img {
  background: rgba(255,255,255,.08); padding: 5px; overflow: hidden;
}
.fg-thero-card-ic--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }