/* ============================================================
   Orgi Telekom — "Sinyal" premium e-ticaret teması (Faz 8b)
   Kobalt marka aksanı + fırsat-turuncu promosyon rengi, derin
   katmanlı hero, zengin ürün kartları, kampanya banner'ları.
   Bootstrap 5 + Bootstrap Icons tabanı üzerine kurumsal kimlik.
   ============================================================ */

:root {
    --ink: #0B1220;
    --ink-2: #111B33;
    --ink-grad: linear-gradient(135deg, #0B1220 0%, #16224A 55%, #1B2E63 100%);
    --paper: #FFFFFF;
    --mist: #F5F7FB;
    --mist-2: #EDF1F8;
    --signal: #2D5BFF;       /* marka aksanı */
    --signal-ink: #1E3FB0;
    --signal-haze: #2D5BFF14;
    --signal-glow: #2D5BFF55;
    --deal: #FF6A2C;         /* fırsat/indirim — yalnız promosyon */
    --deal-ink: #E04E13;
    --deal-haze: #FF6A2C18;
    --gold: #F5A623;         /* rating yıldızı */
    --line: #E4E8EF;
    --line-2: #EEF1F6;
    --line-dark: #243049;
    --muted: #5B6675;
    --muted-2: #828D9E;
    --muted-dark: #98A6BE;
    --ok: #128A5B;

    --font-display: "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
    --font-body: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono: "Space Mono", ui-monospace, Consolas, monospace;

    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 10px rgba(11,18,32,.05);
    --shadow: 0 10px 30px rgba(11,18,32,.08);
    --shadow-lg: 0 24px 60px rgba(11,18,32,.16);
}

/* ---------- Taban ---------- */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--mist);
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
}
main { background: var(--mist); }
h1,h2,h3,h4,.display-6,.h3,.h4 { font-family: var(--font-display); letter-spacing: -.025em; font-weight: 600; }
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-ink); }
::selection { background: var(--signal); color: #fff; }
.text-signal { color: var(--signal) !important; }

.eyebrow {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--signal); font-weight: 700;
    display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content:""; width: 1.7rem; height: 2px; background: currentColor; display:inline-block; }
.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Üst duyuru barı ---------- */
.topbar {
    background: var(--ink); color: var(--muted-dark);
    font-size: .78rem; border-bottom: 1px solid var(--line-dark);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; gap: 1rem; flex-wrap: wrap; }
.topbar strong { color: #fff; font-weight: 600; }
.topbar .tb-right { display: flex; gap: 1.4rem; }
.topbar a { color: var(--muted-dark); }
.topbar a:hover { color: #fff; }
.topbar i { color: var(--signal); }

/* ---------- Header ---------- */
header.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; box-shadow: var(--shadow-sm); }
.navbar-brand {
    font-family: var(--font-display); color: var(--ink) !important; font-weight: 700;
    letter-spacing: -.03em; font-size: 1.35rem; display: inline-flex; align-items: center; gap: .55rem;
}
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-haze); flex: none; }
.nav-link-top { color: var(--ink); font-weight: 600; padding: .35rem 0; position: relative; }
.nav-link-top::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background: var(--signal); transition: right .2s ease; }
.nav-link-top:hover { color: var(--ink); }
.nav-link-top:hover::after { right: 0; }

