/* =========================================================
   SosyalPot – yeni bileşenler
   Açık/koyu tema için Bootstrap 5.3 değişkenleri kullanılır.
   ========================================================= */

:root {
    --sp-radius: 18px;
    --sp-radius-lg: 28px;
    --sp-yesil: #12c99b;
    --sp-yesil-koyu: #0aa37e;
    --sp-sari: #f5b70a;
    --sp-kart: var(--bs-body-bg);
    --sp-kart-2: var(--bs-tertiary-bg, #f6f6fb);
    --sp-cizgi: var(--bs-border-color, #e6e6ef);
}
[data-bs-theme=dark] {
    --sp-kart: #23272b;
    --sp-kart-2: #1b1e21;
    --sp-cizgi: rgba(255, 255, 255, .08);
}

/* ---------------- Mega menüler (tıklamayla) ---------------- */
.sp-menu:not(button) {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    position: absolute;
    left: 0;
    right: 0;
}
.sp-menu.sp-show {
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99998 !important;
}
#sosyalMenu.sp-show > div,
#epinMenu.sp-show > div,
#ucretsizMenu.sp-show > div {
    max-height: 68vh;
    height: auto !important;
    overflow-y: auto;
}
header.header-sticky-on #sosyalMenu.sp-show > div,
header.header-sticky-on #epinMenu.sp-show > div,
header.header-sticky-on #ucretsizMenu.sp-show > div {
    max-height: calc(100vh - 12vh);
}
.sp-menu.sp-show > div::-webkit-scrollbar { width: 5px; }
.sp-menu.sp-show > div::-webkit-scrollbar-thumb { border-radius: 20px; background-color: rgba(127, 127, 127, .4); }
.navbar .dropdown-toggle[data-toggle]::after { transition: transform .2s; }
.navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.sp-menu-rozet {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sp-yesil);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: .03em;
    pointer-events: none;
}

/* ---------------- Ortak ---------------- */
.sp-etiket {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--sp-kart-2);
    border: 1px solid var(--sp-cizgi);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.sp-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart);
    color: var(--bs-body-color);
    font-size: .875rem;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}
.sp-cip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.sp-cip.aktif, .sp-cip[aria-pressed="true"] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.sp-ikon-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    margin-right: 10px;
    font-size: .8rem;
    vertical-align: middle;
}
.sp-ikon-kutu.yesil { background: rgba(18, 201, 155, .15); color: var(--sp-yesil); border: 1px solid rgba(18, 201, 155, .35); }
.sp-ikon-kutu.sari { background: rgba(245, 183, 10, .15); color: var(--sp-sari); border: 1px solid rgba(245, 183, 10, .35); }
.sp-yildizlar { color: #f5b70a; letter-spacing: 1px; }

/* ---------------- Slider ---------------- */
.sp-slider-bolum { padding: 1.5rem 0 .5rem; }
.sp-slider { position: relative; border-radius: 32px; overflow: hidden; isolation: isolate; background: #1b1e21; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.sp-slaytlar { display: grid; }
.sp-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 540px;
    padding: 2.5rem 0 6rem;
    color: #fff;
    background: linear-gradient(135deg, var(--r1) 0%, var(--r2) 100%);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.015);
    transition: opacity .45s ease, transform .6s ease, visibility 0s linear .45s;
}
.sp-slide.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .6s ease; z-index: 1; }
.sp-slide-isik { position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, .22), transparent 38%),
    radial-gradient(circle at 12% 90%, rgba(255, 255, 255, .1), transparent 34%); }