.search-bar { flex: 1; max-width: 480px; }
.search-bar .form-control { border: 1px solid var(--line); background: var(--mist); border-radius: 999px; padding-left: 1rem; }
.search-bar .form-control:focus { border-color: var(--signal); box-shadow: 0 0 0 .2rem var(--signal-haze); background:#fff; }
.search-bar .btn { border-radius: 999px; }
.icon-link { color: var(--ink); position: relative; font-size: 1.25rem; display: inline-flex; }
.icon-link:hover { color: var(--signal); }

/* Kategori navigasyon barı */
.catbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.catbar .container { display: flex; gap: 1.5rem; align-items: center; overflow-x: auto; padding: .6rem 0; }
.catbar a { color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.catbar a:hover { color: var(--signal); }
.catbar .all { color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Butonlar ---------- */
.btn { font-weight: 700; border-radius: var(--radius-sm); letter-spacing: -.01em; }
.btn-lg { padding: .7rem 1.5rem; }
.btn-primary, .btn-signal { background: var(--signal); border-color: var(--signal); color:#fff; }
.btn-primary:hover, .btn-signal:hover, .btn-primary:focus, .btn-signal:focus { background: var(--signal-ink); border-color: var(--signal-ink); color:#fff; box-shadow: 0 8px 20px var(--signal-glow); }
.btn-deal { background: var(--deal); border-color: var(--deal); color: #fff; }
.btn-deal:hover { background: var(--deal-ink); border-color: var(--deal-ink); color:#fff; }
.btn-outline-signal { border: 1px solid var(--signal); color: var(--signal); background: transparent; }
.btn-outline-signal:hover { background: var(--signal); color:#fff; }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.4); color:#fff; background: rgba(255,255,255,.06); }
.btn-ghost-light:hover { background:#fff; color: var(--ink); border-color:#fff; }

/* ---------- Hero (katmanlı premium) ---------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--ink-grad); color:#fff;
    border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3.5rem);
    box-shadow: var(--shadow-lg);
}
.hero::before { content:""; position:absolute; top:-30%; right:-10%; width:55%; height:160%;
    background: radial-gradient(circle, var(--signal-glow) 0%, transparent 60%); pointer-events:none; }
.hero-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; position: relative; z-index: 2; }
.hero h1 { color:#fff; font-size: clamp(2rem,4.3vw,3.5rem); line-height: 1.03; font-weight: 700; margin: 0; }
.hero .hero-accent { color: var(--signal); }
.hero .lead { color: var(--muted-dark); max-width: 46ch; font-size: 1.05rem; }
.hero .eyebrow { color:#fff; }
.hero-rating { display:inline-flex; align-items:center; gap:.5rem; color: var(--muted-dark); font-size:.85rem; }
.hero-rating .stars { color: var(--gold); }
.hero-visual { position: relative; }
.hero-visual img { width:100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
.hero-badge {
    position:absolute; top:-14px; left:-14px; z-index:3;
    background: var(--deal); color:#fff; border-radius: 999px;
    width: 78px; height: 78px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:700; line-height:1; box-shadow: var(--shadow);
    transform: rotate(-8deg);
}
.hero-badge small { font-family: var(--font-mono); font-size:.55rem; letter-spacing:.1em; margin-top:2px; font-weight:400; }
.hero-chip {
    position:absolute; bottom: 14px; right:-10px; z-index:3;
    background:#fff; color: var(--ink); border-radius: 12px; padding:.6rem .85rem;
    box-shadow: var(--shadow); display:flex; align-items:center; gap:.6rem; font-size:.82rem;
}
.hero-chip i { color: var(--signal); font-size:1.3rem; }
.hero-chip .data { color: var(--ink); font-weight:700; }
/* sinyal yayları (dekor) */
.hero-arcs { position:absolute; top:50%; right:6%; transform: translateY(-50%); width: 22rem; aspect-ratio:1; z-index:1; opacity:.5; pointer-events:none; }
.hero-arcs span { position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--signal); opacity:0; animation: arc 5s ease-out infinite; }
.hero-arcs span:nth-child(2){animation-delay:1.6s} .hero-arcs span:nth-child(3){animation-delay:3.2s}
@keyframes arc { 0%{width:0;height:0;opacity:.6} 100%{width:100%;height:100%;opacity:0} }
@media (prefers-reduced-motion: reduce){ .hero-arcs span{animation:none;opacity:.15;width:70%;height:70%} }
@media (max-width: 860px){ .hero-row{ grid-template-columns: 1fr; } .hero-visual{ display:none; } }

/* ---------- İkon özellik şeridi ---------- */
.feature-strip { display:grid; grid-template-columns: repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; }
.feature-strip .f { display:flex; gap:.85rem; align-items:center; padding:1.15rem 1.25rem; border-left:1px solid var(--line); }
.feature-strip .f:first-child { border-left:0; }
.feature-strip .f i { font-size:1.6rem; color: var(--signal); flex:none; }
.feature-strip .f .ft { font-weight:700; font-size:.92rem; }
.feature-strip .f .fs { color: var(--muted); font-size:.78rem; }
@media (max-width:767px){ .feature-strip{ grid-template-columns: repeat(2,1fr);} .feature-strip .f:nth-child(-n+2){border-bottom:1px solid var(--line)} .feature-strip .f:nth-child(odd){border-left:0} }

/* Güven bandı (ana sayfa istatistikleri) */
.istatistik-band { background: var(--ink-grad); color:#fff; border-radius: var(--radius); padding: 2.4rem 1.25rem; position:relative; overflow:hidden; }
.istatistik-band::before { content:""; position:absolute; right:-8%; top:-50%; width:45%; height:200%; background: radial-gradient(circle, var(--signal-glow) 0%, transparent 60%); pointer-events:none; }
.istatistik-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; position:relative; z-index:1; }
.istatistik-item { text-align:center; padding:.4rem; }
.istatistik-item i { color: var(--signal); font-size:1.5rem; display:block; margin-bottom:.35rem; }
.istatistik-item .deger { font-family: var(--font-display); font-weight:700; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height:1; }
.istatistik-item .etiket { margin-top:.4rem; color: rgba(255,255,255,.75); font-size:.9rem; }
@media (max-width:700px){ .istatistik-grid { grid-template-columns: repeat(2,1fr); row-gap:1.6rem; } }

/* ---------- Bölüm başlığı ---------- */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin: 0 0 1.4rem; }
.section-head .st { display:flex; flex-direction:column; gap:.4rem; }
.section-head h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin:0; }
.section-head .more { font-family: var(--font-mono); font-size:.8rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }

/* ---------- Görselli kategori kartları ---------- */
.kat-kart { position:relative; display:block; border-radius: var(--radius); overflow:hidden; height: 150px; box-shadow: var(--shadow-sm); border:1px solid var(--line); }
.kat-kart img { width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.kat-kart::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,18,32,.05) 0%, rgba(11,18,32,.72) 100%); }
.kat-kart .lbl { position:absolute; left:1rem; bottom:.85rem; z-index:2; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.4rem; }
.kat-kart .lbl .arrow { font-family:var(--font-mono); opacity:.85; transition: transform .2s; }
.kat-kart:hover img { transform: scale(1.06); }
.kat-kart:hover .lbl .arrow { transform: translateX(4px); }

/* ---------- Kampanya banner (2-up) ---------- */
.promo { position:relative; border-radius: var(--radius); overflow:hidden; min-height: 210px; display:flex; box-shadow: var(--shadow-sm); }
.promo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promo .promo-body { position:relative; z-index:2; padding: 1.7rem; display:flex; flex-direction:column; justify-content:center; max-width: 75%; }
.promo.dark::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,18,32,.9) 0%, rgba(11,18,32,.45) 100%); }
.promo.light::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.5) 100%); }
.promo.dark .promo-body { color:#fff; }
.promo.light .promo-body { color: var(--ink); }
.promo .promo-eyebrow { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--deal); font-weight:700; }
.promo h3 { font-size:1.5rem; margin:.3rem 0 .2rem; }
.promo p { font-size:.9rem; opacity:.92; margin-bottom: .9rem; }