.sp-slide-govde { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2rem; width: 100%; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }
.sp-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; margin-bottom: 1.2rem; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); font-size: .88rem; font-weight: 600; backdrop-filter: blur(6px); }
.sp-slide-baslik { margin: 0 0 1rem; color: #fff; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
.sp-vurgu { padding: 0 .1em; border-radius: .25em; color: #fff; background: linear-gradient(transparent 62%, rgba(255, 255, 255, .32) 62%); }
.sp-slide-aciklama { max-width: 560px; margin: 0 0 1.8rem; color: rgba(255, 255, 255, .92); font-size: 1.06rem; line-height: 1.6; }
.sp-slide-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sp-btn-ana { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 24px; border-radius: 40px; background: #fff; color: #1b1e21 !important; font-weight: 700; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); transition: transform .15s; }
.sp-btn-ana span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--r1); color: #fff; transition: transform .2s; }
.sp-btn-ana:hover { transform: translateY(-2px); }
.sp-btn-ana:hover span { transform: translateX(3px) rotate(-8deg); }
.sp-btn-hayalet { padding: 13px 24px; border-radius: 40px; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff !important; font-weight: 600; transition: background .15s; }
.sp-btn-hayalet:hover { background: rgba(255, 255, 255, .15); }
.sp-sayac { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .4); line-height: 1.15; font-size: .82rem; color: rgba(255, 255, 255, .8); }
.sp-sayac b { font-size: 1.35rem; color: #fff; }

.sp-slide-gorsel { position: relative; display: flex; justify-content: center; }
.sp-kemer {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 30px 30px;
    background: rgba(255, 255, 255, .12) center top / cover no-repeat;
    border: 6px solid rgba(255, 255, 255, .22);
    box-shadow: 0 34px 60px rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
}
.sp-kemer::before { content: ""; position: absolute; z-index: -1; inset: 10% -14% -6%; border-radius: 50%; background: rgba(255, 255, 255, .16); filter: blur(34px); }
.sp-kemer-ikon svg { width: 96px; height: 96px; }
.sp-kemer-ikon svg path { fill: #fff; stroke: #fff; }
.sp-kemer-ikon svg.only-stroke path { fill: none; }
.sp-kemer-ikon svg.only-fill path { stroke: none; }
.sp-balon {
    --c: var(--pt-l, #089cf1);
    position: absolute;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    animation: spYuz 5s ease-in-out infinite;
}
[data-bs-theme] .sp-balon { --c: var(--pt-l, #089cf1); }
.sp-balon svg { width: 26px; height: 26px; }
.sp-balon svg path { fill: var(--c); stroke: var(--c); }
.sp-balon svg.only-stroke path { fill: none; }
.sp-balon svg.only-fill path { stroke: none; }
.sp-balon-1 { top: 8%; left: 6%; }
.sp-balon-2 { top: 40%; right: 2%; animation-delay: -1.4s; }
.sp-balon-3 { bottom: 14%; left: 2%; animation-delay: -2.6s; }
.sp-balon-4 { top: -2%; right: 18%; width: 48px; height: 48px; animation-delay: -3.5s; }
@keyframes spYuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Sekme şeridi (alt) */
.sp-sekme-seridi { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 14px clamp(1rem, 4vw, 3rem) 16px; background: linear-gradient(0deg, rgba(0, 0, 0, .45), transparent); overflow-x: auto; scrollbar-width: none; }
.sp-sekme-seridi::-webkit-scrollbar { display: none; }
.sp-slide-sekme { flex: 1 1 0; min-width: 130px; display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; border: 0; background: transparent; color: rgba(255, 255, 255, .6); text-align: left; transition: color .2s; }
.sp-slide-sekme:hover, .sp-slide-sekme.aktif { color: #fff; }
.sp-sekme-no { font-size: .72rem; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.sp-sekme-ad { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sekme-cizgi { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.sp-sekme-dolgu { display: block; height: 100%; width: 0; background: #fff; }
.sp-slide-sekme.aktif .sp-sekme-dolgu { width: 100%; }
.sp-slider[data-otomatik="1"] .sp-slide-sekme.aktif .sp-sekme-dolgu { width: 0; animation: spDolgu var(--sp-sure, 6s) linear forwards; }
.sp-slider:hover .sp-sekme-dolgu, .sp-slider:focus-within .sp-sekme-dolgu { animation-play-state: paused; }
@keyframes spDolgu { from { width: 0; } to { width: 100%; } }

@media (max-width: 991.98px) {
    .sp-slide { min-height: 0; padding: 2rem 0 5.2rem; align-items: flex-start; }
    .sp-slide-govde { grid-template-columns: 1fr; gap: 1.4rem; }
    .sp-slide-gorsel { order: -1; }
    .sp-kemer { width: min(62%, 250px); aspect-ratio: 5 / 4; border-radius: 999px 999px 24px 24px; }
    .sp-slide-metin { text-align: center; }
    .sp-slide-aciklama { margin-inline: auto; }
    .sp-slide-eylem { justify-content: center; }
    .sp-balon { width: 46px; height: 46px; }
    .sp-balon svg { width: 21px; height: 21px; }
    .sp-balon-4 { display: none; }
}
@media (max-width: 575.98px) {
    .sp-slider { border-radius: 24px; }
    .sp-slide-sekme { min-width: 110px; }
    .sp-sekme-ad { font-size: .78rem; }
    .sp-slide-baslik { font-size: 1.7rem; }
    .sp-sayac { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-balon { animation: none; }
    .sp-slide, .sp-slide.aktif { transition: opacity .2s; transform: none; }
    .sp-slider[data-otomatik="1"] .sp-slide-sekme.aktif .sp-sekme-dolgu { animation: none; width: 100%; }
}

/* ---------------- İçindekiler + makale ---------------- */
.sp-toc {
    top: 110px;
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    border-radius: var(--sp-radius);
    padding: 1.1rem 1rem;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.sp-toc-baslik { font-weight: 700; margin-bottom: .8rem; font-size: .95rem; }
.sp-toc-liste { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.sp-toc-liste li { margin: 0; }
.sp-toc-liste a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--bs-body-color);
    font-size: .88rem;
    line-height: 1.35;
    border-left: 2px solid transparent;
}
.sp-toc-liste a:hover { background: var(--sp-kart-2); color: var(--bs-primary); }
.sp-toc-liste a.aktif { border-left-color: var(--bs-primary); color: var(--bs-primary); background: rgba(8, 156, 241, .08); font-weight: 600; }
.sp-toc-liste .sp-toc-3 a { padding-left: 24px; font-size: .83rem; opacity: .9; }
.sp-toc-mobil {
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    border-radius: 14px;
    padding: .8rem 1rem;
}
.sp-toc-mobil summary { font-weight: 600; cursor: pointer; }
.sp-toc-mobil .sp-toc-liste { margin-top: .6rem; }
.sp-makale-kutu {
    max-height: 560px;
    overflow-y: auto;
    padding: 1.6rem 1.8rem;
    border-radius: var(--sp-radius);
    scroll-behavior: smooth;
    height: auto !important;
}
.sp-makale-kutu h2 { font-size: 1.35rem; margin-top: 1.4rem; scroll-margin-top: 16px; }
.sp-makale-kutu h3 { font-size: 1.1rem; margin-top: 1.1rem; scroll-margin-top: 16px; }
.sp-makale-kutu img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---------------- Yorumlar ---------------- */
.sp-yorum-kart {
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    border-radius: var(--sp-radius);
    padding: 1.1rem 1.2rem;
}
.sp-puan-ozet { font-size: .95rem; }

/* ---------------- Filtre ---------------- */
.sp-filtre {
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    border-radius: var(--sp-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}
.sp-filtre-ust { display: flex; align-items: center; margin-bottom: .6rem; }
.sp-filtre-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.sp-filtre-grup + .sp-filtre-grup { border-top: 1px dashed var(--sp-cizgi); }
.sp-filtre-grup-ad { font-size: .85rem; font-weight: 600; min-width: 80px; opacity: .8; }
.sp-filtre-gizli { display: none !important; }

/* ---------------- Fiyat tablosu ---------------- */
.sp-fiyat-kutu {
    background: var(--sp-kart);
    border-radius: 36px;
    padding: clamp(1.5rem, 4vw, 4.5rem) clamp(1.2rem, 4vw, 5rem);
    box-shadow: 0 10px 40px rgba(20, 20, 60, .05);
}
.sp-fiyat-baslik { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.sp-fiyat-maddeler { list-style: none; padding: 0; margin: 0; }
.sp-fiyat-maddeler li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: .95rem; }
.sp-fiyat-maddeler li i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(18, 201, 155, .45);
    color: var(--sp-yesil);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sp-fiyat-tablo-sarmal {
    border: 1px solid var(--sp-cizgi);
    border-radius: 22px;
    overflow: hidden;
    overflow-x: auto;
}
.sp-fiyat-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sp-fiyat-tablo th, .sp-fiyat-tablo td { padding: 16px 22px; border-bottom: 1px solid var(--sp-cizgi); white-space: nowrap; }
.sp-fiyat-tablo th + th, .sp-fiyat-tablo td + td { border-left: 1px solid var(--sp-cizgi); }
.sp-fiyat-tablo thead th { font-weight: 700; background: var(--sp-kart-2); }
.sp-fiyat-tablo tbody tr:last-child td { border-bottom: 0; }
.sp-fiyat-tablo tbody tr:hover td { background: rgba(8, 156, 241, .04); }

/* ---------------- Platform ızgarası (sosyal-medya-hizmetleri) ---------------- */
.sp-kategori-sekmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.sp-kategori-sekme {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 22px 8px 8px;
    border-radius: 40px;
    border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart);
    color: var(--bs-body-color);
    font-weight: 600;
    transition: all .15s;
}
.sp-kategori-sekme .sp-sekme-ikon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sp-kart-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sp-kategori-sekme.aktif, .sp-kategori-sekme:hover { border-color: var(--bs-primary); color: var(--bs-body-color); }
.sp-kategori-sekme.aktif .sp-sekme-ikon { background: var(--bs-primary); color: #fff; }
.sp-kategori-yigin { position: relative; padding-bottom: 54px; }
.sp-kategori-yigin::before, .sp-kategori-yigin::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 27px;
    height: 60px;
    border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
    background: var(--sp-kart);
    opacity: .7;
    z-index: 0;
}
.sp-kategori-yigin::after { left: 6%; right: 6%; bottom: 0; opacity: .45; }
.sp-kategori-kart {
    position: relative;
    z-index: 1;
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    border-radius: var(--sp-radius-lg);
    padding: clamp(1.4rem, 3vw, 3.2rem);
}
.sp-kategori-kart .sp-buyuk-ikon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 10px 30px rgba(8, 156, 241, .35);
    margin-bottom: 2.5rem;
}
.sp-istat { display: flex; align-items: center; gap: 1rem; }
.sp-istat-ikon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--sp-kart-2);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex: 0 0 60px;
}
.sp-istat b { display: block; font-size: 1.05rem; }
.sp-pt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.sp-pt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    color: #fff !important;
    text-align: center;
    font-size: .92rem;
    line-height: 1.2;
    transition: transform .15s, box-shadow .15s;
    padding: .5rem;
}
.sp-pt-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.sp-pt-tile b { font-weight: 700; }
.sp-pt-tile .sp-pt-ikon svg { width: 26px; height: 26px; }
.sp-pt-tile .sp-pt-ikon svg path { fill: #fff; stroke: #fff; }
.sp-pt-tile .sp-pt-ikon svg.only-stroke path { fill: none; }
.sp-pt-tile.acik { color: #111 !important; }
.sp-pt-tile.acik .sp-pt-ikon svg path { fill: #111; stroke: #111; }
.sp-pt-tile.acik .sp-pt-ikon svg.only-stroke path { fill: none; }
.sp-tum-buton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 1.4rem;
    padding: 1.2rem;
    border-radius: 14px;
    background: var(--sp-kart-2);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    color: var(--bs-body-color);
}
.sp-tum-buton:hover { color: var(--bs-primary); }
@media (max-width: 1199.98px) { .sp-pt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .sp-pt-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; } .sp-pt-tile { font-size: .8rem; } }

/* ---------------- Hizmet kartları (başlayan fiyatlarla) ---------------- */
.sp-hizmet-kart {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart);
    height: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.sp-hizmet-kart:hover { border-color: var(--sp-pt, var(--bs-primary)); box-shadow: 0 8px 22px rgba(20, 20, 60, .06); }
.sp-hizmet-kart .sp-hizmet-ikon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 10px;
    background: var(--sp-pt, var(--bs-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.sp-hizmet-kart h2, .sp-hizmet-kart h3 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--bs-emphasis-color); }
.sp-hizmet-kart .sp-baslayan { font-size: .82rem; color: var(--sp-yesil); }
.sp-hizmet-kart .sp-baslayan b { font-weight: 700; }
.sp-hizmet-kart .sp-paket-sayi { font-size: .78rem; opacity: .7; }
.sp-hizmet-kart .sp-incele {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--sp-pt, var(--bs-primary));
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
}
.sp-hizmet-kart .sp-yeni-rozet {
    position: absolute;
    top: -11px;
    left: 92px;
    background: var(--sp-yesil);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}
@media (max-width: 575.98px) {
    .sp-hizmet-kart .sp-incele { padding: 10px 12px; font-size: .8rem; }
    .sp-hizmet-kart .sp-hizmet-ikon { width: 48px; height: 48px; flex-basis: 48px; }
}

/* ---------------- Kurumsal / kombo plan kartları ---------------- */
.sp-plan-baslik-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 2.5rem; }
.sp-plan-baslik-satir h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; font-weight: 600; }
.sp-plan-sekmeler {
    margin-left: auto;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 40px;
    border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart);
    flex-wrap: wrap;
}
.sp-plan-sekmeler button {
    border: 0;
    background: transparent;
    width: 76px;
    height: 46px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sp-plan-sekmeler button svg { width: 22px; height: 22px; }
.sp-plan-sekmeler button.aktif { background: var(--sp-pt, var(--bs-primary)); }
.sp-plan-sekmeler button.aktif svg path { fill: #fff; stroke: #fff; }
.sp-plan-sekmeler button.aktif svg.only-stroke path { fill: none; }
.sp-plan-kart {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sp-cizgi);
    border-radius: 10px;
    background: var(--sp-kart);
}
.sp-plan-kart.favori { border-color: var(--sp-yesil); }
.sp-plan-rozet {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sp-yesil);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.sp-plan-ust { display: flex; align-items: center; gap: 1rem; padding: 1.8rem 1.8rem 1.6rem; border-bottom: 1px solid var(--sp-cizgi); }
.sp-plan-ust .sp-plan-ikon {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background: var(--sp-pt, var(--bs-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
}
.sp-plan-ust .sp-plan-ikon svg { width: 24px; height: 24px; }
.sp-plan-ust .sp-plan-ikon svg path { fill: #fff; stroke: #fff; }
.sp-plan-ust .sp-plan-ikon svg.only-stroke path { fill: none; }
.sp-plan-ust .sp-plan-pt { color: var(--sp-pt, var(--bs-primary)); font-size: 1.35rem; line-height: 1.1; font-weight: 500; }
.sp-plan-ust .sp-plan-ad { color: var(--sp-pt, var(--bs-primary)); opacity: .85; font-size: .95rem; }
.sp-plan-ozellikler { list-style: none; padding: 0; margin: 0; flex: 1; }
.sp-plan-ozellikler li { display: flex; align-items: center; gap: 14px; padding: 13px 1.8rem; border-bottom: 1px solid var(--sp-cizgi); font-size: .9rem; }
.sp-plan-ozellikler li i { color: #4b5bdc; width: 16px; text-align: center; }
.sp-plan-ozellikler li.vurgu { background: rgba(18, 201, 155, .1); color: var(--sp-yesil); font-weight: 600; }
.sp-plan-ozellikler li.vurgu i { color: var(--sp-yesil); }
.sp-plan-alt { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.4rem 1.8rem; }
.sp-plan-fiyat s { display: block; font-size: .85rem; opacity: .5; }
.sp-plan-fiyat b { font-size: 1.45rem; color: var(--sp-yesil); font-weight: 700; white-space: nowrap; }
.sp-sepete-ekle {
    border: 0;
    background: var(--sp-yesil);
    color: #fff;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .15s;
}
.sp-sepete-ekle:hover { background: var(--sp-yesil-koyu); color: #fff; }

/* ---------------- Ücretsiz araç kartları ---------------- */
.sp-arac-kart {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart);
    height: 100%;
    color: var(--bs-body-color);
    transition: border-color .15s, transform .15s;
}
.sp-arac-kart:hover { border-color: var(--sp-pt, var(--bs-primary)); transform: translateY(-2px); color: var(--bs-body-color); }
.sp-arac-kart .sp-arac-ikon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 12px;
    background: var(--sp-pt, var(--bs-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.sp-arac-kart .sp-arac-ok { margin-left: auto; opacity: .5; }
.sp-arac-ozet { display: flex; flex-wrap: wrap; gap: .8rem; }
.sp-arac-ozet > div {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.sp-arac-ozet b { font-size: 1.2rem; }

/* ---------------- Breadcrumb (mevcut sayfalardakiyle aynı) ---------------- */
.custom-breadcrumb { padding: 0; margin: 0; background: transparent; list-style: none; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; }
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: " > "; margin: 0 4px; color: #ccc; }
.custom-breadcrumb .breadcrumb-item, .custom-breadcrumb .breadcrumb-item.active { color: #fff; }
.custom-breadcrumb .breadcrumb-item a { color: #eee; text-decoration: none; }
.custom-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
@media (max-width: 992px) { .custom-breadcrumb { justify-content: center; } }

/* ---------------- Sepete hızlı ekleme ---------------- */
.sp-hizli-modal .modal-content { border-radius: var(--sp-radius); border: 0; }
.sp-baslik-satir { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.sp-baslik-satir .sp-baslik-ikon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--sp-kart); color: var(--bs-primary); }
.sp-baslik-satir h2 { font-size: 1.25rem; margin: 0; font-weight: 600; }
.sp-baslik-satir p { margin: 0; opacity: .75; }

/* ---------------- Gece / gündüz anahtarı ---------------- */
.sp-tema {
    position: relative;
    width: 62px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 32px;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
}
.sp-tema-yol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #fff; font-size: .78rem; pointer-events: none; }
.sp-tema-top { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.sp-tema[aria-checked="true"] .sp-tema-top { transform: translateX(30px); }
.sp-tema:focus-visible, .sp-tema-mini:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.sp-tema-mini { position: relative; overflow: hidden; }
.sp-tema-mini i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .25s ease; }
.sp-tema-mini .sp-tema-gunes { transform: rotate(-90deg) scale(.4); opacity: 0; }
.sp-tema-mini .sp-tema-ay { transform: none; opacity: 1; }
.sp-tema-mini[aria-checked="false"] .sp-tema-gunes { transform: none; opacity: 1; }
.sp-tema-mini[aria-checked="false"] .sp-tema-ay { transform: rotate(90deg) scale(.4); opacity: 0; }

/* Geçiş: sağ üst köşeden yayılan daire (View Transitions); desteklenmiyorsa kısa renk geçişi */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2147483646; }
html.sp-tema-gecis *, html.sp-tema-gecis *::before, html.sp-tema-gecis *::after {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, box-shadow .25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    .sp-tema-top, .sp-tema-mini i { transition: none; }
}

/* ---------------- Sekmeli vitrin (anasayfa, sosyal medya, e-pin) ---------------- */
.sp-sekmeler {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 5px;
    margin: 0 auto 18px;
    width: fit-content;
    max-width: 100%;
    border-radius: 18px;
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-sekmeler::-webkit-scrollbar { display: none; }
.sp-sekme-kaydirici {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: var(--w, 0);
    transform: translateX(var(--x, 0));
    border-radius: 13px;
    background: var(--bs-primary);
    box-shadow: 0 6px 18px rgba(8, 156, 241, .35);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1);
}
.sp-sekme {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 600;
    white-space: nowrap;
    transition: color .15s;
}
.sp-sekme.aktif { color: #fff; }
.sp-sekme:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.sp-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 3vw, 2rem);
    border-radius: 28px;
    background: var(--sp-kart);
    border: 1px solid var(--sp-cizgi);
    animation: spPanelGir .16s ease-out;
}
.sp-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--bs-primary), #8b5cf6, #ec4899); }
@keyframes spPanelGir { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-panel-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 6px; }
.sp-panel-baslik { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sp-panel-ikon { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: #fff; font-size: 1.5rem; background: linear-gradient(135deg, var(--bs-primary), #7c5cff); box-shadow: 0 10px 24px rgba(124, 92, 255, .3); }
.sp-panel h2 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.sp-panel p { margin: 2px 0 0; opacity: .75; }
.sp-panel-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 30px; border: 1px solid var(--bs-primary); color: var(--bs-primary); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.sp-panel-link:hover { background: var(--bs-primary); color: #fff; }
.sp-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.1rem 0 1.4rem; }
.sp-cip-bilgi { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 30px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); font-size: .84rem; }
.sp-cip-bilgi i { color: var(--bs-primary); }

.sp-pt-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.sp-pt-kart {
    --c: var(--pt-l, #089cf1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sp-kart-2);
    border: 1px solid var(--sp-cizgi);
    color: var(--bs-body-color);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
[data-bs-theme=dark] .sp-pt-kart { --c: var(--pt-d, #3db4ff); }
.sp-pt-kart::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.sp-pt-kart:hover { transform: translateY(-3px); border-color: var(--c); color: var(--bs-body-color); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.sp-pt-disc { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--c); }
.sp-pt-disc svg { width: 22px; height: 22px; }
.sp-pt-disc svg path { fill: #fff; stroke: #fff; }
.sp-pt-disc svg.only-stroke path { fill: none; }
.sp-pt-disc svg.only-fill path { stroke: none; }
.sp-pt-metin { min-width: 0; line-height: 1.25; }
.sp-pt-metin b { display: block; font-size: .96rem; }
.sp-pt-metin small { display: block; opacity: .7; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pt-ok { margin-left: auto; opacity: .35; transition: transform .15s, opacity .15s; }
.sp-pt-kart:hover .sp-pt-ok { transform: translateX(3px); opacity: .8; }
.sp-daha-fazla { display: block; margin: 16px auto 0; padding: 9px 22px; border: 1px solid var(--sp-cizgi); border-radius: 30px; background: var(--sp-kart-2); color: var(--bs-body-color); font-weight: 600; }
.sp-daha-fazla:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.sp-bos { margin: 1.5rem 0 0; opacity: .7; }
@media (max-width: 575.98px) {
    .sp-sekme { padding: 9px 14px; font-size: .9rem; }
    .sp-pt-kartlar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sp-pt-kart { padding: 10px 8px 10px 14px; gap: 8px; }
    .sp-pt-disc { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
    .sp-pt-disc svg { width: 18px; height: 18px; }
        .sp-pt-ok { display: none; }
    .sp-pt-metin small { white-space: normal; }
    .sp-panel-link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sp-panel { animation: none; } .sp-sekme-kaydirici { transition: none; } }

/* Platform renklerinin gece/gündüz varyantları (satır içi --pt-l / --pt-d değişkenlerinden) */
[style*="--pt-l"] { --sp-pt: var(--pt-l); --c: var(--pt-l); }
[data-bs-theme=dark] [style*="--pt-d"] { --sp-pt: var(--pt-d); --c: var(--pt-d); }
.platform-section .sp-pt-disc { --c: var(--pt-l, #089cf1); background: var(--c); }

/* Arama kutusu */
.sp-arama { position: relative; max-width: 640px; margin: 0 auto; }
.sp-arama i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.sp-arama input {
    display: block; width: 100%; height: 56px; padding: 0 22px 0 50px;
    border-radius: 30px; border: 1px solid var(--sp-cizgi);
    background: var(--sp-kart); color: var(--bs-body-color);
    font-size: 1rem; outline: 0; box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    transition: border-color .15s, box-shadow .15s;
}
.sp-arama input::placeholder { color: var(--bs-secondary-color, #8a8f98); opacity: 1; }
.sp-arama input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(8, 156, 241, .16); }
.sp-arama input::-webkit-search-cancel-button { cursor: pointer; }

/* Başlık: orta genişlikte (992-1199px) menü sığsın */
.navbar .navbar-brand { flex: 0 0 auto; }
.navbar .btn { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .84rem; }
    .navbar .navbar-nav .nav-link > i { display: none; }
    .navbar .navbar-brand-item { max-height: 34px; width: auto; }
        .navbar .ms-lg-3 { margin-left: .4rem !important; }
    .navbar .nav.flex-row { flex-wrap: nowrap; }
    .navbar .nav.flex-row .hw-3rem { width: 2.6rem; height: 2.6rem; }
        .navbar .btn.h-3rem { padding-inline: .7rem; font-size: .84rem; }
    .navbar li:has(> a.notif) { display: none; }
}

/* Yapışkan header: 992px ve üstünde sabitlenir; butonlar küçülür */
@media (min-width: 992px) {
    header.header-sticky-on { position: fixed; z-index: 1040; top: 0; left: 0; right: 0; width: 100%; animation: fadeInDown .35s; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
    header.header-sticky-on .navbar { padding-top: .35rem; padding-bottom: .35rem; }
    header.header-sticky-on .navbar-brand .navbar-brand-item { height: 32px; }
    header.header-sticky-on .hw-3rem { width: 2.4rem !important; height: 2.4rem !important; font-size: .9rem; }
    header.header-sticky-on .h-3rem { height: 2.4rem !important; font-size: .85rem; padding-inline: .8rem; }
    header.header-sticky-on .sp-tema-mini i { font-size: .95rem; }
    header.header-sticky-on .notif-badge { transform: scale(.85); }
}

/* Hizmet kartları: taşma düzeltmesi ve hover */
.sp-hizmet-kart { min-width: 0; overflow: hidden; }
.sp-hizmet-kart .min-w-0 { min-width: 0; flex: 1 1 auto; }
.sp-hizmet-kart h2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.sp-hizmet-kart .sp-paket-sayi { opacity: .75; }
.sp-hizmet-kart .sp-incele {
    position: relative; display: inline-flex; align-items: center; gap: 0; overflow: hidden;
    flex: 0 0 auto; transition: background .2s, box-shadow .2s, padding .2s, transform .2s;
}
.sp-hizmet-kart .sp-incele::after {
    content: "\F138"; font-family: "bootstrap-icons"; font-size: .95rem; line-height: 1;
    width: 0; opacity: 0; transform: translateX(-6px); transition: width .2s, opacity .2s, transform .2s, margin .2s;
}
.sp-hizmet-kart:hover .sp-incele, .sp-hizmet-kart:focus-visible .sp-incele {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22); filter: brightness(1.08); transform: translateY(-1px);
}
.sp-hizmet-kart:hover .sp-incele::after, .sp-hizmet-kart:focus-visible .sp-incele::after { width: 1em; margin-left: 8px; opacity: 1; transform: none; }
.sp-hizmet-kart:hover .sp-hizmet-ikon { transform: rotate(-6deg) scale(1.05); }
.sp-hizmet-kart .sp-hizmet-ikon { transition: transform .2s; }
@media (max-width: 1399.98px) and (min-width: 992px) {
    .sp-hizmet-kart .sp-incele { padding: 10px 14px; font-size: .85rem; }
}
@media (max-width: 575.98px) {
    .sp-hizmet-kart { flex-wrap: wrap; }
    .sp-hizmet-kart .sp-incele { width: 100%; justify-content: center; }
}

/* Kurumsal / kombo platform sekmeleri */
.sp-plan-pt-btn svg path { fill: var(--sp-pt); stroke: var(--sp-pt); }
.sp-plan-pt-btn svg.only-stroke path { fill: none; }
.sp-plan-pt-btn svg.only-fill path { stroke: none; }
.sp-plan-sekmeler .sp-plan-pt-btn.aktif svg path { fill: #fff; stroke: #fff; }
.sp-plan-sekmeler .sp-plan-pt-btn.aktif svg.only-stroke path { fill: none; }
.sp-plan-sekmeler .sp-plan-pt-btn.aktif svg.only-fill path { stroke: none; }
.sp-plan-sekmeler button:not(.aktif):hover { background: var(--sp-kart-2); }

/* Değerlendirme özeti */
.sp-puan-kutu { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 16px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); }
.sp-puan-buyuk { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--bs-primary); }

/* ---------------- E-Pin ürün sayfası ---------------- */
.sp-ep { --c: var(--pt-l, #089cf1); position: relative; padding: 1.5rem 0 1rem; }
[data-bs-theme=dark] .sp-ep { --c: var(--pt-d, #3db4ff); }
.sp-ep-bant {
    position: absolute; left: 0; right: 0; top: 0; height: 230px; z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--c) 35%, transparent), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .06), transparent 40%),
        #1d1f2b;
}
.sp-ep .container { position: relative; z-index: 1; }
.sp-ep-izgara { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.sp-ep-kart { background: var(--sp-kart); border: 1px solid var(--sp-cizgi); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.sp-ep-sol, .sp-ep-sag { position: sticky; top: 100px; }

.sp-ep-kapak { aspect-ratio: 400 / 430; background: color-mix(in srgb, var(--c) 20%, #1d1f2b); display: grid; place-items: center; }
.sp-ep-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-ep-kapak-ikon { font-size: 5rem; color: #fff; }
.sp-ep-kapak-ikon svg { width: 96px; height: 96px; }
.sp-ep-kapak-ikon svg path { fill: #fff; }
.sp-ep-sol-govde { padding: 18px 20px 6px; }
.sp-ep-aciklama { font-size: .92rem; line-height: 1.55; opacity: .8; margin-bottom: 14px; }
.sp-ep-puan { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sp-cizgi); color: var(--bs-body-color); }
.sp-ep-puan:hover { color: var(--bs-body-color); }
.sp-ep-puan-ikon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sp-kart-2); color: var(--c); font-size: 1.1rem; }
.sp-ep-puan small { display: block; font-size: .8rem; opacity: .7; }
.sp-ep-puan b { font-size: 1.05rem; font-weight: 600; }

.sp-ep-yol { margin-bottom: 4px; }
.sp-ep-yol .custom-breadcrumb { font-size: .8rem; justify-content: flex-start; }
.sp-ep-baslik { color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 1.15; margin: 0 0 16px; }
.sp-ep-baslik span { display: block; color: var(--c); font-size: 1.15rem; font-weight: 600; }
[data-bs-theme=light] .sp-ep-baslik span { color: color-mix(in srgb, var(--c) 70%, #fff); }

.sp-ep-sekmeler { position: relative; display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sp-ep-sekmeler .sp-sekme-kaydirici { background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent); }
.sp-ep-sekme { position: relative; z-index: 1; border: 0; background: transparent; color: rgba(255, 255, 255, .78); padding: 9px 26px; border-radius: 12px; font-weight: 500; white-space: nowrap; transition: color .15s; }
.sp-ep-sekme.aktif { color: #fff; }

.sp-ep-liste { display: flex; flex-direction: column; gap: 10px; }
.sp-ep-paket {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
    padding: 10px 18px 10px 10px; border-radius: 20px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sp-ep-paket:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.sp-ep-thumb {
    position: relative; width: 92px; height: 92px; border-radius: 14px; overflow: hidden;
    background: color-mix(in srgb, var(--c) 30%, #1d1f2b) center / cover no-repeat;
    display: flex; align-items: flex-end; justify-content: center;
}
.sp-ep-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .78) 100%); }
.sp-ep-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ep-thumb-yazi { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; padding-bottom: 10px; color: #fff; text-align: center; }
.sp-ep-thumb-yazi b { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.sp-ep-thumb-yazi em { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: color-mix(in srgb, var(--c) 55%, #fff); margin-top: 3px; }
.sp-ep-thumb-yazi b:only-child, .sp-ep-thumb-yazi em:only-child { font-size: 1rem; color: #fff; }
.sp-ep-bilgi h2 { font-size: 1.08rem; font-weight: 600; margin: 0 0 2px; }
.sp-ep-bilgi p { margin: 0 0 6px; font-size: .85rem; opacity: .7; }
.sp-ep-stok { display: inline-block; padding: 3px 12px; border-radius: 8px; font-size: .74rem; font-weight: 600; background: rgba(18, 201, 155, .14); color: #0f9d7a; }
[data-bs-theme=dark] .sp-ep-stok { color: #3ddbb0; }
.sp-ep-stok.yok { background: rgba(220, 53, 69, .14); color: #dc3545; }
.sp-ep-fiyat { text-align: right; line-height: 1.15; white-space: nowrap; }
.sp-ep-fiyat s { display: block; font-size: .78rem; opacity: .5; }
.sp-ep-fiyat b { font-size: 1.15rem; font-weight: 700; }
.sp-ep-al {
    display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; padding: 13px 20px;
    background: var(--c); color: #fff; font-weight: 600; white-space: nowrap; transition: filter .15s, transform .15s, box-shadow .15s;
}
.sp-ep-al:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 40%, transparent); }
.sp-ep-al:disabled { background: var(--sp-kart-2); color: var(--bs-body-color); opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.sp-ep-ozellik-baslik { padding: 18px 20px; background: var(--c); color: #fff; text-align: center; font-weight: 400; }
.sp-ep-ozellik-baslik b { font-weight: 600; }
.sp-ep-ozellik dl { margin: 0; }
.sp-ep-ozellik dl > div { padding: 12px 20px; border-bottom: 1px solid var(--sp-cizgi); }
.sp-ep-ozellik dl > div:last-child { border-bottom: 0; }
.sp-ep-ozellik dt { font-size: .8rem; font-weight: 400; opacity: .65; }
.sp-ep-ozellik dd { margin: 0; font-weight: 600; }

@media (max-width: 1199.98px) {
    .sp-ep-izgara { grid-template-columns: 240px minmax(0, 1fr); }
    .sp-ep-sag { grid-column: 1; position: static; }
    .sp-ep-sol { grid-row: 1; }
    .sp-ep-orta { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 767.98px) {
    .sp-ep-bant { height: 170px; }
    .sp-ep-izgara { grid-template-columns: 1fr; gap: 14px; }
    .sp-ep-sol, .sp-ep-sag, .sp-ep-orta { position: static; grid-column: 1; grid-row: auto; }
    .sp-ep-orta { order: -1; }
    .sp-ep-kapak-kart { display: grid; grid-template-columns: 110px 1fr; }
    .sp-ep-kapak { aspect-ratio: auto; height: 100%; }
    .sp-ep-sol-govde { padding: 12px 14px 0; }
    .sp-ep-aciklama { font-size: .82rem; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .sp-ep-puan { padding: 8px 0; }
    .sp-ep-paket { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 8px; }
    .sp-ep-thumb { width: 70px; height: 70px; grid-row: 1 / span 2; }
    .sp-ep-bilgi { grid-column: 2; grid-row: 1; }
    .sp-ep-bilgi p { display: none; }
    .sp-ep-thumb-yazi b { font-size: 1.1rem; }
    .sp-ep-fiyat { grid-column: 2; text-align: left; }
    .sp-ep-al { grid-column: 3; grid-row: 1 / span 2; padding: 11px 14px; }
    .sp-ep-al i { display: none; }
}

/* ---------------- Mega menüler ---------------- */
.sp-mega { padding: 22px 0 26px; border: 1px solid var(--sp-cizgi); box-shadow: 0 24px 50px rgba(0, 0, 0, .18); background: var(--sp-kart) !important; }
.sp-mega-ust { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--sp-cizgi); }
.sp-mega-ust-ikon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, var(--bs-primary), #7c5cff); }
.sp-mega-ust-metin b { display: block; font-size: 1.08rem; font-weight: 600; }
.sp-mega-ust-metin span { font-size: .9rem; opacity: .75; }
.sp-mega-ust-metin span b { display: inline; font-size: inherit; color: var(--bs-primary); opacity: 1; }
.sp-mega-tum { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 30px; background: var(--bs-primary); color: #fff !important; font-weight: 500; font-size: .9rem; white-space: nowrap; transition: box-shadow .15s, transform .15s; }
.sp-mega-tum:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(8, 156, 241, .35); }
.sp-mega-tum i { transition: transform .15s; }
.sp-mega-tum:hover i { transform: translateX(3px); }
.sp-mega-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sp-mega-kart { padding: 10px 12px 10px 16px; }
.sp-mega-kart .sp-pt-disc { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
.sp-mega-kart .sp-pt-disc svg { width: 19px; height: 19px; }
.sp-mega-kart .sp-pt-disc i, .sp-pt-disc > i { color: #fff; font-size: 1.1rem; }

.sp-mega-araclar { columns: 4 230px; column-gap: 14px; }
.sp-mega-arac-grup { --c: var(--pt-l, #089cf1); break-inside: avoid; margin-bottom: 14px; padding: 12px; border-radius: 16px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); }
[data-bs-theme=dark] .sp-mega-arac-grup { --c: var(--pt-d, #3db4ff); }
.sp-mega-arac-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--bs-body-color); }
.sp-mega-arac-baslik:hover { color: var(--bs-body-color); }
.sp-mega-arac-baslik .sp-pt-disc { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
.sp-mega-arac-baslik .sp-pt-disc svg { width: 17px; height: 17px; }
.sp-mega-arac-baslik b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.1; }
.sp-mega-arac-baslik small { opacity: .65; font-size: .76rem; }
.sp-mega-arac-grup ul { list-style: none; margin: 0; padding: 0; }
.sp-mega-arac-grup li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--bs-body-color); font-size: .88rem; transition: background .12s, color .12s; }
.sp-mega-arac-grup li a i { width: 18px; text-align: center; color: var(--c); }
.sp-mega-arac-grup li a:hover { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }

.sp-mega-kurumsal { display: grid; grid-template-columns: 1.1fr 1.2fr .9fr; gap: 22px; align-items: stretch; }
.sp-mega-kurumsal-gorsel img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 18px; }
.sp-mega-kurumsal-baslik { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.sp-mega-kurumsal-metin p { font-size: .9rem; line-height: 1.6; opacity: .8; }
.sp-mega-kurumsal-metin .sp-mega-tum { margin-left: 0; }
.sp-mega-baglantilar { list-style: none; margin: 0; padding: 10px; border-radius: 16px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); }
.sp-mega-baglantilar a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--bs-body-color); font-size: .92rem; transition: background .12s; }
.sp-mega-baglantilar a i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--bs-primary) 14%, transparent); color: var(--bs-primary); }
.sp-mega-baglantilar a:hover { background: var(--sp-kart); color: var(--bs-primary); }

/* ---------------- Yazı tipi ve kalınlıklar ---------------- */
:root, [data-bs-theme] { --bs-body-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-body-font-weight: 400; }
body { font-family: var(--bs-body-font-family); font-weight: 400; letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--bs-body-font-family); font-weight: 600; }
b, strong { font-weight: 600; }
.fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light, .fw-lighter { font-weight: 300 !important; }
.btn { font-weight: 500; }
.nav-link { font-weight: 500; }
footer, footer a, footer span, footer p, footer li { font-weight: 400; }
footer .fs-5, footer h2, footer h3 { font-weight: 500 !important; }
footer b { font-weight: 500; }

/* ---- Platform kartları: büyük ikon / kategori görseli ---- */
.sp-pt-kart { padding: 12px 14px 12px 20px; gap: 14px; }
.sp-pt-disc { flex-basis: 58px; width: 58px; height: 58px; border-radius: 16px; }
.sp-pt-disc svg { width: 30px; height: 30px; }
.sp-pt-disc > i { font-size: 1.5rem; }
.sp-pt-disc.sp-pt-foto { background: var(--sp-kart); overflow: hidden; }
.sp-pt-disc.sp-pt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-mega-kart .sp-pt-disc { flex-basis: 52px; width: 52px; height: 52px; border-radius: 14px; }
.sp-mega-kart .sp-pt-disc svg { width: 26px; height: 26px; }
.sp-mega-arac-baslik .sp-pt-disc { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
.sp-mega-arac-baslik .sp-pt-disc svg { width: 22px; height: 22px; }
@media (max-width: 767.98px) {
    .sp-pt-disc { flex-basis: 46px; width: 46px; height: 46px; border-radius: 13px; }
    .sp-pt-disc svg { width: 24px; height: 24px; }
}
@media (max-width: 575.98px) {
    .sp-pt-disc { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
    .sp-pt-disc svg { width: 21px; height: 21px; }
    .sp-pt-kart { padding: 10px 8px 10px 16px; }
}

/* ---- E-Pin ürün sayfası: site geneliyle uyumlu yerleşim ---- */
.sp-ep { margin-top: -4.2rem; padding: 0 0 1rem; }
.sp-ep-bant { display: none; }
.sp-ep-sol, .sp-ep-sag { top: 90px; }
.sp-ep-kart-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sp-cizgi); }
.sp-ep-kart-baslik { font-weight: 600; font-size: 1.02rem; }
.sp-ep-kart-baslik i { color: var(--c); margin-right: 6px; }
.sp-ep-kart-govde { padding: 16px; }
.sp-ep-sekmeler { margin: 0; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); }
.sp-ep-sekme { color: var(--bs-body-color); opacity: .75; }
.sp-ep-sekme.aktif { color: #fff; opacity: 1; }
.sp-ep-paket { background: var(--sp-kart-2); box-shadow: none; }
.sp-ep-rozetler { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 14px; border-top: 1px solid var(--sp-cizgi); font-size: .88rem; }
.sp-ep-rozetler i { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.sp-ep-ozellik-liste { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-ep-oz { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); }
.sp-ep-oz > i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; font-size: 1.05rem; }
.sp-ep-oz small { display: block; font-size: .76rem; opacity: .65; }
.sp-ep-oz b { font-weight: 600; font-size: .94rem; }
@media (max-width: 767.98px) {
    .sp-ep { margin-top: -3rem; }
    .sp-ep-kart-ust { padding: 12px 14px; }
    .sp-ep-kart-govde { padding: 10px; }
}

/* ---- İkon kutuları tam ortalı ---- */
.icon-sm, .icon-md, .icon-lg, .icon-xl { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.icon-lg > i, .icon-md > i { line-height: 1; display: block; }
.icon-lg > svg, .icon-md > svg { width: 1.4rem; height: 1.4rem; }
/* ---- Hero özet çipleri ---- */
.sp-hero-cip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 20px; background: rgba(255, 255, 255, .12); font-weight: 500; }
.sp-hero-cip i { color: #7fe0a8; }

/* ---- Açık mega menü her şeyin üstünde ---- */
header.header-sticky:has(.sp-menu.sp-show), header:has(.sp-menu.sp-show) { z-index: 2147483000 !important; }
.sp-menu.sp-show { z-index: 2147483000 !important; }

/* ---- Üst çubuk: son teslimatlar ---- */
.sp-satis { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; min-width: 330px; max-width: 420px; padding: 0 6px 0 14px; border-radius: 30px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sp-satis-nokta { flex: 0 0 8px; height: 8px; border-radius: 50%; background: #2ee59d; box-shadow: 0 0 0 0 rgba(46, 229, 157, .6); animation: spNabiz 1.8s infinite; }
@keyframes spNabiz { 70% { box-shadow: 0 0 0 7px rgba(46, 229, 157, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 229, 157, 0); } }
.sp-satis-oge { position: absolute; left: 30px; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; color: #fff; font-size: .8rem; white-space: nowrap; opacity: 0; transform: translateY(70%); pointer-events: none; transition: opacity .4s, transform .4s; }
.sp-satis-oge.aktif { opacity: 1; transform: none; pointer-events: auto; }
.sp-satis-oge.cikis { opacity: 0; transform: translateY(-70%); }
.sp-satis-ikon { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #fff; }
.sp-satis-ikon svg { width: 13px; height: 13px; }
.sp-satis-ikon svg path { fill: var(--bs-primary); stroke: var(--bs-primary); }
.sp-satis-ad { overflow: hidden; text-overflow: ellipsis; font-weight: 500; max-width: 170px; }
.sp-satis-durum { opacity: .85; }
.sp-satis-durum i { color: #8bf5c9; }
.sp-satis-zaman { margin-left: auto; opacity: .7; font-size: .75rem; }
.nav.flex-row > li.nav-item { margin-left: .4rem !important; margin-right: 0 !important; }
.nav.flex-row > li.nav-item:first-child { margin-left: .75rem !important; }

/* ---- Çok renkli platform ikonları (Clubhouse, Likee, Dlive): beyaz zemin ---- */
:where(span, div, a):has(> svg.sp-ikon-renkli) { background: #fff !important; }
svg.sp-ikon-renkli path { stroke: none !important; }
.sp-pt-disc:has(> svg.sp-ikon-renkli) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* ---- Anasayfa: Popüler Oyunlar ---- */
.sp-populer-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sp-populer-baslik { display: flex; align-items: center; gap: 14px; }
.sp-populer-baslik h2 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.sp-populer-baslik p { margin: 0; opacity: .7; font-size: .92rem; }
.sp-populer-izgara { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sp-oyun { --c: var(--pt-l, #089cf1); position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: #1d1f2b; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: transform .25s, box-shadow .25s; }
[data-bs-theme=dark] .sp-oyun { --c: var(--pt-d, #3db4ff); }
.sp-oyun img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sp-oyun::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85) 100%); }
.sp-oyun-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; }
.sp-oyun-alt b { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.15; }
.sp-oyun-alt small { display: block; margin-top: 4px; opacity: .8; font-size: .8rem; }
.sp-oyun-alt::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 4px; background: var(--c); margin-bottom: 10px; transition: width .25s; }
.sp-oyun-git { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); opacity: 0; transform: translate(-6px, 6px); transition: .25s; }
.sp-oyun:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0, 0, 0, .28); }
.sp-oyun:hover img { transform: scale(1.07); }
.sp-oyun:hover .sp-oyun-alt::before { width: 64px; }
.sp-oyun:hover .sp-oyun-git { opacity: 1; transform: none; }
@media (max-width: 991.98px) {
    .sp-populer-izgara { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; scrollbar-width: none; }
    .sp-populer-izgara::-webkit-scrollbar { display: none; }
    .sp-oyun { flex: 0 0 62%; max-width: 260px; scroll-snap-align: start; }
}

/* ---- Hizmet (paketler) sayfası: 3 sütun ---- */
.sp-hz-liste { display: flex; flex-direction: column; gap: 6px; padding: 12px; max-height: 52vh; overflow-y: auto; }
.sp-hz-oge { --c: var(--pt-l, #089cf1); display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--bs-body-color); font-size: .9rem; border: 1px solid transparent; transition: background .15s, border-color .15s; }
[data-bs-theme=dark] .sp-hz-oge { --c: var(--pt-d, #3db4ff); }
.sp-hz-oge:hover { background: var(--sp-kart-2); color: var(--bs-body-color); }
.sp-hz-oge.aktif { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); font-weight: 600; }
.sp-hz-oge-ikon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; }
.sp-hz-oge span:last-child { line-height: 1.2; }
.sp-hz-sol .sp-ep-kart { border-radius: 18px; }
@media (min-width: 992px) {
    .sp-hz3 .allPacketsDiv, .sp-hz3 .innerCategories { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sp-hz3 .allPacketsDiv, .sp-hz3 .innerCategories { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------------- Giriş / Kayıt kartı ---------------- */
.sp-auth { width: 100%; max-width: 440px; margin: 0 auto; padding: 28px 28px 24px; border-radius: 26px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); box-shadow: 0 30px 70px rgba(0, 0, 0, .28); color: var(--bs-body-color); text-align: center; }
.sp-auth[hidden], .sp-auth [hidden] { display: none !important; }
.sp-auth-logo img { width: 64px; height: 64px; }
.sp-auth-baslik { font-size: 1.35rem; font-weight: 600; margin: 14px 0 4px; }
.sp-auth-alt { font-size: .85rem; opacity: .65; margin: 0 0 18px; }
.sp-auth-sekmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 18px; border-radius: 14px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); }
.sp-auth-sekmeler button { border: 0; border-radius: 10px; padding: 10px; background: transparent; color: var(--bs-body-color); font-weight: 600; font-size: .85rem; letter-spacing: .02em; opacity: .65; transition: background .15s, color .15s, opacity .15s; }
.sp-auth-sekmeler button.aktif { background: var(--bs-primary); color: #fff; opacity: 1; box-shadow: 0 6px 16px rgba(8, 156, 241, .35); }
.sp-auth-sosyal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-auth-sb { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); color: var(--bs-body-color); text-align: left; transition: border-color .15s, transform .15s; }
.sp-auth-sb:hover { border-color: var(--bs-primary); color: var(--bs-body-color); transform: translateY(-1px); }
.sp-auth-sb small { display: block; font-size: .68rem; opacity: .65; }
.sp-auth-sb b { font-size: .98rem; font-weight: 600; }
.sp-auth-sb .bi-apple { font-size: 1.4rem; }
.sp-auth-ayrac { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: .8rem; opacity: .6; }
.sp-auth-ayrac::before, .sp-auth-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--sp-cizgi); }
.sp-auth-panel { text-align: left; }
.sp-auth-alan { position: relative; display: flex; align-items: stretch; width: 100%; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.sp-auth-alan:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(8, 156, 241, .18); }
.sp-auth-ikon { flex: 0 0 52px; display: grid; place-items: center; background: var(--sp-kart-2); color: var(--bs-primary); font-size: 1.1rem; }
.sp-auth-alan input, .sp-auth-alan select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 15px 14px; color: var(--bs-body-color); font-size: .95rem; }
.sp-auth-alan input::placeholder { opacity: .5; }
.sp-auth-alan select { appearance: none; }
.sp-auth-goz { border: 0; background: transparent; padding: 0 14px; color: var(--bs-body-color); opacity: .55; }
.sp-auth-guc { align-self: center; margin-right: 4px; font-size: .72rem; font-weight: 600; white-space: nowrap; color: #e03131; }
.sp-auth-guc[data-p="2"] { color: #f08c00; } .sp-auth-guc[data-p="3"], .sp-auth-guc[data-p="4"] { color: #2f9e44; }
.sp-auth-not { margin: 4px 0 16px; text-align: center; font-size: .82rem; opacity: .75; }
.sp-auth-not a { font-weight: 600; opacity: 1; }
.sp-auth-btn { display: block; width: 100%; padding: 15px; border: 0; border-radius: 14px; background: var(--bs-primary); color: #fff; font-weight: 700; letter-spacing: .03em; font-size: .9rem; transition: filter .15s, transform .15s, box-shadow .15s; }
.sp-auth-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(8, 156, 241, .35); }
.sp-auth-btn:disabled { opacity: .6; pointer-events: none; }
.sp-auth-detay { margin: 2px 0 12px; font-size: .84rem; }
.sp-auth-detay summary { cursor: pointer; opacity: .75; padding: 4px 0 8px; }
.sp-auth-onay { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; margin: 0 0 12px; line-height: 1.4; }
.sp-auth-onay input { margin-top: 3px; flex: 0 0 auto; }
.sp-auth-sozlesme { max-height: 180px; overflow-y: auto; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--sp-kart-2); font-size: .8rem; text-align: left; }
/* Telefon: bayrak seçici */
.sp-auth-tel { overflow: visible; }
.sp-auth-tel .iti { width: 100%; display: block; }
.sp-auth-tel .iti input { width: 100%; padding: 15px 14px 15px 0; }
.sp-auth-tel .iti__flag-container { }
.sp-auth-tel .iti__selected-flag { background: var(--sp-kart-2); border-radius: 13px 0 0 13px; padding: 0 12px; }
.sp-auth-tel .iti__selected-dial-code { color: var(--bs-body-color); }
.sp-auth-tel .iti__country-list { background: var(--sp-kart); color: var(--bs-body-color); border: 1px solid var(--sp-cizgi); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); max-width: 300px; }
.sp-auth-tel .iti__country.iti__highlight { background: var(--sp-kart-2); }
.sp-auth-tel .iti__divider { border-color: var(--sp-cizgi); }
/* Pencere ve sayfa */
#spAuthModal .modal-content { background: transparent; border: 0; }
#spAuthModal .modal-dialog { max-width: 470px; }
#spAuthModal .sp-auth { position: relative; max-height: calc(100vh - 40px); overflow-y: auto; }
.sp-auth-kapat { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sp-kart-2); color: var(--bs-body-color); }
.sp-auth-sayfa { min-height: 100vh; display: grid; place-items: center; padding: 28px 14px; }
@media (max-width: 480px) { .sp-auth { padding: 22px 16px 18px; border-radius: 22px; } .sp-auth-sosyal { grid-template-columns: 1fr; } }

/* ---- İkon kutuları: d-*-block ile birlikte de ortalı kalsın ---- */
.icon-sm.d-block, .icon-md.d-block, .icon-lg.d-block, .icon-xl.d-block { display: inline-flex !important; }
@media (min-width: 576px) { .icon-sm.d-sm-block, .icon-md.d-sm-block, .icon-lg.d-sm-block, .icon-xl.d-sm-block { display: inline-flex !important; } }
@media (min-width: 768px) { .icon-sm.d-md-block, .icon-md.d-md-block, .icon-lg.d-md-block, .icon-xl.d-md-block { display: inline-flex !important; } }
@media (min-width: 992px) { .icon-sm.d-lg-block, .icon-md.d-lg-block, .icon-lg.d-lg-block, .icon-xl.d-lg-block { display: inline-flex !important; } }
@media (min-width: 1200px) { .icon-sm.d-xl-block, .icon-md.d-xl-block, .icon-lg.d-xl-block, .icon-xl.d-xl-block { display: inline-flex !important; } }
.icon-lg > svg, .icon-md > svg { width: 1.45rem; height: 1.45rem; }
.hero-ikon svg, .icon-lg svg path { }
.sp-hero-cip i { color: #fff; }

/* ---- Filtre: yan yana, tam genişlik ---- */
.sp-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding: 14px 18px; }
.sp-filtre-ust { margin: 0; }
.sp-filtre-grup { padding: 0; border: 0 !important; flex-wrap: wrap; }
.sp-filtre-grup-ad { min-width: 0; }
.sp-filtre-sonuc { flex: 0 0 100%; margin: 0 !important; }

/* ---- Bölümler: aynı yuvarlak kart görünümü ---- */
.sp-bolum-kart > .container { position: relative; padding-top: 30px; padding-bottom: 30px; }
.sp-bolum-kart > .container::before { content: ""; position: absolute; inset: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); border-radius: 26px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); z-index: 0; }
.sp-bolum-kart > .container > * { position: relative; z-index: 1; margin-left: 20px; margin-right: 20px; }
.sp-bolum-kart > .container > .row { margin-left: 8px; margin-right: 8px; }
.sp-bolum-kart .accordion-button { border-radius: 14px; }
.sp-nasil-kart { padding: 16px; border-radius: 26px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); }
.sp-nasil-kart img { border-radius: 20px !important; }
@media (max-width: 575.98px) { .sp-bolum-kart > .container > * { margin-left: 8px; margin-right: 8px; } }

/* ---------------- Platform karoları (gradyanlı / fotoğraflı) ---------------- */
.sp-tile-izgara, .sp-mega-izgara, .sp-mega-araclar { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; columns: auto; }
.sp-tile-izgara-foto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sp-tile { --c: var(--pt-l, #089cf1); position: relative; }
[data-bs-theme=dark] .sp-tile { --c: var(--pt-d, #3db4ff); }
.sp-tile-link { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1; padding: 16px; overflow: hidden; border-radius: 22px; color: #fff; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 52%, #000)); box-shadow: 0 8px 22px rgba(0, 0, 0, .16); transition: transform .25s, box-shadow .25s; }
.sp-tile-foto .sp-tile-link { aspect-ratio: 3 / 4; padding: 0; background: #1d1f2b; }
.sp-tile-link:hover { color: #fff; transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0, 0, 0, .28); }
.sp-tile-link::before { content: ""; position: absolute; right: -28px; top: -28px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: transform .35s; }
.sp-tile-foto .sp-tile-link::before { display: none; }
.sp-tile-link:hover::before { transform: scale(1.35); }
.sp-tile-ikon { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); }
.sp-tile-ikon svg { width: 28px; height: 28px; }
.sp-tile-ikon svg path { fill: #fff; stroke: #fff; }
.sp-tile-ikon svg.only-stroke path { fill: none; }
.sp-tile-ikon svg.only-fill path { stroke: none; }
.sp-tile-ikon > i { font-size: 1.5rem; color: #fff; }
.sp-tile-ikon:has(> svg.sp-ikon-renkli) { background: #fff !important; }
.sp-tile-ikon svg.sp-ikon-renkli path { stroke: none; }
.sp-tile-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sp-tile-foto .sp-tile-link:hover img { transform: scale(1.07); }
.sp-tile-foto .sp-tile-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .86) 100%); }
.sp-tile-metin { position: relative; z-index: 1; display: block; line-height: 1.2; }
.sp-tile-foto .sp-tile-metin { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; }
.sp-tile-metin b { display: block; font-size: 1.08rem; font-weight: 600; }
.sp-tile-metin em { display: block; font-style: normal; font-size: .82rem; opacity: .85; }
.sp-tile-metin small { display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 20px; background: rgba(255, 255, 255, .2); font-size: .74rem; font-weight: 500; }
.sp-tile-git { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); opacity: 0; transform: translate(-6px, 6px); transition: .25s; }
.sp-tile-link:hover .sp-tile-git { opacity: 1; transform: none; }
.sp-tile-link:hover .sp-tile-ikon { transform: scale(1.06); }
.sp-tile-ikon { transition: transform .25s; }
/* Ücretsiz araçlar: üzerine gelince araç listesi */
.sp-tile-aracli .sp-tile-link { aspect-ratio: auto; min-height: 138px; }
.sp-tile-arac { position: absolute; left: 0; top: calc(100% - 6px); z-index: 5; width: 300px; max-width: 80vw; padding: 10px; border-radius: 16px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; max-height: 300px; overflow-y: auto; }
.sp-tile-aracli:hover .sp-tile-arac { opacity: 1; visibility: visible; transform: none; }
.sp-tile-arac ul { list-style: none; margin: 0; padding: 0; }
.sp-tile-arac li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: .86rem; color: var(--bs-body-color); }
.sp-tile-arac li a i { width: 18px; text-align: center; color: var(--c); }
.sp-tile-arac li a:hover { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
@media (max-width: 767.98px) {
    .sp-tile-izgara, .sp-tile-izgara-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sp-tile-link { padding: 12px; border-radius: 18px; }
    .sp-tile-ikon { width: 44px; height: 44px; border-radius: 13px; }
    .sp-tile-ikon svg { width: 24px; height: 24px; }
    .sp-tile-metin b { font-size: .98rem; }
    .sp-tile-foto .sp-tile-metin { padding: 12px; }
}
#ucretsizMenu .sp-mega { overflow: visible !important; max-height: none !important; }
#sosyalMenu .sp-mega, #epinMenu .sp-mega { max-height: calc(100vh - 150px) !important; overflow-y: auto !important; overflow-x: hidden !important; }
.sp-tile-izgara-foto .sp-tile-link { aspect-ratio: 3 / 4; }
.sp-mega-izgara.sp-tile-izgara-foto { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.sp-mega-izgara.sp-tile-izgara-foto .sp-tile-link { aspect-ratio: 4 / 5; }
.sp-ep-uyari { margin-bottom: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: .9rem; }
.sp-ep-kampanya { margin-bottom: 12px; padding: 10px 16px; border-radius: 14px; background: var(--bs-primary); color: #fff; font-size: .88rem; }
.sp-ep-kampanya b { display: block; }
.sp-ep-sol .sp-hz-sol { border-radius: 22px; }
.sp-ep-sol:has(.sp-hz-sol) { position: static; }

/* ---------------- Footer ---------------- */
.sp-foot-marka { padding: 4px 0; }
.sp-foot-marka p { max-width: 380px; font-size: .92rem; line-height: 1.6; }
.sp-foot-sosyal { display: flex; gap: 10px; margin-bottom: 18px; }
.sp-foot-sosyal a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .15s, transform .15s; }
.sp-foot-sosyal a:hover { background: var(--bs-primary); transform: translateY(-2px); color: #fff; }
.sp-foot-iletisim li .nav-link { padding: 6px 0; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.sp-foot-iletisim li .nav-link:hover { color: var(--bs-primary); }
.sp-foot-ik { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--k) 22%, transparent); color: var(--k); }
.sp-foot-baslik { display: block; position: relative; margin-bottom: 16px; padding-bottom: 10px; color: #fff; font-weight: 600; font-size: 1.05rem; }
.sp-foot-baslik::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--bs-primary); }
.sp-foot-liste .nav-link { padding: 5px 0; color: rgba(255, 255, 255, .68); font-size: .9rem; transition: color .15s, padding-left .15s; }
.sp-foot-liste .nav-link:hover { color: var(--bs-primary); padding-left: 4px; }
.sp-foot-liste .sp-foot-tum { color: var(--bs-primary); font-weight: 500; }
.sp-foot-odeme { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 26px 0 18px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 28px; }
.sp-foot-odeme img { max-height: 30px; width: auto; }
.sp-foot-alt .nav-link:hover { color: var(--bs-primary) !important; }
@media (max-width: 991.98px) { .sp-foot-odeme { justify-content: center; } .sp-foot-marka { text-align: center; } .sp-foot-marka p { margin-left: auto; margin-right: auto; } .sp-foot-sosyal { justify-content: center; } .sp-foot-iletisim { align-items: center; } }

/* ---- Tıklanabilir yazılar: primary (mavi) ---- */
.sp-cip, .sp-cip:not(.aktif) { color: var(--bs-primary); }
.sp-cip.aktif { color: #fff; }
.sp-hz-oge span:last-child { color: var(--bs-primary); font-weight: 500; }
.sp-hz-oge.aktif span:last-child { font-weight: 700; }
.sp-ep-sekme:not(.aktif) { color: var(--bs-primary); opacity: 1; }
.sp-daha-fazla { color: var(--bs-primary); }
.sp-fiyat-bolum a:not(.btn), .sp-makale-kutu a { color: var(--bs-primary); }

/* ---- Fiyat tablosu: tablo solda ---- */
.sp-fiyat-tablo th, .sp-fiyat-tablo td { padding: 14px 16px; }

/* ---- Paket seçimi (klasik şablon): platform renginde ---- */
#hizlist { --c: var(--pt-l, #089cf1); }
[data-bs-theme=dark] #hizlist { --c: var(--pt-d, #3db4ff); }
#hizlist .quantity_card, #hizlist .category_card { border: 2px solid var(--sp-cizgi) !important; border-radius: 18px !important; background: var(--sp-kart-2) !important; box-shadow: none !important; transition: transform .2s, border-color .2s, box-shadow .2s; }
#hizlist .quantity_card:hover, #hizlist .quantity_card.selected, #hizlist .category_card:hover, #hizlist .category_card.selected { border-color: var(--c) !important; box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 28%, transparent) !important; transform: translateY(-4px); }
#hizlist .quantity_card.selected { background: color-mix(in srgb, var(--c) 9%, var(--sp-kart-2)) !important; }
#hizlist .quantity_card .fs-5 { display: inline-block; transition: transform .25s, color .25s; }
#hizlist .quantity_card:hover .fs-5, #hizlist .quantity_card.selected .fs-5 { color: var(--c) !important; transform: scale(1.14); }
#hizlist .s_icon { background: var(--c) !important; }
#hizlist .product-single .bg-primary, #hizlist .category_card .bg-primary { background: var(--c) !important; }
#hizlist .category_card .bg-opacity-10.bg-primary { background: color-mix(in srgb, var(--c) 14%, transparent) !important; }
#hizlist .category_card .text-primary { color: var(--c) !important; }
.sp-pk-hover { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 7px 8px 8px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff; font-size: .7rem; line-height: 1.25; transform: translateY(101%); transition: transform .22s; pointer-events: none; }
.sp-pk-hover b { display: block; font-size: .74rem; letter-spacing: .02em; }
.sp-pk-hover::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: var(--d, 50%); background: rgba(255, 255, 255, .85); }
#hizlist .quantity_card:hover .sp-pk-hover { transform: none; }
/* Kart şablonu satırları */
.sp-ep-paket { --c: var(--pt-l, #089cf1); }
.sp-pk-satir { display: none; margin: 4px 0 0 !important; font-size: .76rem !important; opacity: 1 !important; color: var(--c); font-weight: 600; }
.sp-ep-paket:hover .sp-pk-satir { display: block; }
.sp-ep-paket:hover .sp-ep-stok { display: none; }

/* ---- Yapay zekâ ile özetle ---- */
.sp-ai-ozet { --c: var(--pt-l, #089cf1); margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); }
[data-bs-theme=dark] .sp-ai-ozet { --c: var(--pt-d, #3db4ff); }
.sp-ai-baslik { font-weight: 600; margin-bottom: 12px; font-size: .95rem; }
.sp-ai-baslik i { color: var(--c); margin-right: 6px; }
.sp-ai-liste { display: grid; gap: 8px; }
.sp-ai-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); font-weight: 500; font-size: .9rem; transition: background .15s, color .15s, transform .15s; }
.sp-ai-btn:hover { background: var(--c); color: #fff; transform: translateX(3px); }
.sp-ai-btn > i:first-child { width: 20px; text-align: center; }
.sp-ai-git { margin-left: auto; opacity: .7; }
.sp-foot-alt { display: flex; flex-wrap: wrap; justify-content: center; } .sp-foot-alt .nav-link { padding: 4px 12px !important; }

/* ---- Bildirim: platform renkli ikon ---- */
.sp-satis-ikon { background: var(--pt-l, #fff) !important; }
[data-bs-theme=dark] .sp-satis-ikon { background: var(--pt-d, #fff) !important; }
.sp-satis-ikon svg path { fill: #fff !important; stroke: #fff !important; }
.sp-satis-ikon svg.only-stroke path { fill: none !important; }
.sp-satis-ikon svg.only-fill path { stroke: none !important; }
.sp-satis-ikon svg.sp-ikon-renkli path { fill: revert-layer; }
.sp-satis-ikon:has(> svg.sp-ikon-renkli) { background: #fff !important; }

/* ---- Footer sosyal ikonlar: platform renkleri ---- */
.sp-foot-sosyal a { --k: #fff; background: color-mix(in srgb, var(--k) 20%, transparent); color: var(--k); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
.sp-foot-sosyal a:hover { background: var(--k); color: #fff; border-color: var(--k); transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px color-mix(in srgb, var(--k) 45%, transparent); }

/* ---- Hero özet kartı: yıldızlar tek satır ---- */
.sp-yildizlar { white-space: nowrap; }
.sp-hero-cip { white-space: nowrap; }

/* ---- Giriş penceresi: arka plan bulanık ---- */
body:has(#spAuthModal.show) .modal-backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(10, 14, 25, .55); opacity: 1; }

/* ---- Yukarı çık: yuvarlak ---- */
.back-top { border-radius: 50% !important; }

/* ---- Mega menü alt menüleri (sabit konum: kırpılmaz) ---- */
.sp-tile-arac { position: fixed; left: 0; top: 0; z-index: 2147483001; }
.sp-tile-pk { width: 560px; max-width: calc(100vw - 24px); padding: 0; display: flex; overflow: hidden; max-height: min(430px, 70vh); }
.sp-mf-bos { padding: 18px; font-size: .88rem; opacity: .7; }
.sp-mf-hz { list-style: none; margin: 0; padding: 8px; width: 230px; flex: 0 0 230px; overflow-y: auto; border-right: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); }
.sp-mf-hz-oge { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; color: var(--bs-body-color); font-size: .86rem; }
.sp-mf-hz-oge > i:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--c); color: #fff; font-size: .8rem; flex: 0 0 28px; }
.sp-mf-ok { margin-left: auto; opacity: .35; font-size: .7rem; }
.sp-mf-hz-oge.aktif, .sp-mf-hz-oge:hover { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.sp-mf-pk { flex: 1; min-width: 0; padding: 10px 12px; overflow-y: auto; }
.sp-mf-pk-panel { display: none; }
.sp-mf-pk-panel.aktif { display: block; }
.sp-mf-pk-baslik { font-weight: 600; font-size: .88rem; padding: 4px 6px 8px; }
.sp-mf-pk-panel a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 9px; font-size: .84rem; color: var(--bs-body-color); }
.sp-mf-pk-panel a b { color: var(--c); font-weight: 600; white-space: nowrap; }
.sp-mf-pk-panel a:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.sp-mf-pk-panel .sp-mf-tum { color: var(--c); font-weight: 600; justify-content: flex-start; gap: 6px; margin-top: 4px; }

/* ---- Footer: hover alt menüleri + yasal alan ---- */
.sp-foot-oge { position: relative; --c: var(--pt-d, #3db4ff); }
.sp-foot-ok { font-size: .65rem; opacity: .4; margin-left: 4px; transition: transform .15s; }
.sp-foot-oge:hover .sp-foot-ok { transform: translateX(3px); opacity: .9; }
.sp-foot-oge:hover > .nav-link { color: var(--c); }
.sp-foot-fly { width: 270px; padding: 8px; max-height: min(420px, 70vh); overflow-y: auto; }
.sp-foot-fly ul { list-style: none; margin: 0; padding: 0; }
.sp-foot-yasal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 18px 28px; padding: 22px 0 26px; }
.sp-foot-yasal-metin { flex: 0 1 860px; }
.sp-foot-yasal-metin p { margin: 0 0 8px; font-size: .86rem; line-height: 1.6; color: rgba(255, 255, 255, .62); max-width: 860px; }
.sp-foot-yasal-metin p b { color: #fff; }
.sp-foot-yasal-metin small { color: rgba(255, 255, 255, .45); }
.sp-foot-abuse { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 30px; border: 1px solid rgba(229, 72, 77, .6); background: rgba(229, 72, 77, .12); color: #ff7b80; font-weight: 600; font-size: .86rem; letter-spacing: .03em; white-space: nowrap; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.sp-foot-abuse:hover { background: #e5484d; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(229, 72, 77, .4); }
@media (max-width: 991.98px) { .sp-foot-yasal { text-align: center; justify-content: center; } }

/* ---- Footer: yasal alan sağ sütunda, ödeme solda, telif sağ altta ---- */
.sp-foot-marka .sp-foot-odeme { padding: 22px 0 0; margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sp-foot-yasal { display: block !important; padding: 26px 0 0; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: left; }
.sp-foot-yasal p { margin: 0 0 16px; font-size: .86rem; line-height: 1.65; color: rgba(255, 255, 255, .62); max-width: 640px; }
.sp-foot-yasal p b { color: #fff; }
.sp-foot-abuse { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; }
.sp-foot-abuse:hover { background: var(--bs-primary); filter: brightness(1.1); color: #fff; box-shadow: 0 10px 22px rgba(8, 156, 241, .4); }
.sp-foot-alt-satir { padding: 18px 0 26px; text-align: right; }
.sp-foot-alt-satir small { color: rgba(255, 255, 255, .5); }
@media (max-width: 991.98px) { .sp-foot-alt-satir { text-align: center; } .sp-foot-yasal { text-align: center; } .sp-foot-yasal p { margin-left: auto; margin-right: auto; } .sp-foot-marka .sp-foot-odeme { justify-content: center; } }
@media (min-width: 992px) {
    .sp-foot-yasal { display: flex !important; align-items: center; justify-content: space-between; gap: 28px; }
    .sp-foot-yasal p { margin: 0; flex: 1 1 auto; }
    .sp-foot-abuse { flex: 0 0 auto; }
    .sp-foot-alt-satir { text-align: left; }
}
.sp-foot-telif { display: block; margin-top: 14px; color: rgba(255, 255, 255, .5); }
@media (max-width: 991.98px) { .sp-foot-telif { text-align: center; } }

/* ---- Adet belirleme + eklentiler ---- */
#hizlist { --c: var(--pt-l, #089cf1); }
.sp-adet-baslik { font-weight: 600; margin: 8px 0 12px; }
.sp-adet-kutu { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 22px; border-radius: 16px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); overflow: hidden; }
.sp-adet-btn { flex: 0 0 34px; height: 34px; border: 0; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); transition: background .15s, color .15s; }
.sp-adet-btn:hover { background: var(--c); color: #fff; }
.sp-adet-orta { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex: 1; font-weight: 600; color: var(--c); }
.sp-adet-input { width: min(220px, 55%); border: 0; outline: 0; background: transparent; text-align: right; font-size: 1.25rem; font-weight: 700; color: var(--c); }
.sp-adet-slider { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 6px; margin: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--c) var(--d, 0%), color-mix(in srgb, var(--c) 18%, transparent) var(--d, 0%)); cursor: pointer; }
.sp-adet-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 3px solid var(--sp-kart); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.sp-adet-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 3px solid var(--sp-kart); }
.sp-eklenti { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); cursor: pointer; transition: border-color .15s, background .15s; position: relative; }
.sp-eklenti:hover, .sp-eklenti:has(input:checked) { border-color: var(--c); }
.sp-eklenti:has(input:checked) { background: color-mix(in srgb, var(--c) 9%, var(--sp-kart-2)); }
.sp-eklenti b { font-weight: 600; font-size: .95rem; }
.sp-eklenti em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--c); white-space: nowrap; }
.sp-anahtar { position: relative; width: 44px; height: 24px; flex: 0 0 44px; }
.sp-anahtar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; margin: 0; }
.sp-anahtar span { position: absolute; inset: 0; border-radius: 24px; background: color-mix(in srgb, var(--bs-body-color) 22%, transparent); transition: background .2s; }
.sp-anahtar span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.sp-anahtar input:checked + span { background: var(--c); }
.sp-anahtar input:checked + span::after { transform: translateX(20px); }
.sp-ipucu[data-sp-ipucu] { position: relative; opacity: .6; cursor: help; }
.sp-ipucu[data-sp-ipucu]::after { content: attr(data-sp-ipucu); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 230px; padding: 9px 12px; border-radius: 10px; background: #14171c; color: #fff; font-size: .78rem; line-height: 1.4; font-style: normal; opacity: 0; visibility: hidden; transition: .15s; z-index: 6; pointer-events: none; }
.sp-ipucu[data-sp-ipucu]:hover::after, .sp-ipucu[data-sp-ipucu]:focus::after, .sp-ipucu.acik::after { opacity: 1; visibility: visible; }
@media (max-width: 575.98px) { .sp-adet-input { font-size: 1.05rem; } .sp-eklenti { padding: 12px; gap: 9px; } }

/* ---- Yapay zekâ butonları: logolar ---- */
.sp-ai-ikon { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; }
.sp-ai-ikon svg { width: 20px; height: 20px; }
.sp-ai-not { display: block; margin-top: 10px; font-size: .78rem; color: var(--c); }
.sp-adet-input, .sp-adet-input:focus { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.sp-adet-kutu .sp-adet-orta .sp-adet-input, [data-bs-theme=dark] .sp-adet-kutu .sp-adet-input { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; }

/* ---- Sabit renkli "şifre talep etmez" bandı (hover yok) ---- */
.footer-bildirim, .footer-bildirim:hover { background: var(--pt-l, var(--bs-primary)) !important; transform: none !important; filter: none !important; }
[data-bs-theme=dark] .footer-bildirim, [data-bs-theme=dark] .footer-bildirim:hover { background: var(--pt-d, var(--bs-primary)) !important; }
.footer-bildirim * { transition: none !important; }

/* ---- E-Pin: boş sekme ---- */
.sp-ep-bos { padding: 28px 16px; text-align: center; border-radius: 16px; border: 1px dashed var(--sp-cizgi); opacity: .75; }

/* ---- Klasik paket sayfası: sol kart orta alan kadar uzun, özellikler platform renginde ---- */
.sp-hz3 > aside { align-self: stretch; }
.sp-hz3 .sp-hz-sol { height: 100%; }
.sp-hz3 .sp-hz-sol .sp-ep-kart { height: 100%; display: flex; flex-direction: column; }
.sp-hz3 .sp-hz-sol .sp-hz-liste { max-height: none; flex: 1; overflow: visible; }
.sp-ep-oz > i { background: var(--c) !important; color: #fff !important; font-style: normal; }
.sp-ep-ozellik { --c: var(--pt-l, #089cf1); }
[data-bs-theme=dark] .sp-ep-ozellik { --c: var(--pt-d, #3db4ff); }

/* ---- Sepete ekle / satın al: düşük, hizalı butonlar ---- */
.cart-buttons { align-items: center; gap: 10px; }
.cart-buttons .btn { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px !important; margin: 0 !important; border-radius: 12px; font-size: .9rem; }
@media (max-width: 991.98px) { .cart-buttons { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 12px; } .cart-buttons .btn { padding: 0 10px !important; } }

/* ---- Adet kutusu: kenarlardan taşmayan kaydırıcı ---- */
.sp-adet-kutu { flex-wrap: wrap; padding: 14px 16px 16px; overflow: visible; row-gap: 14px; }
.sp-adet-orta { min-width: 0; }
.sp-adet-slider { position: static; flex: 1 1 100%; order: 5; height: 8px; border-radius: 8px; margin: 2px 0 0; }

/* ---- Bildirim zili: dar masaüstü ekranlarda gizli ---- */
@media (max-width: 1399.98px) { .sp-zil-li { display: none !important; } }

/* ---- Dar masaüstü ekranlar (992–1399px): üst menü tek satıra sığar ---- */
@media (min-width: 992px) and (max-width: 1399.98px) {
    header .navbar .navbar-brand { margin-right: .75rem; }
    header .navbar .navbar-brand img { height: 36px; width: auto; }
    #navbarCategoryCollapse .nav-link { padding: .45rem .6rem; font-size: .88rem; white-space: nowrap; }
    #navbarCategoryCollapse .nav-link > i.bi { display: none; }
    header .navbar .nav.flex-row { flex-wrap: nowrap; white-space: nowrap; }
    header .navbar .nav.flex-row .btn { white-space: nowrap; }
    header .navbar .nav.flex-row .btn:not(.hw-3rem):not(.sp-tema-mini) { padding-left: .8rem; padding-right: .8rem; font-size: .88rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #navbarCategoryCollapse .nav-link { padding: .4rem .4rem; font-size: .82rem; }
    header .navbar .navbar-brand img { height: 30px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    header .navbar .nav.flex-row a.btn.h-3rem { font-size: 0; padding-left: .8rem !important; padding-right: .8rem !important; }
    header .navbar .nav.flex-row a.btn.h-3rem > i { font-size: 1.05rem; margin: 0; }
    .sp-satis { min-width: 240px; max-width: 280px; }
}

/* ---- Bağlantı rengi: her yerde primary (mavi), mor yok ---- */
:root, [data-bs-theme=light] { --bs-link-color: #089cf1; --bs-link-color-rgb: 8, 156, 241; --bs-link-hover-color: #0780c7; --bs-link-hover-color-rgb: 7, 128, 199; }
[data-bs-theme=dark] { --bs-link-color: #089cf1; --bs-link-color-rgb: 8, 156, 241; --bs-link-hover-color: #3db4ff; --bs-link-hover-color-rgb: 61, 180, 255; }
.sp-hizmet-kart .sp-paket-sayi { color: var(--bs-primary); opacity: .9; }

/* ---- Filtre / sekme geçiş efekti (GPU dostu: opacity + transform) ---- */
@keyframes spGiris { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } to { opacity: 1; transform: none; } }
.sp-giris { animation: spGiris .3s cubic-bezier(.22, .8, .3, 1) backwards; animation-delay: calc(var(--gi, 0) * 24ms); }
@media (prefers-reduced-motion: reduce) { .sp-giris { animation: none; } }

/* ---- Anasayfa fiyat bloğu: çizgili süsleme ---- */
.sp-fiyat-bolum.sp-cizgili { position: relative; isolation: isolate; }
.sp-fiyat-bolum.sp-cizgili::before, .sp-fiyat-bolum.sp-cizgili::after { content: ""; position: absolute; z-index: -1; width: min(560px, 55vw); aspect-ratio: 779 / 445; background: url("../images/lines-blue.svg") no-repeat center / contain; opacity: .16; pointer-events: none; }
.sp-fiyat-bolum.sp-cizgili::before { left: -80px; top: -40px; transform: scaleX(-1); }
.sp-fiyat-bolum.sp-cizgili::after { right: -80px; bottom: -30px; }
[data-bs-theme=dark] .sp-fiyat-bolum.sp-cizgili::before, [data-bs-theme=dark] .sp-fiyat-bolum.sp-cizgili::after { opacity: .22; }
.sp-fiyat-bolum.sp-cizgili .sp-fiyat-kutu { backdrop-filter: blur(2px); }

/* ---- 404 ---- */
.sp-404 { position: relative; overflow: hidden; padding: 56px 0 80px; isolation: isolate; }
.sp-404-cizgi { position: absolute; z-index: -1; width: min(620px, 60vw); opacity: .18; pointer-events: none; }
.sp-404-cizgi-1 { left: -120px; top: -60px; transform: scaleX(-1); }
.sp-404-cizgi-2 { right: -120px; bottom: -40px; }
.sp-404-kart { max-width: 820px; margin: 0 auto; padding: 38px 30px 34px; text-align: center; border-radius: 30px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); box-shadow: 0 30px 70px rgba(0, 0, 0, .18); }
.sp-404-kod { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: clamp(5.5rem, 17vw, 9.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--bs-primary); }
.sp-404-kod span { display: block; }
.sp-404-baykus img { width: clamp(84px, 14vw, 150px); height: auto; filter: drop-shadow(0 12px 18px rgba(8, 156, 241, .35)); animation: spBaykus 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes spBaykus { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.sp-404 h1 { margin: 12px 0 8px; font-size: clamp(1.35rem, 3.4vw, 1.9rem); font-weight: 700; }
.sp-404 p { max-width: 560px; margin: 0 auto 22px; opacity: .72; }
.sp-404-butonlar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }
.sp-404-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 30px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); color: var(--bs-body-color); font-weight: 600; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sp-404-btn:hover { transform: translateY(-2px); border-color: var(--bs-primary); color: var(--bs-primary); }
.sp-404-btn-ana { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.sp-404-btn-ana:hover { color: #fff; box-shadow: 0 12px 24px rgba(8, 156, 241, .38); }
.sp-404-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.sp-404-liste a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); color: var(--bs-body-color); font-size: .92rem; transition: border-color .15s, transform .15s; }
.sp-404-liste a i { color: var(--bs-primary); }
.sp-404-liste a:hover { border-color: var(--bs-primary); transform: translateY(-2px); color: var(--bs-primary); }
.sp-404-pt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding-top: 18px; border-top: 1px dashed var(--sp-cizgi); }
.sp-404-pt small { width: 100%; opacity: .6; margin-bottom: 2px; }
.sp-404-pt a { --c: var(--pt-l, #089cf1); display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 30px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--bs-body-color); font-size: .86rem; }
[data-bs-theme=dark] .sp-404-pt a { --c: var(--pt-d, #3db4ff); }
.sp-404-pt a .sp-pt-disc { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; }
.sp-404-pt a .sp-pt-disc svg { width: 14px; height: 14px; }
.sp-404-pt a:hover { background: var(--c); color: #fff; }
@media (prefers-reduced-motion: reduce) { .sp-404-baykus img { animation: none; } }

/* ---- 404: tek çizgi deseni tüm arka planı kaplar ---- */
.sp-404 .sp-404-cizgi { position: absolute; inset: 0; z-index: -1; width: auto; opacity: .16; transform: none; background: url("../images/lines-blue.svg") no-repeat center / cover; pointer-events: none; }
[data-bs-theme=dark] .sp-404 .sp-404-cizgi { opacity: .22; }

/* ---- Adet: ortalı değer ---- */
.sp-adet-orta { justify-content: center; }
.sp-adet-input { width: auto; min-width: 3ch; text-align: center; padding: 0; }
.sp-adet-kutu .sp-adet-orta .sp-adet-input { text-align: center; }

/* ---- Eklentiler: yan yana sığarsa yan yana, sığmazsa alt alta ---- */
.sp-eklentiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.sp-eklenti b { white-space: nowrap; }
.sp-eklenti em { padding-left: 6px; }

/* ---- Son blog yazıları ---- */
.sp-blog-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sp-blog-kart { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); color: var(--bs-body-color); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sp-blog-kart:hover { transform: translateY(-4px); border-color: var(--bs-primary); box-shadow: 0 16px 32px rgba(0, 0, 0, .14); color: var(--bs-body-color); }
.sp-blog-gorsel { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, rgba(8, 156, 241, .18), rgba(8, 156, 241, .05)); color: var(--bs-primary); font-size: 2rem; }
.sp-blog-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sp-blog-kart:hover .sp-blog-gorsel img { transform: scale(1.05); }
.sp-blog-govde { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.sp-blog-govde small { opacity: .65; font-size: .76rem; }
.sp-blog-govde small b { color: var(--bs-primary); font-weight: 600; }
.sp-blog-govde strong { font-weight: 600; line-height: 1.3; font-size: 1rem; }
.sp-blog-govde em { font-style: normal; font-size: .85rem; opacity: .7; line-height: 1.5; }
.sp-blog-devam { margin-top: auto; color: var(--bs-primary); font-size: .85rem; font-weight: 600; }
@media (max-width: 991.98px) { .sp-blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sp-blog-izgara { grid-template-columns: 1fr; } }

/* ---- Sıkça Sorulan Sorular sayfası ---- */
.sp-sss-izgara { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-sss-sol { position: sticky; top: 90px; }
.sp-sss-sol .sp-ep-kart { padding: 14px; max-height: calc(100vh - 110px); overflow-y: auto; }
.sp-sss-arama { position: relative; margin-bottom: 12px; }
.sp-sss-arama i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; }
.sp-sss-arama input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 12px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2); color: var(--bs-body-color); outline: 0; }
.sp-sss-arama input:focus { border-color: var(--bs-primary); }
.sp-sss-menu { display: flex; flex-direction: column; gap: 4px; }
.sp-sss-kat { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sp-cizgi); display: flex; flex-direction: column; gap: 2px; }
.sp-sss-oge { --c: var(--pt-l, var(--bs-primary)); display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--bs-body-color); text-align: left; font-size: .88rem; transition: background .15s, color .15s; }
[data-bs-theme=dark] .sp-sss-oge { --c: var(--pt-d, var(--bs-primary)); }
.sp-sss-oge > i { width: 18px; color: var(--bs-primary); }
.sp-sss-oge b { margin-left: auto; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--sp-kart-2); }
.sp-sss-oge:hover { background: var(--sp-kart-2); }
.sp-sss-oge.aktif { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-weight: 600; }
.sp-sss-kat-baslik { font-weight: 600; }
.sp-sss-alt { padding-left: 14px; }
.sp-sss-ikon { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--c); }
.sp-sss-ikon svg { width: 13px; height: 13px; }
.sp-sss-ikon svg path { fill: #fff; stroke: #fff; }
.sp-sss-ikon svg.only-stroke path { fill: none; }
.sp-sss-ikon svg.only-fill path { stroke: none; }
.sp-sss-ikon:has(> svg.sp-ikon-renkli) { background: #fff; }
.sp-sss-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 18px 20px; border-radius: 18px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); }
.sp-sss-ust h2 { font-size: 1.2rem; margin: 0; font-weight: 600; }
.sp-sss-ust span { opacity: .65; font-size: .88rem; }
.sp-sss-liste { display: flex; flex-direction: column; gap: 10px; }
.sp-sss-soru { --c: var(--pt-l, var(--bs-primary)); border-radius: 16px; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); overflow: hidden; }
[data-bs-theme=dark] .sp-sss-soru { --c: var(--pt-d, var(--bs-primary)); }
.sp-sss-soru[open] { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.sp-sss-soru summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiket ikon" "metin ikon"; gap: 2px 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.sp-sss-soru summary::-webkit-details-marker { display: none; }
.sp-sss-etiket { grid-area: etiket; font-size: .72rem; font-weight: 600; color: var(--c); }
.sp-sss-metin { grid-area: metin; font-weight: 600; }
.sp-sss-soru summary i { grid-area: ikon; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sp-kart-2); transition: transform .2s, background .2s; }
.sp-sss-soru[open] summary i { transform: rotate(45deg); background: var(--c); color: #fff; }
.sp-sss-cevap { padding: 0 18px 16px; opacity: .85; line-height: 1.6; }
.sp-sss-git { display: inline-flex; gap: 6px; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--c); }
.sp-sss-bos { padding: 30px; text-align: center; opacity: .7; }
@media (max-width: 991.98px) { .sp-sss-izgara { grid-template-columns: 1fr; } .sp-sss-sol { position: static; } .sp-sss-sol .sp-ep-kart { max-height: 340px; } }

/* Hizmet sayfası: orta kartlar yan kartlarla aynı yuvarlaklıkta; iç kategori kartları küçük ve duyarlı */
.sp-hz3 .card.rounded-2 { border-radius: 20px !important; }
.sp-hz3 .innerCategories { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: .75rem; }
.sp-hz3 .innerCategories .category_card { border-radius: 14px !important; padding: .75rem .6rem !important; }
.sp-hz3 .innerCategories .category_card > div { gap: .45rem !important; }
.sp-hz3 .innerCategories .category_card .icon-lg { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px !important; }
.sp-hz3 .innerCategories .category_card span.fs-5 { font-size: .88rem !important; line-height: 1.25; }
.sp-hz3 .innerCategories .category_card .s_icon { width: 22px; height: 22px; font-size: .8rem; }
@media (max-width: 575.98px) {
    .sp-hz3 .innerCategories { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
    .sp-hz3 .innerCategories .category_card span.fs-5 { font-size: .8rem !important; }
}

/* Site geneli: kart ve panel niteliğindeki kutular aynı yuvarlaklıkta (20px) */
:is(.rounded, .rounded-2, .rounded-3):is(.p-2, .p-3, .p-4, .shadow, .shadow-sm, .card, .bg-primary):not(.btn):not(.badge):not(.form-control):not(.form-select):not(.input-group-text):not([class*="icon-"]):not(img):not(.dropdown-item):not(.nav-link) { border-radius: 20px !important; }
.card:not(.btn) { border-radius: 20px; }

/* ---- Arayüz düzenlemeleri ---- */
/* Hizmet sayfası: sol menü hero çizgilerinin üstünde kalsın (saydam görünmesin) */
.sp-hz3 > aside { position: relative; z-index: 3; }

/* Eklentiler (VIP Destek vb.): fiyat adın altında */
.sp-eklenti { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 3px; }
.sp-eklenti .sp-anahtar { grid-column: 1; grid-row: 1 / span 2; }
.sp-eklenti b { grid-column: 2; grid-row: 1; }
.sp-eklenti .sp-ipucu { grid-column: 3; grid-row: 1; }
.sp-eklenti em { grid-column: 2 / -1; grid-row: 2; margin: 0; padding: 0; }

/* Başlık ikonları: sitenin diğer ikon kutuları gibi düz renk */
.sp-panel-ikon, .sp-mega-ust-ikon { background: var(--bs-primary) !important; box-shadow: none !important; border-radius: 12px; }
.sp-panel::before { background: var(--bs-primary); }

/* Platform kartları: düz renk, içerik ortalı */
.sp-tile:not(.sp-tile-foto) .sp-tile-link { background: var(--c); align-items: center; justify-content: center; text-align: center; gap: 12px; }
.sp-tile:not(.sp-tile-foto) .sp-tile-link::before { display: none; }
.sp-tile:not(.sp-tile-foto) .sp-tile-metin { text-align: center; }
.sp-tile:not(.sp-tile-foto) .sp-tile-ikon { margin: 0 auto; }

/* Çizgili arka planlar: bölümün tamamını kaplasın */
.sp-fiyat-bolum.sp-cizgili::before { left: 0; right: 0; top: 0; bottom: 0; width: auto; aspect-ratio: auto; transform: none; background-size: cover; background-position: center; opacity: .14; }
.sp-fiyat-bolum.sp-cizgili::after { display: none; }
[data-bs-theme=dark] .sp-fiyat-bolum.sp-cizgili::before { opacity: .2; }
.sp-bolum-kart.sp-cizgili-tam > .container::after { content: ""; position: absolute; inset: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); border-radius: 26px; background: url("../images/lines-blue.svg") no-repeat center / cover; opacity: .14; pointer-events: none; z-index: 0; }
[data-bs-theme=dark] .sp-bolum-kart.sp-cizgili-tam > .container::after { opacity: .2; }

/* Kurumsal sayfa yan menüsü: içerik kartıyla aynı yuvarlaklık */
.dropdown-menu.nav-top { border-radius: 20px !important; overflow: hidden; }

/* Arama kutuları */
.sp-vitrin-ara { margin: 6px auto 16px; }
.sp-ara-sonuc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.sp-ara-oge { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2, var(--sp-kart)); color: var(--bs-body-color); transition: border-color .15s, transform .15s; }
.sp-ara-oge:hover { border-color: var(--bs-primary); color: var(--bs-body-color); transform: translateY(-2px); }
.sp-ara-oge b { grid-column: 1; font-size: .78rem; font-weight: 600; color: var(--bs-primary); }
.sp-ara-oge span { grid-column: 1; font-size: .92rem; }
.sp-ara-oge i { grid-column: 2; grid-row: 1 / span 2; opacity: .5; }
.sp-mega-ara { position: relative; flex: 1 1 220px; max-width: 300px; margin-left: auto; }
.sp-mega-ara i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; font-size: .9rem; }
.sp-mega-ara input { width: 100%; height: 40px; padding: 0 14px 0 36px; border-radius: 999px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2, transparent); color: var(--bs-body-color); font-size: .9rem; outline: 0; }
.sp-mega-ara input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(8, 156, 241, .15); }
.sp-mega-ust .sp-mega-tum { margin-left: 0; }
.sp-bolum-kart.sp-cizgili-tam > .container::after { opacity: .2; }
[data-bs-theme=dark] .sp-bolum-kart.sp-cizgili-tam > .container::after { opacity: .34; }
.sp-fiyat-bolum.sp-cizgili::before { opacity: .2; }
[data-bs-theme=dark] .sp-fiyat-bolum.sp-cizgili::before { opacity: .3; }

/* Hero değerlendirme kartı: xl ekranda alttaki sağ sütunla aynı genişlikte (boy serbest) */
.sp-hero-ozet-kart { min-width: 240px; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 20px !important; }
@media (min-width: 1200px) {
    .sp-hero-ozet { flex: 0 0 auto; width: calc((100% + var(--bs-gutter-x, 1.5rem)) / 4 - var(--bs-gutter-x, 1.5rem)); }
    .sp-hero-ozet-kart { width: 100%; min-width: 0; }
}

/* Kırıntı bağlantıları: hover efekti (hero her zaman mavi olduğundan iki modda da uyumlu) */
.custom-breadcrumb .breadcrumb-item a { display: inline-block; padding: 2px 8px; margin: -2px -8px; border-radius: 8px; transition: background .15s, color .15s; }
.custom-breadcrumb .breadcrumb-item a:hover { background: rgba(255, 255, 255, .22); color: #fff; text-decoration: none; }
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin: 0 8px 0 4px; }
.sp-ep-yol .custom-breadcrumb .breadcrumb-item a:hover { background: color-mix(in srgb, var(--bs-primary) 16%, transparent); color: var(--bs-primary); }
[data-bs-theme=dark] .sp-ep-yol .custom-breadcrumb .breadcrumb-item a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Başlık ikon kutuları: sitenin diğer ikon kutuları gibi (gündüz beyaz, gece koyu zemin; ikon her zaman mavi) */
.sp-panel-ikon, .sp-mega-ust-ikon { background: #fff !important; color: var(--bs-primary) !important; }
[data-bs-theme=dark] .sp-panel-ikon, [data-bs-theme=dark] .sp-mega-ust-ikon { background: #161616 !important; }

/* SSS bölümü: çizgiler bölümün tüm arka planında (gündüz mavi, gece beyaz) */
.sp-bolum-kart.sp-cizgili-tam { isolation: isolate; }
.sp-bolum-kart.sp-cizgili-tam > .container::before, .sp-bolum-kart.sp-cizgili-tam > .container::after { display: none; }
.sp-bolum-kart.sp-cizgili-tam::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../images/lines-blue.svg") no-repeat center / cover; opacity: .28; }
[data-bs-theme=dark] .sp-bolum-kart.sp-cizgili-tam::before { background-image: url("../images/lines.svg"); opacity: .2; }

/* Giriş yap ve diğer üst menü butonları: aynı yuvarlaklık */
.hw-3rem.btn, .h-3rem.btn, .sp-tema-mini { border-radius: 12px !important; }

/* Sıkça sorulan sorular: tüm sayfalarda aynı yuvarlaklık */
.accordion-item { border-radius: 14px !important; }
.accordion-button, .accordion-button.rounded, .accordion-button.collapsed { border-radius: 14px !important; }
.accordion-body.rounded, .accordion-collapse .accordion-body { border-radius: 14px !important; }
.sp-bolum-kart.sp-cizgili-tam::before { opacity: .45; }
[data-bs-theme=dark] .sp-bolum-kart.sp-cizgili-tam::before { opacity: .4; }

/* Bölüm arka planı çizgileri (kutunun arkasında): fiyat tabloları ve müşteri değerlendirmeleri. Gündüz mavi, gece beyaz */
.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili { position: relative; isolation: isolate; }
.sp-cizgili-arka::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../images/lines-blue.svg") no-repeat center / cover; opacity: .45; }
.sp-fiyat-bolum.sp-cizgili::before { opacity: .45; }
[data-bs-theme=dark] .sp-cizgili-arka::before, [data-bs-theme=dark] .sp-fiyat-bolum.sp-cizgili::before { background-image: url("../images/lines.svg"); opacity: .4; }
/* SSS bölümlerinde arka plan çizgisi yok */
.sp-sss-bolum::before, .sp-sss-bolum::after { display: none; }

/* E-Pin sayfası: hero kartı sağ sütun (Ürün Özellikleri) genişliğinde */
@media (min-width: 1200px) { .sp-hero-ozet.sp-hero-ozet-ep { width: 280px; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .sp-hero-ozet.sp-hero-ozet-ep { flex: 0 0 auto; width: 240px; } }

/* Fiyat tablosu sekmeleri: aralarında boşluk */
.sp-fiyat-sekmeler { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sp-fiyat-sekmeler .sp-cip { padding: 8px 18px; }

/* SosyalPot ekip notu: platform renginde kutu; çizgiler birbirini takip edecek şekilde döndürülmüş (180° ve 360°) */
.sp-ekip-not { --c: var(--pt-l, #089cf1); position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; padding: 28px 24px; text-align: center; color: #fff; background: var(--c); }
[data-bs-theme=dark] .sp-ekip-not { --c: var(--pt-d, #3db4ff); }
.sp-ekip-not::before, .sp-ekip-not::after { content: ""; position: absolute; top: -40%; height: 180%; width: 58%; z-index: -1; pointer-events: none; background: url("../images/lines.svg") no-repeat center / contain; opacity: .28; }
.sp-ekip-not::before { left: -8%; transform: rotate(180deg); }
.sp-ekip-not::after { right: -8%; transform: rotate(360deg) scaleX(-1); }
.sp-ekip-not span { display: block; margin-top: 4px; opacity: .85; }
@media (max-width: 767.98px) { .sp-ekip-not { padding: 20px 16px; } .sp-ekip-not::before, .sp-ekip-not::after { width: 90%; opacity: .2; } }

/* Nasıl alınır: adım numaraları platform renginde, görsel yoksa platform ikonu */
.sp-nasil-kart { --c: var(--pt-l, #089cf1); }
[data-bs-theme=dark] .sp-nasil-kart { --c: var(--pt-d, #3db4ff); }
.sp-nasil-no { display: grid; place-items: center; background: var(--c); flex: 0 0 auto; }
.sp-nasil-gorsel { aspect-ratio: 430 / 400; max-height: 300px; margin: 0 auto; display: grid; place-items: center; border-radius: 20px; background: var(--c); color: #fff; }
.sp-nasil-gorsel svg { width: 38%; height: auto; max-width: 120px; }
.sp-nasil-gorsel svg path { fill: #fff; }
.sp-nasil-gorsel > i { font-size: 4rem; }
.sp-nasil-gorsel svg path { fill: #fff; stroke: #fff; }
.sp-nasil-gorsel svg.only-stroke path { fill: none; }
.sp-nasil-gorsel svg.only-fill path { stroke: none; }
.sp-nasil-gorsel svg.sp-ikon-renkli path { fill: revert-layer; stroke: none; }

/* Ücretsiz araç sayfası butonları: sitedeki diğer butonlarla aynı yuvarlaklık (12px) */
.task-btn, .btn-tumunugor { border-radius: 12px !important; }
.bg-primary.text-white.rounded.hstack > a.icon-lg { border-radius: 12px !important; }

/* Vitrin ve Popüler Oyunlar başlıkları: "Popüler Paketlerimiz" başlığıyla aynı boyut ve yazı tipi */
.sp-panel-baslik, .sp-populer-baslik { gap: 1rem; }
.sp-panel-baslik h2, .sp-populer-baslik h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: normal; margin: 0; }
.sp-panel-baslik p, .sp-populer-baslik p { margin: 2px 0 0; opacity: .75; }
/* İnce çizgili (48x48) ikonlar küçük boyutta okunaklı olsun */
svg.only-stroke[viewBox="0 0 48 48"] path { stroke-width: 2.4; }

/* Ekip notu: üstteki öğeden ayrık, yazılar hep beyaz, platform renginde tam kaplayan çizgiler */
.sp-ekip-not { margin-top: 1.5rem; }
.sp-ekip-not, .sp-ekip-not p, .sp-ekip-not span { color: #fff !important; opacity: 1; }
.sp-ekip-not span { opacity: .92; }
.sp-ekip-not::before, .sp-ekip-not::after { top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; background: url("../images/lines.svg") no-repeat center / cover; }
.sp-ekip-not::before { transform: none; opacity: .32; }
.sp-ekip-not::after { transform: rotate(180deg); opacity: .22; }

/* Rakiplerle karşılaştırma bölümü */
.sp-karsi-foto { margin-top: .2rem; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); margin-bottom: 1.4rem; }
.sp-karsi-rozet { display: inline-block; padding: 6px 16px; border-radius: 30px; border: 1px solid var(--sp-cizgi); background: var(--sp-kart-2, transparent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.sp-karsi-baslik { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.2; margin: 1rem 0 .9rem; }
.sp-karsi-metin { opacity: .85; line-height: 1.65; }
.sp-karsi-not { border-left: 3px solid var(--bs-primary); padding-left: 14px; font-size: .84rem; opacity: .75; margin-top: 1.2rem; }
.sp-karsi-tablo { border: 1px solid var(--sp-cizgi); border-radius: 20px; overflow: hidden; background: var(--sp-kart); }
.sp-karsi-ust, .sp-karsi-satir { display: grid; grid-template-columns: 1.05fr 1.5fr 1.5fr; align-items: stretch; }
.sp-karsi-ust > div { padding: 16px 18px; font-weight: 700; text-align: center; border-bottom: 1px solid var(--sp-cizgi); }
.sp-karsi-ust > .biz, .sp-karsi-satir > .biz { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.sp-karsi-ust > .biz { color: var(--bs-primary); }
.sp-karsi-satir > div { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sp-cizgi); font-size: .92rem; }
.sp-karsi-satir:last-child > div { border-bottom: 0; }
.sp-karsi-satir .oz { font-weight: 600; }
.sp-karsi-satir .oz i { opacity: .6; font-size: 1.05rem; }
.sp-karsi-satir .biz span, .sp-karsi-satir .dig span { flex: 1; }
.sp-karsi-satir .dig { opacity: .78; }
.sp-karsi-isaret { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; }
.sp-karsi-isaret.ok { background: rgba(32, 201, 151, .16); color: #20c997; border: 1px solid rgba(32, 201, 151, .5); }
.sp-karsi-isaret.x { background: rgba(127, 127, 127, .15); color: #8a8f98; }
.sp-karsi-isaret.bilgi { background: rgba(255, 193, 7, .16); color: #e0a800; border: 1px solid rgba(255, 193, 7, .5); }
.sp-karsi-isaret.yasak { background: rgba(220, 53, 69, .15); color: #dc3545; border: 1px solid rgba(220, 53, 69, .5); }
@media (max-width: 767.98px) {
    .sp-karsi-ust, .sp-karsi-satir { grid-template-columns: 1fr; }
    .sp-karsi-ust > div:not(.biz):not(:first-child) { display: none; }
    .sp-karsi-satir .oz { background: color-mix(in srgb, var(--sp-cizgi) 40%, transparent); }
    .sp-karsi-satir .dig::before { content: "Diğer siteler: "; font-weight: 600; opacity: .8; }
}


/* Popüler hizmetler fotoğrafı (solda) */
/* Sabit ölçülü alan: yüklenen fotoğrafın boyutu ne olursa olsun aynı çerçevede gösterilir */
.sp-pop-foto { width: 100%; height: 260px; border-radius: 20px; overflow: hidden; }
.sp-pop-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (min-width: 992px) { .sp-pop-foto { flex: 0 0 400px; width: 400px; height: 440px; align-self: flex-start; } }

/* Seçilen paketin özellikleri (sağ kutu) */
.sp-ep-dinamik:empty { display: none; }
.sp-ep-dinamik { padding-bottom: 0; }
.sp-ep-dinamik .sp-ep-oz i { color: var(--bs-primary); }
.sp-ep-paket.secili { border-color: var(--bs-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 35%, transparent); }
.sp-ep-paket { cursor: pointer; }


/* Karşılaştırma: arka plan çizgisiz, fotoğraf yoksa site logosu */
.sp-karsi-logo { margin-bottom: 1.4rem; }
.sp-karsi-logo img { max-height: 64px; width: auto; }
[data-bs-theme=dark] .sp-karsi-logo .light-mode-item, [data-bs-theme=light] .sp-karsi-logo .dark-mode-item { display: none; }

/* Anasayfa Enleri */
.sp-enler-etiket { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--bs-primary); line-height: 1; margin-bottom: -.2rem; }
.sp-enler-baslik { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.sp-enler-aciklama { max-width: 640px; margin: .6rem auto 0; opacity: .75; }
.sp-enler-kolon-ust { border-left: 3px solid var(--bs-primary); padding-left: 12px; margin-bottom: 1rem; line-height: 1.25; }
.sp-enler-kolon-ust small { display: block; opacity: .7; font-size: .8rem; }
.sp-enler-kolon-ust strong { font-size: 1.05rem; }
.sp-enler-satir { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--sp-cizgi); border-radius: 16px; background: var(--sp-kart); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.sp-enler-satir:hover { transform: translateY(-2px); border-color: var(--c, var(--bs-primary)); color: inherit; }
.sp-enler-ikon { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c, var(--bs-primary)); color: #fff; }
.sp-enler-ikon svg { width: 22px; height: 22px; fill: currentColor; }
.sp-enler-metin { flex: 1; min-width: 0; line-height: 1.25; }
.sp-enler-metin b { display: block; font-size: .95rem; }
.sp-enler-metin small { display: block; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-enler-fiyat { display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 12px; border: 1px dashed var(--sp-cizgi); border-radius: 30px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.sp-enler-fiyat i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .85rem; }

/* Karşılaştırma tablo başlığında logo, Enler başlık düzeni */
.sp-karsi-logo-ust img { height: 44px; width: auto; vertical-align: middle; }
[data-bs-theme=dark] .sp-karsi-logo-ust .light-mode-item, [data-bs-theme=light] .sp-karsi-logo-ust .dark-mode-item { display: none; }
.sp-enler-etiket { color: inherit; }
.sp-enler-e1 { color: var(--bs-body-color); }
.sp-enler-e2 { color: var(--bs-primary); }
.sp-enler-baslik { text-transform: none; color: var(--bs-body-color); }
.sp-enler-etiket { color: var(--bs-primary); }

.sp-fiyat-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; margin: .9rem 0 1.1rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }

.sp-yorum-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .55); flex: 0 0 48px; }

.sp-enler-foto { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 20px; margin: 1.4rem 0 .4rem; }
@media (max-width: 767.98px) { .sp-enler-foto { height: 160px; } }

/* Soru - Cevap */
.sp-sc-kutu { border: 1px solid var(--sp-cizgi); border-radius: 20px; background: var(--sp-kart); padding: 8px 22px 22px; }
.sp-sc-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sp-cizgi); }
.sp-sc-sayi small { display: block; opacity: .7; font-size: .8rem; }
.sp-sc-form { padding: 18px 0; border-bottom: 1px solid var(--sp-cizgi); }
.sp-sc-oge { padding: 18px 0; border-bottom: 1px solid var(--sp-cizgi); }
.sp-sc-oge:last-child { border-bottom: 0; }
.sp-sc-kisi { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sp-sc-kisi small { font-size: .78rem; }
.sp-sc-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary); color: #fff; font-weight: 700; font-size: .85rem; }
.sp-sc-soru { display: inline-block; max-width: min(100%, 720px); padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.sp-sc-cevap { display: flex; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bs-body-bg); border: 1px solid var(--sp-cizgi); }
.sp-sc-cevap img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; padding: 5px; border: 1px solid var(--sp-cizgi); }
.sp-sc-bekle { margin-top: 10px; font-size: .85rem; opacity: .7; }

/* Landing: Hizmet Vitrini şablonu */
.sp-lv-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 24px; padding: clamp(22px, 4vw, 44px); border-radius: 24px; background: linear-gradient(120deg, #11141b 0%, #1b2030 100%); color: #fff; overflow: hidden; position: relative; }
[data-bs-theme=light] .sp-lv-hero { background: linear-gradient(120deg, #ffffff 0%, color-mix(in srgb, var(--bs-primary) 14%, #fff) 100%); color: #1b1f27; border: 1px solid var(--sp-cizgi); box-shadow: 0 14px 36px rgba(20, 30, 60, .08); }
[data-bs-theme=light] .sp-lv-hero p { opacity: .75; }
[data-bs-theme=light] .sp-lv-rozet { color: #fff; }
[data-bs-theme=light] .sp-lv-kupon { background: #fff; border-color: var(--sp-cizgi); }
[data-bs-theme=light] .sp-lv-kupon button { background: color-mix(in srgb, var(--bs-primary) 12%, #fff); color: var(--bs-primary); }
.sp-lv-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.15; margin: .8rem 0 .6rem; }
.sp-lv-hero p { opacity: .85; max-width: 520px; }
.sp-lv-rozet { display: inline-block; padding: 5px 14px; border-radius: 30px; background: var(--bs-primary); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.sp-lv-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 1.2rem; }
.sp-lv-kupon { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.sp-lv-kupon small { display: block; font-size: .68rem; opacity: .65; }
.sp-lv-kupon b { font-size: 1rem; letter-spacing: .05em; }
.sp-lv-kupon button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
.sp-lv-hero-gorsel { text-align: center; }
.sp-lv-hero-gorsel img { max-width: 100%; max-height: 320px; object-fit: contain; }
.sp-lv-baslik { text-align: center; font-weight: 800; margin-bottom: 1.4rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.sp-lv-kutular { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sp-lv-kutu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 140px; border-radius: 20px; background: var(--pt-l, var(--bs-primary)); color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
[data-bs-theme=dark] .sp-lv-kutu { background: var(--pt-d, var(--pt-l, var(--bs-primary))); }
.sp-lv-kutu:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); color: #fff; }
.sp-lv-kutu-ikon svg { width: 38px; height: 38px; fill: currentColor; }
.sp-lv-kutu-ikon i { font-size: 2rem; }
.sp-lv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-radius: 22px; background: var(--bs-primary); color: #fff; }
.sp-lv-cta h2 { font-size: 1.4rem; margin-bottom: .3rem; }
@media (max-width: 767.98px) { .sp-lv-hero { grid-template-columns: 1fr; text-align: center; } .sp-lv-hero p { margin-inline: auto; } .sp-lv-eylem { justify-content: center; } .sp-lv-kutular { grid-template-columns: repeat(2, 1fr); } }

/* Landing vitrin: tek başına sayfa */
.sp-lv-sayfa { background: var(--bs-body-bg); }
.sp-lv-ust { position: sticky; top: 0; z-index: 50; padding: 12px 0; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sp-cizgi); }
[data-bs-theme=dark] .sp-lv-logo .light-mode-item, [data-bs-theme=light] .sp-lv-logo .dark-mode-item { display: none; }
.sp-lv-alt { border-top: 1px solid var(--sp-cizgi); margin-top: 2rem; }
.sp-lv-alt a { text-decoration: none; opacity: .8; }
.sp-lv-geri { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; opacity: .8; margin-bottom: 1rem; }
.sp-lv-sayfa-baslik { display: flex; align-items: center; gap: 16px; }
.sp-lv-sayfa-baslik h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0; }
.sp-lv-sayfa-baslik .sp-lv-kutu-ikon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--pt-l, var(--bs-primary)); color: #fff; }
[data-bs-theme=dark] .sp-lv-sayfa-baslik .sp-lv-kutu-ikon { background: var(--pt-d, var(--pt-l, var(--bs-primary))); }
.sp-lv-hizmet { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--sp-cizgi); border-radius: 18px; background: var(--sp-kart); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.sp-lv-hizmet:hover { transform: translateY(-2px); border-color: var(--pt-l, var(--bs-primary)); color: inherit; }
.sp-lv-hizmet-ikon { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--pt-l, var(--bs-primary)); color: #fff; }
[data-bs-theme=dark] .sp-lv-hizmet-ikon { background: var(--pt-d, var(--pt-l, var(--bs-primary))); }
.sp-lv-paket { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px; border: 1px solid var(--sp-cizgi); border-radius: 18px; background: var(--sp-kart); color: inherit; text-decoration: none; text-align: center; transition: transform .2s, border-color .2s; }
.sp-lv-paket:hover { transform: translateY(-3px); border-color: var(--pt-l, var(--bs-primary)); color: inherit; }
.sp-lv-paket-ad { font-size: 1.05rem; }
.sp-lv-paket-fiyat s { display: block; opacity: .55; font-size: .85rem; }
.sp-lv-paket-fiyat b { font-size: 1.25rem; color: var(--pt-l, var(--bs-primary)); }
.sp-lv-paket-btn { margin-top: auto; padding: 8px 12px; border-radius: 12px; background: var(--pt-l, var(--bs-primary)); color: #fff; font-weight: 600; font-size: .9rem; }
[data-bs-theme=dark] .sp-lv-paket-btn { background: var(--pt-d, var(--pt-l, var(--bs-primary))); }
a.sp-sepete-ekle { text-decoration: none; display: inline-block; text-align: center; }
.sp-lv-logo img { height: 38px !important; width: auto !important; max-width: 180px; }
.sp-pop-liste .hoverli { padding: .35rem .5rem !important; gap: .6rem !important; }
.sp-pop-liste .hoverli .icon-lg { width: 40px; height: 40px; flex: 0 0 40px; font-size: .95rem; }
.sp-pop-liste .hoverli p { font-size: .88rem; line-height: 1.25; }

/* Popüler hizmetler: fotoğraf daha küçük, paketler eşit genişlikte düzenli ızgara */
@media (min-width: 992px) { .sp-pop-foto { flex: 0 0 calc(40% - 8px); width: calc(40% - 8px); max-width: none; height: auto; min-height: 300px; align-self: stretch; position: relative; } .sp-pop-foto img { position: absolute; inset: 0; width: 100%; height: 100%; } .sp-pop-liste { flex: 1 1 0 !important; min-width: 0; } }
.sp-pop-liste .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sp-pop-liste .row > .col { width: auto; max-width: none; padding: 0; margin: 0; flex: none; }
.sp-pop-liste .hoverli { height: 100%; }
.sp-pop-liste .hoverli p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1199.98px) { .sp-pop-liste .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sp-pop-liste .row { grid-template-columns: 1fr; } }
.sp-pop-liste .hoverli p { font-size: .95rem; }

/* Örnek kullanıcılar kutusu */
.sp-ornek { padding: 14px 16px 16px; }
.sp-ornek-baslik { text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: 10px; font-weight: 600; }
.sp-ornek-satir { display: flex; justify-content: center; }
.sp-ornek-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bs-body-bg); margin-left: -8px; background: color-mix(in srgb, var(--bs-body-color) 12%, transparent); display: grid; place-items: center; }
.sp-ornek-av:first-child { margin-left: 0; }
.sp-ornek-av.bos { color: color-mix(in srgb, var(--bs-body-color) 35%, transparent); font-size: 1.1rem; }
.sp-ornek-adlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.sp-ornek-adlar span { font-size: .75rem; padding: 3px 10px; border-radius: 20px; border: 1px dashed var(--sp-cizgi); opacity: .8; }
.sp-ornek-ic { margin: 12px 14px 4px; padding: 12px 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bs-body-color) 5%, transparent); }

/* Örnek kullanıcılar: diğer özellik satırlarıyla aynı zemin, hover animasyonu ve ad ipucu */
.sp-ornek-ic { background: var(--sp-kart-2); border: 1px solid var(--sp-cizgi); border-radius: 14px; }
.sp-ornek-satir { padding: 6px 0 2px; }
.sp-ornek-w { position: relative; display: inline-block; margin-left: -8px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), z-index 0s; z-index: 1; }
.sp-ornek-w:first-child { margin-left: 0; }
.sp-ornek-w .sp-ornek-av { margin-left: 0; transition: box-shadow .25s, border-color .25s; }
.sp-ornek-w:hover { transform: translateY(-6px) scale(1.18); z-index: 5; }
.sp-ornek-w:hover .sp-ornek-av { border-color: var(--bs-primary); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.sp-ornek-w::after { content: attr(data-ad); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; padding: 3px 9px; border-radius: 8px; background: var(--bs-body-color); color: var(--bs-body-bg); font-size: .7rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sp-ornek-w:hover::after { opacity: 1; transform: translate(-50%, 0); }
@keyframes spOrnekGiris { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.sp-ornek-w { animation: spOrnekGiris .45s both; }
.sp-ornek-w:nth-child(2) { animation-delay: .05s; } .sp-ornek-w:nth-child(3) { animation-delay: .1s; } .sp-ornek-w:nth-child(4) { animation-delay: .15s; }
.sp-ornek-w:nth-child(5) { animation-delay: .2s; } .sp-ornek-w:nth-child(6) { animation-delay: .25s; } .sp-ornek-w:nth-child(7) { animation-delay: .3s; } .sp-ornek-w:nth-child(8) { animation-delay: .35s; }

/* Kategori (sekme) kartı: rozet + soru işareti; açıklama balonu kart dışına taşar */
.category_card { overflow: visible !important; }
.sp-sekme-rozet { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 3px 12px; border-radius: 20px; background: var(--bs-primary); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; z-index: 2; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.sp-sekme-ipucu { position: absolute; top: 10px; right: 10px; z-index: 3; font-size: 1rem; }
.sp-ipucu[data-sp-ipucu]::after { display: none !important; }
.sp-ipucu-balon { position: fixed; z-index: 100000; max-width: 260px; padding: 10px 13px; border-radius: 12px; background: #20242d; color: #fff; font-size: .8rem; line-height: 1.45; font-weight: 400; text-align: left; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.sp-ipucu-balon.acik { opacity: 1; transform: none; }
[data-bs-theme=light] .sp-ipucu-balon { background: #1b1f27; }

/* ======== Platform rengi: fiyat tablosu, karşılaştırma ve SSS bölümleri (gece / gündüz uyumlu) ======== */
.sp-pt-tema { --ac: var(--pt-l, var(--bs-primary)); }
[data-bs-theme=dark] .sp-pt-tema { --ac: var(--pt-d, var(--pt-l, var(--bs-primary))); }

/* Fiyat tablosu */
.sp-fiyat-bolum.sp-pt-tema .sp-etiket { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 50%, transparent); background: color-mix(in srgb, var(--ac) 10%, transparent); }
.sp-fiyat-bolum.sp-pt-tema .sp-fiyat-kutu { border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent); box-shadow: 0 14px 44px color-mix(in srgb, var(--ac) 12%, transparent); }
.sp-fiyat-bolum.sp-pt-tema .sp-fiyat-tablo-sarmal { border-color: color-mix(in srgb, var(--ac) 35%, transparent); }
.sp-fiyat-bolum.sp-pt-tema .sp-fiyat-tablo thead th { background: color-mix(in srgb, var(--ac) 16%, var(--sp-kart-2)); color: var(--ac); }
.sp-fiyat-bolum.sp-pt-tema .sp-fiyat-tablo td.fw-bold { color: var(--ac); }
.sp-fiyat-bolum.sp-pt-tema .sp-fiyat-maddeler li i { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 50%, transparent); }
.sp-fiyat-bolum.sp-pt-tema a:not(.btn) { color: var(--ac); }
.sp-fiyat-bolum.sp-pt-tema .sp-cip.aktif { background: var(--ac); border-color: var(--ac); color: #fff; }

/* Karşılaştırma */
.sp-karsi-bolum.sp-pt-tema .sp-karsi-rozet { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 50%, transparent); background: color-mix(in srgb, var(--ac) 10%, transparent); }
.sp-karsi-bolum.sp-pt-tema .sp-karsi-not { border-left-color: var(--ac); }
.sp-karsi-bolum.sp-pt-tema .sp-karsi-tablo { border-color: color-mix(in srgb, var(--ac) 35%, transparent); }
.sp-karsi-bolum.sp-pt-tema .sp-karsi-ust > .biz { color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); }
.sp-karsi-bolum.sp-pt-tema .sp-karsi-satir > .biz { background: color-mix(in srgb, var(--ac) 8%, transparent); }
.sp-karsi-bolum.sp-pt-tema .sp-karsi-satir .oz i { color: var(--ac); opacity: .9; }

/* Sıkça sorulan sorular: platform renginde, düşük opaklıklı zemin (gece / gündüz uyumlu) */
.sp-sss-bolum.sp-pt-tema > .container::before { background: color-mix(in srgb, var(--ac) 9%, var(--sp-kart)); border-color: color-mix(in srgb, var(--ac) 30%, transparent); }
.sp-sss-bolum.sp-pt-tema .icon-lg { background: color-mix(in srgb, var(--ac) 16%, transparent) !important; color: var(--ac) !important; }
.sp-sss-bolum.sp-pt-tema .accordion-button { background: color-mix(in srgb, var(--ac) 7%, var(--sp-kart)); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); }
.sp-sss-bolum.sp-pt-tema .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--ac) 14%, var(--sp-kart)); color: var(--ac); box-shadow: none; }

/* Müşteri avatarı (profil menüsü / hesap kartı) */
.avatar-img { overflow: hidden; }
.avatar-img .sp-avatar-foto { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.sp-av-sekmeler { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sp-av-sekme { border: 1px solid rgba(8,156,241,.35); background: transparent; color: inherit; border-radius: .5rem; padding: .4rem .9rem; font-size: .9rem; cursor: pointer; }
.sp-av-sekme.aktif { background: #089cf1; border-color: #089cf1; color: #fff; }
.sp-av-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .6rem; max-height: 280px; overflow: auto; padding: 2px; }
.sp-av-oge { border: 2px solid transparent; border-radius: .5rem; padding: 0; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.sp-av-oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-av-oge:hover { border-color: rgba(8,156,241,.55); }
.sp-av-oge.secili { border-color: #089cf1; box-shadow: 0 0 0 2px rgba(8,156,241,.25); }

/* Müşteri paneli ve ödeme: form alanları ve butonlar aynı yuvarlaklıkta (12px); kartlar 20px kalır */
.form-control:not(textarea), .form-select { border-radius: 12px; }
textarea.form-control { border-radius: 12px; }
.form-floating > .input-group-text, .form-floating .input-group-text { border-radius: 12px 0 0 12px !important; }
.form-floating:has(> .input-group-text) > .form-control, .form-floating:has(> .input-group-text) > .form-select { border-radius: 12px; }
.form-floating > .btn { border-radius: 9px !important; }
.btn:not(.btn-sm):not(.btn-lg):not(.btn-close):not(.rounded-pill):not(.rounded-circle):not(.rounded-0):not([class*="icon-"]):not(.sp-adet-btn) { border-radius: 12px !important; }
.btn-sm { border-radius: 9px; }
.alert { border-radius: 12px; }

/* Mobil hesap çekmecesi: ikon altı yazılar gece/gündüz modunda okunur (global p rengini ezer) */
.navbar-mobile .accountArea a p, .navbar-mobile .accountArea a .text-medium { color: #fff !important; }
.navbar-mobile .accountArea a.border { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28) !important; }
[data-bs-theme=dark] .navbar-mobile .accountArea a.border { background-color: rgb(22, 22, 22); }
.accountArea .icon-lg .sp-avatar-foto { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Ödeme yöntemi listesi (Bakiye Yükle ve Ödeme sayfaları): ikon kutusu, ad, açıklama, komisyon, seçim işareti */
.sp-od-liste { --od-renk: var(--bs-primary); }
.sp-od-kart.payment_method { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px !important; text-align: left !important; border: 1px solid var(--sp-cizgi, rgba(127, 127, 127, .25)); border-radius: 16px !important; background: transparent !important; position: relative; transition: border-color .15s, background .15s, box-shadow .15s; }
.sp-od-kart.payment_method:hover { border-color: color-mix(in srgb, var(--od-renk) 55%, transparent); background: color-mix(in srgb, var(--od-renk) 5%, transparent) !important; }
.sp-od-kart.payment_method.selected { border-color: var(--od-renk); background: color-mix(in srgb, var(--od-renk) 8%, transparent) !important; box-shadow: 0 0 0 1px var(--od-renk) inset; }
.sp-od-ikon { flex: 0 0 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.55rem; color: var(--od-renk); background: color-mix(in srgb, var(--od-renk) 15%, transparent); font-weight: 700; }
.sp-od-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-od-ad { font-size: 1rem; color: var(--bs-body-color); line-height: 1.3; }
.sp-od-aciklama { font-size: .84rem; color: var(--bs-body-color); opacity: .72; line-height: 1.35; }
.sp-od-komisyon { font-size: .78rem; font-weight: 700; color: var(--bs-body-color); opacity: .85; }
.sp-od-tik { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--od-renk); color: #fff; font-size: .8rem; }
.sp-od-kart.selected .sp-od-tik { display: grid; }
.sp-od-kart.selected .sp-od-ad { color: var(--od-renk); }
.sp-od-stripe { --od-renk: #635bff; }
.sp-od-kart.sp-od-kart { --od-renk: #ff6a3d; }
.sp-od-stripe.sp-od-kart { --od-renk: #635bff; }
.sp-od-bakiye.sp-od-kart { --od-renk: #12b886; }
.sp-od-havale.sp-od-kart { --od-renk: #1c7ed6; }
.sp-od-kripto.sp-od-kart { --od-renk: #f59f00; }
.sp-od-wise.sp-od-kart { --od-renk: #37b27a; }
.sp-od-mobil.sp-od-kart { --od-renk: #7048e8; }
[data-bs-theme=dark] .sp-od-kart.payment_method .sp-od-ad { color: #fff; }
[data-bs-theme=dark] .sp-od-kart.selected .sp-od-ad { color: var(--od-renk); }

/* Ödeme yöntemleri: 2'li ızgara (dar telefonlarda tek sütun) */
.sp-od-liste > .col-12 { flex: 0 0 auto; width: 50%; }
.sp-od-liste > .col-12 > .sp-od-kart { height: 100%; }
@media (max-width: 575.98px) {
    .sp-od-liste > .col-12 > .sp-od-kart.payment_method { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px !important; }
    .sp-od-ikon { flex-basis: 44px; width: 44px; height: 44px; font-size: 1.3rem; }
    .sp-od-ad { font-size: .92rem; }
    .sp-od-aciklama { font-size: .76rem; }
}
@media (max-width: 359.98px) { .sp-od-liste > .col-12 { width: 100%; } }

/* Footer / mega alt menüleri: konum (left/top) animasyona girmesin; panel köşeden değil, yumuşakça alttan yükselerek açılsın */
.sp-tile-arac { transition: opacity .22s ease, transform .22s ease, visibility .22s !important; transform: translateY(10px); }
.sp-tile-aracli:hover .sp-tile-arac, .sp-foot-oge:hover .sp-foot-fly { transform: none; }

/* ---------------- Plan bölümleri (Popüler / Fenomen Kombo / Kurumsal): mavi çizgili zemin + koyu/açık kartlar ---------------- */
.sp-plan-bolum.bg-primary-lines { padding-top: 3rem !important; padding-bottom: 3.5rem !important; }
.sp-plan-bolum .sp-plan-baslik-satir { color: #fff; margin-bottom: 2.2rem; }
.sp-plan-bolum .sp-plan-baslik-satir h2 { color: #fff; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.sp-plan-bolum .sp-plan-baslik-satir p { color: #fff; opacity: 1 !important; font-weight: 500; }
.sp-plan-filtre { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sp-plan-filtre-yazi { color: #fff; font-weight: 300; }
.sp-plan-bolum .sp-plan-sekmeler { margin-left: 0; padding: 0; gap: 8px; border: 0; background: transparent; border-radius: 0; }
.sp-plan-bolum .sp-plan-sekmeler button { width: 48px; height: 48px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .85); background: transparent; transition: background .15s, transform .15s; }
.sp-plan-bolum .sp-plan-sekmeler button svg path { fill: #fff; stroke: #fff; }
.sp-plan-bolum .sp-plan-sekmeler button svg.only-stroke path { fill: none; }
.sp-plan-bolum .sp-plan-sekmeler button svg.only-fill path { stroke: none; }
.sp-plan-bolum .sp-plan-sekmeler button.aktif { background: var(--sp-pt, var(--bs-primary)); border-color: #fff; }
.sp-plan-bolum .sp-plan-sekmeler button:not(.aktif):hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.sp-plan-bolum .sp-plan-kart { --pk-zemin: #fff; --pk-yazi: #1b1f27; --pk-cizgi: #e6e9f0; --pk-fiyat: #1b1f27; background: var(--pk-zemin); color: var(--pk-yazi); border: 0; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 20, 60, .28); }
[data-bs-theme=dark] .sp-plan-bolum .sp-plan-kart { --pk-zemin: #1a1a1a; --pk-yazi: #f1f3f7; --pk-cizgi: #333; --pk-fiyat: #fff; }
.sp-plan-bolum .sp-plan-rozet { background: #dc3545; top: -13px; font-size: .72rem; font-weight: 600; border-radius: 6px 6px 0 0; padding: 4px 10px; }
.sp-plan-bolum .sp-plan-ust { padding: 1rem 1rem .9rem; gap: .8rem; border-bottom: 1px solid var(--pk-cizgi); margin: 0 0; }
.sp-plan-bolum .sp-plan-ust .sp-plan-ikon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 8px; }
.sp-plan-bolum .sp-plan-ust .sp-plan-ikon svg { width: 20px; height: 20px; }
.sp-plan-bolum .sp-plan-ust .sp-plan-pt { color: var(--pk-yazi); font-size: 1rem; opacity: .9; }
.sp-plan-bolum .sp-plan-ust .sp-plan-ad { color: var(--pk-yazi); opacity: .75; font-size: .82rem; }
.sp-plan-bolum .sp-plan-ozellikler { padding: 0 1rem; }
.sp-plan-bolum .sp-plan-ozellikler li { padding: 11px 0; border-bottom: 1px solid var(--pk-cizgi); gap: 12px; font-size: .9rem; font-weight: 600; color: var(--pk-yazi); }
.sp-plan-bolum .sp-plan-ozellikler li:last-child { border-bottom: 0; }
.sp-plan-bolum .sp-plan-ozellikler li i { flex: 0 0 22px; height: 22px; width: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--sp-pt, var(--bs-primary)); color: #fff; font-size: .68rem; }
.sp-plan-bolum .sp-plan-ozellikler li.vurgu { background: transparent; color: var(--pk-yazi); font-weight: 600; }
.sp-plan-bolum .sp-plan-ozellikler li.vurgu i { color: #fff; }
.sp-plan-bolum .sp-plan-alt { padding: 1rem; }
.sp-plan-bolum .sp-plan-fiyat s { color: var(--pk-yazi); opacity: .55; font-size: .78rem; }
.sp-plan-bolum .sp-plan-fiyat b { color: var(--pk-fiyat); font-size: 1.15rem; font-weight: 700; }
.sp-plan-bolum .sp-sepete-ekle { background: var(--bs-primary) !important; color: #fff !important; border: 0; border-radius: 8px; padding: .8rem 1.1rem; font-weight: 400; white-space: nowrap; }
.sp-plan-bolum .sp-sepete-ekle:hover { filter: brightness(1.08); }
@media (max-width: 991.98px) { .sp-plan-filtre { margin-left: 0; width: 100%; } }
.sp-plan-bolum .sp-plan-baslik-satir .icon-lg { background: #fff !important; color: var(--bs-primary) !important; }

/* Sosyal medya paket sayfası: sol "Hizmet Hakkında" kartı (kapak, açıklama, puan, yapay zekâ özeti) */
.sp-hz-hakkinda { overflow: hidden; }
.sp-hk-gorsel { position: relative; aspect-ratio: 400 / 230; background: linear-gradient(135deg, var(--pt-l, var(--bs-primary)), color-mix(in srgb, var(--pt-l, var(--bs-primary)) 55%, #12161d)); flex: 0 0 auto; }
.sp-hk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-hk-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 16, .78), rgba(8, 10, 16, 0) 62%); }
.sp-hk-marka { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; color: #fff; }
.sp-hk-marka b { display: block; font-size: 1.15rem; line-height: 1.1; }
.sp-hk-marka small { display: block; opacity: .85; font-size: .8rem; }
.sp-hk-ikon { width: 46px; height: 46px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: 0 0 46px; }
.sp-hk-ikon svg { width: 24px; height: 24px; }
.sp-hk-govde { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; }
.sp-hk-baslik { font-size: 1.05rem; margin: 0; font-weight: 600; }
.sp-hk-aciklama { margin: 0; font-size: .92rem; line-height: 1.6; opacity: .8; }
.sp-hk-puan { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sp-cizgi); }
.sp-hk-puan-ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--pt-l, var(--bs-primary)) 14%, transparent); color: var(--pt-l, var(--bs-primary)); }
.sp-hk-puan small { display: block; opacity: .7; font-size: .78rem; }
.sp-hk-puan b { font-size: 1.02rem; }
.sp-hk-govde .sp-ai-ozet { margin-top: auto; padding: 0; border: 0; background: transparent; }
.sp-hk-govde .sp-ai-liste { grid-template-columns: 1fr 1fr; }
.sp-hk-govde .sp-ai-btn { padding: 9px 8px; font-size: .8rem; justify-content: center; text-align: center; flex-direction: column; gap: 4px; }
[data-bs-theme=dark] .sp-hz-hakkinda .sp-hk-ikon { background: #fff; }

/* Sol sütun: "Hizmet Hakkında" kartı + kısa, kaydırmalı hizmet listesi (uzun açık liste yok) */
.sp-hz3 > aside { align-self: start; position: sticky; top: 90px; }
.sp-hz3 .sp-hz-sol { height: auto; }
.sp-hz3 .sp-hz-sol .sp-ep-kart { height: auto; }
.sp-hz3 .sp-hz-sol .sp-hz-liste { max-height: 300px; overflow-y: auto; flex: none; scrollbar-width: thin; }
.sp-hk-govde { flex: none; }

/* Sol sütun sağ sütunla aynı boyda (yükseklik betikle verilir); hizmet listesi kalan alanı doldurup kendi içinde kayar */
.sp-hz3 > aside { position: static; align-self: start; }
.sp-hz3 > aside .sp-hz-sol { height: 100%; display: flex; flex-direction: column; }
.sp-hz3 > aside .sp-hz-liste-kart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sp-hz3 > aside .sp-hz-liste-kart .sp-hz-liste { flex: 1 1 auto; max-height: none; overflow-y: auto; }
/* Yapay zekâ özeti: 4'lü ızgara (simge üstte, ad altta) */
.sp-ai-liste { grid-template-columns: repeat(4, 1fr); }
.sp-ai-btn { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 6px; font-size: .78rem; }
.sp-ai-btn > span:last-child { line-height: 1.2; }
@media (max-width: 575.98px) { .sp-ai-liste { grid-template-columns: repeat(2, 1fr); } }
.sp-ai-btn .sp-ai-ikon svg { width: 22px; height: 22px; }
.sp-hz3 > aside .sp-hz-hakkinda { flex: 0 0 auto; height: auto; }

/* Yapay zekâ özeti: 2 sütun x 2 satır */
.sp-ai-liste { grid-template-columns: repeat(2, 1fr) !important; }
.sp-ai-btn { flex-direction: row !important; justify-content: center; gap: 10px !important; padding: 12px 10px !important; font-size: .86rem !important; }
@media (max-width: 575.98px) { .sp-ai-liste { grid-template-columns: repeat(2, 1fr) !important; } }

/* Hizmet Hakkında kartı: beyaz kutudaki platform simgesi platform renginde */
.sp-hk-ikon { color: var(--pt-l, var(--bs-primary)); }
.sp-hk-ikon svg path, .sp-hk-ikon svg circle, .sp-hk-ikon svg rect, .sp-hk-ikon svg polygon { fill: var(--pt-l, var(--bs-primary)) !important; stroke: var(--pt-l, var(--bs-primary)) !important; }
.sp-hk-ikon svg.only-stroke path { fill: none !important; }
.sp-hk-ikon svg.only-fill path { stroke: none !important; }
.sp-hk-ikon i { color: var(--pt-l, var(--bs-primary)); font-size: 1.3rem; }

/* Sol sütun da sağdaki gibi kaydırırken yapışkan; yüksekliği betikle sağ kart grubuna eşitlenir */
.sp-hz3 > aside { align-self: stretch; }
.sp-hz3 > aside .sp-hz-sol { position: sticky; top: 63px; height: auto; }

/* ---------------- Pop-up duyuru (site logosu + marka rengi) ---------------- */
.sp-popup { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s ease; }
.sp-popup[hidden] { display: none; }
.sp-popup.acik { opacity: 1; }
.sp-popup-perde { position: absolute; inset: 0; background: rgba(8, 12, 20, .62); backdrop-filter: blur(3px); }
.sp-popup-kart { position: relative; width: min(430px, 100%); border-radius: 22px; padding: 26px 24px 24px; color: #fff; text-align: center; overflow: hidden; background: linear-gradient(165deg, #089cf1 0%, #0b6fc2 100%); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); transform: translateY(18px) scale(.97); transition: transform .3s ease; }
.sp-popup-kart::before { content: ""; position: absolute; inset: 0; background: url(/themes/sosyalpot/assets/images/lines.svg) center / cover no-repeat; opacity: .35; pointer-events: none; }
.sp-popup-kart > * { position: relative; }
[data-bs-theme=dark] .sp-popup-kart { background: linear-gradient(165deg, #0a84cc 0%, #0a4f8a 100%); }
.sp-popup.acik .sp-popup-kart { transform: none; }
.sp-popup-kapat { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sp-popup-kapat:hover { background: rgba(255, 255, 255, .3); }
.sp-popup-logo { margin-bottom: 14px; }
.sp-popup-logo img { height: 40px; width: auto; max-width: 70%; }
.sp-popup-baslik { font-size: 1.35rem; line-height: 1.3; margin: 0 0 10px; font-weight: 700; color: #fff; }
.sp-popup-metin { margin: 0 0 18px; font-size: .96rem; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.sp-popup-kupon { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 11px 18px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 1.15rem; cursor: pointer; }
.sp-popup-kupon:hover { background: rgba(255, 255, 255, .24); }
.sp-popup-buton { display: block; width: 100%; padding: 13px 18px; border: 0; border-radius: 14px; background: #fff; color: #0b6fc2; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sp-popup-buton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); color: #0b6fc2; }

/* ---------------- Toastify: tek biçim ---------------- */
.sp-toast.toastify { border-radius: 12px; padding: 11px 16px; font-size: .88rem; line-height: 1.35; max-width: min(340px, calc(100vw - 24px)); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); background-image: none; font-family: inherit; }
.sp-toast-ok.toastify { background: #12a373; }
.sp-toast-hata.toastify { background: #e5484d; }
.sp-toast-bilgi.toastify { background: #12161d; border: 1px solid rgba(255, 255, 255, .12); }
[data-bs-theme=dark] .sp-toast-bilgi.toastify { background: #1f2430; }
.toastify.sp-toast.on { opacity: 1; }
.sp-popup-logo img { filter: brightness(0) invert(1); }

/* Soru - Cevap: platform rengiyle (hafif) */
.sp-sc-bolum { --c: var(--pt-l, var(--bs-primary)); }
[data-bs-theme=dark] .sp-sc-bolum { --c: var(--pt-d, var(--pt-l, var(--bs-primary))); }
.sp-sc-bolum .sp-sc-kutu { border-color: color-mix(in srgb, var(--c) 28%, var(--sp-cizgi)); background: color-mix(in srgb, var(--c) 5%, var(--sp-kart)); }
.sp-sc-bolum .sp-sc-ust, .sp-sc-bolum .sp-sc-form, .sp-sc-bolum .sp-sc-oge { border-color: color-mix(in srgb, var(--c) 18%, var(--sp-cizgi)); }
.sp-sc-bolum .sp-sc-avatar { background: var(--c); }
.sp-sc-bolum .sp-sc-soru { background: color-mix(in srgb, var(--c) 10%, transparent); }
.sp-sc-bolum .sp-sc-cevap { border-color: color-mix(in srgb, var(--c) 30%, var(--sp-cizgi)); border-left: 3px solid var(--c); }
.sp-sc-bolum .btn-outline-primary { --bs-btn-color: var(--c); --bs-btn-border-color: var(--c); --bs-btn-hover-bg: var(--c); --bs-btn-hover-border-color: var(--c); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--c); --bs-btn-active-border-color: var(--c); }
.sp-sc-bolum .btn-primary { --bs-btn-bg: var(--c); --bs-btn-border-color: var(--c); --bs-btn-hover-bg: color-mix(in srgb, var(--c) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--c) 88%, #000); }
.sp-sc-bolum .text-primary { color: var(--c) !important; }
.sp-sc-bolum .sp-sc-sayi b { color: var(--c); }

/* ---------------- Kampanyalar ---------------- */
.sp-kmp-bos { text-align: center; padding: 60px 20px; border: 1px dashed var(--sp-cizgi); border-radius: 20px; opacity: .85; }
.sp-kmp-bos i { font-size: 2.4rem; display: block; margin-bottom: 10px; color: var(--bs-primary); }
.sp-kmp-kart { height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--sp-kart); border: 1px solid var(--sp-cizgi); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; }
.sp-kmp-kart:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 20, 60, .16); border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--sp-cizgi)); }
.sp-kmp-kart.bitti { cursor: default; opacity: .72; }
.sp-kmp-kart.bitti:hover { transform: none; box-shadow: none; border-color: var(--sp-cizgi); }
.sp-kmp-kart.bitti .sp-kmp-gorsel img { filter: grayscale(.85); }
.sp-kmp-gorsel { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--bs-primary), #0b4f8a); overflow: hidden; }
.sp-kmp-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-kmp-gorsel-bos { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: rgba(255, 255, 255, .85); }
.sp-kmp-rozet { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 30px; background: rgba(18, 22, 29, .78); color: #fff; font-size: .74rem; font-weight: 600; backdrop-filter: blur(3px); }
.sp-kmp-govde { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sp-kmp-baslik { font-size: 1.05rem; line-height: 1.4; margin: 0; font-weight: 600; }
.sp-kmp-alt { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-kmp-gun { font-size: .84rem; opacity: .8; }
.sp-kmp-durum { border: 0; padding: 7px 14px; border-radius: 10px; background: var(--bs-primary); color: #fff; font-size: .84rem; font-weight: 600; }
.sp-kmp-durum.bitti { background: rgba(127, 127, 127, .25); color: inherit; cursor: default; }
.sp-kmp-modal .modal-content { border-radius: 22px; background: var(--sp-kart, var(--bs-body-bg)); }
.sp-kmp-modal-rozet { display: inline-block; padding: 4px 11px; border-radius: 30px; background: color-mix(in srgb, var(--bs-primary) 14%, transparent); color: var(--bs-primary); font-size: .76rem; font-weight: 600; }
.sp-kmp-kupon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--bs-primary) 8%, transparent); margin-bottom: 16px; }
.sp-kmp-kupon-btn { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 12px; border: 2px dashed var(--bs-primary); background: transparent; color: var(--bs-primary); font-weight: 800; letter-spacing: .1em; }
.sp-kmp-sekme .nav-link { border-radius: 10px; font-size: .88rem; }
.sp-kmp-icerik { font-size: .94rem; line-height: 1.7; }
.sp-kmp-icerik h2, .sp-kmp-icerik h3, .sp-kmp-icerik h4 { font-size: 1rem; margin-top: 14px; }

/* ---------------- Toastify v2: alt orta, yaylanarak girer, geri sayım çubuklu ---------------- */
.toastify.sp-toast { position: fixed; z-index: 2147483600; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 13px 20px 15px 14px; border-radius: 18px; font-size: .93rem; font-weight: 500; line-height: 1.35; color: #fff; max-width: min(92vw, 440px); width: max-content; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 18px 44px rgba(0, 0, 0, .38), 0 2px 0 rgba(255, 255, 255, .06) inset; opacity: 0; transform: translateY(46px) scale(.88); transition: opacity .35s ease, transform .6s cubic-bezier(.2, 1.4, .3, 1), bottom .6s cubic-bezier(.2, 1.4, .3, 1); }
.toastify.sp-toast.on { opacity: 1; transform: translateY(0) scale(1); }
.toastify.sp-toast.sp-toast-cikis { opacity: 0 !important; transform: translateY(26px) scale(.9) !important; transition: opacity .3s ease, transform .35s cubic-bezier(.5, 0, .9, .4); }
.toastify.sp-toast::before { content: "\f26b"; font-family: bootstrap-icons; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: rgba(255, 255, 255, .2); animation: spToastIkon .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.toastify.sp-toast.sp-toast-hata::before { content: "\f62a"; }
.toastify.sp-toast.sp-toast-bilgi::before { content: "\f431"; }
.toastify.sp-toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .85); transform-origin: left; animation: spToastSure 3.2s linear forwards; }
.toastify.sp-toast.sp-toast-ok { background: linear-gradient(135deg, #15b57f, #0e8f64); }
.toastify.sp-toast.sp-toast-hata { background: linear-gradient(135deg, #f0555a, #c93035); }
.toastify.sp-toast.sp-toast-bilgi { background: linear-gradient(135deg, #1b2230, #0d1118); }
.toastify.sp-toast.sp-toast-bilgi::before { background: color-mix(in srgb, var(--bs-primary) 70%, transparent); }
.toastify.sp-toast.toastify-center { left: 0; right: 0; margin-left: auto; margin-right: auto; }
@keyframes spToastSure { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes spToastIkon { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .toastify.sp-toast, .toastify.sp-toast::before, .toastify.sp-toast::after { animation: none !important; transition: opacity .2s !important; transform: none !important; } }
.bg-primary.py-3 .container a, #orderLink { white-space: nowrap; }

/* ---------------- Plan bölümleri: platform filtre düğmeleri (her zaman platform renginde) ---------------- */
.sp-plan-bolum .sp-plan-sekmeler { gap: 10px; }
.sp-plan-bolum .sp-plan-sekmeler button { position: relative; background: color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 52%, rgba(255, 255, 255, .06)); border: 2px solid color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 70%, #fff 18%); box-shadow: 0 4px 12px color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 28%, transparent); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1), background .2s, box-shadow .2s, border-color .2s; }
.sp-plan-bolum .sp-plan-sekmeler button:not(.aktif):hover { background: color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 90%, #000); border-color: #fff; transform: translateY(-4px) scale(1.07); box-shadow: 0 12px 24px color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 60%, transparent); }
.sp-plan-bolum .sp-plan-sekmeler button:active { transform: translateY(-1px) scale(.97); }
.sp-plan-bolum .sp-plan-sekmeler button.aktif { background: var(--sp-pt, var(--bs-primary)); border-color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px rgba(255, 255, 255, .38), 0 12px 26px color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 65%, transparent); }
/* Platform geçişi: kartlar bulanıklaşıp solar, yenileri netleşerek gelir */
.sp-plan-bolum .row.g-4 { transition: filter .23s ease, opacity .23s ease, transform .23s ease; }
.sp-plan-bolum .row.g-4.sp-plan-bulanik { filter: blur(12px); opacity: .15; transform: scale(.985); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sp-plan-bolum .row.g-4, .sp-plan-bolum .sp-plan-sekmeler button { transition: none !important; } .sp-plan-bolum .row.g-4.sp-plan-bulanik { filter: none; } }

/* =====================================================================
   Fiyat tablosu ve Karşılaştırma bölümleri: SosyalPot tasarım dili
   (yumuşak cam kartlar, platform renkli simge kutuları, hap rozetler)
   ===================================================================== */
.sp-fiyat-bolum, .sp-karsi-bolum { --c: var(--pt-l, var(--bs-primary)); }
[data-bs-theme=dark] .sp-fiyat-bolum, [data-bs-theme=dark] .sp-karsi-bolum { --c: var(--pt-d, var(--pt-l, var(--bs-primary))); }

/* ---- Fiyat listesi kartı ---- */
.sp-fp-kart { border-radius: 26px; background: color-mix(in srgb, var(--sp-kart, #fff) 92%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--sp-cizgi)); box-shadow: 0 22px 50px color-mix(in srgb, var(--c) 10%, transparent); overflow: hidden; backdrop-filter: blur(6px); }
.sp-fp-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, var(--sp-cizgi)); }
.sp-fp-ust-metin { display: flex; align-items: center; gap: 12px; }
.sp-fp-ust-metin b { display: block; font-size: 1.02rem; line-height: 1.2; }
.sp-fp-ust-metin small { display: block; opacity: .65; font-size: .78rem; }
.sp-fp-ust-ikon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--c); flex: 0 0 42px; }
.sp-fp-ust-ikon svg { width: 20px; height: 20px; }
.sp-fp-ust-ikon svg path { fill: #fff; stroke: #fff; }
.sp-fp-ust-ikon svg.only-stroke path { fill: none; }
.sp-fp-enuc { padding: 7px 14px; border-radius: 30px; font-size: .8rem; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.sp-fp-enuc b { font-size: .92rem; }
.sp-fp-kart .sp-fiyat-tablo-sarmal { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 6px 14px 10px; }
.sp-fp-kart .sp-fiyat-tablo { border-collapse: separate; border-spacing: 0 6px; width: 100%; }
.sp-fp-kart .sp-fiyat-tablo th { background: transparent; border: 0; padding: 10px 14px 4px; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; opacity: .6; font-weight: 700; }
.sp-fp-kart .sp-fiyat-tablo td { border: 0; padding: 11px 14px; background: color-mix(in srgb, var(--c) 4%, transparent); transition: background .18s; vertical-align: middle; }
.sp-fp-kart .sp-fiyat-tablo td + td { border-left: 0; }
.sp-fp-kart .sp-fiyat-tablo td:first-child { border-radius: 14px 0 0 14px; }
.sp-fp-kart .sp-fiyat-tablo td:last-child { border-radius: 0 14px 14px 0; }
.sp-fp-kart .sp-fiyat-tablo tbody tr:hover td { background: color-mix(in srgb, var(--c) 13%, transparent); }
.sp-fp-adet { font-size: .88rem; }
.sp-fp-adet b { font-size: 1.05rem; font-weight: 800; }
.sp-fp-fiyat { display: inline-block; padding: 5px 12px; border-radius: 30px; background: var(--c); color: #fff; font-weight: 700; font-size: .86rem; white-space: nowrap; }
.sp-fp-eski { display: block; margin-top: 2px; font-size: .72rem; opacity: .5; }
.sp-fp-hediye { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(18, 201, 155, .14); color: #0c9f7a; font-weight: 700; font-size: .8rem; }
[data-bs-theme=dark] .sp-fp-hediye { color: #34e0b6; }
.sp-fp-indirim { display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgba(245, 183, 10, .16); color: #b98400; font-weight: 700; font-size: .8rem; }
[data-bs-theme=dark] .sp-fp-indirim { color: #ffcf4a; }
.sp-fp-yok { opacity: .35; }
.sp-fp-son { width: 52px; text-align: right; }
.sp-fp-git { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c) !important; transition: background .18s, color .18s, transform .18s; }
.sp-fp-kart tr:hover .sp-fp-git, .sp-fp-git:hover { background: var(--c); color: #fff !important; transform: translateX(3px); }

/* ---- Bilgi kartı (sağ) ---- */
.sp-fi-kart { position: sticky; top: 92px; border-radius: 26px; overflow: hidden; background: color-mix(in srgb, var(--sp-kart, #fff) 94%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--sp-cizgi)); box-shadow: 0 22px 50px color-mix(in srgb, var(--c) 10%, transparent); }
.sp-fi-gorsel { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #0b1220)); }
.sp-fi-gorsel img.sp-fiyat-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.sp-fi-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 12, 22, .72), rgba(8, 12, 22, 0) 58%); pointer-events: none; }
.sp-fi-bos { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-fi-bos svg { width: 64px; height: 64px; } .sp-fi-bos svg path { fill: #fff; stroke: #fff; } .sp-fi-bos svg.only-stroke path { fill: none; }
.sp-fi-cipler { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-fi-cipler span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); color: #fff; font-size: .76rem; font-weight: 600; backdrop-filter: blur(8px); }
.sp-fi-govde { padding: 22px 24px 24px; }
.sp-fi-govde .sp-etiket { border-color: color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.sp-fi-govde .sp-fiyat-baslik { font-size: clamp(1.35rem, 2vw, 1.8rem); margin: .8rem 0 .7rem; }
.sp-fi-metin { font-size: .92rem; line-height: 1.65; opacity: .88; margin-bottom: 1.1rem; }
.sp-fi-metin a { color: var(--c); }
.sp-fi-maddeler { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: 8px; }
.sp-fi-maddeler li { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 5%, transparent); font-size: .88rem; line-height: 1.45; }
.sp-fi-tik { flex: 0 0 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: .8rem; }
.sp-fi-buton { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 16px; background: var(--c); color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.sp-fi-buton:hover { transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 40%, transparent); }
@media (max-width: 991.98px) { .sp-fi-kart { position: static; } .sp-fp-kart .sp-fiyat-tablo td { padding: 10px 8px; } .sp-fp-ust { padding: 14px; } }

/* ---- Karşılaştırma ---- */
.sp-kr-fig { position: relative; margin: .4rem 0 1.4rem; border-radius: 26px; overflow: hidden; box-shadow: 0 22px 50px color-mix(in srgb, var(--c) 18%, transparent); }
.sp-kr-fig img.sp-karsi-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.sp-kr-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 12, 22, .66), rgba(8, 12, 22, 0) 55%); pointer-events: none; }
.sp-kr-vs { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: .78rem; font-weight: 600; }
.sp-kr-vs span { padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(8px); }
.sp-kr-vs b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); font-size: .72rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.sp-karsi-bolum .sp-karsi-rozet { border-color: color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.sp-karsi-bolum .sp-karsi-not { border-left-color: var(--c); }
.sp-karsi-bolum .sp-karsi-tablo { border-radius: 26px; overflow: hidden; background: color-mix(in srgb, var(--sp-kart, #fff) 94%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--sp-cizgi)); box-shadow: 0 22px 50px color-mix(in srgb, var(--c) 10%, transparent); }
.sp-karsi-bolum .sp-karsi-ust { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 3%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, var(--sp-cizgi)); font-weight: 700; }
.sp-karsi-bolum .sp-karsi-satir { border-bottom: 1px solid color-mix(in srgb, var(--c) 10%, var(--sp-cizgi)); transition: background .18s; }
.sp-karsi-bolum .sp-karsi-satir:last-child { border-bottom: 0; }
.sp-karsi-bolum .sp-karsi-satir:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.sp-karsi-bolum .sp-karsi-satir .oz > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.sp-karsi-bolum .sp-karsi-ust .biz, .sp-karsi-bolum .sp-karsi-satir .biz { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--c) 28%, transparent), inset -1px 0 0 color-mix(in srgb, var(--c) 28%, transparent); }
.sp-karsi-bolum .sp-karsi-isaret.ok { background: var(--c); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: .8rem; }
.sp-karsi-bolum .sp-karsi-isaret.x, .sp-karsi-bolum .sp-karsi-isaret.yasak { background: rgba(229, 72, 77, .14); color: #e5484d; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: .75rem; }
.sp-karsi-bolum .sp-karsi-isaret.bilgi { background: rgba(245, 183, 10, .16); color: #c18a00; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: .75rem; }

/* Sipariş sorgula modalı: tüm köşeler aynı yarıçap */
#siparisModal .modal-body, #siparisModal .sp-sorgu-sonuc { border-radius: 20px !important; }
#siparisModal .form-floating .input-group-text { border-radius: 12px 0 0 12px !important; }
#siparisModal .form-floating > .form-control { border-radius: 12px !important; }
#siparisModal .hstack > .btn, #siparisModal > .modal-dialog .btn { border-radius: 12px !important; }
#siparisModal .bg-opacity-10.icon-lg { border-radius: 12px !important; }
#siparisModal .badge { border-radius: 10px !important; }

/* Plan bölümü altındaki "tümünü gör" butonu */
.sp-plan-tumu { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 14px; font-weight: 600; text-decoration: none; color: var(--bs-primary); background: var(--bs-body-bg, #fff); border: 1.5px solid var(--bs-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, transform .3s ease, box-shadow .3s ease; }
.sp-plan-tumu::before { content: ""; position: absolute; inset: 0; background: var(--bs-primary); transform: translateY(101%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); z-index: -1; }
.sp-plan-tumu i { transition: transform .3s ease; }
.sp-plan-tumu:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.sp-plan-tumu:hover::before { transform: translateY(0); }
.sp-plan-tumu:hover i { transform: translateX(5px); }
[data-bs-theme=dark] .sp-plan-tumu { background: rgba(255, 255, 255, .04); }

/* Yalnızca /kurumsal-paketler/: plan bölümünün mavi zemini yok, kartlar sayfa zemininde durur */
.sp-kp-sayfa .sp-plan-bolum.bg-primary-lines { background: none !important; padding-top: 2.5rem !important; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-baslik-satir, .sp-kp-sayfa .sp-plan-bolum .sp-plan-baslik-satir h2, .sp-kp-sayfa .sp-plan-bolum .sp-plan-baslik-satir p { color: var(--bs-body-color) !important; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-filtre-yazi { color: var(--bs-body-color) !important; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-baslik-satir .bg-white.icon-lg { background: var(--bs-primary) !important; color: #fff !important; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button { border-color: rgba(var(--bs-body-color-rgb), .35); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button svg path { fill: var(--bs-body-color); stroke: var(--bs-body-color); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button svg.only-stroke path { fill: none; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button svg.only-fill path { stroke: none; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-kart { border: 1px solid var(--pk-cizgi); box-shadow: 0 10px 28px rgba(20, 30, 60, .08); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button.aktif { border-color: var(--sp-pt, var(--bs-primary)); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button.aktif svg path { fill: #fff; stroke: #fff; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button.aktif svg.only-stroke path { fill: none; }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button:not(.aktif):hover { background: rgba(var(--bs-body-color-rgb), .08); }

/* Landing: gece / gündüz anahtarı */
.sp-lv-tema { position: relative; width: 66px; height: 34px; padding: 0; border: 1px solid var(--sp-cizgi); border-radius: 30px; background: var(--bs-tertiary-bg, #eef0f6); cursor: pointer; transition: background .35s ease, border-color .35s ease; flex: 0 0 auto; }
.sp-lv-tema-iz { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; font-size: .8rem; pointer-events: none; }
.sp-lv-tema-iz .bi-sun-fill { color: #f5a623; }
.sp-lv-tema-iz .bi-moon-stars-fill { color: #8ea2ff; }
.sp-lv-tema-top { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s ease; }
.sp-lv-tema[aria-checked="true"] { background: #1c2230; border-color: #2c3550; }
.sp-lv-tema[aria-checked="true"] .sp-lv-tema-top { transform: translateX(32px); background: #dfe6ff; }
.sp-lv-tema:hover .sp-lv-tema-top { box-shadow: 0 2px 12px color-mix(in srgb, var(--bs-primary) 60%, transparent); }
.sp-lv-tema:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* İletişim: telefon alanı bayrak/alan kodunun altında kalmasın */
.sp-ilt .iti input.form-control, .sp-ilt .iti input#spIletisimTel { padding-left: 158px !important; }
@media (max-width: 575.98px) { .sp-ilt .iti input.form-control { padding-left: 150px !important; } }

/* Pop-up duyuru: gündüz modunda açık kart, gece modunda koyu kart */
.sp-popup-logo img { filter: none !important; }
.sp-popup-logo-koyu { display: none; }
[data-bs-theme=dark] .sp-popup-logo-acik { display: none; }
[data-bs-theme=dark] .sp-popup-logo-koyu { display: inline-block; }
html:not([data-bs-theme=dark]) .sp-popup-kart, [data-bs-theme=light] .sp-popup-kart { background: #fff; color: #1b1f27; border: 1px solid #e3e8f2; box-shadow: 0 30px 70px rgba(20, 30, 60, .3); }
[data-bs-theme=light] .sp-popup-kart::before { opacity: .12; filter: invert(.4) sepia(1) hue-rotate(170deg); }
[data-bs-theme=light] .sp-popup-baslik { color: #12161d; }
[data-bs-theme=light] .sp-popup-metin { color: #4a5263; }
[data-bs-theme=light] .sp-popup-kapat { background: #eef1f7; color: #3a4256; }
[data-bs-theme=light] .sp-popup-kapat:hover { background: #e1e6f0; }
[data-bs-theme=light] .sp-popup-kupon { background: color-mix(in srgb, var(--bs-primary) 8%, #fff); border-color: var(--bs-primary); color: var(--bs-primary); }
[data-bs-theme=light] .sp-popup-kupon:hover { background: color-mix(in srgb, var(--bs-primary) 16%, #fff); }
[data-bs-theme=light] .sp-popup-buton, [data-bs-theme=light] .sp-popup-buton:hover { background: var(--bs-primary); color: #fff; }
[data-bs-theme=dark] .sp-popup-kart { background: linear-gradient(165deg, #1b2230 0%, #121722 100%); border: 1px solid rgba(255, 255, 255, .1); }
[data-bs-theme=dark] .sp-popup-buton { background: var(--bs-primary); color: #fff; }
[data-bs-theme=dark] .sp-popup-buton:hover { color: #fff; }
[data-bs-theme=dark] .sp-popup-kupon { border-color: var(--bs-primary); color: #fff; }

/* Duyuru çubuğu */
.sp-duyuru { position: relative; color: #fff; padding: 9px 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease, padding .3s ease; max-height: 120px; }
.sp-duyuru.kapaniyor { max-height: 0; opacity: 0; padding: 0; }
.sp-duyuru-gizli #duyuru { display: none !important; }
.sp-duyuru .container { position: relative; }
.sp-duyuru-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 0 44px; }
.sp-duyuru-metin { margin: 0; color: #fff; font-weight: 500; text-align: center; }
.sp-duyuru-buton { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 0; border-radius: 10px; background: #fff; color: #0b6fc2; font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.sp-duyuru-buton span { padding-right: 8px; border-right: 1px solid rgba(0, 0, 0, .15); letter-spacing: .08em; }
.sp-duyuru-buton:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); color: #0b6fc2; }
.sp-duyuru-kapat { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sp-duyuru-kapat:hover { background: rgba(255, 255, 255, .35); }

/* Duyuru çubuğu: yazılar her zaman beyaz */
.sp-duyuru, .sp-duyuru * { color: #fff; }
.sp-duyuru-buton, .sp-duyuru-buton:hover, .sp-duyuru-buton:focus { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px); }
.sp-duyuru-buton:hover { background: rgba(255, 255, 255, .32); }
.sp-duyuru-buton span { border-right-color: rgba(255, 255, 255, .5); }

/* Pop-up: gradyan / arkaplan görseli / dikey yan görsel */
.sp-popup-kart.sp-popup-ozel { color: #fff; border: 0; }
.sp-popup-kart.sp-popup-ozel .sp-popup-baslik, .sp-popup-kart.sp-popup-ozel .sp-popup-metin { color: #fff; }
.sp-popup-kart.sp-popup-ozel .sp-popup-kapat { background: rgba(255, 255, 255, .2); color: #fff; }
.sp-popup-kart.sp-popup-ozel .sp-popup-kupon { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .8); color: #fff; }
.sp-popup-kart.sp-popup-ozel .sp-popup-buton, .sp-popup-kart.sp-popup-ozel .sp-popup-buton:hover { background: #fff; color: #0b6fc2; }
.sp-popup-kart.sp-popup-ozel .sp-popup-logo-acik { display: none; }
.sp-popup-kart.sp-popup-ozel .sp-popup-logo-koyu { display: inline-block; }
.sp-popup-kart.sp-popup-ozel::before { opacity: .18; filter: none; }
.sp-popup-ic { position: relative; }
.sp-popup-kart.sp-popup-yanli { width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 0; text-align: left; }
.sp-popup-kart.sp-popup-yanli .sp-popup-yan { position: relative; min-height: 100%; }
.sp-popup-kart.sp-popup-yanli .sp-popup-yan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-popup-kart.sp-popup-yanli .sp-popup-ic { padding: 30px 28px 26px; display: flex; flex-direction: column; justify-content: center; }
.sp-popup-kart.sp-popup-yanli .sp-popup-logo { text-align: left; }
.sp-popup-kart.sp-popup-yanli .sp-popup-kupon { align-self: flex-start; }
@media (max-width: 640px) {
    .sp-popup-kart.sp-popup-yanli { grid-template-columns: 1fr; text-align: center; max-height: 92vh; overflow-y: auto; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-yan { height: 190px; min-height: 190px; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-ic { padding: 22px 20px; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-logo { text-align: center; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-kupon { align-self: center; }
}

/* Pop-up (son hâl): arkada çizgi deseni yok; dikey görsel üstte, yazı ve eylem altında */
.sp-popup-kart::before { display: none !important; content: none !important; }
.sp-popup-kart.sp-popup-yanli { width: min(430px, 100%); display: block; padding: 0; text-align: center; max-height: 94vh; overflow-y: auto; }
.sp-popup-kart.sp-popup-yanli .sp-popup-yan { position: relative; width: 100%; min-height: 0; aspect-ratio: 4 / 5; max-height: 46vh; overflow: hidden; }
.sp-popup-kart.sp-popup-yanli .sp-popup-yan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-popup-kart.sp-popup-yanli .sp-popup-ic { padding: 22px 24px 24px; display: block; }
.sp-popup-kart.sp-popup-yanli .sp-popup-logo { text-align: center; margin-bottom: 10px; }
.sp-popup-kart.sp-popup-yanli .sp-popup-kupon { align-self: auto; }
.sp-popup-kart.sp-popup-yanli .sp-popup-kapat { background: rgba(0, 0, 0, .45); color: #fff; }

/* Pop-up açıkken sayfa kaydırılmaz; küçük ekranlarda tam uyumlu */
html.sp-popup-acik, html.sp-popup-acik body { overflow: hidden !important; overscroll-behavior: none; }
.sp-popup { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.sp-popup-kart { max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
    .sp-popup-kart { width: 100%; border-radius: 18px; padding: 22px 16px 18px; }
    .sp-popup-baslik { font-size: 1.15rem; }
    .sp-popup-metin { font-size: .9rem; margin-bottom: 14px; }
    .sp-popup-kupon { font-size: 1rem; padding: 9px 14px; max-width: 100%; }
    .sp-popup-kart.sp-popup-yanli { max-height: 92dvh; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-yan { aspect-ratio: 4 / 5; max-height: 38dvh; }
    .sp-popup-kart.sp-popup-yanli .sp-popup-ic { padding: 16px 16px 18px; }
}
@media (max-height: 520px) { .sp-popup-kart.sp-popup-yanli .sp-popup-yan { max-height: 30dvh; } }

/* Popüler oyunlar: kaydırmalı şerit */
.sp-populer-kaydir { position: relative; }
.sp-populer-kaydir .sp-populer-izgara { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 10px 2px 14px; margin: -10px -2px 0; scrollbar-width: none; scroll-behavior: auto; }
.sp-populer-kaydir .sp-populer-izgara::-webkit-scrollbar { display: none; }
.sp-populer-kaydir .sp-oyun { flex: 0 0 calc((100% - 64px) / 5); max-width: none; scroll-snap-align: start; }
.sp-kaydir-ok { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.sp-kaydir-ok:hover { background: var(--bs-primary); color: #fff; transform: scale(1.08); }
.sp-kaydir-geri { left: -14px; }
.sp-kaydir-ileri { right: -14px; }
.sp-kaydir-yok .sp-kaydir-ok { display: none; }
@media (max-width: 1199.98px) { .sp-populer-kaydir .sp-oyun { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 991.98px) { .sp-populer-kaydir .sp-populer-izgara { margin: -10px -12px 0; padding-left: 12px; padding-right: 12px; } .sp-populer-kaydir .sp-oyun { flex-basis: calc((100% - 24px) / 3); } .sp-kaydir-geri { left: 4px; } .sp-kaydir-ileri { right: 4px; } }
@media (max-width: 575.98px) { .sp-populer-kaydir .sp-oyun { flex-basis: 62%; } .sp-kaydir-ok { width: 36px; height: 36px; } }

/* Plan filtre düğmeleri: mavi platformlar (Twitter, Telegram...) mavi zeminde kaybolmasın */
.sp-plan-bolum .sp-plan-sekmeler button:not(.aktif) { background: color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 62%, #0a1a35 38%); border-color: rgba(255, 255, 255, .55); }
.sp-plan-bolum .sp-plan-sekmeler button:not(.aktif):hover { background: color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 80%, #0a1a35 20%); border-color: #fff; }
.sp-plan-bolum .sp-plan-sekmeler button.aktif { background: var(--sp-pt, var(--bs-primary)); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 12px 26px rgba(8, 20, 50, .45); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button:not(.aktif) { background: transparent; border-color: rgba(var(--bs-body-color-rgb), .35); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button:not(.aktif):hover { background: rgba(var(--bs-body-color-rgb), .08); border-color: rgba(var(--bs-body-color-rgb), .6); }
.sp-kp-sayfa .sp-plan-bolum .sp-plan-sekmeler button.aktif { border-color: var(--sp-pt, var(--bs-primary)); box-shadow: 0 8px 20px color-mix(in srgb, var(--sp-pt, var(--bs-primary)) 45%, transparent); }

/* Platform sayfalarında bölüm arkasındaki çizgiler platform renginde (maske ile boyanır) */
.sp-pt-sayfa .sp-cizgili-arka::before,
.sp-pt-sayfa .sp-fiyat-bolum.sp-cizgili::before,
.sp-pt-sayfa .sp-bolum-kart.sp-cizgili-tam::before,
[data-bs-theme=dark] .sp-pt-sayfa .sp-cizgili-arka::before,
[data-bs-theme=dark] .sp-pt-sayfa .sp-fiyat-bolum.sp-cizgili::before,
[data-bs-theme=dark] .sp-pt-sayfa .sp-bolum-kart.sp-cizgili-tam::before {
    background: var(--sp-zemin-l);
    -webkit-mask: url("../images/lines-blue.svg") no-repeat center / cover;
    mask: url("../images/lines-blue.svg") no-repeat center / cover;
}
[data-bs-theme=dark] .sp-pt-sayfa .sp-cizgili-arka::before,
[data-bs-theme=dark] .sp-pt-sayfa .sp-fiyat-bolum.sp-cizgili::before,
[data-bs-theme=dark] .sp-pt-sayfa .sp-bolum-kart.sp-cizgili-tam::before { background: var(--sp-zemin-d); }

/* Karşılaştırma bölümü: yazıların okunması için tüm içeriği saran gece/gündüz uyumlu kutu; çizgiler arkada hafifçe görünür */
.sp-karsi-bolum > .container { position: relative; padding: clamp(18px, 3vw, 38px); border-radius: 28px; background: color-mix(in srgb, var(--sp-kart) 91%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--bs-primary)) 18%, var(--sp-cizgi)); box-shadow: 0 24px 60px rgba(0, 0, 0, .12); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-bs-theme=dark] .sp-karsi-bolum > .container { background: color-mix(in srgb, var(--sp-kart) 88%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.sp-karsi-bolum.sp-cizgili-arka::before { opacity: .3; }
[data-bs-theme=dark] .sp-karsi-bolum.sp-cizgili-arka::before { opacity: .22; }
@media (max-width: 575.98px) { .sp-karsi-bolum > .container { width: calc(100% - 20px); padding: 16px; border-radius: 20px; } }

/* Art arda gelen çizgili bölümler dönüşümlü 180° ters (yalnızca CSS; kardeş sırasına göre) */
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka:not(.sp-fiyat-bolum), .sp-bolum-kart.sp-cizgili-tam)::before { transform: rotate(180deg); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ .sp-fiyat-bolum.sp-cizgili::before { transform: scaleX(-1) rotate(180deg); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka:not(.sp-fiyat-bolum), .sp-bolum-kart.sp-cizgili-tam)::before { transform: none; }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ .sp-fiyat-bolum.sp-cizgili::before { transform: scaleX(-1); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka:not(.sp-fiyat-bolum), .sp-bolum-kart.sp-cizgili-tam)::before { transform: rotate(180deg); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ .sp-fiyat-bolum.sp-cizgili::before { transform: scaleX(-1) rotate(180deg); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka:not(.sp-fiyat-bolum), .sp-bolum-kart.sp-cizgili-tam)::before { transform: none; }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ .sp-fiyat-bolum.sp-cizgili::before { transform: scaleX(-1); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka:not(.sp-fiyat-bolum), .sp-bolum-kart.sp-cizgili-tam)::before { transform: rotate(180deg); }
:is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ :is(.sp-cizgili-arka, .sp-fiyat-bolum.sp-cizgili, .sp-bolum-kart.sp-cizgili-tam) ~ .sp-fiyat-bolum.sp-cizgili::before { transform: scaleX(-1) rotate(180deg); }

/* SSS sayfası: platform altındaki hizmet filtreleri */
.sp-sss-pt-kutu { display: block; }
.sp-sss-altlar { display: none; margin: 2px 0 6px 20px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--pt-l, var(--bs-primary)) 40%, transparent); }
[data-bs-theme=dark] .sp-sss-altlar { border-left-color: color-mix(in srgb, var(--pt-d, var(--pt-l, var(--bs-primary))) 50%, transparent); }
.sp-sss-pt-kutu.acik > .sp-sss-altlar { display: block; animation: spGiris .25s ease; }
.sp-sss-oge.sp-sss-alt2 { font-size: .86rem; padding-top: 6px; padding-bottom: 6px; }
.sp-sss-oge.sp-sss-alt2.aktif { background: color-mix(in srgb, var(--pt-l, var(--bs-primary)) 14%, transparent); color: var(--pt-l, var(--bs-primary)); }
[data-bs-theme=dark] .sp-sss-oge.sp-sss-alt2.aktif { color: var(--pt-d, var(--pt-l, var(--bs-primary))); }
.sp-sss-altlar { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }

/* Plan bölümü "tümünü incele" düğmesi: mavi zeminde her iki modda da okunur */
.sp-plan-bolum .sp-plan-tumu { background: #fff; color: #0b6fc2; border-color: #fff; }
.sp-plan-bolum .sp-plan-tumu::before { background: #0b3d6b; }
.sp-plan-bolum .sp-plan-tumu:hover { color: #fff; }
[data-bs-theme=dark] .sp-plan-bolum .sp-plan-tumu { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-bs-theme=dark] .sp-plan-bolum .sp-plan-tumu::before { background: #fff; }
[data-bs-theme=dark] .sp-plan-bolum .sp-plan-tumu:hover { color: #0b6fc2; }

/* Son Blog Yazılarımız: ikon kutusu gece/gündüz hep beyaz, ikon mavi */
.sp-blog .sp-populer-baslik .icon-lg { background: #fff !important; color: var(--bs-primary) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.sp-blog .sp-populer-baslik .icon-lg i { font-size: 1.5rem; }

.sp-plan-kart { position: relative; }
.sp-fav-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pk-yazi, #1b1f27) 7%, transparent); color: var(--pk-yazi, #1b1f27); cursor: pointer; transition: background .2s ease, transform .2s ease, color .2s ease; }
.sp-fav-btn i { grid-area: 1 / 1; font-size: 1.05rem; transition: transform .25s ease, opacity .2s ease; }
.sp-fav-btn .bi-heart-fill { opacity: 0; transform: scale(.4); color: #ff3b5c; }
.sp-fav-btn:hover { background: color-mix(in srgb, #ff3b5c 14%, transparent); color: #ff3b5c; transform: scale(1.1); }
.sp-fav-btn.aktif { background: color-mix(in srgb, #ff3b5c 14%, transparent); }
.sp-fav-btn.aktif .bi-heart { opacity: 0; transform: scale(.4); }
.sp-fav-btn.aktif .bi-heart-fill { opacity: 1; transform: scale(1); }
.sp-fav-btn.pop { animation: spFavPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes spFavPop { 0% { transform: scale(.8); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sp-fav-btn:focus-visible { outline: 2px solid #ff3b5c; outline-offset: 2px; }
.sp-fav-btn:disabled { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .sp-fav-btn, .sp-fav-btn i { transition: none; } .sp-fav-btn.pop { animation: none; } }

.sp-fav-kart { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; will-change: transform; }
.sp-fav-kart:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 44px rgba(0, 0, 0, .22) !important; }
.sp-plan-bolum .sp-plan-kart { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.sp-plan-bolum .sp-plan-kart:hover { transform: translateY(-6px) scale(1.025); box-shadow: 0 24px 48px rgba(0, 0, 0, .28); z-index: 2; }
@media (hover: none), (prefers-reduced-motion: reduce) { .sp-fav-kart:hover, .sp-plan-bolum .sp-plan-kart:hover { transform: none; } }