/* ---------- Ürün kartı (premium) ---------- */
.urun-kart { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; height:100%; transition: border-color .15s, box-shadow .2s, transform .2s; color: inherit; }
.urun-kart:hover { border-color: var(--signal); box-shadow: var(--shadow); transform: translateY(-4px); color:inherit; }
.urun-foto-wrap { position:relative; display:block; background: var(--mist); overflow:hidden; }
.urun-foto-wrap img, .urun-kart .card-img-top { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; transition: transform .4s ease; }
.urun-kart:hover .urun-foto-wrap img { transform: scale(1.05); }
.urun-rozetler { position:absolute; top:.6rem; left:.6rem; z-index:3; display:flex; flex-direction:column; gap:.35rem; }
.rozet { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.06em; font-weight:700; text-transform:uppercase; padding:.22rem .5rem; border-radius:6px; color:#fff; }
.rozet.deal { background: var(--deal); }
.rozet.new { background: var(--signal); }
.fav-btn { position:absolute; top:.6rem; right:.6rem; z-index:3; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--line); color: var(--muted); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); transition: color .15s, transform .15s; }
.fav-btn:hover { color: var(--deal); transform: scale(1.08); }
.urun-quick { position:absolute; left:.6rem; right:.6rem; bottom:.6rem; z-index:3; opacity:0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.urun-foto-wrap:hover .urun-quick { opacity:1; transform: translateY(0); }
.urun-govde { padding:.85rem .95rem 1rem; display:flex; flex-direction:column; flex:1; }
.urun-meta { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; color:var(--muted-2); text-transform:uppercase; margin-bottom:.3rem; }
.urun-rating { color: var(--gold); font-size:.72rem; letter-spacing:.05em; display:inline-flex; gap:1px; align-items:center; margin-bottom:.35rem; }
.urun-rating .cnt { color: var(--muted-2); font-family: var(--font-mono); margin-left:.3rem; }
.urun-ad { font-weight:600; line-height:1.3; color: var(--ink); flex:1 1 auto; }
.urun-fiyat-satir { display:flex; align-items:baseline; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.urun-fiyat { font-family: var(--font-display); font-weight:700; font-size:1.2rem; color: var(--ink); }
.urun-fiyat .cur { font-size:.82rem; color: var(--muted); font-weight:600; }
.urun-eski { font-size:.85rem; color: var(--muted-2); text-decoration: line-through; }
.bayi-chip { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color: var(--signal); background: var(--signal-haze); border:1px solid var(--signal); border-radius:999px; padding:.1rem .5rem; }
.stok-az { font-family: var(--font-mono); font-size:.68rem; color: var(--deal-ink); }

/* ---------- Bayi CTA bandı ---------- */
.cta-band { position:relative; overflow:hidden; background: var(--ink-grad); color:#fff; border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3rem); box-shadow: var(--shadow); }
.cta-band::before { content:""; position:absolute; top:-40%; left:-5%; width:45%; height:180%; background: radial-gradient(circle, var(--signal-glow), transparent 60%); }
.cta-band .lead { color: var(--muted-dark); }
.cta-band h2 { color:#fff; }

/* ---------- Marka şeridi ---------- */
.brand-strip { display:flex; flex-wrap:wrap; gap: 2.5rem; align-items:center; justify-content:center; padding: 1.5rem 0; }
.brand-strip .b { font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--muted-2); letter-spacing:-.02em; opacity:.7; transition: color .15s, opacity .15s; }
.brand-strip .b:hover { color: var(--ink); opacity:1; }

/* ---------- Ürün detay ---------- */
.detay-foto { border:1px solid var(--line); border-radius: var(--radius); background:#fff; width:100%; box-shadow: var(--shadow-sm); }
.detay-fiyat { font-family: var(--font-display); font-weight:700; font-size:2.1rem; color: var(--ink); }
.detay-fiyat .kdv { font-family: var(--font-body); font-size:.85rem; font-weight:500; color: var(--muted); }
.detay-rating { color: var(--gold); display:inline-flex; gap:2px; align-items:center; }
.detay-rating .cnt { color: var(--muted); font-family:var(--font-mono); font-size:.8rem; margin-left:.4rem; }
.spec-list { border-top:1px solid var(--line); margin-top:1.25rem; }
.spec-row { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.spec-row .k { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.spec-row .v { font-weight:600; }
.stok-ok { color: var(--ok); } .stok-yok { color:#C0392B; }

/* ---------- Yan kategori nav ---------- */
.kategori-nav { border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; box-shadow: var(--shadow-sm); }
.kategori-nav .nav-link { color: var(--ink); padding:.65rem 1rem; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; font-weight:500; }
.kategori-nav .nav-item:last-child .nav-link { border-bottom:0; }
.kategori-nav .nav-link:hover { color: var(--signal); background: var(--mist); }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--ink); color: var(--muted-dark); margin-top: 4rem; }
footer.site-footer .f-top { border-bottom:1px solid var(--line-dark); }
footer.site-footer a { color: var(--muted-dark); } footer.site-footer a:hover { color:#fff; }
footer.site-footer .f-title { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:.85rem; }
footer.site-footer .f-brand { font-family: var(--font-display); font-weight:700; color:#fff; font-size:1.25rem; display:inline-flex; align-items:center; gap:.5rem; }
footer.site-footer .pay i { font-size:1.8rem; color: var(--muted-dark); margin-right:.4rem; }
footer.site-footer .soc a { width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem; }
footer.site-footer .soc a:hover { background: var(--signal); border-color: var(--signal); color:#fff; }
footer.site-footer .f-bottom { border-top:1px solid var(--line-dark); color: var(--muted); font-family:var(--font-mono); font-size:.72rem; }
.newsletter .form-control { border-radius:999px 0 0 999px; border-color: var(--line-dark); background: var(--ink-2); color:#fff; }
.newsletter .form-control::placeholder { color: var(--muted); }
.newsletter .btn { border-radius:0 999px 999px 0; }

/* ---------- Form / breadcrumb / rozet ---------- */
.form-control:focus,.form-select:focus { border-color: var(--signal); box-shadow:0 0 0 .2rem var(--signal-haze); }
.breadcrumb { font-size:.85rem; } .breadcrumb a{ color: var(--muted);} .breadcrumb a:hover{color: var(--signal);} .breadcrumb-item.active{ color: var(--ink);}
.sepet-rozet { color: var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:.35rem; position:relative; }
.sepet-rozet:hover { color: var(--signal); }
.sepet-rozet .say { font-family:var(--font-mono); font-size:.66rem; font-weight:700; background: var(--deal); color:#fff; border-radius:999px; min-width:1.15rem; height:1.15rem; padding:0 .3rem; display:inline-flex; align-items:center; justify-content:center; position:absolute; top:-8px; right:-12px; }

/* ---------- Erişilebilirlik / yardımcılar ---------- */
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.card-grid { display:grid; gap: 1rem; grid-template-columns: repeat(4,1fr); }
@media (max-width:991px){ .card-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:767px){ .card-grid{ grid-template-columns: repeat(2,1fr);} }

/* ---------- İçerik / sözleşme sayfası tipografisi ---------- */
.icerik { color: #2A3340; line-height: 1.7; font-size: .97rem; }
.icerik h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--ink); }
.icerik h2:first-child { margin-top: 0; }
.icerik p { margin-bottom: .9rem; }
.icerik ul { margin: 0 0 1rem 1.1rem; padding: 0; }
.icerik li { margin-bottom: .4rem; }
.icerik strong { color: var(--ink); }

/* ---------- Çerez onay banner ---------- */
.cerez-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080;
    max-width: 880px; margin: 0 auto;
    background: var(--ink); color: #fff;
    border: 1px solid var(--line-dark); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.15rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.cerez-banner .cz-text { flex: 1 1 320px; font-size: .85rem; color: var(--muted-dark); }
.cerez-banner .cz-text a { color: #fff; text-decoration: underline; }
.cerez-banner .cz-act { display: flex; gap: .5rem; flex: none; }
.cerez-banner[hidden] { display: none; }