/* ==========================================================================
   Shoply ana site — tasarım dosyası
   Yalnızca ana site (shoply.com.tr tanıtım sayfaları) bu dosyayı yükler.
   Mağaza vitrinleri ve paneller buradan ETKİLENMEZ (onlar Vite/app.css kullanır).

   Görünüm: beyaz zemin, siyah yazı, tek vurgu rengi (mavi) + sarı işaret kalemi.
   Süs yok; görsel ağırlığı gerçek panel ve mağaza görüntüleri taşır.
   ========================================================================== */

/* Lato 2.0 (latofonts.com) — sitenin kendi sunucusundan yüklenir. Google Fonts'taki Lato'da Ş, ş, Ğ, ğ, İ YOK:
   o harfler başka bir yazı tipinden çizilip bozuk duruyordu. Bu dosyalar Latin + Türkçe harflerle küçültülmüş tek parçadır. */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-400-tr.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-700-tr.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/lato-900-tr.woff2') format('woff2'); }

:root {
    --black: #0b0b0f;
    --text: #15161a;
    --muted: #5f6370;
    --line: #e6e6e3;
    --soft: #f6f5f1;
    --white: #fff;
    --blue: #1f4fff;
    --blue-dark: #1238d6;
    --mark: #ffd84a;
    --brand-soft: #d4cefb; /* 05.10.2026: --brand'ın açık tonu — başlık vurgusu şeridi; koyu mor (#6c5ce7) yazının altını yutup okunmayı bozdu */
    --brand: #6c5ce7; /* 05.10.2026: logo ve başlık vurgusu mor (Nursel). Sarı (--mark) diğer vurgularda kalıyor. */
    --ok: #128a4b;
    --err: #c8261b;

    --font: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --stage: #ecedf2; /* 02.10.2026: mavi-mor tonlu gri (Nursel istedi); önceki nötr: #ececee */ /* nötr gri (ne sarı ne mavi). Denenenler: sıcak #f5f3ec / üst #ebe8dd, soğuk #f1f3f7 / üst #e4e8f0 */
    --r-sm: 8px;
    --r: 14px;
    --r-lg: 22px;
    --shadow: 0 1px 2px rgba(11, 11, 15, .05), 0 14px 34px -18px rgba(11, 11, 15, .22);
    --shadow-lg: 0 2px 4px rgba(11, 11, 15, .05), 0 40px 80px -36px rgba(11, 11, 15, .4);
    --ease: cubic-bezier(.22, .7, .2, 1);
    --wrap: 1180px;
    --hdr-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scrollbar-gutter: stable; } /* stable: menü açılıp kaydırma çubuğu gizlenince sayfa yana kaymasın */
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.012em; margin: 0; font-weight: 900; color: var(--black); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { --wrap: 800px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--black); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 12px; }
.ico { width: 24px; height: 24px; }

/* ── Düğmeler ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: calc(13px + .14em) 24px calc(13px - .14em); border-radius: 12px; /* üst pay +.14em / alt pay -.14em: Lato harfleri satır kutusunda yukarıda duruyor, yazı dikeyde tam ortalansın (05.10.2026, ölçüldü: üstte 21, altta 26 px) */ border: 1.5px solid transparent; /* köşeler hafif yuvarlak: hap biçimi "çok oval" bulundu (02.10.2026) */
    font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: calc(10px + .14em) 16px calc(10px - .14em); font-size: 15px; }
.btn--lg { padding: calc(17px + .14em) 28px calc(17px - .14em); font-size: 18px; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(31, 79, 255, .8); }
.btn--white { background: #fff; color: var(--black); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.btn--outline { border-color: #cfcfcb; background: #fff; color: var(--black); }
.btn--outline:hover { border-color: var(--black); transform: translateY(-2px); }
.btn--xl { padding: calc(clamp(13px, 1.25vw, 21px) + .14em) clamp(17px, 2.3vw, 40px) calc(clamp(13px, 1.25vw, 21px) - .14em); font-size: clamp(15px, 1.15vw, 19px); border-radius: clamp(12px, 1.05vw, 16px); gap: clamp(8px, .8vw, 14px); }
.btn--xl svg { width: clamp(18px, 1.4vw, 24px); height: clamp(18px, 1.4vw, 24px); }
/* Siyah ve çerçeveli düğmeler: üzerine gelince renk alttan dalga gibi yükselerek dolar
   (05.10.2026: soldan sağa dolma denendi, Nursel geri aldırdı) */
.btn--dark, .btn--line { position: relative; overflow: hidden; isolation: isolate; }
.btn--dark::before, .btn--line::before {
    content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; top: 0; height: 160%;
    border-radius: 50% 50% 0 0 / 38% 38% 0 0;
    transform: translateY(102%); transition: transform .6s cubic-bezier(.3, .8, .25, 1), border-radius .6s ease;
}
.btn--dark:hover::before, .btn--line:hover::before, .btn--dark:focus-visible::before, .btn--line:focus-visible::before { transform: translateY(-18%); border-radius: 50% 50% 0 0 / 8% 8% 0 0; }
.btn--dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn--dark::before { background: var(--brand); } /* 05.10.2026: dolan renk sarıdan mora (Nursel); önceki var(--mark), yazı siyahtı */
.btn--dark:hover, .btn--dark:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(108, 92, 231, .7); } /* mor koyu: yazı beyaz kalır */
/* Mor ana düğme (05.10.2026, Nursel: ilk alandaki 'Hemen Başla' 6c5ce7 olsun). Siyah düğmenin tersi: zemin mor, üzerine gelince alttan siyah dolar */
.btn--brand { background: var(--brand); border-color: var(--brand); }
.btn--brand::before { background: var(--black); }
.btn--brand:hover, .btn--brand:focus-visible { color: #fff; box-shadow: 0 14px 26px -14px rgba(108, 92, 231, .8); }
.btn--line { background: #fff; color: var(--black); border: 2px solid var(--black); }
.btn--line::before { background: var(--black); }
.btn--line:hover, .btn--line:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(11, 11, 15, .5); }
.btn--dark, .btn--line { transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .35s ease .08s; }
.btn--text { padding-inline: 8px; color: var(--black); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: #c9c9c5; }
.btn--text:hover { text-decoration-color: var(--black); }
.link { font-weight: 700; color: var(--blue); border-bottom: 2px solid transparent; transition: border-color .2s; }
.link:hover { border-color: currentColor; }

.eyebrow { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

/* Sarı işaret kalemi vurgusu */
.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::after { content: ''; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .34em; background: var(--brand-soft); z-index: -1; border-radius: 3px; transform-origin: left; } /* 05.10.2026: sarı (--mark) yerine mor (--brand), Nursel istedi */
.js .mark::after { transform: scaleX(0); animation: markIn .7s var(--ease) .75s forwards; }
@keyframes markIn { to { transform: scaleX(1); } }

/* ── Duyuru şeridi ────────────────────────────────────────────────────── */
.announce { background: var(--black); color: #fff; text-align: center; font-size: 14px; font-weight: 500; padding: 9px 16px; }
.announce a:hover { text-decoration: underline; }

/* ── Üst menü ─────────────────────────────────────────────────────────── */
/* Kaydırdıkça çizilen el çizimi ok (06.10.2026; site.js üretir ve konumlar). Menünün altında kalsın diye z-index düşük. */
.scrib { position: absolute; z-index: 5; pointer-events: none; overflow: visible; }
.scrib path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Alt çizgi en üstte de görünür: menü ilk alanın gri zemininden ayrışsın. Yarı saydam siyah, çünkü --line gri zeminde kayboluyor */
.hdr { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid rgba(11, 11, 15, .1); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.hdr.is-scrolled { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-color: var(--line); box-shadow: 0 6px 20px -16px rgba(11, 11, 15, .4); }
/* Genişlik içerikle aynı (.wrap): 1140 px idi, içerik 1180 → menü her iki yanda 20 px içeride kalıyordu (Nursel, 08.10.2026) */
.hdr__bar { width: min(100% - 40px, var(--wrap)); margin-inline: auto; height: var(--hdr-h); display: flex; align-items: center; gap: 44px; transition: height .25s var(--ease); }
.hdr.is-scrolled .hdr__bar { height: calc(var(--hdr-h) - 14px); }
.hdr__logo img { height: 38px; width: auto; }
/* Yazı logosu (panelden logo görseli yüklenmediğinde) */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 27px; letter-spacing: -.03em; line-height: 1; color: var(--black); }
/* Logo işareti: siyah kare içinde ince sarı çizgilerle SEPET, içinde ürünleri andıran küçük noktalar (çanta idi; dört sepet
   çiziminden Nursel B'yi seçti ve içine nokta istedi, 02.10.2026). SVG olarak çizilir. */
.logo__mark { position: relative; width: 36px; height: 36px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='9' fill='%236c5ce7'/%3E%3Cg transform='translate(6.6 6.6) scale(.95)'%3E%3Cpath d='M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9.6' cy='8.6' r='.8'/%3E%3Ccircle cx='13' cy='8.9' r='.8'/%3E%3Ccircle cx='16.4' cy='9.3' r='.8'/%3E%3Ccircle cx='10.4' cy='11.5' r='.8'/%3E%3Ccircle cx='13.7' cy='11.6' r='.8'/%3E%3Ccircle cx='17' cy='11.7' r='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* 05.10.2026 deneme: mor kare #6c5ce7 + beyaz sepet (Nursel istedi). Onaylı önceki hali: siyah kare %230b0b0f, sarı sepet %23ffd84a (çizgi ve noktalar). favicon.png henüz eski (siyah/sarı). */
.logo--light { color: #fff; }
.logo--light .logo__mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='9' fill='%236c5ce7'/%3E%3Cg transform='translate(6.6 6.6) scale(.95)'%3E%3Cpath d='M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9.6' cy='8.6' r='.8'/%3E%3Ccircle cx='13' cy='8.9' r='.8'/%3E%3Ccircle cx='16.4' cy='9.3' r='.8'/%3E%3Ccircle cx='10.4' cy='11.5' r='.8'/%3E%3Ccircle cx='13.7' cy='11.6' r='.8'/%3E%3Ccircle cx='17' cy='11.7' r='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* 05.10.2026: menüdeki logoyla aynı (mor kare + beyaz sepet); önceki: beyaz kare %23fff, siyah sepet %230b0b0f */
.hdr__nav { display: flex; gap: 6px; }
.hdr__nav a { position: relative; padding: 8px 13px; font-size: 15.5px; font-weight: 400; -webkit-text-stroke: .35px currentColor; color: #5a5d66; transition: color .2s; }
.hdr__nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hdr__nav a:hover, .hdr__nav a.is-active { color: var(--black); }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); }
.hdr__cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr__nav--right { padding-right: 14px; margin-right: 8px; border-right: 1px solid var(--line); }
.hdr__cta .btn { padding: calc(9px + .12em) 20px calc(9px - .12em); font-size: 14px; border-radius: 10px; } /* yazı dikeyde ortalı (bkz. .btn). 06.10.2026: .18em yazıyı ~1,7 px aşağı itiyordu (ölçüldü: büyük harf üstü 12,4 / taban altı 10,8) → .12em */
/* ── Geniş açılır menü (E-ticaret Çözümleri) ─────────────────────────── */
.hdr__mega-link { display: inline-flex; align-items: center; gap: 6px; }
.hdr__mega-link svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.hdr.is-mega .hdr__mega-link { color: var(--black); }
.hdr.is-mega .hdr__mega-link::after { transform: scaleX(1); }
.hdr.is-mega .hdr__mega-link svg { transform: rotate(180deg); }
.hdr.is-mega { background: #fff; }

.mega { position: absolute; left: 0; right: 0; top: 100%; padding: 6px 20px 0; visibility: hidden; pointer-events: none; transition: visibility 0s .4s; }
.hdr.is-mega .mega { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Arkadaki sayfa bulanıklaşır ve hafifçe kararır */
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: rgba(11, 11, 15, .22); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.hdr.is-mega .mega::before { opacity: 1; }
/* Panel yukarıdan aşağı açılarak belirir */
.mega__panel {
    position: relative; width: min(100%, 1180px); margin-inline: auto;
    background: #fff; /* düz beyaz: buzlu cam (yarı saydam) hali Nursel'in isteğiyle kaldırıldı */
    border: 1px solid #ececef; border-radius: 24px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(11, 11, 15, .05), 0 50px 90px -30px rgba(11, 11, 15, .5);
    opacity: 0; transform: translateY(-14px) scale(.985); transform-origin: top center;
    clip-path: inset(0 0 100% 0 round 24px);
    transition: opacity .3s ease, transform .5s var(--ease), clip-path .55s var(--ease);
}
.hdr.is-mega .mega__panel { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); }

/* 07.10.2026 — açılır menü yeniden tasarlandı (Nursel önceki halini sevmedi). Dört sütun, aralarında ince çizgi; ikon yok:
   her satır kalın bir başlık + tek satır soluk açıklama. İlk sütun (paketler) hafif gri zeminde durur ve fiyatı da gösterir.
   Üzerine gelinen satır gri bir kutuya oturur, başlığı mora döner, sağında ok belirir. Önceki: ikon kareli üç sütun + koyu tanıtım kutusu. */
.mega__cols { display: grid; grid-template-columns: 1.08fr 1.12fr 1fr .92fr; }
.mega__col { padding: 26px 16px 22px; }
.mega__col + .mega__col { border-left: 1px solid #efeff3; }
.mega__col--plans { background: #f6f6f9; }
.mega__col h3 { margin: 0 0 10px; padding-left: 12px; font-size: 11.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); }
.mega__item {
    position: relative; display: block; padding: 9px 34px 9px 12px; border-radius: 13px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .45s var(--ease), background-color .25s ease;
}
.hdr.is-mega .mega__item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 16ms + .1s), calc(var(--i) * 16ms + .1s), 0s; }
.hdr.is-mega .mega__item:hover, .hdr.is-mega .mega__item:focus-visible { background: #f3f3f7; transition-delay: 0s; }
.hdr.is-mega .mega__col--plans .mega__item:hover, .hdr.is-mega .mega__col--plans .mega__item:focus-visible { background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 12px 24px -16px rgba(11, 11, 15, .28); }
.mega__txt { display: grid; gap: 1px; min-width: 0; line-height: 1.32; }
.mega__txt b { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; color: var(--black); transition: color .2s ease; }
.mega__txt b i { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.mega__txt small { font-size: 12.8px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__item:hover .mega__txt b, .mega__item:focus-visible .mega__txt b { color: var(--brand); }
.mega__go { position: absolute; right: 10px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--brand); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .35s var(--ease); }
.mega__item:hover .mega__go, .mega__item:focus-visible .mega__go { opacity: 1; transform: none; }
/* Paket satırları kısa: ad + fiyat; öne çıkan pakette küçük mor rozet */
.mega__pop { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--brand); font-style: normal; font-size: 10px; font-weight: 700; vertical-align: 2px; white-space: nowrap; color: #fff; }
/* ── E-Ticaret açılır menüsü: geniş tasarım (07.10.2026, ikinci tur "daha şık") ──────────────────────
   Sol: etiket + ince başlık, altında sekiz hücreli ızgara — hücreler kutu değil, aralarında saç teli çizgiler (dergi düzeni).
   Hücre üzerine gelince açık lilaya döner, ikon mora döner ve kalkar, sağ üstte ok belirir.
   Sağ: fiyat bölümüyle aynı dilde paket kartı (basamak çubukları), son çağrı kutusunun ışığıyla. Alt: tikli güven maddeleri. */
.mega__panel--wide { width: min(100%, 1180px); }
.mwide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.mwide__main { padding: 30px 30px 28px 34px; }
.mwide__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.mwide__label { margin: 0; font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.mwide__title { margin: 0; font-size: 15px; color: var(--muted); }
.mwide__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #ececf1; }
.msol { position: relative; display: grid; align-content: start; gap: 5px; padding: 22px 20px 22px 18px; border-radius: 0; border-bottom: 1px solid #ececf1; }
.msol:not(:nth-child(4n)) { border-right: 1px solid #ececf1; }
.msol:nth-last-child(-n + 4) { border-bottom: 0; }
.msol__ico { display: block; width: 28px; height: 28px; margin-bottom: 10px; color: var(--black); transition: color .3s ease, transform .4s var(--ease); }
.msol__ico .ico { width: 28px; height: 28px; stroke-width: 1.4; }
.msol b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--black); transition: color .25s ease; }
.msol small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.msol__go { position: absolute; top: 20px; right: 16px; width: 16px; height: 16px; color: var(--brand); opacity: 0; transform: translate(-6px, 6px); transition: opacity .25s ease, transform .35s var(--ease); }
.msol__go svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.hdr.is-mega .msol:hover, .hdr.is-mega .msol:focus-visible { background: linear-gradient(180deg, #f6f4ff, #fbfaff); }
.msol:hover .msol__ico, .msol:focus-visible .msol__ico { color: var(--brand); transform: translateY(-3px); }
.msol:hover b, .msol:focus-visible b { color: var(--brand); }
.msol:hover .msol__go, .msol:focus-visible .msol__go { opacity: 1; transform: none; }
/* Paket kartı */
.mplans { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; margin: 16px 16px 16px 0; padding: 28px 22px 20px; border: 1px solid rgba(108, 92, 231, .14); border-radius: 22px; background: rgba(236, 237, 242, .55);
    opacity: 0; transform: translateY(10px); transition: opacity .45s ease .2s, transform .55s var(--ease) .2s; }
.hdr.is-mega .mplans { opacity: 1; transform: none; }
.mplans::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(75% 55% at 100% 0%, rgba(108, 92, 231, .22), transparent 70%), radial-gradient(75% 55% at 0% 100%, rgba(255, 216, 74, .32), transparent 70%); }
.mplans__title { margin: 8px 0 18px; font-size: 21px; font-weight: 400; line-height: 1.2; letter-spacing: -.005em; color: var(--black); }
.mplans__list { display: grid; gap: 8px; }
.mplans__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: calc(13px + .08em) 14px calc(13px - .08em); border: 1px solid rgba(11, 11, 15, .06); border-radius: 14px; background: #fff; transition: border-color .25s ease, box-shadow .3s ease, translate .3s var(--ease); }
.mplans__row:hover, .mplans__row:focus-visible { border-color: var(--brand); box-shadow: 0 16px 28px -20px rgba(108, 92, 231, .7); translate: 0 -2px; }
.mplans__row.is-pop { border-color: rgba(108, 92, 231, .4); }
/* paket ikonu: arka plansız çizgi ikon; öne çıkan pakette mor (önceki: kademe çubukları) */
.mplans__ico { display: grid; place-items: center; color: var(--black); }
.mplans__ico .ico { width: 19px; height: 19px; stroke-width: 1.6; }
.mplans__row.is-pop .mplans__ico { color: var(--brand); }
.mplans__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 15px; font-weight: 900; color: var(--black); }
/* rozet satırın üst kenarına biner (fiyat kartlarındaki gibi): satır içinde fiyatın üstüne biniyordu */
.mplans__row { position: relative; }
.mplans__row.is-pop { margin-top: 6px; }
.mplans__name em { position: absolute; top: 0; right: 14px; translate: 0 -50%; padding: 3px 9px; border-radius: 999px; background: var(--brand); box-shadow: 0 6px 14px -6px rgba(108, 92, 231, .7); font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: #fff; }
.mplans__price { font-size: 18px; font-weight: 400; color: var(--black); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mplans__price small { font-size: 12px; color: var(--muted); }
.mplans__price small:first-child { margin-right: 1px; color: var(--black); font-weight: 700; }
.mplans__all { display: inline-flex; align-items: center; gap: 7px; margin: auto 2px 0; padding-top: 18px; font-size: 14px; font-weight: 700; color: var(--black); }
.mplans__all svg { width: 15px; height: 15px; transition: translate .25s var(--ease); }
.mplans__all:hover svg { translate: 4px 0; }
/* Alt şerit: tikli güven maddeleri */
.mwide__foot { padding: 14px 18px 14px 34px; }
.mwide__points { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--black); }
.mwide__points li { display: inline-flex; align-items: center; gap: 8px; }
.mwide__points svg { width: 16px; height: 16px; color: #f0a800; }
.mega__foot .btn svg { width: 15px; height: 15px; }
@media (max-width: 1100px) {
    .mwide { grid-template-columns: minmax(0, 1fr); }
    .mwide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .msol:not(:nth-child(4n)) { border-right: 0; }
    .msol:nth-child(odd) { border-right: 1px solid #ececf1; }
    .msol:nth-last-child(-n + 4) { border-bottom: 1px solid #ececf1; }
    .msol:nth-last-child(-n + 2) { border-bottom: 0; }
    .mplans { margin: 0 20px 18px; }
}
/* sütunun sonundaki "hepsini gör" satırı: açıklamasız, üstünde ince çizgi */
.mega__item--all { margin-top: 8px; }
.mega__item--all::before { content: ''; position: absolute; left: 12px; right: 12px; top: -4px; height: 1px; background: #e6e6ec; }
.mega__item--all .mega__txt b { font-size: 14px; }
/* Alt şerit: solda güven yazısı, sağda kayıt düğmesi */
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 18px 12px 28px; border-top: 1px solid #efeff3; background: #fafafc; font-size: 14px; font-weight: 700; color: var(--muted); }

/* Mobil menü düğmesi: siyah yuvarlak, iki çizgi; açılınca çarpıya döner */
.hdr__burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--black); padding: 0; position: relative; transition: background-color .3s, transform .3s var(--ease); }
.hdr__burger:active { transform: scale(.92); }
.hdr__burger span { position: absolute; left: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease), width .3s var(--ease), top .4s var(--ease), background-color .3s; }
.hdr__burger span:nth-child(1) { top: 16px; width: 18px; }
.hdr__burger span:nth-child(2) { top: 24px; width: 11px; }
.hdr__burger span:nth-child(3) { display: none; }
.hdr__burger[aria-expanded="true"] { background: var(--brand); }
.hdr__burger[aria-expanded="true"] span { background: #fff; width: 18px; top: 20px; } /* mor zeminde çarpı beyaz (sarıyken siyahtı) */
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

/* Mobil menü: menünün altından ekranı kaplayan beyaz sayfa */
.hdr.is-open { background: #fff; }
.mnav {
    position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h));
    display: flex; flex-direction: column; overflow: hidden auto; overscroll-behavior: contain; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); /* yatayda asla kaymaz */
    background: #fff; animation: mnavIn .35s var(--ease);
}
/* köşede hafif sarı ışık: boş beyaz sayfa hissini kırar */
.mnav::before { content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 70%; background: radial-gradient(260px circle at 100% 62%, rgba(108, 92, 231, .22), transparent 70%); pointer-events: none; } /* panelin içinde kalır: dışarı taşıp yatay kaydırma açmaz */
.mnav nav { position: relative; display: grid; }
.mnav nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; border-bottom: 1px solid var(--line); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--black); animation: mnavItem .5s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.mnav nav a svg { flex: none; width: 22px; height: 22px; color: #b9bac0; transition: transform .25s var(--ease), color .25s; }
.mnav nav a:active svg, .mnav nav a.is-active svg { transform: translateX(4px); color: var(--black); }
.mnav nav a.is-active span { background: linear-gradient(transparent 62%, var(--brand-soft) 62%); }
.mnav__more { border-bottom: 1px solid var(--line); animation: mnavItem .5s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.mnav__more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; list-style: none; cursor: pointer; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--black); }
.mnav__more summary::-webkit-details-marker { display: none; }
.mnav__more summary svg { flex: none; width: 22px; height: 22px; color: #b9bac0; transition: transform .3s var(--ease), color .25s; }
.mnav__more[open] summary svg { transform: rotate(180deg); color: var(--black); }
.mnav__sub { display: grid; gap: 2px; padding: 0 0 14px; animation: mnavItem .35s var(--ease); }
.mnav nav .mnav__sub a { display: grid; gap: 2px; justify-content: stretch; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--soft); font-size: 16px; animation: none; }
.mnav__sub a b { font-weight: 700; }
.mnav__label { margin: 12px 0 4px 2px; font-size: 11.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); }
.mnav__label:first-child { margin-top: 0; }
.mnav__sub a small { font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.mnav__foot { position: relative; margin-top: auto; padding-top: 26px; animation: mnavItem .5s var(--ease) .42s both; }
.mnav__foot p { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--muted); }
@keyframes mnavIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes mnavItem { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ── Çerçeveler (tarayıcı / telefon) ──────────────────────────────────── */
.frame { background: #fff; border: 1px solid #dcdcd8; overflow: hidden; }
.frame--browser { border-radius: 12px; box-shadow: var(--shadow-lg); }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #f1f1ee; border-bottom: 1px solid #e2e2de; }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfcfca; }
.frame__bar span { margin-left: 10px; flex: 1; max-width: 300px; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: 11.5px; color: #7b7e89; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame__screen { position: relative; overflow: hidden; background: #fff; }
.frame__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .8s ease; }
.frame__screen img.is-on { opacity: 1; }
.frame--phone { border-radius: 30px; border: 7px solid var(--black); box-shadow: var(--shadow-lg); }
.frame--phone .frame__screen { border-radius: 22px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-top: clamp(26px, 4.2vw, 78px); overflow-x: clip; } /* dikeyde kırpılmaz: ışık menünün arkasına taşabilsin */

/* Beyaz üst alan: başlık + düğmeler */
.hero__top { position: relative; padding-bottom: clamp(34px, 4.6vw, 80px); }

/* Tabletin iki yanında, gri alanda belirip kaybolan bildirim balonları (yalnızca geniş ekranda).
   Alan gri sahneyle birebir aynı: balonlar üstten beyaz bölüme çıkmaz. */
.stagewrap { position: relative; }
.pops { display: none; }
@media (min-width: 1340px) {
    .pops { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; } /* 07.10.2026 (Nursel: "balonlar arka planın dışına taşmasın"): alan artık gri sahneyle birebir aynı; önceden 64 px yukarıdan başlıyor, en üstteki balon beyaz alana çıkıyordu */
    .pop {
        --step: 1s;                    /* iki bildirim arası süre. 06.10.2026: 1.9s → 1.2s; 07.10.2026: 1.2s → 1s (Nursel: daha hızlı gelip gitsinler) */
        --x: -10px;                    /* giriş yönü: soldakiler soldan, sağdakiler sağdan hafifçe kayar */
        position: absolute; display: flex; align-items: center; gap: 9px;
        /* 07.10.2026 (Nursel: "koyu renk olsun, iPhone'dakine benzesin"): telefon bildirimi görünümü — koyu buzlu cam,
           geniş köşe, solda uygulama simgesi gibi kare ikon, sağ üstte "şimdi". Önceki: beyaz zemin, ince çerçeve, 14 px köşe, konuşma kuyruğu (kuyruk aşağıda yeniden eklendi). */
        /* 07.10.2026 "daha şık olsun": zemin biraz daha koyu ve tok, üst kenarda ince ışık çizgisi (cam kalınlığı), gölge daha yaygın ve yumuşak */
        /* 07.10.2026: balon ince (Nursel). Zemin artık TAM opak ve bulanıklık yok: kuyruk köşenin üstüne biniyor, yarı saydam
           zeminde binen yer koyu leke oluyordu. Dört köşe de yuvarlak — düz köşe + ince yüzgeç "çok sivri" bulundu. */
        --pb: #fff; --pt: var(--black); --ps: var(--muted); --pl: rgba(11, 11, 15, .13); /* 07.10.2026: BEYAZ (Nursel). Yazı ve ikon siyah. Denenenler: siyah #18181c, koyu gri #4a4b54, açık gri #d9dae1 */
        padding: 9px 15px 10px 10px; /* dikey pay 6/7 → 9/10 px (07.10.2026, Nursel: "hafif artır") */ border-radius: 15px; background: var(--pb); border: 1px solid var(--pl);
        /* beyaz balon gri sahnede silik kalıyordu (Nursel: "biraz belirgin olmalı"): çerçeve koyulaştı, gölge yakın + uzak iki katman, başlık en kalın kesim */
        box-shadow: 0 2px 5px rgba(11, 11, 15, .08), 0 16px 30px -12px rgba(11, 11, 15, .36);
        transform-origin: 100% 100%;    /* kuyruğun olduğu köşeden büyür */
        white-space: nowrap; opacity: 0;
        animation: pop calc(var(--n) * var(--step)) linear infinite;
        animation-delay: calc(var(--i) * var(--step) + .15s); /* ilk balon sayfa açılır açılmaz gelsin: gri alan boş beklemesin */
    }
    .pop:nth-child(even) { --x: 10px; transform-origin: 0 100%; }
    /* "şimdi" yazısı kalktı, konuşma balonu kuyruğu geri geldi (07.10.2026, Nursel): soldakilerde sağ alt köşede, sağdakilerde sol alt köşede — dizüstüne bakar */
    /* kuyruk tam köşede, çapraz (07.10.2026, Nursel): alt köşeden dışa doğru yumuşak bir çıkıntı — iki kenardan teğet ayrılır, ucu yuvarlak.
       İlk hali düz köşeden çıkan ince yüzgeçti, sivri durdu. Kutu köşenin 5 px dışına taşar; içte kalan kısmı balonla aynı renk, görünmez. */
    .pop::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; background: var(--pb); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 13c6 0 11 1.500 14.200 3.600 1.600 1 3.400-.800 2.400-2.400C14.500 11 13 6 13 0L4 4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 13c6 0 11 1.500 14.200 3.600 1.600 1 3.400-.800 2.400-2.400C14.500 11 13 6 13 0L4 4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
    .pop:nth-child(even)::after { right: auto; left: -5px; scale: -1 1; }
    /* Solda yalnızca ikon: çizgi ikon, ARKA PLANI YOK (07.10.2026, Nursel). Rengi başlıkla aynı (koyu zeminde beyazdı, açık gride siyah). Denenenler: gri kare, mor kare, ikonsuz. */
    .pop__ico { flex: none; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #ececf1; color: var(--pt); } /* 07.10.2026: ikon zemini GRİ (Nursel). Sırayla denenenler: arka plansız, yarı saydam sarı, açık mor (rgba(108, 92, 231, .16)) */ /* ikon siyah: mor ikon (var(--brand)) 07.10.2026'da denendi, Nursel geri aldı */ /* 07.10.2026 (Nursel): ikonun arkasında yarı saydam AÇIK MOR (--brand'ın %16'sı), tam yuvarlak değil — köşesi yumuşak kare. Önce yarı saydam sarı denendi (rgba(255, 216, 74, .42)) */
    .pop__ico .ico { width: 18px; height: 18px; }
    .pop__txt { display: grid; line-height: 1.2; text-align: left; }
    .pop__txt b { font-size: 13px; font-weight: 900; letter-spacing: .005em; color: var(--pt); }
    .pop__txt small { font-size: 11.5px; color: var(--ps); font-weight: 700; }
    /* Üç renk (koyu / beyaz / mor) 07.10.2026'da denendi, Nursel geri aldı: hepsi siyah. Renk değişkenleri (--pb, --pt, --ps, --pl) duruyor. */
    /* On iki yer: tekler cihazın solunda, çiftler sağında. 06.10.2026 (Nursel): aynı anda daha çok balon görünsün,
       bazıları dizüstüne yakın dursun → balon ekranda daha uzun kalır (@keyframes pop), yarısı kapağın kenarına
       yaklaştırıldı (kapağın yarı genişliği ~418 px; 372–440 arası "yakın", 5 numara kenara hafifçe biner).
       Aynı yanda birlikte görünenler (art arda gelen 7 balonun 3–4'ü) üst üste gelmeyecek biçimde dizildi.
       07.10.2026: hepsini kapağın yanına tek sıra dizmek denendi, Nursel geri aldı ("bir önceki hali olsun, sadece üstten
       arka planın dışına taşmasın") → yerler eski hali; yalnızca alan gri sahneyle sınırlandı ve en üstteki balon %3 → %7. */
    .pop--1 { right: calc(50% + 430px); top: 7%; }
    .pop--3 { right: calc(50% + 500px); top: 46%; }
    .pop--5 { right: calc(50% + 372px); top: 24%; }
    .pop--7 { right: calc(50% + 470px); top: 78%; }
    .pop--9 { right: calc(50% + 540px); top: 61%; }
    .pop--11 { right: calc(50% + 410px); top: 35%; }
    .pop--2 { left: calc(50% + 395px); top: 13%; }
    .pop--4 { left: calc(50% + 505px); top: 57%; }
    .pop--6 { left: calc(50% + 440px); top: 35%; }
    .pop--8 { left: calc(50% + 385px); top: 85%; }
    .pop--10 { left: calc(50% + 540px); top: 70%; }
    .pop--12 { left: calc(50% + 420px); top: 46%; }
}
/* Çok geniş ekranda boşluk fazla: balonlar yanlara biraz daha yayılır */
@media (min-width: 1700px) {
    /* yalnızca uzaktakiler açılır; yakın duranlar (1, 5, 11 / 2, 6, 8, 12) dizüstünün yanında kalır */
    .pop--3 { right: calc(50% + 610px); }
    .pop--9 { right: calc(50% + 660px); }
    .pop--7 { right: calc(50% + 560px); }
    .pop--4 { left: calc(50% + 600px); }
    .pop--10 { left: calc(50% + 650px); }
}
/* Yumuşakça belirir, yerinde hafifçe süzülür, yumuşakça söner (sıçrama ya da ani hareket yok) */
/* 07.10.2026 (Nursel: "belirmeleri, kaybolmaları daha hızlı olmalı, yumuşak şekilde"): geliş ~0,85 sn → ~0,4 sn, gidiş ~1,3 sn → ~0,55 sn.
   Hızlanınca sert durmasın diye yol kısaldı (10 px → 7 px, ölçek .96 → .975) ve eğriler yumuşak bırakıldı: gelirken sona doğru yavaşlar,
   giderken yavaş başlar. Arada yerinde süzülme aynı. */
@keyframes pop {
    0% { opacity: 0; transform: translate(calc(var(--x) * .6), 7px) scale(.975); animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
    3.4% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
    26% { opacity: 1; transform: translateY(-5px); animation-timing-function: ease-in-out; }
    50.5% { opacity: 1; transform: translateY(-2px); animation-timing-function: cubic-bezier(.45, 0, .8, .5); }
    55%, 100% { opacity: 0; transform: translateY(-8px) scale(.985); } /* 06.10.2026: görünür kalma payı %39 → %55: 12 balonun ~6-7'si aynı anda ekranda (önceden ~4-5) */
}
/* Hafif ışık: sarı bir hale ve çevresinde görünen nokta dokusu. Düğmelerin arkasında durur,
   fare alana girince onu izler, çıkınca düğmelerin arkasına geri döner (konum site.js'te). */
.hero__glow { position: absolute; inset: calc(var(--hdr-h) * -1 - clamp(26px, 4.2vw, 78px)) 0 0 0; z-index: 0; pointer-events: none; }
/* 05.10.2026: ışık başta görünmez, fare alanda gezerken (.is-on, site.js) yumuşakça belirir, çıkınca söner (Nursel "ilk başta olmasın") */
.hero__glow { opacity: 0; transition: opacity .7s ease; }
.hero__glow.is-on { opacity: 1; } /* üst kenarı menünün arkasına kadar uzanır */
.hero__glow::before, .hero__glow::after { content: ''; position: absolute; inset: 0; }
/* Başlığın arkasındaki yuvarlak ışık artık GRİ (sarıydı; Nursel "o gri olsun" dedi, 02.10.2026). İki yumuşak, bulanık leke:
   büyük sarı leke fareyi izler, yanındaki küçük sıcak leke onun çevresinde ağır ağır süzülür — ışık canlı
   ama sakin durur. Konum site.js'ten gelir (--mx, --my). */
.hero__glow::before { background: radial-gradient(clamp(280px, 30vw, 460px) circle at var(--mx, 56%) var(--my, 48%), rgba(59, 42, 158, .11), rgba(59, 42, 158, .04) 42%, transparent 72%); filter: blur(18px); } /* 05.10.2026: koyu mor, daha saydam (Nursel; ilk koyu mor deneme .2 / .07); önceki açık mor rgba(108, 92, 231, .16) / .06; daha önce gri rgba(96, 100, 116, .14) / .05 */
.hero__glow::after { background: radial-gradient(clamp(150px, 15vw, 230px) circle at calc(var(--mx, 56%) + 120px) calc(var(--my, 48%) - 34px), rgba(76, 58, 190, .07), transparent 70%); filter: blur(22px); animation: glowDrift 11s ease-in-out infinite alternate; }
@keyframes glowDrift { 0% { transform: translate(0, 0); } 50% { transform: translate(-150px, 46px); } 100% { transform: translate(-250px, -18px); } }
.hero__copy { position: relative; z-index: 1; text-align: center; }
.hero h1 { max-width: 15.5em; margin-inline: auto; font-size: clamp(1.9rem, 4.1vw, 3.9rem); font-weight: 400; letter-spacing: .005em; line-height: 1.14; color: var(--black); }
/* 05.10.2026 — GEÇERLİ: siyah kalın yazı + açık mor şerit (genel .mark::after, --brand-soft). Mor yazıyla denenenler
   (siyah şerit, ince siyah çizgi, çok açık mor şerit) istenmedi; Nursel bu hale geri aldırdı. */
.hero h1 .mark { font-weight: 700; }
/* Başlık sözcük sözcük gelir (site.js sözcükleri .tw içine sarar ve başlığa .is-split / .is-in verir).
   Her sözcük kendi kutusunun altından yükselir; kutu taşanı keser. Alt boşluk ş, g gibi harflerin kuyruğu kesilmesin diye. */
.hero h1.is-split { opacity: 1; transform: none; animation: none; }
.hero h1 .tw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; }
.hero h1 .tw > span { display: inline-block; transform: translateY(112%); opacity: 0; transition: transform .5s ease, opacity .3s ease; }
.hero h1.is-in .tw > span { transform: none; opacity: 1; transition: transform 1s var(--ease) calc(var(--wi) * 80ms + 80ms), opacity .7s ease calc(var(--wi) * 80ms + 80ms); }
/* İşaret kalemi şeridi de başlıkla birlikte yeniden çizilir */
.js .hero h1.is-split .mark::after { animation: none; transform: scaleX(0); transition: transform .3s ease; }
.js .hero h1.is-split.is-in .mark::after { transform: scaleX(1); transition: transform .8s var(--ease) .95s; }
/* İlk alandaki vurgu ilk halinde: siyah kalın yazı + altında sarı işaret kalemi şeridi. Gri, siyah şerit ve siyah kutu denendi; Nursel ilk halini seçti (02.10.2026). */
.hero__text { max-width: 40em; margin: clamp(14px, 2vw, 36px) auto 0; font-size: clamp(.98rem, 1.15vw, 1.22rem); color: var(--black); }
.hero__actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(8px, 1vw, 16px); margin-top: clamp(20px, 2.6vw, 46px); } /* iki düğme her ekranda yan yana */

.js .hero-in { opacity: 0; transform: translateY(20px); animation: heroIn .85s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Gri sahne */
.stage { position: relative; background: var(--stage); /* tek renk: üstü koyu geçiş Nursel'in isteğiyle kaldırıldı */ height: clamp(380px, 43vw, 690px); overflow: hidden; }
/* Beyaz güven sekmesi: gri alanın tepesinden aşağı sarkar, iki yanı içbükey */
.stage__tab { position: absolute; top: 0; left: 50%; z-index: 3; translate: -50% 0; display: flex; align-items: center; padding: 24px 14px; background: #fff; border-radius: 0 0 44px 44px; white-space: nowrap; }
.stage__tab::before, .stage__tab::after { content: ''; position: absolute; top: 0; width: 44px; height: 44px; background: radial-gradient(circle at 0 100%, transparent 43.5px, #fff 44px); }
.stage__tab::before { right: 100%; }
.stage__tab::after { left: 100%; transform: scaleX(-1); }
/* Sekmenin içindeki ışık katmanı: başlıktaki ışıkla aynı konumu izler (site.js), sekmenin biçimine kırpılır */
.stage__tab .stage__glow { position: absolute; inset: 0; z-index: 0; padding: 0; border: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.stage__glow::before, .stage__glow::after { content: ''; position: absolute; inset: 0; }
.stage__glow::before { background: radial-gradient(clamp(280px, 30vw, 460px) circle at var(--mx, 50%) var(--my, -200px), rgba(59, 42, 158, .11), rgba(59, 42, 158, .04) 42%, transparent 72%); filter: blur(18px); } /* 05.10.2026: koyu mor, daha saydam (Nursel; ilk koyu mor deneme .2 / .07); önceki açık mor rgba(108, 92, 231, .16) / .06; daha önce gri rgba(96, 100, 116, .14) / .05 */
.stage__glow::after { display: none; }
/* 06.10.2026 (Nursel): fare ışığı sekmenin içinde ve gri alanın tamamında da görünür (önceden sekmede gizliydi).
   Sekme açılırken (is-pour) zemini henüz yok; o sırada sekmedeki ışık gizlenir, yoksa gri alandakiyle üst üste biner. */
.stage__tab.is-pour .stage__glow { visibility: hidden; }
.stage__glow--bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Gri alanın zemininde renk geçişi animasyonu (06.10.2026, Nursel: "renk geçişleri animasyonunu dene").
   Gri, sahnenin ilk sade grisi olarak kalır (var(--stage), dokunulmaz); üstünde yalnızca tek bir açık sarı leke ağır
   ağır gezer, fare gezdikçe katman birkaç piksel kayar. İlk hali üç lekeydi (mor, sarı, mavi); mor ve mavi griyi
   lavantaya çeviriyordu — önce grileştirildi, sonra Nursel "gri ilk sade halindeki gri olsun" deyince kaldırıldı.
   Kenarlar açılmasın diye katman alandan 40 px taşar. */
.stage__glow--bg {
    inset: -40px;
    translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px);
    background: radial-gradient(38% 56% at 50% 50%, rgba(255, 216, 74, .26), transparent 72%) no-repeat;
    background-size: 170% 170%;
    animation: stageHue 22s ease-in-out infinite alternate;
}
@keyframes stageHue {
    0% { background-position: 95% 90%; }
    50% { background-position: 35% 20%; }
    100% { background-position: 0% 70%; }
}
@media (prefers-reduced-motion: reduce) { .stage__glow--bg { animation: none; } }
.stage__tab li:not(.stage__glow) { position: relative; z-index: 1; }
.stage__tab li { display: inline-flex; align-items: center; gap: 8px; padding: 2px clamp(12px, 1.5vw, 24px); font-size: clamp(13px, 1vw, 15.5px); font-weight: 700; color: var(--black); }
.stage__tab li:not(.stage__glow) + li:not(.stage__glow) + li, .stage__tab li:not(.stage__glow) ~ li:not(.stage__glow) { border-left: 1px solid #d5d7dd; }
/* Sekme, yukarıdan dökülen suyun kumu açması gibi oluşur (06.10.2026; site.js sınıfları ve .stage__pour kopyasını ekler).
   Dikey ve yatay açılma ayrı öğelerde: tek animasyonda ara kare konunca hareket o karede duraksıyordu. Dış öğe hızla
   aşağı iner (dil), iç öğe geç başlayıp iki yana yayılır. Sıçrama/taşma yok (Nursel yumuşak hareket istiyor).
   JS yoksa ya da hareket azaltılmışsa eski .hero-in girişi kalır. */
.stage__tab.is-pour { opacity: 1; transform: none; animation: none; background: transparent; }
.stage__tab.is-pour::before, .stage__tab.is-pour::after { visibility: hidden; }
.stage__tab.is-pourtext { opacity: 1; transform: none; animation: none; }
.stage__tab.is-pourtext li:not(.stage__glow) { opacity: 0; animation: tabText .7s ease 1.3s forwards; }
.stage__tab.is-pourtext li:nth-child(3) { animation-delay: 1.4s; }
.stage__tab.is-pourtext li:nth-child(n+4) { animation-delay: 1.5s; }
.stage__pour { position: absolute; top: 0; left: 50%; z-index: 3; translate: -50% 0; pointer-events: none; transform-origin: 50% 0; transform: scaleY(0); animation: pourDown .8s cubic-bezier(.2, .7, .3, 1) .5s forwards; }
.stage__pour i { position: absolute; inset: 0; background: #fff; border-radius: 0 0 var(--r) var(--r); transform: scaleX(.05); animation: pourWide 1.15s cubic-bezier(.55, 0, .2, 1) .55s forwards; }
.stage__pour i::before, .stage__pour i::after { content: ''; position: absolute; top: 0; width: var(--r); height: var(--r); background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), #fff var(--r)); }
.stage__pour i::before { right: 100%; }
.stage__pour i::after { left: 100%; transform: scaleX(-1); }
@keyframes pourDown { to { transform: scaleY(1); } }
@keyframes pourWide { to { transform: scaleX(1); } }
@keyframes tabText { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.stage__tab svg { flex: none; width: 20px; height: 20px; color: #f0a800; } /* flex: none — dar ekranda tik sıkışıp kaybolmasın */

/* Fare ile derinlik (site.js --px / --py verir, -1..1): arkadaki tablet az ve fareyle aynı yöne, öndeki kartlar
   ve balonlar daha çok ve ters yöne kayar. `translate` ayrı özellik olduğu için giriş/kart animasyonlarının
   transform'uyla çakışmaz. */
.tablet { translate: calc(var(--px, 0) * 9px) 0; } /* yalnızca yatay: dikeyde kayarsa gri alanın altında boşluk açılır */
.scard--orders { translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -12px); }
.scard--revenue { translate: calc(var(--px, 0) * -32px) calc(var(--py, 0) * -18px); }
.pops { translate: calc(var(--px, 0) * -44px) calc(var(--py, 0) * -22px); }
.hero__copy { translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 3px); }
.stage__scene { position: relative; width: min(100% - 40px, 950px); height: 100%; margin-inline: auto; }
/* Tablet: alt kenarı gri alanın altına tam oturur, dışarı taşmaz (taşan sürüm denendi, Nursel geri aldırdı).
   Yüksekliği orana değil sahneye bağlı (bottom: 0): her ekranda zemine oturur. */
.tablet { position: absolute; left: 0; top: clamp(88px, 7.4vw, 124px); bottom: 0; width: 73%; padding: 2.4% 2.4% 0; border-radius: clamp(20px, 3.2vw, 44px) clamp(20px, 3.2vw, 44px) 0 0; background: #101114; box-shadow: 0 0 0 1px #3a3c44 inset, 0 0 0 1px #0a0a0c, 0 0 0 clamp(2px, .32vw, 4px) #c6c8cf, 0 0 0 clamp(3px, .4vw, 5px) #9b9ea8; } /* Halkalar: cam kenarı, ince siyah ara, gümüş gövde */
/* Ön kamera (üst çerçevenin ortasında) ve üst kenardaki güç tuşu: cihazı düz bir kutudan ayıran iki ayrıntı */
.tablet::before { content: ''; position: absolute; left: 50%; top: 1.2%; width: clamp(4px, .55vw, 8px); aspect-ratio: 1; margin-left: clamp(-4px, -.275vw, -2px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5068 0 22%, #1d1f27 45%, #08080a 100%); box-shadow: 0 0 0 1px #24262d; }
.tablet::after { content: ''; position: absolute; right: 11%; top: calc(clamp(3px, .4vw, 5px) * -1 - 2px); width: 8%; height: 3px; border-radius: 2px 2px 0 0; background: #a9acb5; }
.tablet__screen { position: relative; overflow: hidden; height: 100%; background: #fff; border-radius: clamp(6px, 1vw, 12px) clamp(6px, 1vw, 12px) 0 0; }
.tablet__screen img { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: opacity .9s ease; will-change: transform; }
.tablet__screen img.is-on { opacity: 1; }
/* Dizüstü görünümü (06.10.2026, Nursel): tablet + sağdaki koyu kartlar örnek alınan sitenin girişine fazla benziyordu.
   Cihaz ortada ve TAMAMI gri alanın içinde (tablet alttan taşıp kesiliyordu). Kartlar bu görünümde çizilmez.
   Tablet kuralları silinmedi; config/site.php → home_hero_device 'tablet' yapılınca eski düzen (kartlarıyla) geri gelir.
   Konum ALTTAN sabitlenir (top değil bottom + height): üstten sabitlenince en geniş ekranda max-width devreye giriyor,
   aspect-ratio yüksekliği kısaltıyor ve cihazın altında boşluk kalıyordu. Cihaz gri alanın alt kenarına oturmalı. */
.stage__scene--laptop .tablet {
    --base: clamp(10px, 1.5vw, 22px); /* taban yüksekliği. 06.10.2026: taban bir ara kaldırıldı, Nursel geri istedi */
    left: 50%; top: auto; bottom: var(--base); height: calc(100% - clamp(88px, 7.4vw, 124px) - var(--base)); width: auto; max-width: 88%; aspect-ratio: 16 / 10.3;
    translate: calc(-50% + var(--px, 0) * 9px) 0;
    padding: clamp(6px, .95vw, 13px) clamp(6px, .95vw, 13px) clamp(8px, 1.25vw, 18px); /* alt kenar biraz kalın: gerçek dizüstünde ekranın altında çene vardır */
    border-radius: clamp(9px, 1.25vw, 18px) clamp(9px, 1.25vw, 18px) clamp(2px, .3vw, 4px) clamp(2px, .3vw, 4px);
    background: #0c0c0e;
    /* içte cam kenarı, dışta ince alüminyum kapak kenarı (üstü açık, altı koyu) */
    box-shadow: 0 0 0 1px #2b2c31 inset, 0 0 0 clamp(1px, .12vw, 2px) #c9ccd3, 0 0 0 clamp(2px, .2vw, 3px) #8b8e97;
}
.stage__scene--laptop .tablet::before { top: clamp(1px, .2vw, 3px); width: clamp(3px, .36vw, 5px); margin-left: clamp(-2.5px, -.18vw, -1.5px); } /* kamera, ince üst kenarın içinde */
.stage__scene--laptop .tablet::after { display: none; } /* tabletin güç düğmesi */
.stage__scene--laptop .tablet__screen { border-radius: clamp(3px, .45vw, 6px) clamp(3px, .45vw, 6px) clamp(1px, .2vw, 3px) clamp(1px, .2vw, 3px); }
/* Taban: alt gövdenin önden görünen kenarı. Kapaktan geniş; üstte ışık çizgisi, aşağı doğru koyulaşan alüminyum,
   uçlarda hafif gölge (gövde yanlara doğru kıvrılır), ortada kapağı açma girintisi, altta zemine değen koyu çizgi. */
.tablet__base {
    position: absolute; left: -5.5%; right: -5.5%; top: 100%; height: var(--base); /* taşma her yanda %5,5: %9,5 iken kapak tabana göre dar duruyordu (Nursel, 06.10.2026) */
    border-radius: clamp(1px, .14vw, 2px) clamp(1px, .14vw, 2px) clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px) / clamp(1px, .14vw, 2px) clamp(1px, .14vw, 2px) 78% 78%;
    background:
        linear-gradient(90deg, rgba(20, 22, 30, .22) 0%, rgba(20, 22, 30, 0) 5%, rgba(20, 22, 30, 0) 95%, rgba(20, 22, 30, .22) 100%),
        linear-gradient(180deg, #f6f7f9 0%, #dcdee3 9%, #c4c7ce 38%, #a9acb5 72%, #83868f 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}
.tablet__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 36%; translate: -50% 0; border-radius: 0 0 clamp(4px, .6vw, 9px) clamp(4px, .6vw, 9px); background: linear-gradient(180deg, #7f828b 0%, #a4a7b0 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.tablet__base::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: clamp(1px, .14vw, 2px); border-radius: 2px; background: rgba(20, 22, 30, .35); }
/* Kayma ve mağazalar arası geçiş site.js'te yönetilir */

/* Koyu bilgi kartları (ilk hali). Beyaz, sarı ve koyu gri sürümler denendi; Nursel ilk hallerine dönülmesini istedi (02.10.2026). */
.scard { position: absolute; z-index: 2; color: #fff; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -24px rgba(11, 11, 15, .6); }
.scard b { font-weight: inherit; font-variant-numeric: tabular-nums; }
/* Mağaza değişince kartlar ortaya doğru küçülüp kaybolur, yeni değerlerle yaylanarak büyür (site.js) */
.scard { transform-origin: center; transition: transform .55s cubic-bezier(.2, 1.35, .4, 1), opacity .35s ease; }
.scard.is-swapping { transform: scale(.45); opacity: 0; transition: transform .32s cubic-bezier(.6, 0, .8, .3), opacity .28s ease; }
.scard--revenue { transition-delay: .07s; }
.scard--revenue.is-swapping { transition-delay: 0s; }
.scard.is-redraw .scard__line, .scard.is-redraw .scard__area, .scard.is-redraw .scard__dot { animation: none; }

/* Sipariş kartı: yuvarlak ikon + yazı */
.scard--orders { right: 0; top: clamp(60px, 8.6vw, 124px); display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); padding: clamp(10px, 1.1vw, 16px) clamp(16px, 1.8vw, 28px) clamp(10px, 1.1vw, 16px) clamp(14px, 1.5vw, 22px); border-radius: clamp(12px, 1.4vw, 20px); background: #1c1d21; white-space: nowrap; } /* hap biçimi "çok oval" bulundu */
.scard__ico { flex: none; position: relative; width: clamp(26px, 2.8vw, 40px); height: clamp(26px, 2.8vw, 40px); display: grid; place-items: center; color: #fff; } /* yalnızca beyaz ikon: sarı zemin ve yeşil canlı nokta Nursel'in isteğiyle kaldırıldı */
.scard__ico .ico { width: 100%; height: 100%; }
@keyframes live { 50% { transform: scale(1.35); opacity: .65; } }
.scard--orders span { display: block; font-size: clamp(10px, .92vw, 13.5px); color: #b9bbc6; line-height: 1.2; }
.scard--orders strong { display: block; margin-top: 2px; font-size: clamp(13px, 1.5vw, 21px); font-weight: 400; line-height: 1.2; }

/* Ciro kartı */
.scard--revenue {
    right: 0; top: clamp(128px, 15.4vw, 222px); width: 34%; min-width: 196px; overflow: hidden;
    padding: clamp(14px, 2.2vw, 32px); border-radius: clamp(14px, 1.6vw, 22px);
    background: radial-gradient(130% 80% at 100% 0%, #34363f 0%, #1c1d21 55%);
}
.scard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scard__head span { font-size: clamp(12px, 1.25vw, 18px); color: #c9cbd3; }
.scard__head em { font-style: normal; padding: 3px 10px; border-radius: 7px; background: rgba(255, 255, 255, .1); font-size: clamp(9.5px, .85vw, 12.5px); font-weight: 700; color: #e8e8ea; }
.scard--revenue strong { display: flex; align-items: baseline; gap: .2em; margin-top: clamp(4px, .7vw, 10px); font-size: clamp(24px, 3.1vw, 45px); font-weight: 400; letter-spacing: 0; line-height: 1.1; } /* kalın değil: başlıklardaki ince yazıyla aynı (Nursel istedi) */
.scard--revenue strong small { font-size: .55em; font-weight: 400; color: #a99ef7; } /* ₺ işareti grafikle aynı tonda (önceki sarı) */
.scard__delta { display: inline-flex; align-items: center; gap: 5px; margin-top: clamp(6px, .9vw, 12px); padding: 3px 10px 3px 7px; border-radius: 7px; background: rgba(43, 213, 118, .14); color: #5fe39a; font-size: clamp(9.5px, .88vw, 13px); font-weight: 700; white-space: nowrap; }
.scard__delta svg { width: 11px; height: 11px; }
/* Sütun grafik: ince sütunlar soldan sağa, küçükten büyüğe sırayla alttan yükselir; birkaç saniye durur,
   sonra aynı sırayla iner ve yeniden başlar. Soldakiler soluk, sağa doğru koyulaşır; son sütun tam sarı ve hafif parlar. */
.scard__bars { display: flex; align-items: flex-end; justify-content: space-between; height: clamp(54px, 7.4vw, 108px); margin-top: clamp(14px, 1.9vw, 28px); }
.scard__bars i { flex: none; width: clamp(2.5px, .3vw, 4px); height: var(--h); border-radius: 3px; background: linear-gradient(180deg, #a99ef7 0%, #6c5ce7 100%); opacity: calc(.34 + var(--i) * .036); transform: scaleY(var(--s, 0)); transform-origin: bottom; } /* --s (0..1) site.js'ten: sütunlar çizgiyle AYNI anda, çizginin ucu üstlerinden geçerken yükselir */
.scard__bars i:last-child { opacity: 1; background: linear-gradient(180deg, #c9c2ff 0%, #6c5ce7 100%); box-shadow: 0 0 14px 1px rgba(108, 92, 231, .6); } /* 05.10.2026: grafik sarıdan mora (#6c5ce7; koyu kartta görünsün diye uçlar açık ton) — önceki: #fff3b8→#ffd84a, sütunlar #ffe07a→#ffc928 */
@keyframes barUp { 0% { transform: scaleY(0); } 11% { transform: scaleY(1); } 86% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
.scard.is-redraw .scard__bars i { animation: none; }
/* Sütunların üstünden geçen çizgi: sütunların tepesinden biraz yukarıda durur, onlar yükseldikten sonra çizilir,
   onlarla birlikte kaybolur. Sütunlar üstte kalsın diye çizgi arkada (z-index) değil, yalnızca yukarı kaydırılmış. */
.scard__bars { position: relative; padding-top: clamp(8px, 1vw, 14px); }
.scard__trace { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: calc(100% - clamp(8px, 1vw, 14px)); overflow: visible; pointer-events: none; }
.scard__trace polyline { filter: drop-shadow(0 0 4px rgba(108, 92, 231, .8)); } /* çizim site.js'te: ok başı çizginin ucunda onunla birlikte ilerlesin diye */
/* Çizginin ucundaki ok başı: çizgi çizilirken ucunda onunla birlikte ilerler, yönü o andaki eğime döner (site.js).
   Sol üst köşeye sabitlenir; yeri ve açısı transform ile verilir. */
.scard__tip { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: solid #c9c2ff; border-width: 2px 2px 0 0; border-radius: 0 2px 0 0; filter: drop-shadow(0 0 4px rgba(108, 92, 231, .8)); opacity: 0; pointer-events: none; }
@keyframes draw { 0% { stroke-dashoffset: 600; opacity: 1; } 36%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes area { 0%, 18% { opacity: 0; } 36%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot { 0%, 25% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.25); } 35%, 62% { opacity: 1; transform: scale(1); } 68% { opacity: 1; transform: scale(1.3); } 74%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* ── Servis şeridi ────────────────────────────────────────────────────── */
.strip { padding: 30px 0 34px; border-bottom: 1px solid var(--line); background: #fff; }
.strip__title { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: slide 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #9a9ca6; white-space: nowrap; }
.marquee__track img { height: 26px; width: auto; filter: grayscale(1); opacity: .65; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Ara şerit: müşteri logoları ─────────────────────────────────────────
   İlk alan (gri sahne) ile 2. alanı ayıran satır: logolar durmadan, yavaşça sola kayar; iki ucu beyaza
   karışır; altında ince çizgi. Başlık yazısı yok (Nursel istemedi; panelden yazılırsa görünür).
   Logolar gri, hafif soluk ve küçük; üzerine gelince renk değişmez (Nursel'in isteği).
   mix-blend-mode: beyaz zeminli logo dosyalarının kutusu görünmesin. */

/* ── 2. alan: panelden mağaza kurma ──────────────────────────────────────
   Örnek: bigcommerce.com/product → "Design Your Store" (Nursel'in ekran görüntüsü). Ölçüler oradan:
   kart ve bölüm zemini YOK; solda küçük büyük harfli etiket, ince başlık, giriş metni, alt alta maddeler
   (kalın başlık + açıklama), oklu yazı bağlantısı; sağda yumuşak tonlu KARE zemin, içinde sağa ve alta
   taşan ekran. Renk yalnızca bu karede: örnekteki mor-krem yerine sitenin gri sahnesi + işaret kalemi sarısı. */
.make { padding: clamp(60px, 8vw, 136px) 0 clamp(56px, 7.4vw, 128px); }
.make__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(28px, 4.6vw, 76px); max-width: 1120px; }
.make__eyebrow { display: block; font-size: clamp(11.5px, .82vw, 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5f6370; }
.make__copy h2 { margin-top: clamp(16px, 2vw, 34px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.make__lead { margin: clamp(10px, 1.2vw, 18px) 0 0; font-size: clamp(1rem, 1.2vw, 1.22rem); line-height: 1.5; color: var(--text); }
/* Maddeler: kalın başlık + altında açıklama, hepsi açık (örnekteki gibi). Nursel: "sade ama şık".
   Tek hareketli öğe soldaki ince siyah gösterge: açık gri bir hattın üzerinde, sıradaki maddenin hizasına
   yumuşakça kayar; maddenin yazısı da aynı anda griden siyaha geçer. Kayma, boyanma, alt çizgi yok. */
.make__list { position: relative; display: grid; gap: clamp(16px, 1.9vw, 30px); margin-top: clamp(24px, 2.8vw, 44px); padding-left: clamp(18px, 1.9vw, 30px); }
.make__list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #dfe2e8; }
.make__list::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: var(--ih, 0px); border-radius: 3px; background: var(--black); transform: translateY(var(--iy, 0px)); transition: transform .9s cubic-bezier(.6, 0, .2, 1), height .9s cubic-bezier(.6, 0, .2, 1); }
.make__item { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.make__item b { display: block; font-size: clamp(1.02rem, 1.2vw, 1.22rem); font-weight: 700; line-height: 1.3; color: #a3a6b0; transition: color .9s ease; }
.make__item em { font-style: normal; }
.make__txt { display: block; margin-top: 6px; font-size: clamp(.92rem, 1vw, 1.04rem); line-height: 1.5; color: #b0b3bc; transition: color .9s ease; }
.make__item:hover b, .make__item.is-on b { color: var(--black); }
.make__item:hover .make__txt, .make__item.is-on .make__txt { color: #3d3f48; }
.make__more { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(24px, 3vw, 46px); font-size: clamp(.98rem, 1.05vw, 1.1rem); font-weight: 700; color: var(--black); }
.make__more svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.make__more:hover svg { transform: translateX(5px); }

/* Sağdaki kare: Nursel'in ekran görüntüsündeki gibi — biçim ve ölçüler oradan, RENK bizim (soğuk gri → açık sarı; örnekteki mavi-mor istenmedi);
   ortasında iki yanı boşluklu, yalnızca alttan taşan dar pencere. */
.make__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: clamp(14px, 1.7vw, 26px); background: linear-gradient(135deg, var(--stage) 0%, #e4e2f5 42%, #fff2c2 100%); } /* sol üstte ilk alandaki sahnenin grisi, ortada hafif mor, sağ altta açık sarı (Nursel: "arada mor da olabilir") */
.make__screen { position: absolute; left: 13.5%; right: 13%; top: 10%; bottom: 0; overflow: hidden; border-radius: clamp(6px, .7vw, 10px) clamp(6px, .7vw, 10px) 0 0; background: #fff; box-shadow: 0 24px 50px -26px rgba(11, 11, 15, .32); }
/* Sahne geçişi: "ışık geçişi" (film/cinematic light transition örneklerindeki gibi). Adım değişirken ekranın üstünden
   soldan sağa sıcak, bulanık bir ışık bandı süpürür ve görüntü bir an parlar; yeni ekran bu parlamanın altında gelir.
   site.js adım değişiminde .is-flare sınıfını yeniden verir. */
.make__screen::after { content: ''; position: absolute; z-index: 3; top: -20%; bottom: -20%; left: 0; width: 70%; pointer-events: none; opacity: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 236, 170, .55) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 216, 74, .6) 68%, rgba(255, 255, 255, 0) 100%); filter: blur(18px); mix-blend-mode: screen; }
.make__screen.is-flare::after { animation: makeFlare 1s cubic-bezier(.4, 0, .2, 1); }
.make__screen.is-flare .make__cam { animation: makeFlash 1s ease; }
@keyframes makeFlare { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 18% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(240%) skewX(-18deg); } }
@keyframes makeFlash { 0%, 100% { filter: none; } 38% { filter: brightness(1.28) saturate(1.1) blur(1.5px); } }
/* Kamera: görüntüler ve imleç bunun içinde. Görüntü 16:10, pencere dik ve dar: kamera pencerenin iki katı genişlikte, ortalı */
.make__cam { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 16 / 10; margin-left: -97.96%; transform: scale(var(--z, 1)) translate(var(--tx, 0%), var(--ty, 0%)); transition: transform 1.15s cubic-bezier(.5, 0, .2, 1); will-change: transform; }
.make__cam img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity .8s ease; }
.make__cam img.is-on { opacity: 1; }
/* Tıklanınca açılan ekran: tıklanan noktadan büyüyerek gelir */
.make__cam img.make__open { z-index: 1; transform: scale(.9); transition: opacity .45s ease, transform .7s var(--ease); }
.make__cam img.make__open.is-open { opacity: 1; transform: none; }
/* İmleç: örnekteki gibi (Nursel'in ekran görüntüsü, Masaüstü/imlec.png) — kuyruksuz, dolu siyah üçgen ok.
   Ucu (sol üst köşesi) hedefin üstüne gelir; yumuşakça kayar, varınca bir kez tıklar (sarı halka). */
.make__cursor { position: absolute; left: var(--cx, 60%); top: var(--cy, 70%); z-index: 2; width: clamp(18px, 1.9vw, 27px); opacity: 0; transition: left .8s cubic-bezier(.45, .05, .25, 1), top .8s cubic-bezier(.45, .05, .25, 1), opacity .4s ease; pointer-events: none; }
.make__cursor.is-on { opacity: 1; }
.make__cursor svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(11, 11, 15, .3)); }
.make__cursor i { position: absolute; left: 14%; top: 10%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%; background: var(--mark); opacity: 0; transform: scale(.3); }
.make__cursor.is-click i { animation: makeClick 1s ease-out; }
.make__cursor.is-click svg { animation: makePress .5s ease; }
@keyframes makeClick { 0% { opacity: .8; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes makePress { 40% { transform: scale(.84); } }
@media (max-width: 900px) {
    .make__grid { grid-template-columns: 1fr; }
    .make__media { aspect-ratio: 5 / 4; }
    .make__cam { margin-left: -78.3%; }
}
@media (prefers-reduced-motion: reduce) {
    .make__cursor { display: none; }
    .hero__glow::after { animation: none; }
    .make__txt, .make__item b, .make__list::after { transition: none; }
    .make__cam { transition: none; }
    .make__screen.is-flare::after, .make__screen.is-flare .make__cam { animation: none; }
}

/* ── 3. alan: ödeme ──────────────────────────────────────────────────────
   Örnek: bigcommerce.com/product → "Customize Checkout" (Masaüstü/ekran3.png). Ölçüler ve düzen oradan:
   üstte iki ince çizgi arasında büyük yazı + dikey çizgiyle ayrılmış küçük iki satır; altında solda yumuşak
   renkli KARE, ortasında beyaz ödeme kartı; sağda 2. alandaki yazı düzeni (etiket, ince başlık, maddeler, bağlantı).
   Kare rengi 2. alandakinden (gri → mor → sarı) bilerek farklı: açık sarıdan pembeye, alt köşede lila. */
.pay { padding: clamp(24px, 3vw, 48px) 0 clamp(60px, 8vw, 136px); }
/* Bant canlanması: çizgiler ortadan iki yana açılır, cümle sözcük sözcük yükselir, rakamlar sayar (data-count) */
.pay__band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1120px; padding-block: clamp(32px, 3.6vw, 52px); }
.pay__band::before, .pay__band::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transition: transform 1.2s var(--ease) .1s; }
.pay__band::before { top: 0; }
.pay__band::after { bottom: 0; }
.pay__band.is-in::before, .pay__band.is-in::after { transform: none; }
.pay__band p { margin: 0; max-width: 700px; font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 400; line-height: 1.28; letter-spacing: .003em; }
.js .pay__band .pw { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s ease, transform .8s var(--ease); transition-delay: calc(var(--wi) * 55ms + .25s); }
.pay__band.is-in .pw { opacity: 1; transform: none; }
.pay__by { display: flex; gap: clamp(22px, 2.6vw, 40px); padding: 4px 0 4px clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.pay__by div { display: grid; gap: 2px; }
.pay__by b { font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.pay__by span { font-size: clamp(.86rem, .92vw, .96rem); color: var(--muted); white-space: nowrap; }

/* Kare, 2. alandaki kareyle AYNI boyutta (Nursel: "birbirine uyumlu olmalı"): aynı sütun oranı aynalı (1,12 : 0,88),
   aynı boşluk, aynı en büyük genişlik, aynı kare oranı. Birinde değişirse ötekinde de değiştirilmeli. */
.pay__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(28px, 4.6vw, 76px); max-width: 1120px; margin-top: clamp(56px, 7.4vw, 124px); }
.pay__copy h2 { margin-top: clamp(16px, 2vw, 34px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.pay__list { display: grid; gap: clamp(18px, 2.1vw, 32px); margin-top: clamp(26px, 3vw, 46px); }
.pay__list b { display: block; font-size: clamp(1.02rem, 1.2vw, 1.2rem); font-weight: 700; line-height: 1.3; }
.pay__list p { margin: 8px 0 0; font-size: clamp(.92rem, 1vw, 1.02rem); line-height: 1.5; color: #3d3f48; }

/* Kare ve kart. Kartın içi em ile: kare küçüldükçe kart da orantılı küçülür */
.pay__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: clamp(14px, 1.7vw, 26px); background: linear-gradient(200deg, #fff3c9 0%, #fbe9f1 48%, #e7e6f8 100%); }
.pay__card { position: absolute; left: 50%; top: 50%; display: grid; width: 66%; padding: 1.6em; border-radius: 1.1em; background: #fff; color: var(--text); font-size: clamp(9.5px, 1vw, 14.5px); box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 30px 60px -30px rgba(11, 11, 15, .35); transform: translate(-50%, -50%); }
/* Üç ekran aynı hücrede üst üste: kartın boyu en uzununa göre sabit kalır, ekranlar arasında zıplamaz */
/* ödeme kartında imleç daha hızlı kayar (2. alandaki 1 sn'lik kaymadan bağımsız) */
.pay__media .make__cursor { transition: left .45s cubic-bezier(.45, .05, .25, 1), top .45s cubic-bezier(.45, .05, .25, 1), opacity .25s ease; }
.pay__pane { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s ease, transform .55s var(--ease), visibility 0s .55s; }
.pay__pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .15s, transform .55s var(--ease) .15s, visibility 0s; }

.pay__item { display: flex; align-items: flex-start; gap: .9em; padding-bottom: 1.2em; border-bottom: 1px solid #e6e8ed; }
.pay__thumb { flex: none; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: .8em; background: #fff2c2; color: #6b5300; }
.pay__thumb svg { width: 1.9em; height: 1.9em; }
.pay__name { flex: 1; font-size: .92em; font-weight: 700; line-height: 1.35; }
.pay__name small { margin-right: .3em; color: #8a8e9a; font-weight: 400; }
.pay__name em { display: block; margin-top: .2em; color: #8a8e9a; font-size: .85em; font-style: normal; font-weight: 400; }
.pay__item > b { font-size: .92em; }
.pay__sum { display: grid; gap: .55em; margin: 0; padding: 1.1em 0; border-bottom: 1px solid #e6e8ed; }
.pay__sum div { display: flex; justify-content: space-between; font-size: .86em; color: #6b6f7c; }
.pay__sum dd { margin: 0; }
.pay__total { display: flex; justify-content: space-between; align-items: baseline; padding: 1.1em 0 0; font-weight: 700; }
.pay__total b { font-size: 1.1em; font-weight: 900; }
.pay__btn { position: relative; display: flex; align-items: center; justify-content: center; height: 3em; margin-top: 1.2em; border-radius: .7em; background: #2a2b31; color: #fff; font-weight: 700; transition: transform .2s ease; }
.pay__btn i { position: absolute; width: 1.3em; height: 1.3em; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--mark); border-radius: 50%; opacity: 0; }
.pay__btn.is-busy { transform: scale(.98); }
.pay__btn.is-busy b { opacity: 0; }
.pay__btn.is-busy i { opacity: 1; animation: paySpin .7s linear infinite; }
@keyframes paySpin { to { transform: rotate(360deg); } }

.pay__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; margin-bottom: 1.3em; padding: .3em; border-radius: .7em; background: #f2f3f6; font-size: .86em; font-weight: 700; text-align: center; }
.pay__tabs span { padding: .55em 0; border-radius: .5em; color: #8a8e9a; }
.pay__tabs .is-on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(11, 11, 15, .1); }
.pay__lbl { display: block; margin: 0 0 .5em; font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8e9a; }
.pay__lbl ~ .pay__lbl { margin-top: 1.3em; }
.pay__field { position: relative; display: flex; align-items: center; gap: .6em; height: 3em; padding: 0 .9em; border: 1px solid #dfe2e8; border-radius: .6em; transition: border-color .4s ease; }
.pay__field.is-focus { border-color: var(--black); }
.pay__field svg { flex: none; width: 1.4em; height: 1.4em; color: #8a8e9a; }
.pay__num { font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
.pay__num.is-typing::after { content: ''; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--text); animation: payCaret .8s steps(1) infinite; }
@keyframes payCaret { 50% { opacity: 0; } }
.pay__lbl--row { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 1.9em; }
.pay__bank { padding: .3em .6em; letter-spacing: 0; text-transform: none; border-radius: .45em; background: var(--black); color: #fff; font-size: .74em; font-style: normal; font-weight: 700; white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity .45s ease, transform .45s var(--ease); }
.pay__bank.is-on { opacity: 1; transform: none; }
.pay__inst { display: grid; gap: .45em; margin: 0; padding: 0; list-style: none; }
.pay__inst li { display: flex; align-items: center; gap: .6em; height: 2.6em; padding: 0 .85em; border: 1px solid #e6e8ed; border-radius: .6em; font-size: .92em; white-space: nowrap; transition: border-color .35s ease, background .35s ease; }
.pay__inst i { flex: none; width: 1em; height: 1em; border: 1.5px solid #b9bcc6; border-radius: 50%; transition: border-color .3s ease, box-shadow .3s ease; }
.pay__inst em { padding: .15em .45em; border-radius: .4em; background: #fff2c2; color: #6b5300; font-size: .8em; font-style: normal; font-weight: 700; }
.pay__inst span { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pay__inst li.is-pick { border-color: var(--black); background: #fafafb; }
.pay__inst li.is-pick i { border-color: var(--black); box-shadow: inset 0 0 0 .2em #fff, inset 0 0 0 1em var(--black); }

.pay__pane--done { align-items: center; justify-content: center; gap: .55em; text-align: center; }
.pay__pane--done > b { font-size: 1.4em; font-weight: 900; }
.pay__pane--done > small { color: #6b6f7c; font-size: .9em; }
.pay__check { display: grid; place-items: center; width: 4em; height: 4em; margin-bottom: .4em; border-radius: 50%; background: rgba(22, 163, 74, .14); transform: scale(.5); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.pay__pane--done.is-on .pay__check { transform: none; }
.pay__check svg { width: 2em; height: 2em; color: #15803d; } /* 05.10.2026: onay dairesi yarı saydam yeşil + koyu yeşil tik (Nursel "daha şeffaf"); önceki dolu yeşil #16a34a + beyaz tik. Kartın öteki vurguları sarı */
.pay__order { display: inline-flex; align-items: center; gap: .5em; margin-top: .9em; padding: .5em .9em; border-radius: .6em; background: #f5f6f9; font-size: .85em; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .4s ease .5s, transform .5s var(--ease) .5s; }
.pay__order i { width: .55em; height: .55em; border-radius: 50%; background: #22c55e; }
.pay__pane--done.is-on .pay__order { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .pay__band { grid-template-columns: 1fr; }
    .pay__by { padding-left: 0; border-left: 0; }
    .pay__grid { grid-template-columns: 1fr; }
    .pay__copy { order: -1; }
    .pay__media { aspect-ratio: 5 / 4; } /* 2. alandaki kareyle aynı */
    .pay__card { width: 60%; font-size: clamp(8.5px, 1.75vw, 14px); }
}
@media (max-width: 560px) {
    .pay__card { width: 78%; font-size: clamp(8px, 2.15vw, 12px); }
}
@media (prefers-reduced-motion: reduce) {
    .pay__pane, .pay__pane.is-on, .pay__check, .pay__order, .pay__bank, .pay__band::before, .pay__band::after, .js .pay__band .pw { transition: none; }
}

/* ── 4. alan: gerçek mağazalar (three.js galerisi) ───────────────────────
   Örnek: Masaüstü/ekran4.png (açık gri zemin, ortalı başlık, yan yana tam sayfa mağaza görüntüleri, altta düğme).
   Alan kaydırma boyunca sabitlenir: .tgal__pin uzun (mağaza sayısı × ~90vh), içindeki .tgal__stick ekrana yapışır;
   themes3d.js kaydırma ilerlemesini okuyup sahneyi çizer. WebGL yoksa / "hareketi azalt" açıksa .is-static:
   sabitleme kalkar, düz liste (örnekteki diziliş) görünür. */
/* 05.10.2026: ekrana sabitleme kaldırıldı ("yükseklik açısından tam ekran olmasa"): bölüm normal yükseklikte, galeri
   bölüm ekrandan geçerken döner (themes3d.js). Kartlarda sayfa akışı da kaldırıldı; yalnızca sitelerin üst kısmı görünür. */
/* 05.10.2026 (Nursel: "sarı mor beyaz gibi şeffaf"): beyaz zemin + sol üstte sarı, sağ altta mor yarı saydam ışık.
   Önceki: düz sahne grisi (var(--stage)). themes3d.js kenar kartları background-color'a (beyaza yakın) doğru soldurur. */
/* 05.10.2026 (Nursel: "sarı mor beyaz gibi şeffaf"): beyaz zemin + sol üstte sarı, sağ altta mor yarı saydam ışık.
   Yumuşak geçiş (kenarda maskeyle kaybolma) ve kaydırmaya bağlı belirip sönme denendi; Nursel bu ilk hale geri aldırdı.
   themes3d.js kenar kartları background-color'a (beyaza yakın) doğru soldurur. */
.tgal { background: var(--stage); } /* 06.10.2026: ilk ekrandaki gri alanla aynı gri (Nursel); önceki #f7f8fa. Daha eskiler: 05.10.2026: bir ton daha açık (önceki #f3f4f6, Nursel "biraz daha açık"); sade, düz, hafif gri (Nursel "sade hafif gri renk olsa"); sarı/mor ışıklar kaldırıldı. Denenenler: sahne grisi + ışıklar, beyaz + ışıklar, açık gri + ışıklar, düz sahne grisi */
.tgal__pin { position: relative; }
.tgal__stick { display: flex; flex-direction: column; padding-block: clamp(72px, 7.4vw, 124px); overflow: hidden; } /* 05.10.2026: üst/alt boşluk artırıldı (Nursel) */
.tgal__head { text-align: center; }
.tgal__head h2 { margin-top: clamp(10px, 1.4vh, 18px); font-size: clamp(1.6rem, 2.7vw, 2.6rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.tgal__head p { max-width: 640px; margin: clamp(8px, 1.2vh, 14px) auto 0; font-size: clamp(.95rem, 1.1vw, 1.12rem); line-height: 1.5; color: var(--muted); }
/* Başlık alanı giriş animasyonu (05.10.2026): bölüm görününce (data-reveal → .is-in)
   1) etiket: harf aralığı genişten yerine toplanır, 2) başlık: sözcükler sırayla bulanıktan netleşip alttan yükselir,
   3) açıklama: başlıktan sonra bulanıktan netleşir. "Hareketi azalt" açıksa hepsi doğrudan görünür. */
.js .tgal__eyebrow[data-reveal] { transform: none; letter-spacing: .6em; filter: blur(4px); transition: opacity .9s ease, letter-spacing 1.2s var(--ease), filter .9s ease; }
.js .tgal__eyebrow[data-reveal].is-in { letter-spacing: .14em; filter: none; }
.js .tgal__head h2[data-reveal] { opacity: 1; transform: none; }
.js .tgal__head h2 .pw { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.55em) scale(.96); transition: opacity .8s ease, filter .9s ease, transform 1s var(--ease); transition-delay: calc(var(--wi) * 90ms + .25s); }
.js .tgal__head h2.is-in .pw { opacity: 1; filter: none; transform: none; }
.js .tgal__lead[data-reveal] { transform: translateY(10px); filter: blur(6px); transition: opacity 1s ease, transform 1s var(--ease), filter 1s ease; transition-delay: .95s; }
.js .tgal__lead[data-reveal].is-in { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
    .js .tgal__eyebrow[data-reveal], .js .tgal__head h2 .pw, .js .tgal__lead[data-reveal] { opacity: 1; filter: none; transform: none; letter-spacing: .14em; transition: none; }
}
.tgal__stage { position: relative; height: clamp(380px, 39vw, 575px); margin-top: clamp(20px, 2.4vw, 36px); }
.tgal__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Düz liste: WebGL'siz yedek ve ekran okuyucu için */
.tgal__list { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); height: 100%; margin: 0; padding: 0 20px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tgal__list li { flex: none; height: min(100%, 560px); aspect-ratio: 3 / 5; margin: auto 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 24px 50px -30px rgba(11, 11, 15, .35); }
.tgal__list li:first-child { margin-left: auto; }
.tgal__list li:last-child { margin-right: auto; }
.tgal__list img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tgal.is-3d .tgal__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tgal__foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(-40px, -2.6vw, -16px); } /* kart alanının altındaki gölge payına biraz girer, noktalar kartlara yakın dursun */ /* örnekteki gibi ortalı: noktalar + düğme */
.tgal__dots { display: flex; gap: 2px; }
.tgal__dots button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.tgal__dots i { width: 7px; height: 7px; border-radius: 4px; background: #b9bcc6; transition: width .4s var(--ease), background .4s ease; }
.tgal__dots .is-on i { width: 22px; background: var(--brand); }
.tgal.is-static .tgal__dots { visibility: hidden; }
.tgal__scroll { display: none; } /* yalnızca büyük ekranda, dikey çubuğun altında görünür */
/* Tam ekran + kaydırmalı (05.10.2026, Nursel "tam ekran mı olsa scrollu"): .tgal--pin sınıfı varsa bölüm ekrana sabitlenir,
   kısa bir kaydırma payında (mağaza başına ~50vh) galeri bütün mağazaları dolaşır. Sınıf kaldırılırsa sabitlenmeyen hale döner.
   Yalnızca 3B çalışırken (.is-3d): yedek düz listede sabitleme anlamsız. */
.tgal--pin.is-3d .tgal__pin { height: calc(100vh + (var(--n, 4) - 1) * 50vh); }
.tgal--pin.is-3d .tgal__stick { position: sticky; top: 0; height: 100vh; height: 100dvh; justify-content: center; padding-block: calc(var(--hdr-h) - 10px) clamp(18px, 3vh, 36px); }
.tgal--pin.is-3d .tgal__stage { height: min(54vh, 580px); } /* altta "Hemen Başla" düğmesine yer */
@media (max-width: 760px) {
    .tgal--pin.is-3d .tgal__stick { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* 80 px idi: alttaki sabit satış çubuğunun payıydı; çubuk 07.10.2026'da kaldırıldı, boşluk da gitti */
    .tgal--pin.is-3d .tgal__stage { height: min(46vh, 460px); margin-top: 14px; } /* 07.10.2026 (Nursel: "mobilde üst ve alt boşluk azalsın"): bölüm kaydırılırken ekrana sabitlendiği için tam ekran boyunda; boşluk, içeriğin ekrandan kısa kalmasından geliyordu → galeri büyütüldü (40vh/380 px idi), boşluk onunla doldu */
}
/* Büyük ekranda noktalar sağ kenarda DİKEY (Nursel: "büyük ekranlarda sağda scrolling nokta"); kaydırdıkça etkin nokta
   aşağı ilerler, arkada ince dikey çizgi. Tablet ve telefonda altta yatay kalır. Noktalar sabitlenen kutuya (.tgal__stick)
   göre konumlanır: .tgal__foot bu ekranlarda konumsuz (static), yalnızca düğmeyi taşır. */
@media (min-width: 1101px) {
    .tgal.is-3d .tgal__foot { position: static; margin-top: clamp(4px, .8vw, 12px); }
    .tgal.is-3d .tgal__dots { position: absolute; z-index: 3; right: clamp(20px, 2.6vw, 44px); top: 50%; flex-direction: column; gap: 4px; transform: translateY(-50%); }
    /* Yuvarlak uçlu dikey çubuk denendi; Nursel "çubuk olmasaydı, noktalı daha iyiydi" → yuvarlak noktalar */
    .tgal.is-3d .tgal__dots::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: #d9dbe2; transform: translateX(-50%); }
    .tgal.is-3d .tgal__dots button { position: relative; width: 28px; height: 28px; }
    .tgal.is-3d .tgal__dots i { width: 8px; height: 8px; border: 2px solid #fcfcfe; border-radius: 6px; box-sizing: content-box; transition: height .4s var(--ease), background .4s ease; }
    .tgal.is-3d .tgal__dots .is-on i { width: 8px; height: 22px; background: var(--brand); } /* etkin nokta düz mor (Nursel "sade mor"); siyah→mor ve mor→sarı geçişleri denendi */
    .tgal.is-3d .tgal__scroll { display: block; position: absolute; left: 50%; top: calc(100% + 12px); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a8e9a; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
}
@media (max-width: 760px) {
    .tgal__stage { height: clamp(340px, 92vw, 440px); }
}

/* ── Bölüm iskeleti ───────────────────────────────────────────────────── */
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec--tight { padding: clamp(44px, 6vw, 76px) 0; }
.sec--soft, .sec--tint { background: var(--soft); }
.sec--dark { background: var(--black); color: #fff; }
.sec--dark h2 { color: #fff; }
.sec--dark .shead p { color: #b9bbc6; }
.sec__more { margin-top: 40px; text-align: center; }
.shead { max-width: 700px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.shead--left { margin-inline: 0; text-align: left; margin-bottom: 28px; }
.shead h2 { margin-top: 12px; font-size: clamp(1.9rem, 3.7vw, 2.9rem); }
.shead--left h2 { margin-top: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.shead p { margin-top: 14px; font-size: 1.12rem; color: var(--muted); }
.empty { text-align: center; color: var(--muted); }

.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Ekran kutularının kaydırmaya bağlı gelişi (06.10.2026; site.js sınıfları, sarmalayıcıyı ve değerleri verir).
   translate/scale ayrı özellik: içerideki ekranların kendi transform animasyonlarına karışmaz.
   Bu kutularda genel "belirerek gel" (data-reveal) kapatılır: geçiş süresi kaydırmayı izlemeyi geciktiriyor. */
.is-zoom { scale: var(--zs, 1); will-change: scale; } /* yerinde, ortadan büyür; dikey kayma 06.10.2026'da kaldırıldı */
.js .make__media.is-zoom, .js .pay__media.is-zoom { opacity: 1; transform: none; transition: none; }
.zoomin { position: absolute; inset: 0; scale: var(--zi, 1); will-change: scale; }
/* Özellik kutuları ve fiyat kartları da kaydırmaya bağlı gelir (07.10.2026; değerler site.js'ten: --so saydamlık,
   --sc ölçek, --sy dikey kayma). opacity/transform'da geçiş YOK: değer karede karede yumuşatılıyor, CSS geçişi
   üstüne binince kart kaydırmayı gecikmeyle izliyor. Kenar/gölge (ve fiyat kartında hover yükselmesi) geçişleri durur.
   Seçiciler, kartların kendi geçiş kurallarını (.js .bento .bento__big, .js .prices .price) geçecek kadar özgül. */
.js .bento .bento__big.is-scrub.is-scrub, .js .prices .price.is-scrub { opacity: var(--so, 1); scale: var(--sc, 1); transform: translateY(var(--sy, 0)); will-change: scale, transform, opacity; }
.js .bento .bento__big.is-scrub { transition: border-color .6s ease, box-shadow .6s ease; }
.js .prices .price.is-scrub { transition: translate .5s var(--ease), box-shadow .5s ease, border-color .5s ease; }

/* ── Adımlar (10 dakika) ──────────────────────────────────────────────── */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.steps::before, .steps::after { content: ''; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--line); }
.steps::after { background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s; }
.steps.is-in::after { transform: scaleX(1); }
.step { position: relative; z-index: 1; }
.step__top { display: flex; align-items: center; gap: 12px; }
.step__no { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: #fff; font-weight: 800; font-size: 19px; box-shadow: 0 0 0 8px var(--white); }
.sec--soft .step__no { box-shadow: 0 0 0 8px var(--soft); }
.step__time { padding: 4px 10px; border-radius: 6px; background: var(--mark); font-size: 14px; font-weight: 800; color: var(--black); box-shadow: 0 0 0 6px var(--white); }
.step h3 { margin-top: 22px; font-size: 1.45rem; }
.step p { margin-top: 8px; color: var(--muted); max-width: 30em; }

/* ── Panelden mağaza kurma ────────────────────────────────────────────── */
.build { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.build__list { display: grid; gap: 6px; }
.build__tab { position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%; padding: 18px 18px 20px; border: 0; border-radius: var(--r); background: transparent; text-align: left; overflow: hidden; transition: background-color .3s; }
.build__tab:hover { background: rgba(11, 11, 15, .04); }
.build__tab.is-on { background: #fff; box-shadow: var(--shadow); }
.build__no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #c9c9c5; font-size: 14px; font-weight: 800; color: var(--muted); transition: background-color .3s, color .3s, border-color .3s; }
.build__tab.is-on .build__no { background: var(--blue); border-color: var(--blue); color: #fff; }
.build__txt { display: grid; }
.build__txt b { font-size: 1.15rem; font-weight: 800; color: var(--black); line-height: 1.3; }
.build__txt > span { display: grid; grid-template-rows: 0fr; color: var(--muted); font-size: 15.5px; transition: grid-template-rows .45s var(--ease), margin-top .45s var(--ease), opacity .3s; opacity: 0; }
.build__txt > span > span { overflow: hidden; min-height: 0; }
.build__tab.is-on .build__txt > span { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }
.build__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.build.is-playing .build__tab.is-on .build__bar { animation: fill var(--build-ms, 6000ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.build__stage .frame__screen { aspect-ratio: 16 / 10; }
.build__stage .frame__screen img { transform: scale(1.03); transition: opacity .7s ease, transform 6s ease-out; }
.build__stage .frame__screen img.is-on { transform: scale(1); }

/* ── Örnek mağaza galerisi ────────────────────────────────────────────── */
.gallery { display: grid; gap: 22px; overflow: hidden; padding: 6px 0 10px; }
.gallery__track { display: flex; gap: 22px; width: max-content; animation: slide 70s linear infinite; }
.gallery__row--rev .gallery__track { animation-direction: reverse; animation-duration: 82s; }
.gallery:hover .gallery__track { animation-play-state: paused; }
.shot { margin: 0; width: clamp(260px, 30vw, 400px); }
.shot__frame { border-radius: 10px; overflow: hidden; border: 1px solid #dcdcd8; background: #fff; box-shadow: var(--shadow); transition: box-shadow .3s, transform .3s var(--ease); }
.shot:hover .shot__frame { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.shot__frame .frame__bar { height: 24px; }
.shot__frame .frame__bar i { width: 7px; height: 7px; }
.shot__screen { aspect-ratio: 16 / 11; overflow: hidden; }
.shot__screen img { width: 100%; transition: transform 3s linear; } /* kaydırma mesafesi site.js'te hesaplanır */
.shot figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 15px; }
.shot figcaption b { color: var(--black); }
.shot figcaption span { color: var(--muted); }

/* ── Sekmeli özellikler ───────────────────────────────────────────────── */
/* ── Özellikler (ana sayfa, 06.10.2026) ──────────────────────────────────
   Karışık boy kutular: dört özellik büyük kutuda (altında küçük canlı örnek), diğerleri küçük kutuda.
   Zemin beyaz: bir önceki bölüm (galeri) açık gri, art arda iki bölüm aynı tonda olmasın.
   Kutular renksiz (gri ikon zemini, siyah ikon); renk yalnızca örneklerin içinde, az.
   İlk deneme (solda grup listesi + sağda kartlar) beğenilmedi, kaldırıldı. */
.feats { padding: clamp(64px, 8vw, 136px) 0; }
.feats__head { max-width: 760px; }
.feats__head h2 { margin-top: clamp(16px, 2vw, 34px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px); max-width: 1120px; margin-top: clamp(32px, 4.4vw, 64px); }
.bento__big { position: relative; isolation: isolate; border: 1px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .3s; }
.bento__big:hover { border-color: #d6d6db; box-shadow: 0 1px 2px rgba(11, 11, 15, .03), 0 22px 44px -28px rgba(11, 11, 15, .2); } /* gölge --shadow'dan daha yaygın ve silik: kart kalkmış gibi değil, hafifçe belirginleşmiş gibi */
/* Üzerine gelince kenar çizgisi ve gölge YUMUŞAK geçsin (Nursel, 06.10.2026: "tık tık sert geçiş oluyor").
   Sebep: kartlarda data-reveal var ve genel ".js [data-reveal]" kuralı transition'ı yalnızca opacity + transform
   olarak tanımlıyor; daha özgül olduğu için karttaki kenar/gölge geçişini eziyor, onlar anında değişiyordu.
   Burada dördü birlikte, daha özgül seçiciyle yazılır; giriş gecikmesi (--d) yalnızca giriş özelliklerinde. */
.js .bento .bento__big { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), border-color .6s ease, box-shadow .6s ease; }
.bento__big { grid-column: span 6; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; }
/* Fare ışığı: imlecin olduğu yerde çok hafif mor bir hale, kutunun zemininin üstünde ama içeriğin altında
   (isolation + z-index -1). Konum site.js'ten, her kutunun kendi köşesine göre. Fare bölümde değilken görünmez. */
.bento__big::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(clamp(220px, 24vw, 340px) circle at var(--bx, -400px) var(--by, -400px), rgba(108, 92, 231, .11), transparent 70%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.bento.is-spot .bento__big::before { opacity: 1; }
/* Kartın üstünde gezerken çok hafif, perspektifli sağa-sola eğilme (06.10.2026, Nursel: "perspektif"): kart, imlecin
   olduğu kenarı geriye gidecek biçimde dikey ekseni çevresinde en çok 3° döner; içindeki örnek ters yöne 3 px kayar
   (içerik kartın biraz gerisindeymiş gibi). Perspektif ızgarada tanımlı: bütün kartlar aynı kaçış noktasına bakar.
   Değer site.js içinden (--tx); geçiş yavaş ki imleç hızlı gezse de kart sarsılmasın. rotate/translate ayrı özellik:
   giriş animasyonundaki transform ile çakışmaz. */
.bento { perspective: 1400px; }
.bento__big { rotate: y calc(var(--tx, 0) * 2deg); will-change: rotate; } /* en çok 2° (ilk hali 3°). Geçiş yok: değer site.js'te karede karede yumuşatılıyor; CSS geçişi her fare hareketinde baştan başlayıp takılıyordu */
.bento__vis > * { translate: calc(var(--tx, 0) * -3px) 0; }
@media (prefers-reduced-motion: reduce) { .bento__big { rotate: none; } .bento__vis > * { translate: none; } }
/* Giriş: kutular alttan kayarak değil, yerinde hafifçe büyüyerek gelir (ekran kutularıyla aynı dil) */
.js .bento [data-reveal]:not(.is-in) { transform: scale(.94); }
.bento__txt { padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px) clamp(16px, 1.6vw, 22px); }
.bento__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f1f1f4; color: var(--black); }
.bento__ico .ico { width: 20px; height: 20px; }
.bento h3 { margin-top: 16px; font-weight: 700; }
.bento__big h3 { font-size: clamp(1.2rem, 1.55vw, 1.5rem); }
.bento p { margin-top: 6px; line-height: 1.5; color: var(--muted); }
.bento__big p { max-width: 44ch; font-size: clamp(.98rem, 1.1vw, 1.08rem); }
/* Örnek alanı: kutunun altında, hafif gri zemin; içindeki beyaz parça panelden bir kesit gibi durur */
.bento__vis { flex: 1; display: grid; place-items: center; min-height: clamp(150px, 15vw, 204px); margin: 0 clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px); padding: clamp(16px, 1.8vw, 26px); border-radius: var(--r); background: #f5f5f7; }
.bv { width: 100%; max-width: 360px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; color: var(--black); }
.bv b { font-weight: 700; }
/* Seçim sırayla gezer: dört seçenek, her biri 2 sn seçili (toplam 8 sn). --k seçeneğin sırası. */
@keyframes bvPick { 0%, 22% { background: var(--black); border-color: var(--black); color: #fff; } 28%, 100% { background: #fff; border-color: var(--line); color: var(--black); } }
@keyframes bvRing { 0%, 22% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--black); } 28%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px transparent; } }
.bv__chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; white-space: nowrap; animation: bvPick 8s infinite; animation-delay: calc(var(--k) * 2s); }
.bv__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c); animation: bvRing 8s infinite; animation-delay: calc(var(--k) * 2s); }
.bv--prod { width: auto; max-width: 100%; } /* genişliği içeriği kadar: örnek alanının ortasında durur. Solundaki ürün ikonu kaldırıldı (Nursel, 06.10.2026) — onunla birlikte parça alana sığmıyor, sağ kenara yaslanıyordu */
.bv--prod strong { display: block; font-size: 14px; }
.bv--prod .bv__chip { padding: 4px 8px; }
/* Ürün kartındaki seçimler tema kartındaki renk şeması seçimiyle AYNI ANDA değişmesin (Nursel, 06.10.2026):
   ikisi de 2 sn'de bir değişiyor; bu kart 1 sn kaydırıldı, böylece biri değişir, 1 sn sonra öbürü.
   Gecikme eksi verilir (−7 sn = döngüde 1 sn geriden başla): artı gecikmede ilk saniye hiçbiri seçili görünmüyordu. */
.bv--prod .bv__chip, .bv--prod .bv__dot { animation-delay: calc(var(--k) * 2s - 7s); }
.bv__row { display: flex; align-items: center; gap: 6px; margin-top: 10px; } /* sarmasın: dördüncü seçenek alt satıra düşüyordu */
.bv__row span { min-width: 52px; font-size: 12px; color: var(--muted); white-space: nowrap; } /* etiketler aynı genişlikte: nokta ve çipler alt alta hizalansın */
.bv--coupon { display: grid; gap: 12px; }
.bv__ticket { display: flex; align-items: center; border: 1.5px dashed #c6c8cf; border-radius: 10px; }
.bv__ticket strong { padding: 10px 14px; border-right: 1.5px dashed #c6c8cf; font-size: 14px; letter-spacing: .06em; }
.bv__ticket span { padding: 10px 14px; font-weight: 700; color: var(--brand); }
.bv__sum { display: flex; align-items: baseline; gap: 10px; }
.bv__sum span { flex: 1; color: var(--muted); }
.bv__sum s { color: #9a9da8; }
.bv__sum b { font-size: 15px; }
/* Tema kutusu: tam genişlik, solda yazı, sağda "renk şeması seç → mağaza o renge dönsün" örneği (Nursel istedi).
   Solda dört gerçek şema sırayla seçilir; sağdaki küçük mağaza (çizim, ekran görüntüsü değil) seçilen şemanın
   ana ve vurgu rengine yumuşakça döner. Renk geçişi kareleri şablonda, şemaların renklerinden üretilir
   (msP: ana renk zemini · msA: vurgu zemini · msT: vurgu yazısı). */
/* Üst blok (06.10.2026, Nursel): solda alt alta iki YATAY kutu, sağında iki satır boyunca tek UZUN kutu.
   Uzun kutu şablonda ilk sırada (tema); ızgarada yeri elle verilir, yatay kutular sol sütuna kendiliğinden dizilir. */
.bento__big--tall { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.bento__big--tall .ms { flex-direction: column; align-items: stretch; gap: 14px; }
.bento__big--tall .ms__pick { width: auto; grid-template-columns: 1fr 1fr; }
.bento__big--tall .ms__pick small { grid-column: 1 / -1; }
.bento__big--row { grid-column: 1 / span 7; flex-direction: row; align-items: stretch; }
.bento__big--row .bento__txt { flex: 0 0 43%; align-self: center; padding-right: clamp(6px, .8vw, 12px); }
.bento__big--row .bento__vis { margin: clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px) 0; min-height: clamp(170px, 16vw, 216px); padding: clamp(10px, 1.1vw, 16px); }
/* Renkli kart (06.10.2026): üç karttan biri ("Ürün yönetimi") farklı zeminde, bölüm tek tonda kalmasın.
   Zemin, 2. alandaki ekran kutusunun geçişiyle aynı: gri → açık mor → açık sarı (Nursel: "açık mor sarı gibi").
   Önce düz marka moru, sonra düz gri denendi. Yazılar siyah kalır; ikon zemini ve örnek alanı beyaza döner ki
   renkli zeminde kaybolmasın. Kenar çizgisi yok: geçişin üstünde tek renk çizgi sırıtıyor. */
.bento__big--tint { border-color: transparent; background: linear-gradient(135deg, var(--stage) 0%, #e4e2f5 42%, #fff2c2 100%); }
.bento__big--tint:hover { border-color: transparent; }
.bento__big--tint .bento__ico { background: #fff; }
.bento__big--tint .bento__vis { background: rgba(255, 255, 255, .55); }
/* "Ve dahası": kalan bütün özellikler tek kutuda, yalnızca ikon + ad — bölüm kısa kalsın diye (Nursel: "kısalt").
   Açıklamalar Özellikler sayfasında; sağ üstteki bağlantı oraya gider. */
.bento__more { grid-column: span 12; display: block; padding: clamp(20px, 2.2vw, 32px); }
.bento__morehead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bento__more h3 { margin-top: 0; font-size: clamp(1.2rem, 1.55vw, 1.5rem); }
.bento__morehead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--black); } /* 14 px: gövde yazısı boyundayken (16 px) başlıkla yarışıyordu (Nursel, 06.10.2026) */
.bento__morehead a svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.bento__morehead a:hover svg { transform: translateX(4px); }
.bento__more ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px) clamp(16px, 2vw, 28px); margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0; list-style: none; }
.bento__more li { display: flex; align-items: center; gap: 11px; font-size: clamp(.95rem, 1.05vw, 1.05rem); font-weight: 400; line-height: 1.25; } /* kalın değil (Nursel, 06.10.2026): on iki kalın satır kutuyu ağırlaştırıyor, üstteki kart başlıklarıyla yarışıyordu */
.bento__more li i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f1f1f4; color: var(--black); }
.bento__more li i .ico { width: 18px; height: 18px; }
@media (max-width: 980px) { .bento__more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .bento__more ul { grid-template-columns: minmax(0, 1fr); } }
.ms { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); width: 100%; max-width: 600px; }
.ms__pick { flex: none; display: grid; gap: 6px; width: clamp(140px, 13vw, 176px); }
.ms__pick small { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ms__sw { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--black); white-space: nowrap; animation: msSw 8s infinite; animation-delay: calc(var(--k) * 2s); }
.ms__sw i { flex: none; width: 18px; height: 18px; border-radius: 50%; }
@keyframes msSw { 0%, 22% { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); } 28%, 100% { border-color: var(--line); box-shadow: 0 0 0 1px transparent; } }
.ms__site { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ms__p { background-color: var(--p); animation: msP 8s infinite; }
.ms__a { background-color: var(--a); animation: msA 8s infinite; }
.ms__t { color: var(--a); animation: msT 8s infinite; }
.ms__bar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 9px; }
.ms__bar span { width: 26px; height: 5px; border-radius: 3px; background: #dcdde3; }
.ms__logo { width: 42px; height: 12px; margin-right: auto; border-radius: 4px; }
.ms__cart { width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; }
.ms__hero { display: grid; justify-items: start; gap: 6px; padding: clamp(14px, 1.6vw, 22px); border-radius: 8px; }
.ms__hero b { width: 62%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .92); }
.ms__hero b + b { width: 40%; background: rgba(255, 255, 255, .5); }
.ms__hero i { width: 64px; height: 18px; margin-top: 6px; border-radius: 5px; }
.ms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.ms__card { display: grid; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.ms__img { aspect-ratio: 4 / 3; border-radius: 5px; background: #eeeef2; }
.ms__card b { width: 78%; height: 5px; border-radius: 3px; background: #dcdde3; }
.ms__card span { font-size: 11.5px; font-weight: 700; line-height: 1; }
.ms__btn { height: 14px; border-radius: 4px; }
@media (max-width: 980px) {
    .bento__big--tall { grid-row: auto; }
    .bento__big--row { flex-direction: column; }
    .bento__big--row .bento__txt { flex: none; align-self: stretch; }
    .bento__big--row .bento__vis { margin: 0 clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px); }
}
@media (max-width: 560px) {
    .ms { flex-direction: column; align-items: stretch; }
    .ms__pick { width: auto; grid-template-columns: 1fr 1fr; }
    .ms__pick small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .ms__sw, .ms__p, .ms__a, .ms__t { animation: none; }
    .ms__sw[data-on] { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
}
@media (max-width: 980px) { .bento__big, .bento__big--tall, .bento__big--row { grid-column: span 12; } }
@media (prefers-reduced-motion: reduce) {
    /* Hareket yok: ilk seçenek seçili durur */
    .bv__chip, .bv__dot { animation: none; }
    .bv__chip[data-on] { background: var(--black); border-color: var(--black); color: #fff; }
    .bv__dot[data-on] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--black); }
}

/* ── Fiyatlar (ana sayfa, 06.10.2026) ────────────────────────────────────
   Paket başına bir beyaz kart; "en çok tercih edilen" paket koyu kart + mor düğme (ilk ekrandaki koyu kartların dili).
   Kartın içi üç katman: ad + fiyat + düğme (iç panel) · üç rakamlık sınır satırı · tikli özellik listesi. İlk halde on bir
   satırlık tek tablo vardı; "daha şık" istenince (Nursel) rakamlar şeride alındı, satır çizgileri kaldırıldı.
   Zemin, ilk ekrandaki sahnenin grisi: önceki bölüm (Özellikler) beyaz. Fiyat rakamı büyük ama ince — sitedeki
   başlık ve rakamlarla aynı. Fiyatlar sayfasındaki .pcard kurallarına dokunulmadı. */
.prices { padding: clamp(64px, 8vw, 136px) 0; background: var(--stage); }
.prices__head { max-width: 720px; margin-inline: auto; text-align: center; }
.prices__head h2 { margin-top: clamp(16px, 2vw, 34px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.prices__grid { display: grid; align-items: stretch; gap: clamp(14px, 1.5vw, 20px); max-width: 1080px; margin: clamp(32px, 4.4vw, 64px) auto 0; }
.prices__grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.prices__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.prices__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prices__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
/* 07.10.2026 — kartlar yeniden (Nursel: "daha farklı olsun, kartlar çok şık olmalı"). Çerçeve içinde panel:
   beyaz kart ince bir çerçeve gibi durur; ad + fiyat + düğme içteki tonlu panelde toplanır, sınırlar ve özellik
   listesi panelin altında beyaz zeminde kalır. Karar verdiren kısım tek bakışta ayrışsın diye iki yüzey. */
.price { position: relative; display: flex; flex-direction: column; padding: 8px; border: 1px solid rgba(11, 11, 15, .06); border-radius: 30px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 18px 40px -28px rgba(11, 11, 15, .22); }
/* Üzerine gelince yükselme `translate` ile verilir: `transform` giriş animasyonuna (data-reveal) ait ve gecikmesi (--d)
   var; ikisi aynı özelliği paylaşırsa sağdaki kart fareye geç tepki veriyor. Genel data-reveal kuralı transition'ı
   ezdiği için hepsi birlikte yazılır. */
.js .prices .price { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), translate .5s var(--ease), box-shadow .5s ease, border-color .5s ease; }
.price:hover { translate: 0 -6px; border-color: rgba(11, 11, 15, .12); box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 36px 60px -32px rgba(11, 11, 15, .34); }
.price__head { padding: clamp(20px, 2.1vw, 30px); border-radius: 23px; background: #f3f3f7; } /* 23 = 30 − 8 + 1: iç köşe dış köşeyle eş merkezli dursun */
.price__top { display: flex; align-items: center; gap: 10px; min-height: 28px; } /* sabit yükseklik: rozetli kartta satır uzayıp fiyatı aşağı itmesin */
/* paket ikonu (önceki: kademe çubukları — sinyal göstergesine benziyordu) */
.price__ico { flex: none; display: grid; place-items: center; color: var(--black); }
.price__ico .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.price h3 { font-size: clamp(1.15rem, 1.4vw, 1.3rem); font-weight: 700; }
/* Rozet kartın üst kenarına biner: yarısı kartta, yarısı dışarıda, sağda (07.10.2026, Nursel). Kart (.price) konum
   başvurusu; ad satırının içinde kalınca uzun paket adını sıkıştırıyordu. */
.price__badge { position: absolute; top: 0; right: clamp(22px, 2.4vw, 34px); z-index: 1; translate: 0 -50%; padding: 7px 14px; border-radius: 999px; background: var(--brand); box-shadow: 0 8px 18px -8px rgba(108, 92, 231, .7); font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: #fff; }
.price__amount { display: flex; align-items: baseline; gap: 6px; margin-top: clamp(18px, 2vw, 28px); }
.price__amount strong { font-size: clamp(2.8rem, 4.3vw, 3.9rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price__cur { align-self: flex-start; margin-top: .3em; font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1; }
.price__per { color: var(--muted); }
/* Yıllık ödeme satırı: aylık fiyatın hemen altında; "2 ay hediye" küçük sarı etiket */
.price__yearly { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.price__yearly b { color: var(--black); font-weight: 700; }
/* Hediye etiketi düz sarı + hediye ikonu (08.10.2026, Nursel: "belirgin olsun"). Eski zemin yarı saydam sarıydı
   (rgba(255,216,74,.55)): siyah Profesyonel kartında kirli koyu sarıya dönüp siyah yazıyı okunmaz yapıyordu. */
.price__yearly span { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--mark); font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--black); white-space: nowrap; vertical-align: 1px; box-shadow: 0 4px 12px -6px rgba(255, 216, 74, .9); }
.price__yearly span::before { content: ""; width: 13px; height: 13px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.price--pop .price__yearly span { box-shadow: 0 0 0 1px rgba(255, 216, 74, .35), 0 6px 18px -6px rgba(255, 216, 74, .7); }
.price--pop .price__yearly { color: #b9bbc6; }
.price--pop .price__yearly b { color: #fff; }
.price__desc { min-height: 3em; margin: 10px 0 clamp(18px, 2vw, 26px); font-size: 15px; line-height: 1.5; color: var(--muted); } /* iki satırlık yer: düğmeler kartlarda aynı hizada dursun */
.price__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 26px) clamp(14px, 1.7vw, 22px) clamp(14px, 1.6vw, 20px); }
/* Özellik listesi: satır çizgisi yok, küçük yuvarlak içinde tik; pakette olmayanlar soluk ve çizgili */
/* Liste başlığı "Pakete dahil:" (07.10.2026; üç rakamlık sınır satırı kalktı, sınırlar listeye girdi) */
.price__label { font-size: 14px; font-weight: 700; color: var(--black); }
.price__list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.35; }
.price__list li { display: flex; align-items: flex-start; gap: 10px; }
.price__list i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ebe9fc; color: var(--brand); }
.price__list svg { width: 13px; height: 13px; }
.price__list .is-off { color: #a6a9b6; }
.price__list .is-off i { background: #f1f1f4; color: #b4b7c2; }
/* Öne çıkan paket: mor ince çerçeve + koyu iç panel. Kartın tamamı koyu değil: liste beyazda kalınca üç kart
   aynı aileden görünüyor, fark yalnızca panelde ve çerçevede. */
.price--pop { border-color: transparent; box-shadow: 0 0 0 1.5px var(--brand), 0 30px 60px -30px rgba(108, 92, 231, .5); }
.price--pop:hover { border-color: transparent; box-shadow: 0 0 0 1.5px var(--brand), 0 46px 70px -32px rgba(108, 92, 231, .6); }
.price--pop .price__head { background: #121217; color: #fff; }
.price--pop h3 { color: #fff; } /* başlıkların genel rengi siyah; açıkça beyaz verilmezse görünmüyor */
.price--pop .price__desc, .price--pop .price__per { color: #b9bbc6; }
.price--pop .price__ico { color: #b9b0ff; }
@media (min-width: 901px) {
    /* 07.10.2026 (Nursel: "ortadaki biraz üstte, diğerleri bir tık aşağıda"): kademeli diziliş. Öne çıkan kart yukarıda,
       diğerleri aynı pay kadar aşağıda; üçü de aynı boyda kalır. Yalnızca öne çıkan paket varsa uygulanır. */
    .prices__grid--3:has(.price--pop), .prices__grid--4:has(.price--pop) { --step: clamp(22px, 2.4vw, 36px); }
    .prices__grid--3:has(.price--pop) .price, .prices__grid--4:has(.price--pop) .price { margin-top: var(--step); }
    .prices__grid--3 .price--pop.price--pop, .prices__grid--4 .price--pop.price--pop { margin-top: 0; margin-bottom: var(--step); }
}
.prices__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin-top: clamp(20px, 2.2vw, 30px); font-size: 14px; color: var(--muted); }
.prices__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--black); }
.prices__foot a svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.prices__foot a:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
    .prices__grid--3, .prices__grid--4, .prices__grid--2 { grid-template-columns: minmax(0, 460px); justify-content: center; }
    .price__desc { min-height: 0; }
}

/* Paket / modül / sektör sayfaları (ortak şablon site/topic.blade.php) */
.topic__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 26px; }
.topic__badge { padding: calc(8px + .1em) 16px calc(8px - .1em); border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--black); }
/* .fgrid.fgrid--…: genel .fgrid kuralı dosyada daha aşağıda, tek sınıfla yazılınca onu ezemiyordu (kart üçte bir genişlikte kalıyordu) */
.fgrid.fgrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid.fgrid--one { grid-template-columns: minmax(0, 1fr); }
.fgrid--one .fcard ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
@media (max-width: 760px) { .fgrid.fgrid--two { grid-template-columns: minmax(0, 1fr); } .fgrid--one .fcard ul { grid-template-columns: minmax(0, 1fr); } }
/* "Hangi pakette var?" tablosu: ilk sütun da bir paket (etiket sütunu yok) → genel tablodaki sola yaslı soluk ilk sütun kuralı burada geçmez */
.ctable--plans thead th:first-child { text-align: center; font-weight: 800; color: var(--black); }
.ctable--plans td { font-weight: 700; color: var(--black); }
/* Özellik grubu sayfasının altındaki "diğer özellikler": her grup bir bağlantı kartı */
.glinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.glink { position: relative; display: grid; gap: 6px; padding: 20px 52px 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.js .glinks .glink { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), border-color .35s ease, box-shadow .35s ease; }
.glink:hover { border-color: #cfd0d8; box-shadow: 0 1px 2px rgba(11, 11, 15, .03), 0 20px 40px -28px rgba(11, 11, 15, .25); }
.glink b { font-size: 1.08rem; color: var(--black); }
.glink small { font-size: 14px; line-height: 1.45; color: var(--muted); }
.glink svg { position: absolute; right: 20px; top: 22px; width: 18px; height: 18px; color: var(--black); transition: translate .25s var(--ease); }
.glink:hover svg { translate: 4px 0; }

/* ── Sık sorulanlar (ana sayfa, 07.10.2026) ──────────────────────────────
   Solda başlık (kaydırırken yerinde kalır), sağda sorular. Her soru ince çerçeveli, geniş köşeli bir satır;
   açık olan gri zemine geçer (fiyat kartındaki iç panelle aynı ton) ve artısı siyah daire içinde çarpıya döner.
   Cevap, yüksekliği ızgara satırıyla (0fr → 1fr) açılır: içerik ne kadar uzunsa o kadar, sabit yükseklik yazmadan. */
.hfaq { padding: clamp(64px, 8vw, 136px) 0; background: #fff; }
.hfaq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.hfaq__head { position: sticky; top: calc(var(--hdr-h) + 28px); }
.hfaq__head h2 { margin-top: clamp(16px, 2vw, 34px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.hfaq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(22px, 2.4vw, 34px); }
.hfaq__ask { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--black); }
.hfaq__ask svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.hfaq__ask:hover svg { transform: translateX(4px); }
.hfaq__list { display: grid; gap: 10px; }
.hfaq__item { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
/* giriş (data-reveal) geçişi zemin/çerçeve geçişini ezmesin diye hepsi birlikte, daha özgül seçiciyle */
.js .hfaq .hfaq__item { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), background-color .45s ease, border-color .45s ease; }
.hfaq__item:hover { border-color: #cfd0d8; }
.hfaq__item.is-open { background: #f3f3f7; border-color: transparent; }
.hfaq__item h3 { font: inherit; }
.hfaq__item button { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); width: 100%; padding: clamp(16px, 1.7vw, 22px) clamp(16px, 1.8vw, 24px); border: 0; background: none; text-align: left; font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 700; line-height: 1.35; color: var(--black); }
.hfaq__item button:focus-visible { outline-offset: -3px; border-radius: 20px; }
.hfaq__no { flex: none; width: 24px; font-size: 13px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #a3a6b3; transition: color .45s ease; }
.hfaq__item.is-open .hfaq__no { color: var(--brand); }
.hfaq__q { flex: 1; }
.hfaq__ico { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .45s ease, border-color .45s ease, color .45s ease, rotate .5s var(--ease); }
.hfaq__ico::before, .hfaq__ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: currentColor; }
.hfaq__ico::after { rotate: 90deg; }
.hfaq__item.is-open .hfaq__ico { background: var(--black); border-color: var(--black); color: #fff; rotate: 45deg; }
.hfaq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.hfaq__a > div { overflow: hidden; }
.hfaq__item.is-open .hfaq__a { grid-template-rows: 1fr; }
html:not(.js) .hfaq__a { grid-template-rows: 1fr; } /* betik çalışmazsa cevaplar kapalı kalmasın */
.hfaq__a p { padding: 0 clamp(52px, 5vw, 76px) clamp(18px, 1.9vw, 24px) calc(clamp(16px, 1.8vw, 24px) + 24px + clamp(12px, 1.4vw, 18px)); font-size: 1rem; line-height: 1.6; color: var(--muted); opacity: 0; transition: opacity .35s ease; }
.hfaq__item.is-open .hfaq__a p { opacity: 1; transition-delay: .12s; }
@media (max-width: 900px) {
    .hfaq__grid { grid-template-columns: minmax(0, 1fr); }
    .hfaq__head { position: static; }
    .hfaq__a p { padding-left: clamp(16px, 1.8vw, 24px); padding-right: clamp(16px, 1.8vw, 24px); }
}
@media (prefers-reduced-motion: reduce) { .hfaq__a, .hfaq__a p, .hfaq__ico { transition: none; } }

/* ── Son çağrı (ana sayfa, 07.10.2026) ───────────────────────────────────
   Beyaz bölümün içinde geniş köşeli kutu, içerik ortada. Başlık ilk ekrandaki gibi ince ve büyük; düğmeler ilk ekrandakilerin aynısı.
   Kutu YARI SAYDAM ve ışıklı (Nursel: "morlu sarılı şeffaf olsa, üstlerde kullandıklarımız gibi"): ilk ekrandaki sahnenin iki öğesi burada da var —
     · ::before: ağır ağır gezen iki açık leke, biri mor biri sarı (sahnedeki sarı lekenin eşi; zıt yönlere gider)
     · ::after : fareyi izleyen koyu mor ışık (ilk ekrandaki ışığın aynısı; fare kutudayken görünür, konum site.js'ten)
   İlk hali düz gri kutuydu (background: var(--stage)). Lekeler çok açık tutuldu: kutu renkli değil, ışık almış gibi durmalı. */
.endcta { padding: 0 0 clamp(56px, 7vw, 120px); background: #fff; }
.endcta__box { position: relative; isolation: isolate; overflow: hidden; padding: clamp(34px, 4.2vw, 64px) clamp(20px, 5vw, 80px) clamp(36px, 4.4vw, 68px); /* dikey pay 48–116 px idi: kutu "dikeyde çok uzun" bulundu (Nursel) */ border: 1px solid rgba(108, 92, 231, .12); border-radius: clamp(26px, 3vw, 44px); background: rgba(236, 237, 242, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); text-align: center; }
.endcta__box::before { content: ''; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
    background: radial-gradient(34% 58% at 50% 50%, rgba(108, 92, 231, .2), transparent 72%) no-repeat, radial-gradient(32% 56% at 50% 50%, rgba(255, 216, 74, .34), transparent 72%) no-repeat;
    background-size: 175% 175%, 175% 175%; animation: endHue 24s ease-in-out infinite alternate; }
@keyframes endHue {
    0% { background-position: 4% 14%, 96% 88%; }
    50% { background-position: 42% 78%, 58% 18%; }
    100% { background-position: 92% 30%, 10% 70%; }
}
.endcta__box::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s ease;
    background: radial-gradient(clamp(260px, 28vw, 440px) circle at var(--mx, 50%) var(--my, 50%), rgba(59, 42, 158, .13), rgba(59, 42, 158, .04) 42%, transparent 72%); filter: blur(18px); }
.endcta__box.is-glow::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .endcta__box::before { animation: none; } }
.endcta__box h2 { max-width: 16em; margin-inline: auto; font-size: clamp(1.9rem, 3.9vw, 3.3rem); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; }
.endcta__text { max-width: 40em; margin: clamp(10px, 1.1vw, 16px) auto 0; font-size: clamp(1.02rem, 1.3vw, 1.3rem); line-height: 1.5; color: #3c3f4a; }
/* Başlıkta vurgu yok (07.10.2026): önce ilk ekrandaki gibi kalın + mor şerit, sonra yalnızca mor renk denendi; Nursel ikisini de istemedi
   ("üst kısma fazla benzemesin", "renkli olmasın") → başlık tek renk, tek kalınlık. */
.endcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(20px, 2.1vw, 30px); }
/* çerçeveli düğmenin kenarı burada ince (07.10.2026, Nursel: "border çok kalın geldi"): genel .btn--line 2 px; ışıklı açık zeminde ağır duruyordu. İlk ekrandaki düğme değişmedi. */
.endcta__actions .btn--line { border-width: 1px; }
/* Güven maddeleri: ilk ekrandaki beyaz sekmenin küçüğü — beyaz hap, maddeler arasında ince çizgi. Renkli kutunun üstünde düz yazı dağınık duruyordu. */
.endcta__points { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin-top: clamp(20px, 2.1vw, 30px); padding: calc(clamp(9px, 1vw, 13px) + .11em) clamp(8px, 1vw, 14px) calc(clamp(9px, 1vw, 13px) - .11em); /* üst pay +.11em / alt pay −.11em: Lato harfleri satır kutusunda yukarıda duruyor, yazı hapın içinde dikeyde ortalı görünsün (düğmelerdeki düzeltmenin aynısı) */ border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 16px 34px -22px rgba(59, 42, 158, .45); font-size: clamp(13.5px, 1.02vw, 15.5px); font-weight: 700; color: var(--black); }
.endcta__points li { display: inline-flex; align-items: center; gap: 8px; padding: 0 clamp(12px, 1.5vw, 22px); }
.endcta__points li + li { border-left: 1px solid #e1e2e8; }
.endcta__points svg { flex: none; width: 18px; height: 18px; translate: 0 -.11em; color: #f0a800; } /* translate: yazı için verilen pay tiki de aşağı itiyor; tik hapın tam ortasında kalsın */ /* ilk ekrandaki güven sekmesinin tik rengi */
@media (max-width: 640px) {
    .endcta__points { border-radius: 22px; padding: 12px 6px; }
    .endcta__points li + li { border-left: 0; }
}
/* Giriş: kutu yerinde hafifçe büyüyerek gelir (özellik kutuları ve ekran kutularıyla aynı dil), alttan kaymaz */
.js .endcta__box[data-reveal] { transform: scale(.955); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .endcta__box[data-reveal].is-in { transform: none; }

.ftabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.ftabs__nav button { padding: 10px 18px; border-radius: 999px; border: 1.5px solid #d6d6d2; background: #fff; font-weight: 700; font-size: 15.5px; color: #3a3c45; transition: background-color .2s, color .2s, border-color .2s; }
.ftabs__nav button:hover { border-color: var(--black); }
.ftabs__nav button.is-on { background: var(--black); border-color: var(--black); color: #fff; }
.ftabs__panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { display: flex; gap: 16px; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.feat:hover { border-color: #c9c9c5; box-shadow: var(--shadow); transform: translateY(-3px); }
.ftabs__panel.is-on .feat { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.feat__icon { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #eaf0ff; color: var(--blue); transition: background-color .25s, color .25s; }
.feat:hover .feat__icon { background: var(--blue); color: #fff; }
.feat h3 { font-size: 1.15rem; }
.feat p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.feat ul { margin-top: 12px; display: grid; gap: 5px; font-size: 15px; }
.feat li { position: relative; padding-left: 22px; }
.feat li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 11px; height: 6px; border-left: 2.2px solid var(--ok); border-bottom: 2.2px solid var(--ok); transform: rotate(-45deg) translateY(-3px); }

/* Özellikler alt sayfasındaki kart ızgarası */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard { padding: 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.fcard:hover { border-color: #c9c9c5; box-shadow: var(--shadow); transform: translateY(-3px); }
.fcard__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #eaf0ff; color: var(--blue); }
.fcard h3 { margin-top: 18px; font-size: 1.2rem; }
.fcard p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
.fcard ul { margin-top: 14px; display: grid; gap: 6px; font-size: 15px; }
.fcard li { position: relative; padding-left: 22px; }
.fcard ul.is-off li { color: #8a8d99; }
.fcard ul.is-off li::before { top: .72em; width: 10px; height: 0; border-left: 0; border-bottom: 2px solid #b4b7c2; transform: none; } /* pakette olmayan: tik yerine kısa çizgi */
.fcard li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 11px; height: 6px; border-left: 2.2px solid var(--ok); border-bottom: 2.2px solid var(--ok); transform: rotate(-45deg) translateY(-3px); }
.fcard__img { margin-top: 18px; border-radius: var(--r-sm); border: 1px solid var(--line); }

/* ── Tema / örnek mağaza kartları (alt sayfa) ─────────────────────────── */
.tgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tcard { border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, transform .3s var(--ease); }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tcard__shot { aspect-ratio: 16 / 11; overflow: hidden; background: color-mix(in srgb, var(--tc) 12%, #fff); border-bottom: 1px solid var(--line); }
.tcard__shot img { width: 100%; transition: transform 3s linear; }
.tcard__body { padding: 18px 22px 22px; }
.tcard__body h3 { font-size: 1.25rem; }
.tcard__tag { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.tcard__body p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.tcard__body .link { display: inline-block; margin-top: 12px; }
.tmock { height: 100%; padding: 8%; display: grid; grid-template-rows: auto 1fr auto; gap: 7%; }
.tmock__bar { display: flex; align-items: center; gap: 5px; }
.tmock__bar i { width: 16%; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--tc) 30%, #fff); }
.tmock__bar b { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--tc); }
.tmock__hero { border-radius: 8px; background: var(--tc); padding: 9%; display: grid; align-content: center; gap: 8px; }
.tmock__hero span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); width: 70%; }
.tmock__hero span + span { width: 46%; opacity: .7; }
.tmock__hero em { margin-top: 4px; width: 30%; height: 16px; border-radius: 4px; background: #fff; }
.tmock__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6%; }
.tmock__grid i { aspect-ratio: 1; border-radius: 6px; background: #fff; }

/* ── Entegrasyonlar ───────────────────────────────────────────────────── */
.igroups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.igroup { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.igroup h3 { font-size: 1.1rem; margin-bottom: 14px; }
.ichips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.ichip img { height: 22px; width: auto; }
.ichip--soon { color: var(--muted); border-style: dashed; background: #fff; }
.ichip em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--mark); color: var(--black); }

/* ── Fiyat kartları ───────────────────────────────────────────────────── */
.pgrid { display: grid; gap: 18px; align-items: stretch; max-width: 1060px; margin-inline: auto; }
.pgrid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pgrid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pcard--pop { border: 2px solid var(--black); box-shadow: var(--shadow-lg); }
.pcard__badge { position: absolute; top: -14px; left: 24px; padding: 5px 12px; border-radius: 6px; background: var(--mark); color: var(--black); font-size: 13px; font-weight: 800; }
.pcard h3 { font-size: 1.45rem; }
.pcard__desc { margin-top: 6px; font-size: 15px; color: var(--muted); min-height: 3em; }
.pcard__price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 22px; }
.pcard__price strong { font-size: clamp(2.1rem, 3.2vw, 2.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--black); }
.pcard__price span { color: var(--muted); }
.pcard__list { margin-top: 24px; display: grid; font-size: 15px; }
.pcard__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pcard__list span { color: #3a3c45; }
.pcard__list b { color: var(--black); }
.pcard__list svg { width: 20px; height: 20px; color: var(--ok); }
.pcard__list .is-off { opacity: .45; }
.pcard__list .is-off svg { color: currentColor; }
.pnote { margin-top: 22px; text-align: center; font-size: 14px; color: var(--muted); }

.ctable { overflow-x: auto; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.ctable table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.ctable th, .ctable td { padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.ctable tr:last-child > * { border-bottom: 0; }
.ctable thead th { font-size: 1.05rem; font-weight: 800; background: var(--soft); color: var(--black); }
.ctable th[scope="row"], .ctable thead th:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.ctable .is-pop { color: var(--blue); }
.ctable td { font-weight: 700; }
.yn { color: var(--ok); font-weight: 800; }
.yn--no { color: #b9bac0; }

.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mod { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mod h3 { font-size: 1.15rem; }
.mod p { margin-top: 8px; color: var(--muted); font-size: 15px; flex: 1; }
.mod__price { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.mod__price strong { font-size: 1.35rem; color: var(--black); }

/* ── Yorumlar ─────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { margin: 0; padding: 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.quote__stars { color: #f0a800; letter-spacing: 3px; }
.quote blockquote { margin: 0; font-size: 1.05rem; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; color: var(--black); }
.quote figcaption span { font-size: 14px; color: var(--muted); }

/* ── SSS ──────────────────────────────────────────────────────────────── */
.faqsplit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.faqsplit__lead { position: sticky; top: 110px; }
.faqsplit__lead h2 { margin-top: 12px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.faqsplit__lead p { margin: 16px 0 26px; color: var(--muted); font-size: 1.08rem; }
.faqsplit__more { margin-top: 22px; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq__group { font-size: 1.4rem; margin: 40px 0 14px; }
.faq__group:first-child { margin-top: 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; cursor: pointer; list-style: none; font-size: 1.14rem; font-weight: 700; color: var(--black); transition: color .2s; }
.faq__item summary:hover { color: var(--blue); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; position: relative; width: 22px; height: 22px; }
.faq__item summary i::before, .faq__item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.4px; margin: -1.2px 0 0 -8px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__answer { padding: 0 40px 22px 2px; color: var(--muted); animation: rise .35s var(--ease); }

/* ── Son çağrı ────────────────────────────────────────────────────────── */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; padding: clamp(36px, 6vw, 72px); border-radius: var(--r-lg); background: var(--black); color: #fff; }
.cta__body { flex: 1 1 420px; }
.cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.cta p { margin-top: 12px; font-size: 1.15rem; color: #b9bbc6; max-width: 30em; }
.cta__actions { display: grid; gap: 12px; justify-items: start; }
.cta__note { font-size: 14px; color: #9a9ca6; }

/* ── Alt sayfa başlığı ────────────────────────────────────────────────── */
.phero { padding: clamp(44px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); text-align: center; background: var(--soft); border-bottom: 1px solid var(--line); }
.phero__glow { display: none; }
.phero h1 { max-width: 17em; margin: 14px auto 0; font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.035em; }
.phero p { max-width: 38em; margin: 16px auto 0; font-size: 1.15rem; color: var(--muted); }
.crumb { display: inline-flex; gap: 10px; font-size: 14px; color: var(--muted); }
.crumb a:hover { color: var(--blue); }

/* ── İletişim ─────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.contact__form { padding: clamp(22px, 4vw, 38px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.contact__form form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 700; color: var(--black); }
.field label span { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1.5px solid #d6d6d2; background: #fff; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 79, 255, .14); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field small { display: block; margin-top: 6px; font-size: 14px; color: var(--err); }
.field--check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--muted); cursor: pointer; }
.field--check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { margin-bottom: 18px; padding: 14px 18px; border-radius: 10px; font-weight: 600; }
.alert--ok { background: #e3f6ea; color: #0b5c32; }
.alert--err { background: #fde8e6; color: #8f1d14; }
.contact__info { padding: clamp(22px, 4vw, 34px); border-radius: var(--r-lg); background: var(--black); color: #fff; }
.contact__info h2 { font-size: 1.45rem; color: #fff; }
.contact__info ul { margin-top: 20px; display: grid; gap: 18px; }
.contact__info li { display: flex; gap: 14px; align-items: flex-start; }
.contact__info li .ico { flex: none; color: var(--mark); margin-top: 3px; }
.contact__info small { display: block; font-size: 13px; color: #9a9ca6; }
.contact__info a:hover { text-decoration: underline; }
.contact__try { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.contact__info ul:empty + .contact__try { margin-top: 0; padding-top: 0; border-top: 0; }
.contact__try b { font-size: 1.15rem; }
.contact__try p { margin: 8px 0 18px; color: #b9bbc6; font-size: 15px; }

/* ── Yazı sayfaları ───────────────────────────────────────────────────── */
.prose { font-size: 1.05rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; list-style: revert; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line); padding: 10px 12px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ftr { background: var(--black); color: #a9abb8; padding: clamp(52px, 6vw, 88px) 0 0; font-size: 15.5px; }
/* 07.10.2026 yenilendi: solda marka, sağda eşit aralıklı sütunlar (--n = dolu sütun sayısı; boş sütun çizilmez). */
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.1fr); gap: clamp(32px, 4.4vw, 68px); align-items: start; }
.ftr__brand img { height: 42px; width: auto; }
.ftr__brand p { margin-top: 20px; max-width: 26em; line-height: 1.6; }
/* Sosyal bağlantılar: yazı yerine yuvarlak ikon düğmeleri (adı aria-label ve title'da) */
.ftr__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); color: #fff; transition: background-color .3s ease, border-color .3s ease, color .3s ease, translate .3s var(--ease); }
.ftr__social a:hover { background: #fff; border-color: #fff; color: var(--black); translate: 0 -2px; }
.ftr__social svg { width: 18px; height: 18px; }
/* son sütun (İletişim) bağlantı sütunlarından geniş: adres dört beş satıra bölünüyor, form düğmesi ikiye kırılıyordu */
.ftr__cols { display: grid; grid-template-columns: repeat(calc(var(--n, 4) - 1), minmax(0, 1fr)) minmax(0, 1.55fr); gap: 36px clamp(18px, 2.6vw, 40px); }
.ftr__col { display: grid; gap: 12px; align-content: start; }
.ftr__col h3 { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7c7f8d; }
.ftr__col a, .ftr__line { width: fit-content; color: #e9e9ee; transition: color .25s ease; }
.ftr__col nav a, nav.ftr__col a { position: relative; }
/* bağlantının üstüne gelince alt çizgi soldan sağa çizilir (düz text-decoration aniden beliriyordu) */
nav.ftr__col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
nav.ftr__col a:hover { color: #fff; }
nav.ftr__col a:hover::after { transform: scaleX(1); }
.ftr__line { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.ftr__line .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #7c7f8d; transition: color .25s ease; }
a.ftr__line:hover { color: #fff; }
a.ftr__line:hover .ico { color: #fff; }
.ftr__form { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 6px; white-space: nowrap; padding: calc(9px + .12em) 16px calc(9px - .12em); border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); font-weight: 700; color: #fff; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ftr__form svg { width: 15px; height: 15px; translate: 0 -.1em; transition: translate .25s var(--ease); }
.ftr__form:hover { background: #fff; border-color: #fff; color: var(--black); }
.ftr__form:hover svg { translate: 4px -.1em; }
/* Üç sütun (1fr · auto · 1fr): ortadaki geliştirici satırı sayfanın TAM ortasında durur, altındaki ödeme logolarıyla aynı eksende.
   İlk hali iki uca yaslı esnek satırdı; soldaki telif ile sağdaki "Yukarı çık" farklı genişlikte olduğu için orta öğe sola kayıyordu (Nursel fark etti). */
.ftr__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px; margin-top: clamp(40px, 5vw, 68px); padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #8a8d9a; }
/* Geliştirici satırı: küçük beyaz logo + tek cümle; telif ile "Yukarı çık" arasında durur */
.ftr__credit { grid-column: 2; display: inline-flex; align-items: center; gap: 12px; }
.ftr__credit img { height: 22px; width: auto; opacity: .85; }
.ftr__credit a, .ftr__credit b { font-weight: 700; color: #e9e9ee; transition: color .25s ease; }
.ftr__credit a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr__top { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #e9e9ee; transition: color .25s ease; }
.ftr__top svg { width: 15px; height: 15px; transition: translate .25s var(--ease); }
.ftr__top:hover { color: #fff; }
.ftr__top:hover svg { translate: 0 -3px; }
/* Ödeme logoları: telif satırının altında, ortada. Alt satırın çizgisiyle aynı ince çizgiyle ayrılır. */
.ftr__cards { display: flex; justify-content: center; padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ftr__cards img { width: auto; height: auto; max-width: min(100%, 400px); }
.ftr__bottom:has(+ .ftr__cards) { padding-bottom: 22px; }
@media (max-width: 900px) {
    .ftr__grid { grid-template-columns: minmax(0, 1fr); }
    /* 07.10.2026 (Nursel: "mobilde düzenli dursun"): marka ile sütunların arası açıldı (sosyal ikonlar "Ürün" başlığına yapışıyordu);
       sütunlar iki sıra halinde ve aralıklı; alt satır alt alta, ortalı ve sıralı: geliştirici satırı (logo üstte, cümle altta —
       yan yana dar ekranda ikiye kırılıyordu) → telif → "Yukarı çık". */
    .ftr { padding-top: 44px; }
    .ftr__grid { gap: 40px; }
    .ftr__brand p { max-width: none; margin-top: 16px; }
    .ftr__social { margin-top: 20px; }
    .ftr__cols { gap: 36px 20px; }
    /* menü yazıları telefonda bir kademe küçük (Nursel): 15.5 px dar sütunda iri duruyordu */
    .ftr { font-size: 14.5px; }
    .ftr__col { gap: 11px; }
    .ftr__col h3 { margin-bottom: 4px; font-size: 12px; }
    .ftr__line .ico { width: 16px; height: 16px; }
    .ftr__form { padding: calc(8px + .12em) 14px calc(8px - .12em); }
    .ftr__bottom { font-size: 13px; }
    .ftr__bottom { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; margin-top: 40px; padding: 26px 0 24px; text-align: center; }
    .ftr__credit, .ftr__top { grid-column: auto; justify-self: center; }
    .ftr__credit { order: -1; flex-direction: column; gap: 10px; line-height: 1.5; }
    .ftr__cards { padding: 18px 0 26px; }
    .ftr__cards img { max-width: min(100%, 340px); }
    .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 09.10.2026 (Nursel: "footer menüleri mobilde 2'li yan yana"): en dar ekranda da iki sütun; yalnız iletişim sütunu
   yalnız alt satırda tek kaldığında (tek sıradaysa) tam genişlik; yoksa Politikalar'ın yanında. Önceki: 420 px altında tek sütun. */
@media (max-width: 420px) { .ftr__cols { gap: 30px 16px; } .ftr__col--contact:nth-child(odd) { grid-column: 1 / -1; } }


/* ══════════════════════════ Duyarlı düzen ══════════════════════════════ */
@media (max-width: 1560px) {
    :root { --hdr-h: 70px; --wrap: 1100px; }
    body { font-size: 16px; }
    .hdr__bar { gap: 32px; } /* genişlik içerikle aynı kalsın (var(--wrap)); 1080 px idi, içerik 1100 → 10'ar px içeride */
    .logo { font-size: 24px; gap: 9px; }
    .logo__mark { transform: scale(.9); transform-origin: left center; margin-right: -3px; }
    .hdr__nav a { font-size: 15px; padding-inline: 11px; }
    .hdr__cta .btn { padding: calc(8px + .12em) 18px calc(8px - .12em); font-size: 13.5px; }
    .stage__tab { padding: 17px 10px; border-radius: 0 0 36px 36px; }
    .stage__tab::before, .stage__tab::after { width: 36px; height: 36px; background: radial-gradient(circle at 0 100%, transparent 35.5px, #fff 36px); }
    .shead h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
    .shead p { font-size: 1.02rem; }
    .sec { padding: clamp(52px, 6.4vw, 88px) 0; }
}

@media (max-width: 1040px) {
    .hdr__bar { gap: 20px; }
    .hdr__nav a { padding-inline: 9px; font-size: 15px; }
    .ftabs__panel, .fgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
    /* dört sütun sığmıyor: ikişer ikişer */
    .mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega__col:nth-child(odd) { border-left: 0; }
    .mega__col:nth-child(n + 3) { border-top: 1px solid #efeff3; }
}

@media (max-width: 920px) {
    .mega { display: none; }
    .hdr__nav { display: none; }
    .hdr__burger { display: block; }
    .hero__inner { grid-template-columns: 1fr; gap: 44px; }
    .hero__copy { text-align: center; }
    .hero__text { margin-inline: auto; }
    .hero__actions, .hero__points { justify-content: center; }
    .hero__visual { max-width: 640px; margin-inline: auto; width: 100%; }
    .hero__note--a { left: -6px; }
    .build { grid-template-columns: 1fr; }
    .build__stage { order: -1; }
    .faqsplit { grid-template-columns: 1fr; }
    .faqsplit__lead { position: static; }
    .mods, .quotes { grid-template-columns: repeat(2, 1fr); }
    .pgrid--3, .pgrid--4 { grid-template-columns: 1fr; max-width: 460px; }
    .contact { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap, .hdr__bar { width: min(100% - 32px, var(--wrap)); }
    .hdr__logo img { height: 30px; }
    .hdr.is-scrolled .hdr__bar { height: 56px; }
    .logo { font-size: 22px; gap: 7px; }
    .logo__mark { transform: scale(.82); transform-origin: left center; margin-right: -6px; }
    .hdr__cta .btn { display: none; }
    :root { --hdr-h: 62px; }
    .hero__actions .btn { flex: 0 1 auto; min-width: 0; }
    .stage { height: 96vw; }
    .stage__tab { padding: 13px 6px; border-radius: 0 0 30px 30px; }
    .stage__tab::before, .stage__tab::after { width: 30px; height: 30px; background: radial-gradient(circle at 0 100%, transparent 29.5px, #fff 30px); }
    .stage__tab li { padding: 2px 7px; font-size: 11.5px; gap: 3px; }
    .stage__tab svg { width: 13px; height: 13px; }
    .stage__scene { width: calc(100% - 24px); }
    .tablet { width: 88%; top: 72px; }
    /* Mobilde dizüstü yerine YATAY tablet + altında ayak (Nursel, 06.10.2026: "mobilde tablet olsa", "daha yatay",
       "altında ayak olsun, arka plan altına sıfır otursun, üstü daralt"). Tablet: dört kenarda eşit çerçeve, dört
       köşe yuvarlak. Ayak, dizüstünün tabanıyla aynı parça; alt kenarı gri alanın altına sıfır oturur.
       Genişlik sabit (%84: ayak iki yandan taşınca ekrana sığsın), yükseklik orandan (16:11). */
    .stage__scene--laptop .tablet {
        --base: 9px;
        left: 50%; top: auto; bottom: calc(var(--base) + 3px); width: 84%; max-width: none; height: auto; aspect-ratio: 16 / 11; /* +3 px: ayağın üstündeki aralık (margin-top); hesaba katılmayınca ayak gri alandan 3 px taşıyordu */
        padding: 3%; border-radius: 16px 16px 6px 6px; background: #101114;
        box-shadow: 0 0 0 1px #3a3c44 inset, 0 0 0 1px #0a0a0c, 0 0 0 3px #c6c8cf;
    }
    .stage__scene--laptop .tablet::before { top: 1.1%; width: 5px; margin-left: -2.5px; }
    .stage__scene--laptop .tablet__screen { border-radius: 6px; }
    .stage__scene--laptop .tablet__base { margin-top: 3px; border-radius: 1px 1px 7px 7px / 1px 1px 78% 78%; } /* 3 px: tabletin dış gümüş halkasının altından başlasın */
    /* Üstteki boş gri daraltıldı: alanın yüksekliği sabit değil, içindekilere göre — sekme (~50) + nefes payı (30)
       + tablet + ayak. Sabit 380 px iken sekme ile tablet arasında ~100 px boşluk kalıyordu.
       :has desteklemeyen eski tarayıcıda yükseklik 380 px kalır; tablet yine alta oturur, yalnızca boşluk fazla olur. */
    .stage:has(.stage__scene--laptop) { height: calc(95px + (100vw - 24px) * .84 * 11 / 16); }
    .scard--orders { top: 36vw; }
    .scard--revenue { top: 52vw; width: 56%; }
    .hero__points { flex-direction: column; align-items: center; gap: 6px; }
    .hero__visual .frame--phone { right: -6px; width: 30%; border-width: 5px; border-radius: 20px; }
    .hero__visual .frame--phone .frame__screen { border-radius: 15px; }
    .hero__note { padding: 8px 12px; font-size: 12px; }
    .hero__note b { font-size: 13px; }
    .hero__note--a { top: 12%; }
    .hero__note--b { display: none; }
    .marquee__track { gap: 30px; }
    .marquee__track span { font-size: 16px; }
    .steps { grid-template-columns: 1fr; gap: 30px; }
    .steps::before, .steps::after { left: 22px; right: auto; top: 22px; bottom: 60px; width: 2px; height: auto; }
    .steps::after { transform: scaleY(0); transform-origin: top; }
    .steps.is-in::after { transform: scaleY(1); }
    .step { padding-left: 66px; }
    .step__top { margin-left: -66px; }
    .step h3 { margin-top: -34px; padding-top: 44px; }
    .build__tab { padding: 14px; }
    /* Telefonda panel görüntüsü okunaklı kalsın diye sol üst köşesi büyütülür */
    .build__stage .frame__screen { aspect-ratio: 5 / 4; }
    .build__stage .frame__screen img { object-position: 22% top; }
    .ftabs__nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
    .ftabs__nav::-webkit-scrollbar { display: none; }
    .ftabs__nav button { flex: none; }
    .ftabs__panel, .fgrid, .tgrid, .mods, .quotes, .igroups { grid-template-columns: 1fr; }
    .contact__form form { grid-template-columns: 1fr; }
    .cta { text-align: center; justify-content: center; }
    .cta__actions { width: 100%; justify-items: center; }
    .cta__actions .btn { width: 100%; }
    .faq__answer { padding-right: 8px; }

}

/* Çok dar telefonlar: güven sekmesi ekrana sığsın */
@media (max-width: 380px) {
    .stage__tab { padding-inline: 2px; }
    .stage__tab li { padding: 2px 4px; font-size: 9.5px; gap: 2px; }
    .stage__tab svg { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .js [data-reveal], .js .hero-in { opacity: 1; transform: none; }
    .js .mark::after { transform: scaleX(1); }
    .marquee__track, .gallery__track { animation: none; }
    .scard__line, .scard__area, .scard__dot, .scard__ico::after, .pop { animation: none; }
    .scard__bars i { animation: none; transform: none; }
    .scard__tip { display: none; }
    .scard__line { stroke-dashoffset: 0; }
    .scard__area, .scard__dot { opacity: 1; }
    .steps::after { transform: none; }
}

/* ═════════════ İLETİŞİM SAYFASI (08.10.2026) ═════════════
   Nursel: "anasayfasına uygun, mevcut tasarımından farklı". Eski düzen (solda form kartı, sağda siyah kart:
   .contact*) artık kullanılmıyor; kuralları geri dönüş için duruyor.
   Zeminler: beyaz üst alan → gri bant (--stage, fiyatlar bölümüyle aynı) → beyaz SSS. */

/* Üst alan: solda ince büyük başlık + mor vurgu (ana sayfa ilk ekranının dili), sağda büyük kanal kutuları */
.chero { position: relative; padding: clamp(30px, 4.6vw, 84px) 0 clamp(48px, 6vw, 104px); overflow-x: clip; }
.chero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
/* 08.10.2026 son hâl (Nursel "aynen"): ana sayfa ilk ekranının ağırlığı ve harf aralığı — başlık normal (400),
   yalnız son kelime kalın (700) ve düz mor; ana sayfadaki mor şerit YOK. Önce 900, sonra 700 tamamı kalın denendi. */
.chero__title { margin-top: clamp(14px, 1.6vw, 24px); font-size: clamp(2rem, 4.2vw, 3.9rem); font-weight: 400; line-height: 1.12; letter-spacing: .003em; color: var(--black); }
.chero__line { display: block; }
.chero__title em { font-style: normal; font-weight: 700; color: var(--brand); }
.chero__text { max-width: 34em; margin-top: clamp(14px, 1.8vw, 28px); font-size: clamp(1rem, 1.2vw, 1.22rem); line-height: 1.55; color: #3c3f4a; }
.chero .crumb a:hover { color: var(--brand); }

/* Kanal kutuları: beyaz, ince çerçeve; üstüne gelince yükselir, ikon mora döner, ok kayar */
.chans { display: grid; gap: clamp(10px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.chan { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px); padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 24px); border: 1px solid var(--line); border-radius: clamp(16px, 1.5vw, 22px); background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background-color .35s ease; }
.chan:hover, .chan:focus-visible { transform: translateY(-3px); border-color: rgba(108, 92, 231, .35); box-shadow: 0 18px 36px -22px rgba(59, 42, 158, .45); }
.chan__ico { flex: none; display: grid; place-items: center; width: clamp(42px, 3.4vw, 50px); height: clamp(42px, 3.4vw, 50px); border-radius: 50%; background: #f1f0fb; color: var(--brand); transition: background-color .35s ease, color .35s ease; }
.chan__ico .ico { width: 22px; height: 22px; }
.chan:hover .chan__ico, .chan:focus-visible .chan__ico { background: var(--brand); color: #fff; }
.chan__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chan__txt small { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8b8e9b; }
.chan__txt b { font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.chan__go { flex: none; width: 20px; height: 20px; color: #a3a6b3; transition: transform .35s var(--ease), color .35s ease; }
.chan:hover .chan__go { transform: translate(3px, -3px); color: var(--brand); }
/* "Yaz" kutusu öne çıkar: formun kapısı */
.chan--brand { border-color: var(--black); background: var(--black); color: #fff; }
.chan--brand .chan__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.chan--brand .chan__txt small, .chan--brand .chan__go { color: #b9bbc6; }
.chan--brand:hover, .chan--brand:focus-visible { border-color: var(--brand); background: var(--brand); box-shadow: 0 18px 36px -18px rgba(108, 92, 231, .8); }
.chan--brand:hover .chan__ico, .chan--brand:focus-visible .chan__ico { background: rgba(255, 255, 255, .2); }
.chan--brand:hover .chan__txt small, .chan--brand:hover .chan__go { color: #fff; }
.chan--brand:hover .chan__go { transform: translateY(3px); }

/* Gri bant ve tek geniş panel: solda ışıklı konu alanı, sağda form */
.cmain { padding: clamp(56px, 7vw, 120px) 0; background: var(--stage); scroll-margin-top: var(--hdr-h); }
.cpanel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); padding: clamp(8px, .8vw, 12px); border-radius: clamp(26px, 3vw, 44px); background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 40px 80px -48px rgba(59, 42, 158, .35); }
.cpanel__step { display: flex; align-items: center; gap: 12px; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 400; line-height: 1.25; color: var(--black); }
.cpanel__step b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding-top: .1em; border-radius: 50%; background: var(--black); color: #fff; font-size: 14px; font-weight: 700; }

/* Sol: ana sayfa son çağrısındaki yarı saydam kutunun dili (gezen mor/sarı lekeler + fareyi izleyen mor ışık) */
.cpanel__topics { position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0; padding: clamp(24px, 3.2vw, 52px); border: 1px solid rgba(108, 92, 231, .12); border-radius: clamp(20px, 2.4vw, 34px); background: rgba(236, 237, 242, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.cpanel__topics legend { float: left; width: 100%; padding: 0; } /* legend çerçeveye oturmasın, içerikle aksın */
.cpanel__topics::before { content: ''; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
    background: radial-gradient(34% 58% at 50% 50%, rgba(108, 92, 231, .2), transparent 72%) no-repeat, radial-gradient(32% 56% at 50% 50%, rgba(255, 216, 74, .34), transparent 72%) no-repeat;
    background-size: 175% 175%, 175% 175%; animation: endHue 24s ease-in-out infinite alternate; }
.cpanel__topics::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s ease;
    background: radial-gradient(clamp(220px, 24vw, 380px) circle at var(--mx, 50%) var(--my, 50%), rgba(59, 42, 158, .13), rgba(59, 42, 158, .04) 42%, transparent 72%); filter: blur(18px); }
.cpanel__topics.is-glow::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cpanel__topics::before { animation: none; } }
.ctopics { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); padding-top: clamp(20px, 2.2vw, 32px); }
.ctopic { position: relative; display: block; cursor: pointer; }
.ctopic input { position: absolute; opacity: 0; pointer-events: none; }
.ctopic__box { position: relative; display: grid; gap: 4px; height: 100%; padding: clamp(14px, 1.5vw, 20px); border: 1.5px solid transparent; border-radius: 18px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: transform .3s var(--ease), border-color .3s ease, background-color .3s ease, box-shadow .3s var(--ease); }
.ctopic__box i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .06); transition: background-color .3s ease, color .3s ease; }
.ctopic__box .ico { width: 21px; height: 21px; }
.ctopic__box b { font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.3; color: var(--black); }
.ctopic__box small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ctopic:hover .ctopic__box { transform: translateY(-2px); background: #fff; box-shadow: 0 14px 30px -20px rgba(59, 42, 158, .45); }
.ctopic input:focus-visible + .ctopic__box { outline: 3px solid var(--brand); outline-offset: 2px; }
.ctopic input:checked + .ctopic__box { border-color: var(--brand); background: #fff; box-shadow: 0 16px 34px -20px rgba(108, 92, 231, .6); }
.ctopic input:checked + .ctopic__box i { background: var(--brand); color: #fff; }
.ctopic input:checked + .ctopic__box::after { content: ''; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 10.5 3 3 7-7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cpanel__aside { margin-top: clamp(16px, 1.8vw, 24px); font-size: 14px; color: var(--muted); }

/* Sağ: sade form — alanlar gri dolgulu, odakta beyaz + mor halka */
.cpanel__fields { display: grid; align-content: start; gap: clamp(14px, 1.4vw, 20px); padding: clamp(24px, 3.2vw, 52px) clamp(18px, 3vw, 48px); }
.cpanel__fields .cpanel__step { margin-bottom: 4px; }
.cfield-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.cfield { display: grid; gap: 7px; min-width: 0; }
.cfield label { font-size: 14.5px; font-weight: 700; color: var(--black); }
.cfield label span { margin-left: 4px; font-weight: 400; color: #8b8e9b; }
.cfield input[type="text"], .cfield input[type="email"], .cfield input[type="tel"], .cfield textarea {
    width: 100%; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 14px; background: #f3f3f7; font: inherit; font-size: 16px; color: var(--black);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.cfield textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.cfield textarea::placeholder { color: #9a9dab; }
.cfield input:hover, .cfield textarea:hover { background: #eeeef4; }
.cfield input:focus, .cfield textarea:focus { outline: 0; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(108, 92, 231, .14); }
.cfield [aria-invalid="true"] { border-color: var(--err); background: #fff; }
.cfield small { font-size: 13.5px; color: var(--err); }
.cfield--check label { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 14.5px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.cfield--check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand); }
.cpanel__send { justify-self: start; margin-top: 4px; }
.calert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.calert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.calert--ok { background: #e7f7ee; color: #0b5c32; }
.calert--err { background: #fdecea; color: #8f1d14; }

/* Düğme yazısı dikeyde tam orta (Nursel 08.10.2026: "yazılar dikeyde ortalı değil"). Genel .btn kuralı yazıyı
   sabit .14em aşağı itiyor; ölçüldü: "Tüm soruları gör"de yazı 2,5 px aşağıda kalıyordu ve oran düğme boyutuyla
   kayıyor. Burada satır kutusu büyük harf yüksekliğine kırpılır (text-box), üst-alt pay eşitlenir: yazı her boyutta
   tam ortada. Desteklemeyen tarayıcıda eşit pay kalır (ilk hâle göre en çok 1-2 px fark). Yalnız bu sayfa. */
.chero .btn, .cpanel .btn, .cfaq .btn { text-box: trim-both cap alphabetic; }
/* ±.09em: Lato'nun büyük harf ölçüsü glifin gerçek yüksekliğinden biraz kısa; kırpılmış satırda yazı 1,5 px yukarıda ölçüldü */
.cpanel .btn--xl { padding-block: calc(clamp(13px, 1.25vw, 21px) + .38em) calc(clamp(13px, 1.25vw, 21px) + .10em); }
.cfaq .btn { padding-block: calc(13px + .38em) calc(13px + .10em); }

/* Kısa SSS: ana sayfanın .hfaq'ı; vurgulu başlık için kalınlık */
.cfaq h2 .mark { font-weight: 700; }

@media (max-width: 960px) {
    .chero__grid { grid-template-columns: 1fr; }
    .cpanel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ctopic__box small { display: none; } /* dar ekranda kutular kısa kalsın */
    .cfield-row { grid-template-columns: 1fr; }
    .cpanel__send { justify-self: stretch; }
}

/* ═════════════ SSS SAYFASI (08.10.2026) ═════════════
   İletişim sayfasının ailesi: aynı başlık dili (.chero__title: normal yazı + kalın mor son kelime), aynı kanal kutuları (.chan),
   ana sayfanın akordeonu (.hfaq__item). Zeminler: beyaz üst alan → gri bant → beyaz "bize sor". Eski .faq akordeonu
   Fiyatlar sayfasında kullanılmaya devam ediyor, ona dokunulmadı. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Üst alan: ortalı başlık + arama + konu düğmeleri */
.fhero { position: relative; padding: clamp(30px, 4.6vw, 84px) 0 clamp(44px, 5.4vw, 92px); overflow-x: clip; }
.fhero__copy { position: relative; z-index: 1; text-align: center; }
.fhero .chero__title { max-width: 14em; margin-inline: auto; }
.fhero .crumb a:hover { color: var(--brand); }
.fhero__text { max-width: 36em; margin: clamp(12px, 1.6vw, 24px) auto 0; font-size: clamp(1rem, 1.2vw, 1.22rem); line-height: 1.55; color: #3c3f4a; }

.fsearch { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: clamp(22px, 2.6vw, 38px) auto 0; padding: 8px 10px 8px clamp(16px, 1.6vw, 22px); border: 1.5px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 22px 44px -30px rgba(59, 42, 158, .45); transition: border-color .25s ease, box-shadow .25s ease; }
.fsearch[hidden] { display: none; }
.fsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 92, 231, .14), 0 22px 44px -30px rgba(59, 42, 158, .45); }
.fsearch > .ico { flex: none; width: 22px; height: 22px; color: #8b8e9b; }
.fsearch input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; font: inherit; font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--black); outline: 0; }
.fsearch input::placeholder { color: #9a9dab; }
.fsearch input::-webkit-search-cancel-button { cursor: pointer; }
.fsearch__count { flex: none; padding: 8px 14px; border-radius: 999px; background: #f1f0fb; font-size: 13.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }

.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0; list-style: none; }
.fchips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 700; color: var(--black); transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s var(--ease); }
.fchips a:hover { transform: translateY(-2px); border-color: rgba(108, 92, 231, .35); box-shadow: 0 12px 26px -18px rgba(59, 42, 158, .45); }
.fchips .ico { width: 18px; height: 18px; color: var(--brand); }
.fchips b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #f3f3f7; font-size: 12.5px; color: #5f6370; }

/* Gri bant: solda yapışkan konu menüsü, sağda konu kartları */
.fbody { padding: clamp(56px, 7vw, 120px) 0; background: var(--stage); }
.fbody__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fnav { position: sticky; top: calc(var(--hdr-h) + 28px); display: grid; gap: 14px; }
.fnav ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fnav ul a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; font-weight: 700; color: #5f6370; transition: background-color .25s ease, color .25s ease; }
.fnav ul a .ico { width: 20px; height: 20px; }
.fnav ul a span { flex: 1; }
.fnav ul a b { font-size: 13px; color: #a3a6b3; }
.fnav ul a:hover { background: rgba(255, 255, 255, .6); color: var(--black); }
.fnav ul a.is-active { background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .05), 0 12px 26px -20px rgba(59, 42, 158, .45); }
.fnav ul a.is-active .ico { color: var(--brand); }
.fnav ul a.is-dim { opacity: .45; } /* aramada sonucu olmayan konu */
.fnav__ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 12px; font-weight: 700; color: var(--black); }
.fnav__ask svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.fnav__ask:hover svg { transform: translateX(4px); }

.fgroups { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.fgroup { padding: clamp(18px, 2.2vw, 32px); border-radius: clamp(22px, 2.4vw, 32px); background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 30px 60px -44px rgba(59, 42, 158, .35); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.fgroup[hidden] { display: none; }
.fgroup__head { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px, 1.4vw, 18px); }
.fgroup__head i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #f1f0fb; color: var(--brand); }
.fgroup__head .ico { width: 21px; height: 21px; }
.fgroup__head h2 { flex: 1; font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.fgroup__head span { font-size: 13.5px; font-weight: 700; color: #a3a6b3; }
/* Kartın içinde: numara yok, cevap girintisi buna göre */
.fgroup .hfaq__item[hidden] { display: none; }
.fgroup .hfaq__a p { padding-left: clamp(16px, 1.8vw, 24px); }

.fempty { display: grid; justify-items: start; gap: 8px; padding: clamp(24px, 3vw, 40px); border: 1.5px dashed #c9cad6; border-radius: 24px; background: rgba(255, 255, 255, .5); }
.fempty[hidden] { display: none; }
.fempty b { font-size: 1.15rem; }
.fempty p { margin-bottom: 8px; color: var(--muted); }

/* Beyaz kapanış: "bize sor" + kanal kutuları */
.fask { padding: clamp(56px, 7vw, 112px) 0; background: #fff; }
.fask__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.fask__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; }
.fask__title em { font-style: normal; font-weight: 700; color: var(--brand); }

/* Düğme yazısı dikeyde orta (bkz. iletişim sayfası notu) */
.fempty .btn { text-box: trim-both cap alphabetic; padding-block: calc(13px + .38em) calc(13px + .10em); }

@media (max-width: 900px) {
    .fbody__grid { grid-template-columns: 1fr; }
    .fnav { display: none; } /* dar ekranda üstteki konu düğmeleri yeterli */
    .fask__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fsearch__count { display: none; }
}

/* ═════════════ ENTEGRASYONLAR SAYFASI (08.10.2026) ═════════════
   İletişim / SSS ailesi: aynı üst alan (.chero), aynı kanal kutuları (.chan), aynı başlık dili.
   Zeminler: beyaz üst alan → gri bant (türe göre beyaz kartlar) → beyaz "nasıl bağlanır". Eski .igroup/.ichip kuralları
   başka sayfada kullanılmıyor ama geri dönüş için duruyor. */

/* Üst alandaki sayı kutuları (sağ sütun) */
.istats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(10px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.istats a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; height: 100%; padding: clamp(16px, 1.6vw, 22px); border: 1px solid var(--line); border-radius: clamp(16px, 1.5vw, 22px); background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; }
.istats a:hover { transform: translateY(-3px); border-color: rgba(108, 92, 231, .35); box-shadow: 0 18px 36px -22px rgba(59, 42, 158, .45); }
.istats i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f1f0fb; color: var(--brand); }
.istats .ico { width: 22px; height: 22px; }
.istats b { font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.istats span { font-size: 14px; font-weight: 700; color: #5f6370; }
.istats__soon i { background: #f3f3f7; color: #8b8e9b; }
.istats__soon b { color: #8b8e9b; }

/* Gri bant: türe göre beyaz kartlar */
.ibody { padding: clamp(56px, 7vw, 120px) 0; background: var(--stage); }
.ibody__list { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.igrp { padding: clamp(20px, 2.6vw, 40px); border-radius: clamp(22px, 2.6vw, 36px); background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 30px 60px -44px rgba(59, 42, 158, .35); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.igrp__head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 1.8vw, 26px); }
.igrp__head > i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #f1f0fb; color: var(--brand); }
.igrp__head .ico { width: 24px; height: 24px; }
.igrp__head h2 { font-size: clamp(1.25rem, 1.8vw, 1.65rem); font-weight: 700; line-height: 1.2; }
.igrp__head span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }

.itiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.itile { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s var(--ease); }
.itile:hover { transform: translateY(-2px); border-color: rgba(108, 92, 231, .3); box-shadow: 0 12px 26px -20px rgba(59, 42, 158, .45); }
.itile img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.itile__mono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f3f3f7; font-size: 17px; font-weight: 700; color: var(--black); }
.itile__mono .ico { width: 20px; height: 20px; color: #8b8e9b; }
.itile__txt { display: grid; min-width: 0; }
.itile__txt b { font-size: 15.5px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; } /* anywhere kelimeyi ortadan bölüyordu */
.itile__txt small { font-size: 13px; color: #8b8e9b; }
.igrp__note { display: flex; align-items: flex-start; gap: 10px; margin-top: clamp(16px, 1.8vw, 24px); padding: 14px 16px; border-radius: 16px; background: #f6f5fe; font-size: 14.5px; line-height: 1.55; color: #3c3f4a; }
.igrp__note .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--brand); }

/* "Yakında" kartı: soluk, etiketli; zemin bilerek yarı saydam (bant rengini gösterir) */
.igrp--soon { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px #d9dae3; }
.igrp--soon .igrp__head > i { background: #eceef3; color: #8b8e9b; }
.itile--soon { border-style: dashed; background: rgba(255, 255, 255, .6); }
.itile--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.itile--soon .itile__txt b { color: #5f6370; }
.itile--soon em { margin-left: auto; flex: none; padding: 4px 9px; border-radius: 999px; background: #eceef3; font-size: 11.5px; font-style: normal; font-weight: 700; letter-spacing: .02em; color: #6b6e7a; }

/* Beyaz: nasıl bağlanır — üç adım + kanal kutuları */
.ihow { padding: clamp(56px, 7vw, 112px) 0; background: #fff; }
.ihow__head { max-width: 40em; }
.isteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(24px, 3vw, 44px) 0 0; padding: 0; list-style: none; counter-reset: none; }
.isteps li { padding: clamp(20px, 2.2vw, 30px); border-radius: clamp(20px, 2.2vw, 28px); background: #f3f3f7; }
.isteps b { display: grid; place-items: center; width: 36px; height: 36px; padding-top: .1em; border-radius: 50%; background: var(--black); color: #fff; font-size: 15px; }
.isteps h3 { margin-top: 16px; font-size: clamp(1.08rem, 1.3vw, 1.22rem); font-weight: 700; }
.isteps p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ihow__ask { margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.ihow__q { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; line-height: 1.25; }

@media (max-width: 960px) {
    .isteps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .istats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* kaç kutu varsa yan yana, eşit */
    .istats a { grid-template-columns: 1fr; row-gap: 6px; }
    .istats i { grid-row: auto; }
    .itiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* tek sütunda liste çok uzuyordu */
    .itile { gap: 10px; padding: 10px; }
    .itile__mono { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
    .itile__txt b { font-size: 14.5px; }
}

/* ═════════════ FİYATLAR SAYFASI (08.10.2026) ═════════════
   Aile: iletişim / SSS / entegrasyonlar. Kartlar ana sayfayla ORTAK (partials/price-cards; .price* kuralları).
   Zeminler: beyaz üst alan → gri kartlar (.prices zaten --stage) → beyaz tablo → gri modüller → beyaz SSS → son çağrı.
   Eski .pgrid/.pcard/.ctable/.mods kuralları başka yerde kullanılmıyor, geri dönüş için duruyor. */

.prhero { padding-bottom: clamp(36px, 4.4vw, 72px); }

/* Aylık / Yıllık anahtarı: kayan düğme */
.cycle { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: clamp(22px, 2.6vw, 36px); padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 18px 36px -26px rgba(59, 42, 158, .45); }
.cycle[hidden] { display: none; }
.cycle button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 132px; padding: calc(11px + .1em) 20px calc(11px - .1em); border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15.5px; font-weight: 700; color: #5f6370; cursor: pointer; transition: color .35s ease; }
.cycle button.is-on { color: #fff; }
.cycle button span { padding: 2px 8px; border-radius: 999px; background: var(--mark); font-size: 11.5px; font-weight: 800; color: var(--black); }
.cycle__knob { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--black); transition: transform .45s var(--ease), background-color .35s ease; }
.cycle.is-yearly .cycle__knob { transform: translateX(100%); background: var(--brand); }

/* Kart ve tablo başlığında aylık/yıllık parça seçimi */
.price__y { display: none; }
[data-cycle-scope].is-yearly .price__m { display: none; }
[data-cycle-scope].is-yearly .price__y { display: inline; }
[data-cycle-scope].is-yearly p.price__y { display: block; }
.price__amount .price__m, .price__amount .price__y { white-space: nowrap; }
.price__amount .price__y strong { animation: cycleIn .45s var(--ease); }
@keyframes cycleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .price__amount .price__y strong { animation: none; } }

.prcards { padding-top: clamp(48px, 6vw, 104px); }
.prcards__note { margin-top: clamp(18px, 2vw, 28px); text-align: center; font-size: 14px; color: var(--muted); }

/* Karşılaştırma tablosu */
.prcmp { padding: clamp(56px, 7vw, 120px) 0; background: #fff; }
.prcmp__head { max-width: 40em; margin-bottom: clamp(22px, 2.6vw, 38px); }
/* 08.10.2026 2. tur (Nursel: "köşeler hoş değil, satırlarda hover olsun, daha güzel, mobilde kullanışlı").
   KÖŞELER: kapsayıcı overflow: clip ile kırpılır — clip kaydırma kabı OLUŞTURMAZ, bu yüzden yapışkan başlık sayfaya
   göre çalışmaya devam eder (overflow: hidden ile çalışmazdı). Önceki hâlde başlık hücreleri köşelerden taşıyordu. */
.ptable { overflow: clip; border: 1px solid var(--line); border-radius: clamp(20px, 2.2vw, 28px); background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 40px 80px -56px rgba(59, 42, 158, .45); }
.ptable table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; table-layout: fixed; }
.ptable col.ptable__fcol { width: 34%; }
.ptable th, .ptable td { padding: 15px 20px; border-bottom: 1px solid #f0f0f4; text-align: center; transition: background-color .2s ease; }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.ptable th[scope="row"] { text-align: left; font-weight: 400; color: #2f323c; }
.ptable td { font-weight: 700; color: var(--black); }

/* Yapışkan başlık: kaydırırken paket adları, fiyatlar ve "Dene" görünür kalır */
.ptable thead th { position: sticky; top: var(--hdr-h); z-index: 2; padding: 22px 16px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); vertical-align: bottom; }
.ptable__corner { text-align: left !important; vertical-align: middle !important; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b8e9b; }
.ptable__name { display: block; font-size: 1.15rem; font-weight: 700; color: var(--black); }
.ptable__price { display: block; margin: 4px 0 12px; font-size: 1.02rem; font-weight: 700; color: var(--black); }
.ptable__price small { margin-left: 2px; font-size: 12.5px; font-weight: 400; color: #8b8e9b; }
.ptable thead .btn { text-box: trim-both cap alphabetic; padding: calc(9px + .3em) 18px calc(9px + .14em); font-size: 13.5px; border-radius: 10px; }

/* Grup başlıkları: ince ayraç + mor küçük başlık + adet */
.ptable__group th { padding: 26px 20px 10px; border-bottom: 1px solid #f0f0f4; background: #fafafc; text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.ptable tbody .ptable__group:first-child th { padding-top: 20px; }

/* Öne çıkan paketin sütunu: hafif mor şerit, başlıkta üst çizgi */
.ptable .is-pop { background: rgba(108, 92, 231, .05); }
.ptable thead th.is-pop { background: rgba(246, 245, 254, .97); box-shadow: inset 0 3px 0 var(--brand); }
.ptable thead th.is-pop .ptable__name { color: var(--brand); }

/* Satır vurgusu: üstüne gelince bütün satır yumuşak mor; öne çıkan sütun biraz daha koyu kalır */
.ptable tbody tr:not(.ptable__group):hover > * { background: #f6f5fe; }
.ptable tbody tr:not(.ptable__group):hover > .is-pop { background: #efedfd; }
.ptable tbody tr:not(.ptable__group):hover th[scope="row"] { color: var(--black); }

.yn2 { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ebe9fc; color: var(--brand); }
.yn2 svg { width: 16px; height: 16px; }
.yn2--no { background: transparent; color: #c3c5cf; }

/* Telefon: paket seçici (site.js). Seçilen paketin sütunu tam genişlikte görünür; JS yoksa tablo yana kayar. */
.ptabs { display: none; }

/* Ek modüller */
.prmods { padding: clamp(56px, 7vw, 120px) 0; background: var(--stage); }
.pmods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pmod { display: grid; align-content: start; gap: 8px; padding: clamp(22px, 2.4vw, 32px); border-radius: clamp(22px, 2.4vw, 30px); background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .04), 0 30px 60px -44px rgba(59, 42, 158, .35); }
.pmod > i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; background: #f1f0fb; color: var(--brand); }
.pmod .ico { width: 23px; height: 23px; }
.pmod h3 { font-size: 1.2rem; font-weight: 700; }
.pmod p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.pmod__price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.pmod__price strong { font-size: 1.5rem; font-weight: 700; }
.pmod__price span { font-size: 14px; color: #8b8e9b; }
.pmod__incl { justify-self: start; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: #e7f7ee; font-size: 13px; font-weight: 700; color: #0b5c32; }

/* SSS başlığındaki vurgu */
.hfaq__em { font-style: normal; font-weight: 700; color: var(--brand); }

@media (max-width: 760px) {
    /* Dar ekranda tablo yatay kayar; yapışkan başlık yerine ilk sütun yapışır */
    /* JS yoksa: yatay kaydırma, özellik adları sabit */
    .ptable { overflow-x: auto; }
    .ptable table { min-width: 620px; }
    .ptable thead th { position: static; }
    .ptable th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; }
    /* JS varsa: paket seçici + iki sütun (özellik | seçilen paket) */
    .ptabs { position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 30px -24px rgba(59, 42, 158, .5); }
    .ptabs[hidden] { display: none; }
    .ptabs button { display: grid; gap: 1px; padding: 9px 6px; border: 0; border-radius: 12px; background: none; font: inherit; color: #5f6370; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
    .ptabs button b { font-size: 14.5px; }
    .ptabs button small { font-size: 12px; font-weight: 700; color: #8b8e9b; }
    .ptabs button.is-on { background: var(--black); color: #fff; }
    .ptabs button.is-on small { color: #c9cbd4; }
    .ptabs button.is-pop:not(.is-on) b { color: var(--brand); }
    .ptable.is-tabbed { overflow: clip; }
    .ptable.is-tabbed table { min-width: 0; table-layout: auto; } /* fixed düzen gizli paket sütunlarına da yer ayırıyordu */
    .ptable.is-tabbed thead { display: none; } /* paket adı ve fiyat seçicide */
    .ptable.is-tabbed col.ptable__fcol { width: 66%; }
    .ptable.is-tabbed tbody td { width: 34%; }
    .ptable.is-tabbed th[scope="row"] { position: static; }
    .ptable.is-tabbed tbody tr > td { display: none; }
    .ptable.is-tabbed[data-col="1"] tbody tr > td:nth-child(2),
    .ptable.is-tabbed[data-col="2"] tbody tr > td:nth-child(3),
    .ptable.is-tabbed[data-col="3"] tbody tr > td:nth-child(4),
    .ptable.is-tabbed[data-col="4"] tbody tr > td:nth-child(5) { display: table-cell; }
    .ptable.is-tabbed th, .ptable.is-tabbed td { padding: 13px 14px; }
    .ptable.is-tabbed td { text-align: right; }
    .ptable.is-tabbed .is-pop { background: none; }
    .ptable.is-tabbed tbody tr:not(.ptable__group):hover > * { background: none; } /* dokunmatikte takılı kalan vurgu olmasın */
    .ptable__mcta { display: none; }
    .ptable.is-tabbed + .ptable__mcta { display: flex; }
    .cycle button { min-width: 0; padding-inline: 14px; }
}

/* Fiyatlar: modüller gizliyken SSS gri zeminde (tablo beyaz, art arda aynı ton olmasın) */
.hfaq--tint { background: var(--stage); }
.hfaq--tint .hfaq__item { background: #fff; border-color: transparent; }
.hfaq--tint .hfaq__item.is-open { background: #fff; box-shadow: 0 16px 34px -26px rgba(59, 42, 158, .45); }

/* Telefonda seçilen paketin altındaki "dene" düğmesi (tablo başlığı gizliyken) */
.ptable__mcta { justify-content: center; margin-top: 14px; }
.ptable__mcta .btn { text-box: trim-both cap alphabetic; padding-block: calc(13px + .38em) calc(13px + .10em); }

.endcta--gap { padding-top: clamp(56px, 7vw, 120px); }
.ptable__mcta [hidden] { display: none; } /* .btn--block display:flex hidden'ı eziyordu */

/* ═════════════ DÜĞME YAZISI DİKEYDE TAM ORTA — BÜTÜN SİTE (08.10.2026) ═════════════
   Nursel: "butonlarda yazılar dikeyde ortalı değil" (iletişim, sonra fiyatlar). Eski yöntem yazıyı sabit ±.14em itiyordu;
   ölçüldü: bazı düğmelerde yazı 2,5 px aşağıda, oran boyutla kayıyor. Yeni yöntem: satır kutusu büyük harf yüksekliğine
   kırpılır (text-box), pay eşit + Lato'nun kısa büyük harf ölçüsü için ±.14em (önce .09em; ölçüldü: yazı ~1 px yukarıda kalıyordu). Yükseklik eskisiyle aynı kalır
   (1.2em satır yerine .72em satır + .48em pay). Desteklemeyen tarayıcı (Firefox) eski kurallarla kalır. */
@supports (text-box: trim-both cap alphabetic) {
    .btn { text-box: trim-both cap alphabetic; padding: calc(13px + .38em) 24px calc(13px + .10em); }
    .btn--sm { padding: calc(10px + .38em) 16px calc(10px + .10em); }
    .btn--lg { padding: calc(17px + .38em) 28px calc(17px + .10em); }
    .btn--xl { padding: calc(clamp(13px, 1.25vw, 21px) + .38em) clamp(17px, 2.3vw, 40px) calc(clamp(13px, 1.25vw, 21px) + .10em); }
    .btn--text { padding-inline: 8px; }
    /* Header düğmesi en küçük yazılı düğme: genel pay 1 px aşağı itiyordu ("D" harfiyle ölçüldü) → daha az pay */
    .hdr__cta .btn { padding: calc(9px + .31em) 20px calc(9px + .17em); }
    @media (max-width: 1560px) { .hdr__cta .btn { padding: calc(8px + .31em) 18px calc(8px + .17em); } }
    .ptable thead .btn { padding: calc(9px + .38em) 18px calc(9px + .10em); }
}

/* Fiyatlar: anahtarın altındaki hediye notu (hangi paketlerde geçerli) */
.cycle__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 14.5px; color: #3c3f4a; }
.cycle__note .ico { flex: none; width: 18px; height: 18px; color: var(--brand); }
.cycle__note b { font-weight: 700; color: var(--black); }

/* ═════════════ NASIL ÇALIŞIR SAYFASI (08.10.2026) ═════════════
   Aile: iletişim / SSS / entegrasyonlar / fiyatlar. Zeminler: beyaz üst alan → gri adımlar → beyaz "yayında" → son çağrı.
   Kaydırdıkça anlatan bölüm: geniş ekranda sağdaki sahne yapışkan, etkin adımın görseli çapraz geçişle gelir (site.js);
   dar ekranda her adımın görseli kendi içinde. Eski .steps/.step kuralları başka yerde kullanılıyorsa diye duruyor. */

/* Üst alandaki adım özeti */
.srail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: clamp(24px, 2.8vw, 40px) 0 0; padding: 0; list-style: none; }
.srail a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s var(--ease); }
.srail a:hover { transform: translateY(-2px); border-color: rgba(108, 92, 231, .35); box-shadow: 0 14px 30px -20px rgba(59, 42, 158, .5); }
.srail a b { display: grid; place-items: center; width: 28px; height: 28px; padding-top: .08em; border-radius: 50%; background: var(--black); color: #fff; font-size: 13px; }
.srail a small { padding: 2px 8px; border-radius: 999px; background: #f1f0fb; font-size: 12px; font-weight: 700; color: var(--brand); }
.srail__sum { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 8px 14px; border-radius: 999px; background: var(--mark); font-size: 14.5px; color: var(--black); }
.srail__sum .ico { width: 18px; height: 18px; }

/* Tarayıcı çerçevesi (gerçek ekran görüntüleri için) */
.bframe { overflow: hidden; border: 1px solid rgba(11, 11, 15, .08); border-radius: clamp(12px, 1.2vw, 16px); background: #fff; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 40px 80px -40px rgba(59, 42, 158, .45); }
.bframe__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid #eeeef2; background: #f7f7fa; }
.bframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcdde3; }
.bframe__bar i:nth-child(1) { background: #ff6b5f; } .bframe__bar i:nth-child(2) { background: #ffc130; } .bframe__bar i:nth-child(3) { background: #2acb4a; }
.bframe__bar span { flex: 1; max-width: 60%; margin: 0 auto; padding: 4px 10px; border-radius: 7px; background: #fff; font-size: 12px; color: #6b6e7a; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bframe img { display: block; width: 100%; height: auto; }

/* Gri bant: solda adımlar, sağda yapışkan sahne */
.sflow { padding: clamp(56px, 7vw, 120px) 0; background: var(--stage); }
.sflow__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.4vw, 72px); }
.sflow__steps { position: relative; margin: 0; padding: 0; list-style: none; }
/* Zaman çizgisi: numaraların arkasında; kaydırdıkça mor dolar (site.js → --p) */
.sflow__line { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: #d9dae3; }
.sflow__line i { position: absolute; inset: 0 0 auto 0; height: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--brand); transition: height .2s linear; }
.sstep { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); min-height: 78vh; padding-bottom: clamp(24px, 3vw, 48px); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.sstep:last-child { min-height: 0; }
.sstep__no { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding-top: .08em; border-radius: 50%; background: #fff; border: 2px solid #d9dae3; font-size: 16px; font-weight: 700; color: #8b8e9b; transition: background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s var(--ease); }
.sstep.is-on .sstep__no, .sstep.is-past .sstep__no { border-color: var(--brand); background: var(--brand); color: #fff; }
.sstep.is-on .sstep__no { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(108, 92, 231, .15); }
.sstep__body { padding-top: 6px; opacity: .45; transition: opacity .5s ease; }
.sstep.is-on .sstep__body { opacity: 1; }
.no-js .sstep__body, .sstep__body:focus-within { opacity: 1; }
.sstep__meta { display: flex; align-items: center; gap: 12px; }
.sstep__time { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--brand); }
.sstep__time .ico { width: 15px; height: 15px; }
.sstep h2 { margin-top: 12px; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.sstep__body > p { margin-top: 10px; max-width: 30em; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55; color: #3c3f4a; }
.sstep__points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sstep__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--black); }
.sstep__points svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #ebe9fc; color: var(--brand); }
.sstep__shot { display: none; margin: 22px 0 0; }

.sflow__stage { position: relative; }
.sflow__sticky { position: sticky; top: calc(var(--hdr-h) + 40px); height: min(72vh, 640px); }
.sscene { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s ease, transform .7s var(--ease); pointer-events: none; }
.sscene.is-on { opacity: 1; transform: none; }
.sscene > .bframe { position: relative; }
/* Köşedeki ikinci görsel: küçük kart + etiket */
.sscene__inset { position: absolute; right: -14px; bottom: 6%; width: 46%; overflow: hidden; border: 1px solid rgba(11, 11, 15, .08); border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -24px rgba(11, 11, 15, .35); transform: translateY(16px); opacity: 0; transition: opacity .6s ease .25s, transform .8s var(--ease) .25s; }
.sscene.is-on .sscene__inset { opacity: 1; transform: none; }
.sscene__inset img { display: block; width: 100%; height: auto; }
.sscene__inset span { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--black); font-size: 12.5px; font-weight: 700; color: #fff; }
.sscene__cap { position: absolute; left: 18px; bottom: 8%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 14.5px; font-weight: 700; color: var(--black); box-shadow: 0 24px 48px -24px rgba(59, 42, 158, .55); }
.sscene__cap .ico { width: 18px; height: 18px; color: var(--brand); }

/* Beyaz: yayında — masaüstü çerçevede vitrin yavaşça kayar, yanında telefon */
.slive { padding: clamp(56px, 7vw, 120px) 0; background: #fff; overflow-x: clip; }
.slive__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.slive__actions { margin-top: clamp(22px, 2.4vw, 32px); }
.slive__devices { position: relative; padding-right: clamp(40px, 8%, 90px); }
.bframe--scroll .bframe__view { height: clamp(260px, 30vw, 440px); overflow: hidden; }
.bframe--scroll .bframe__view img { animation: siteScroll 26s ease-in-out infinite alternate; }
@keyframes siteScroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + clamp(260px, 30vw, 440px))); } }
.pframe { position: absolute; right: 0; bottom: -8%; width: clamp(130px, 24%, 210px); padding: 8px; border-radius: 30px; background: var(--black); box-shadow: 0 40px 70px -30px rgba(11, 11, 15, .55); }
.pframe__view { overflow: hidden; border-radius: 23px; aspect-ratio: 9 / 19; background: #fff; }
.pframe__view img { display: block; width: 100%; height: auto; animation: siteScroll2 22s ease-in-out infinite alternate; }
@keyframes siteScroll2 { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(-58%); } }
@media (prefers-reduced-motion: reduce) { .bframe--scroll .bframe__view img, .pframe__view img { animation: none; } .sscene, .sscene__inset { transition: none; } }

@media (max-width: 960px) {
    .sflow__grid { grid-template-columns: 1fr; }
    .sflow__stage { display: none; }
    .sstep { min-height: 0; padding-bottom: clamp(36px, 6vw, 56px); }
    .sstep__body { opacity: 1; }
    .sstep__shot { display: block; }
    .slive__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sstep { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
    .sstep__no { width: 36px; height: 36px; font-size: 14px; }
    .sflow__line { left: 17px; }
    .srail__sum { margin-left: 0; }
    .slive__devices { padding-right: 70px; }
}

/* ═════════════ NASIL ÇALIŞIR — 2. TUR: ZİKZAK + YILAN ÇİZGİ (08.10.2026) ═════════════
   Tek adımlar: yazı solda, pencere sağda; çift adımlar tersi (.zstep--flip). Numaraları birleştiren çizgi site.js'te
   (data-snake). Pencere: ana sayfanın .make__media/.make__screen animasyonu. Önceki tur (.sflow__grid, .sscene, yapışkan sahne)
   artık kullanılmıyor. */
.sflow { position: relative; }
.snake { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.snake path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.snake__bg { stroke: #d6d7e0; stroke-width: 2; stroke-dasharray: 2 9; }
.snake__fg { stroke: var(--brand); stroke-width: 2.5; transition: stroke-dashoffset .25s linear; }
.sflow > .wrap { position: relative; z-index: 1; }

.zsteps { display: grid; gap: clamp(90px, 11vw, 170px); margin: 0; padding: 0; list-style: none; }
.zstep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* eşit: görsel her adımda aynı boyda (Nursel) */ gap: clamp(32px, 5.4vw, 92px); align-items: center; scroll-margin-top: calc(var(--hdr-h) + 24px); }
.zstep--flip .zstep__copy { order: 2; }
.zstep--flip .zstep__media { order: 1; }

/* Yazı sütunu: numara üstte solda; altındaki yazı numaranın genişliği kadar içeride (çizgi bu boşluktan iner) */
.zstep__head { display: flex; align-items: center; gap: 16px; }
.zstep__head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zstep__no { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding-top: .08em; border-radius: 50%; background: #fff; border: 2px solid #d6d7e0; font-size: 19px; font-weight: 700; color: #8b8e9b; transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease; }
.zstep__no.is-on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 8px rgba(108, 92, 231, .14); }
.zstep__copy > h2, .zstep__copy > p, .zstep__copy > .sstep__points { margin-left: 68px; }
.zstep__copy > h2 { margin-top: 16px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.zstep__copy > p { margin-top: 12px; max-width: 30em; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55; color: #3c3f4a; }

/* Pencere: ana sayfadaki kare zemin + dar pencere. Sahne noktaları (birden çok sahne varsa) altta. */
.zstep__media { position: relative; }
.zstep__media .make__media { box-shadow: 0 40px 80px -50px rgba(59, 42, 158, .5); }
.zstep__tabs { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.zstep__tabs button { padding: calc(6px + .1em) 14px calc(6px - .1em); border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: #5f6370; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.zstep__tabs button.is-on { border-color: var(--black); background: var(--black); color: #fff; }

@media (max-width: 960px) {
    .snake { display: none; }
    .zsteps { gap: clamp(56px, 10vw, 80px); }
    .zstep { grid-template-columns: 1fr; gap: 26px; }
    .zstep--flip .zstep__copy, .zstep--flip .zstep__media { order: 0; }
    .zstep__copy > h2, .zstep__copy > p, .zstep__copy > .sstep__points { margin-left: 0; }
}

/* Nasıl Çalışır: adımlar beyaz zeminde (Nursel 08.10.2026: "arkaplan beyaz olsa"); art arda aynı ton kalmasın diye
   arkasındaki "Ve mağazan yayında" bölümü gri. Üst alan ile adımlar bilerek ikisi de beyaz. */
.sflow { background: #fff; }
.slive { background: var(--stage); }
.slive + .endcta { padding-top: clamp(56px, 7vw, 120px); }

/* Nasıl Çalışır: üst alan ile adımlar arasındaki adım özeti kutusu (08.10.2026). Tam genişlik değil, .wrap içinde;
   zemin ana sayfadaki animasyon penceresinin geçişi (gri → lavanta → krem). Eski üst alan özeti (.srail) kaldırıldı. */
.shero { padding-bottom: clamp(28px, 3.4vw, 52px); }
.sbridge { background: #fff; }
.sbridge__box { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 32px); padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 44px); border-radius: clamp(22px, 2.6vw, 34px); background: linear-gradient(120deg, var(--stage) 0%, #e9e6fa 48%, #fff4cf 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.sbridge__list { flex: 1; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); margin: 0; padding: 0; list-style: none; }
.sbridge__list li { flex: 1; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); min-width: 0; }
.sbridge__list a { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .72); color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: transform .3s var(--ease), background-color .3s ease, box-shadow .3s var(--ease); }
.sbridge__list a:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 16px 32px -22px rgba(59, 42, 158, .55); }
.sbridge__list b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding-top: .08em; border-radius: 50%; background: var(--black); color: #fff; font-size: 16px; }
.sbridge__list a:hover b { background: var(--brand); }
.sbridge__list span { display: grid; gap: 2px; min-width: 0; }
.sbridge__list strong { font-size: clamp(.98rem, 1.15vw, 1.1rem); font-weight: 700; line-height: 1.25; }
.sbridge__list small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--brand); }
.sbridge__list small .ico { width: 14px; height: 14px; }
.sbridge__arrow { flex: none; width: 20px; height: 20px; color: #9a9dab; }
.sbridge__sum { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; background: var(--black); color: #fff; }
.sbridge__sum .ico { width: 24px; height: 24px; color: var(--mark); }
.sbridge__sum span { display: grid; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b9bbc6; }
.sbridge__sum b { font-size: clamp(1.05rem, 1.3vw, 1.25rem); letter-spacing: 0; text-transform: none; color: #fff; }
.sbridge + .sflow { padding-top: clamp(64px, 8vw, 128px); }

@media (max-width: 960px) {
    .sbridge__box { flex-direction: column; align-items: stretch; }
    .sbridge__list { flex-direction: column; align-items: stretch; }
    .sbridge__arrow { display: none; }
    .sbridge__sum { justify-content: center; }
}

/* Nasıl Çalışır — TELEFON (08.10.2026, Nursel: "mobilde de çok şık olmalı, özellikle adımlar"). Yılan çizgi telefonda
   dikey zaman çizgisine döner (site.js: numaralar aynı hizada → düz çizgi). Numara soldaki boşlukta, yazı ve animasyonlu
   pencere çizginin sağında hizalı; çizgi pencerelerin yanından kesintisiz akar. */
@media (max-width: 960px) {
    .snake { display: block; }
    .zsteps { gap: 56px; }
    .zstep { gap: 22px; }
    .zstep__copy, .zstep__media { padding-left: 58px; }
    .zstep__head { margin-left: -58px; gap: 14px; }
    .zstep__no { width: 44px; height: 44px; font-size: 17px; background: #fff; }
    .zstep__no.is-on { box-shadow: 0 0 0 6px rgba(108, 92, 231, .14); }
    .zstep__copy > h2 { margin-top: 10px; font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
    .zstep__copy > p { margin-top: 8px; font-size: 1rem; }
    .sstep__points { gap: 8px; margin-top: 14px; }
    .sstep__points li { font-size: 15px; }
    .zstep__media .make__media { border-radius: 20px; box-shadow: 0 28px 56px -36px rgba(59, 42, 158, .55); }
    .zstep__tabs { justify-content: flex-start; }
}
@media (max-width: 420px) {
    .zstep__copy, .zstep__media { padding-left: 52px; }
    .zstep__head { margin-left: -52px; }
    .zstep__no { width: 40px; height: 40px; }
}

/* Fiyatlar: Aylık/Yıllık anahtarı ve avantaj rozetleri — 2. tur (08.10.2026, Nursel: "daha hoş olsun").
   Anahtar biraz büyüdü, cam efektli; "Yıllık"ta sarı "Tasarruflu" etiketi. Eski tek satırlık not (.cycle__note) yerine
   rozetler: beyaz hap, sarı ikon dairesi; yıllık seçilince mor çerçeve + hafif parıltı ile öne çıkar. */
.cycle { padding: 6px; border-color: rgba(11, 11, 15, .08); background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(11, 11, 15, .05), 0 24px 48px -30px rgba(59, 42, 158, .55); }
.cycle button { min-width: 150px; padding: calc(13px + .1em) 24px calc(13px - .1em); font-size: 16px; }
.cycle__knob { top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); box-shadow: 0 8px 18px -8px rgba(11, 11, 15, .5); }
.cycle.is-yearly .cycle__knob { box-shadow: 0 10px 22px -8px rgba(108, 92, 231, .8); }
.cycle__tag { padding: 3px 9px; border-radius: 999px; background: var(--mark); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: var(--black); transition: transform .35s var(--ease); }
.cycle.is-yearly .cycle__tag { transform: scale(1.06); }

.cycle__perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.cycle__perks li { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; color: #3c3f4a; box-shadow: 0 1px 2px rgba(11, 11, 15, .04); transition: border-color .45s ease, box-shadow .45s ease, transform .45s var(--ease), background-color .45s ease; }
.cycle__perks i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff4cf; color: #8a6a00; transition: background-color .45s ease, color .45s ease; }
.cycle__perks .ico { width: 17px; height: 17px; }
.cycle__perks b { font-weight: 700; color: var(--black); }
[data-cycle-scope].is-yearly .cycle__perks li { border-color: rgba(108, 92, 231, .55); background: #faf9ff; box-shadow: 0 14px 30px -20px rgba(108, 92, 231, .7); transform: translateY(-2px); }
[data-cycle-scope].is-yearly .cycle__perks i { background: var(--brand); color: #fff; }
.cycle__hint { margin-top: 10px; font-size: 13px; color: #8b8e9b; }
.cycle__note { display: none; }
@media (max-width: 560px) {
    .cycle button { min-width: 0; padding-inline: 16px; font-size: 15px; }
    .cycle__perks { flex-direction: column; align-items: center; }
}
/* "Yıllık ödemede" rozetlerin üstünde küçük başlık */
.cycle__hint { margin-top: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8b8e9b; }
.cycle__hint + .cycle__perks { margin-top: 10px; }
/* Fiyatlar: üst açıklama geniş ekranda tek satır (Nursel); dar ekranda doğal olarak kırılır */
.prhero .fhero__text { max-width: 52em; }

/* Fiyatlar: avantaj bilgisi — 3. tur (Nursel: "eskisi gibi küçük bilgi gibi yazsın, arkaplan radiuslu kutu, sarılı morlu
   şeffaf"). Rozetler (.cycle__perks) kaldırıldı. */
.cycle__info { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; padding: calc(9px + .08em) 18px calc(9px - .08em); border: 1px solid rgba(108, 92, 231, .16); border-radius: 999px; background: linear-gradient(100deg, rgba(108, 92, 231, .12) 0%, rgba(236, 233, 252, .5) 45%, rgba(255, 216, 74, .3) 100%); font-size: 14.5px; line-height: 1.4; color: #3c3f4a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.cycle__info .ico { flex: none; width: 18px; height: 18px; color: var(--brand); }
.cycle__info b { font-weight: 700; color: var(--black); }
.cycle__info i { margin: 0 6px; font-style: normal; color: #9a9dab; }
.cycle__hint, .cycle__perks { display: none; }
@media (max-width: 560px) { .cycle__info { border-radius: 18px; text-align: left; } }
.cycle__info { display: flex; width: fit-content; max-width: 100%; margin: 18px auto 0; } /* anahtarın yanına değil altına, ortalı */

/* ═════════════ ÖZELLİKLER SAYFASI (08.10.2026) ═════════════
   Aile: iletişim / SSS / entegrasyonlar / fiyatlar / nasıl çalışır. Zeminler: beyaz üst alan → yapışkan grup çubuğu →
   gruplar sırayla beyaz / gri → son çağrı. Eski .features/.feature/.fcard kuralları grup sayfasında kullanılıyor, dokunulmadı — bu sayfa .ftcard kullanır (ad çakışması: eski .fcard li yeşil tik ekliyordu). */
.ftrhero { padding-bottom: clamp(28px, 3.4vw, 52px); }
.ftrhero .chero__title { max-width: 16em; margin-inline: auto; }
.ftrhero__count { margin-top: clamp(16px, 1.8vw, 24px); font-size: 14.5px; color: #6b6e7a; }
.ftrhero__count b { color: var(--black); }

/* Yapışkan grup çubuğu */
.gbar { position: sticky; top: var(--hdr-h); z-index: 50; padding: 12px 0; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease, top .25s var(--ease); }
.gbar.is-stuck { border-color: var(--line); box-shadow: 0 10px 24px -20px rgba(11, 11, 15, .4); }
.hdr.is-scrolled ~ main .gbar, body:has(.hdr.is-scrolled) .gbar { top: calc(var(--hdr-h) - 14px); } /* menü küçülünce çubuk da yukarı */
.gbar ul { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.gbar ul::-webkit-scrollbar { display: none; }
.gbar a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 700; color: #3c3f4a; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.gbar a .ico { width: 18px; height: 18px; color: var(--brand); transition: color .3s ease; }
.gbar a b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #f3f3f7; font-size: 12px; color: #6b6e7a; transition: background-color .3s ease, color .3s ease; }
.gbar a:hover { border-color: rgba(108, 92, 231, .4); color: var(--black); }
.gbar a.is-on { border-color: var(--black); background: var(--black); color: #fff; box-shadow: 0 10px 22px -12px rgba(11, 11, 15, .55); }
.gbar a.is-on .ico { color: var(--mark); }
.gbar a.is-on b { background: rgba(255, 255, 255, .16); color: #fff; }

/* Gruplar */
.fgrp { padding: clamp(56px, 7vw, 112px) 0; background: #fff; scroll-margin-top: calc(var(--hdr-h) + 64px); }
.fgrp--tint { background: var(--stage); }
.fgrp__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.fgrp__sticky { position: sticky; top: calc(var(--hdr-h) + 96px); }
.fgrp__ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--brand) 0%, #8f82f0 100%); color: #fff; box-shadow: 0 18px 34px -18px rgba(108, 92, 231, .8); }
.fgrp__ico .ico { width: 28px; height: 28px; }
.fgrp__head h2 { margin-top: 10px; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.fgrp__head p { margin-top: 12px; max-width: 24em; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; color: #3c3f4a; }
.fgrp__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-weight: 700; color: var(--black); }
.fgrp__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.fgrp__more:hover { color: var(--brand); }
.fgrp__more:hover svg { transform: translateX(4px); }

.ftcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ftcards > .ftcard:only-child, .ftcards > .ftcard:last-child:nth-child(odd) { grid-column: 1 / -1; } /* tek kalan kart tam satır */
.ftcard { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: clamp(20px, 2.2vw, 28px); background: #fff; scroll-margin-top: calc(var(--hdr-h) + 80px); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; }
.fgrp--tint .ftcard { border-color: transparent; box-shadow: 0 1px 2px rgba(11, 11, 15, .04); }
.ftcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), rgba(108, 92, 231, .1), transparent 70%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.ftcard:hover { transform: translateY(-3px); border-color: rgba(108, 92, 231, .3); box-shadow: 0 24px 48px -30px rgba(59, 42, 158, .5); }
.ftcard:hover::before { opacity: 1; }
.ftcard:target { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 92, 231, .15); }
.ftcard__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; background: #f1f0fb; color: var(--brand); transition: background-color .35s ease, color .35s ease; }
.ftcard:hover .ftcard__ico { background: var(--brand); color: #fff; }
.ftcard__ico .ico { width: 23px; height: 23px; }
.ftcard h3 { font-size: clamp(1.12rem, 1.4vw, 1.3rem); font-weight: 700; line-height: 1.25; }
.ftcard > p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.ftcard ul { display: grid; gap: 8px; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px dashed #e3e3ea; list-style: none; }
.ftcard li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--black); }
.ftcard li svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #ebe9fc; color: var(--brand); }

@media (max-width: 960px) {
    .fgrp__grid { grid-template-columns: 1fr; }
    .fgrp__sticky { position: static; }
    .gbar ul { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .ftcards { grid-template-columns: 1fr; }
    .fgrp__ico { width: 50px; height: 50px; border-radius: 16px; }
}
/* Özellikler: grup çubuğunda düğmeler daralmasın (telefonda ikonlar 0 px'e iniyordu); çubuk yana kayar */
.gbar li { flex: none; }
.gbar a .ico { flex: none; }

/* ═════════════ ÖZELLİKLER — 2. TUR: ANİMASYONLU BÖLÜMLER (08.10.2026) ═════════════
   Nursel: "tamamen farklı olsun; ekran animasyonu olsun; ayrıntılı incele gerek yok; header daha kısa".
   Her grup ana sayfanın .make bölümünü kullanır (liste + animasyonlu pencere). Önceki tur (.fgrp/.ftcard) artık kullanılmıyor. */
.ftrhero { padding-top: clamp(22px, 3vw, 52px); padding-bottom: clamp(18px, 2.2vw, 34px); }
.ftrhero .chero__title { max-width: none; font-size: clamp(1.8rem, 3.4vw, 3.1rem); }
.ftrhero .fhero__text { max-width: 52em; margin-top: 10px; }
.ftrhero__count { margin-top: 10px; }

.fchap { padding: clamp(56px, 7vw, 116px) 0; background: #fff; scroll-margin-top: calc(var(--hdr-h) + 64px); }
.fchap--tint { background: var(--stage); }
.fchap__grid { margin-inline: auto; }
.fchap--flip .fchap__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.fchap--flip .fchap__copy { order: 2; }
.fchap--flip .make__media { order: 1; }
.fchap__head { display: flex; align-items: center; gap: 12px; }
.fchap__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--brand) 0%, #8f82f0 100%); color: #fff; box-shadow: 0 14px 28px -16px rgba(108, 92, 231, .8); }
.fchap__ico .ico { width: 22px; height: 22px; }
.fchap__copy h2 { margin-top: clamp(12px, 1.4vw, 20px); font-weight: 700; letter-spacing: -.01em; }
.fchap--tint .make__media { background: linear-gradient(135deg, #fff 0%, #e9e6fa 45%, #fff4cf 100%); } /* gri zeminde pencere zemini kaybolmasın */
.fchap__list .make__item { scroll-margin-top: calc(var(--hdr-h) + 90px); }
/* Seçili özelliğin maddeleri açılır (grid satırı 0fr → 1fr), diğerlerinde kapalı */
.fchap__pts { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .4s ease, margin-top .4s ease; }
.fchap__pts > span:first-child { min-height: 0; }
.fchap__pts { overflow: hidden; }
.make__item.is-on .fchap__pts { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; }
.fchap__pts { grid-auto-rows: auto; gap: 6px; }
.fchap__pts > span { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.4; color: var(--black); }
.fchap__pts svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #ebe9fc; color: var(--brand); }

@media (max-width: 900px) {
    .fchap--flip .fchap__grid { grid-template-columns: 1fr; }
    .fchap--flip .fchap__copy, .fchap--flip .make__media { order: 0; }
}

/* ═════════════ ÖZELLİKLER — 4. TUR (08.10.2026) ═════════════
   Nursel: "içindekiler hoş değil, header daha şık"; "sayı hesaplamaya gerek yok"; "ana sayfadaki Özellikler kartları gibi";
   "2. ve 4. hep aynı"; "Bir bakışta yeni tarz olmamış"; "gri arkaplan en fazla 1 kere". Önceki turlar (.fgrp/.ftcard, .fchap,
   .fxtoc, .fxshot, .fxreach, .fxcards, .fxindex) artık kullanılmıyor. Zeminler: beyaz üst alan → beyaz gruplar, Satış KOYU →
   koyu "bir bakışta" şeridi → TEK gri bölüm: sorular → beyaz son çağrı. */

/* Üst alan: ortalı, kısa; altında zıt yönde akan iki sıra özellik şeridi (sayı yok) */
.fxhero { position: relative; padding: clamp(22px, 3vw, 48px) 0 clamp(28px, 3.4vw, 52px); overflow-x: clip; text-align: center; }
.fxhero__copy { position: relative; z-index: 1; max-width: 1180px; }
.fxhero .crumb { justify-content: center; }
.fxhero__title { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(2.1rem, 4.6vw, 4rem); font-weight: 400; line-height: 1.06; letter-spacing: -.015em; color: var(--black); text-wrap: balance; }
.fxhero__title { max-width: 14em; margin-inline: auto; } /* başlık iki satır kalsın; açıklama geniş alanda (Nursel) */
.fxhero__title em { font-style: normal; font-weight: 700; color: var(--brand); }
.fxhero__text { max-width: 60em; margin: clamp(14px, 1.6vw, 22px) auto 0; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; color: #3c3f4a; text-wrap: pretty; }
.fxmarq { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: clamp(26px, 3.2vw, 46px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fxmarq__row { display: flex; width: max-content; }
.fxmarq__track { display: flex; gap: 10px; padding-right: 10px; animation: fxMarq 60s linear infinite; }
.fxmarq span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap; color: var(--black); box-shadow: 0 10px 24px -20px rgba(59, 42, 158, .5); }
.fxmarq span .ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #efedfc; color: var(--brand); }
@keyframes fxMarq { to { transform: translateX(-100%); } }

/* "Kısaca" kutusu */
.fxsum { padding: 0 0 clamp(20px, 2.4vw, 32px); background: #fff; }
.fxsum__box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(18px, 2.4vw, 36px); align-items: start; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 3vw, 40px); border-radius: clamp(20px, 2.4vw, 30px); background: linear-gradient(110deg, #f3f1fd 0%, #ece9fb 55%, #fff4cf 100%); }
.fxsum__label { grid-row: span 2; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px -10px rgba(59, 42, 158, .35); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); } /* siyah değil, buzlu açık zemin (Nursel) */
.fxsum__text { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--black); }
.fxsum ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; list-style: none; }
.fxsum li { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: #3c3f4a; }
/* Kısaca + altında kayan şerit (Nursel: yer değiştirdi); grupların arkasındaki büyük numaralar kaldırıldı */
.fxmarq-band { padding: clamp(8px, 1vw, 16px) 0 clamp(40px, 5vw, 72px); background: #fff; } /* şerit Satış'ın hemen üstünde, ayrı (Nursel) */
.fxmarq-band .fxmarq { margin-top: 0; }
@media (min-width: 1100px) { .fxsum__label { grid-row: auto; } .fxsum ul { grid-column: 1 / -1; flex-wrap: nowrap; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(108, 92, 231, .14); } .fxsum li { white-space: nowrap; } } /* üç bilgi tek satırda (Nursel): kutunun tam genişliğine yayılır, yoksa sağdan taşıyordu; dar ekranda alt alta */
.fxsum li svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #fff; color: var(--brand); }

/* Grup bölümü: hepsi beyaz; arkada büyük, içi boş sıra numarası */
.fx { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 128px) 0; background: #fff; scroll-margin-top: calc(var(--hdr-h) + 64px); }
.fx + .fx:not(.fx--flow) { padding-top: clamp(24px, 3vw, 48px); } /* arka arkaya iki beyaz grup: araları açılmasın */
.fx > .wrap { position: relative; z-index: 1; }
.fx__no { position: absolute; top: clamp(10px, 2vw, 30px); right: clamp(-10px, 2vw, 40px); z-index: 0; font-size: clamp(9rem, 22vw, 20rem); font-weight: 900; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(108, 92, 231, .12); pointer-events: none; user-select: none; }
.fx__head { display: flex; align-items: center; gap: 12px; }
.fx__head { color: var(--brand); }
.fx__head::before, .fx__head::after { content: ''; width: 32px; height: 1.5px; background: currentColor; opacity: .4; } /* ikon kutusu kaldırıldı (Nursel: "01 yanındaki kutu hoş değil"); numara iki ince çizgi arasında */
.fx--flow .fx__head { color: #b9b0ff; }
.fx--flow .fx__head::before { display: none; }
.fx__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--brand) 0%, #8f82f0 100%); color: #fff; box-shadow: 0 14px 28px -16px rgba(108, 92, 231, .8); }
.fx__ico .ico { width: 22px; height: 22px; }
.fx__title { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; }
.fx__lead { max-width: 62em; margin-top: 12px; font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.6; color: #3c3f4a; }
.fx__intro { max-width: 1040px; } /* grup açıklaması geniş alanda (Nursel) */
.fx__intro--center { margin-inline: auto; text-align: center; }
.fx__intro--center .fx__head { justify-content: center; }
.fx__intro--center .fx__lead { margin-inline: auto; }

/* Bento kartları — ana sayfanın .bento__big dili. 3 kartta ilki tam genişlik (yazı solda, örnek sağda), ikisi yan yana. */
.fxb { margin-inline: auto; }
.fxb .bento__big { grid-column: span 6; }
.fxb .bento__big--row { grid-column: 1 / -1; }
.fxb .bento__big--row .bento__txt { flex-basis: 46%; }
.fxb .bento__big--row .bento__vis { min-height: clamp(220px, 20vw, 280px); }
.fxb .bento__vis { min-height: clamp(180px, 16vw, 220px); }
.fxb__pts { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.fxb__pts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; background: #f3f1fd; font-size: 13px; font-weight: 700; color: #3b2a9e; }
.bento__big--tint .fxb__pts li { background: rgba(255, 255, 255, .75); }
.fxb__pts svg { flex: none; width: 15px; height: 15px; }

/* ── Kartların içindeki yeni canlı örnekler (.bvx-*). Değerler temsilidir; 8 sn'lik döngüler ana sayfadakilerle aynı tempo. ── */
.bvx-imp { display: grid; gap: 12px; max-width: 300px; padding: 14px 16px 16px; }
.bvx-imp__cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bvx-imp__file { display: flex; align-items: center; gap: 12px; }
.bvx-imp__file i { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fafafc; color: #3c3f4a; }
.bvx-imp__file i .ico { width: 20px; height: 20px; }
.bvx-imp__file i em { position: absolute; bottom: -7px; right: -8px; padding: 1px 5px; border-radius: 5px; background: #1f6f43; font-size: 8.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; color: #fff; }
.bvx-imp__file span { display: grid; gap: 2px; }
.bvx-imp__file b { font-size: 13.5px; }
.bvx-imp__bar { height: 3px; border-radius: 3px; background: #eeeef2; overflow: hidden; }
.bvx-imp__bar i { display: block; height: 100%; border-radius: inherit; background: var(--black); animation: bvxFill 8s infinite; }
.bvx-imp__done { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; animation: bvxShow 8s infinite; }
.bvx-imp__done span { display: inline-flex; align-items: center; gap: 7px; }
.bvx-imp__done span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1f8f4e; box-shadow: 0 0 0 3px rgba(31, 143, 78, .16); }
.bvx-imp__done em { font-size: 11.5px; font-style: normal; font-weight: 400; color: var(--muted); }
.bvx-imp__file small, .bvx-mail small, .bvx-pop small, .bvx-blocks small, .bvx-bars small, .bvx-domain small, .bvx-track__head small, .bvx-quote__head small { font-size: 11.5px; color: var(--muted); }
@keyframes bvxFill { 0% { width: 0; } 45%, 100% { width: 100%; } }
@keyframes bvxShow { 0%, 45% { opacity: 0; transform: translateY(4px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.bvx-mail { display: grid; gap: 8px; max-width: 280px; animation: bvxIn 8s infinite; }
.bvx-mail__item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 9px; background: #f6f6f9; }
.bvx-mail__item i { width: 36px; height: 36px; border-radius: 7px; background: linear-gradient(135deg, #c9a27a, #8a5a2b); }
.bvx-mail__item span { display: grid; gap: 5px; flex: 1; }
.bvx-mail__item em { height: 6px; border-radius: 9px; background: #dcdce3; }
.bvx-mail__item em + em { width: 55%; }
.bvx-mail__btn { justify-self: start; padding: 6px 14px; border-radius: 8px; background: var(--black); font-size: 12px; font-weight: 700; color: #fff; }
@keyframes bvxIn { 0%, 6% { opacity: 0; transform: translateY(10px) scale(.97); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.bvx-pop { display: grid; gap: 4px; max-width: 280px; text-align: center; animation: bvxIn 8s infinite; }
.bvx-pop span { display: flex; gap: 6px; margin-top: 8px; }
.bvx-pop i { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; font-style: normal; text-align: left; color: #9a9da8; }
.bvx-pop em { padding: 7px 10px; border-radius: 8px; background: var(--brand); font-size: 11.5px; font-style: normal; font-weight: 700; color: #fff; }

.bvx-blocks { position: relative; display: grid; gap: 7px; max-width: 260px; }
.bvx-blocks__b { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 700; }
.bvx-blocks__b i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #efedfc; color: var(--brand); }
.bvx-blocks__b .ico { width: 15px; height: 15px; }
.bvx-blocks__b--1 { animation: bvxSwapA 8s infinite; }
.bvx-blocks__b--2 { animation: bvxSwapB 8s infinite; }
@keyframes bvxSwapA { 0%, 30% { transform: none; } 42%, 80% { transform: translateY(calc(100% + 7px)); box-shadow: 0 12px 24px -14px rgba(59, 42, 158, .55); border-color: var(--brand); } 92%, 100% { transform: none; } }
@keyframes bvxSwapB { 0%, 30% { transform: none; } 42%, 80% { transform: translateY(calc(-100% - 7px)); } 92%, 100% { transform: none; } }

.bvx-lang { display: grid; gap: 10px; max-width: 260px; text-align: center; }
.bvx-lang__words { position: relative; height: 34px; }
.bvx-lang__words span { position: absolute; inset: 0; font-size: 24px; font-weight: 800; opacity: 0; animation: bvxWord 8s infinite; }
.bvx-lang__words span:nth-child(2) { animation-delay: 2s; }
.bvx-lang__words span:nth-child(3) { animation-delay: 4s; }
.bvx-lang__words span:nth-child(4) { animation-delay: 6s; }
.bvx-lang__tags, .bvx-lang__cur { display: flex; justify-content: center; gap: 6px; }
.bvx-lang__tags b { padding: 3px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 11.5px; animation: bvPick 8s infinite; }
.bvx-lang__tags b:nth-child(2) { animation-delay: 2s; }
.bvx-lang__tags b:nth-child(3) { animation-delay: 4s; }
.bvx-lang__tags b:nth-child(4) { animation-delay: 6s; }
.bvx-lang__cur span { padding: 3px 9px; border-radius: 7px; background: #fff4cf; font-size: 12px; font-weight: 700; color: #8a6400; }
@keyframes bvxWord { 0% { opacity: 0; transform: translateY(8px); } 4%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-8px); } }

.bvx-domain { display: grid; gap: 10px; max-width: 320px; text-align: center; }
.bvx-domain__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 10px; background: #f3f3f6; }
.bvx-domain__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #d4d4db; }
.bvx-domain__bar span { display: flex; align-items: center; gap: 6px; flex: 1; margin-left: 6px; padding: 5px 10px; border-radius: 7px; background: #fff; font-size: 13px; }
.bvx-domain__bar .ico { width: 13px; height: 13px; color: #1f8f4e; }
.bvx-domain__bar b { overflow: hidden; white-space: nowrap; width: 0; animation: bvxType 8s steps(14) infinite; }
.bvx-domain__bar em { width: 1.5px; height: 15px; background: var(--brand); animation: bvxCaret .8s steps(1) infinite; }
@keyframes bvxType { 0%, 8% { width: 0; } 40%, 92% { width: 14ch; } 100% { width: 0; } }
@keyframes bvxCaret { 50% { opacity: 0; } }

.bvx-roles { display: grid; gap: 6px; max-width: 280px; }
.bvx-roles > span { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; }
.bvx-roles > span small { grid-row: 2; font-size: 11.5px; color: var(--muted); }
.bvx-roles i { grid-row: span 2; width: 30px; height: 17px; border-radius: 99px; background: #dcdce3; position: relative; transition: background .3s; }
.bvx-roles i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.bvx-roles i.on { background: var(--brand); }
.bvx-roles i.on::after { left: 15px; }
.bvx-roles > span:last-child i { animation: bvxToggle 8s infinite; }
.bvx-roles > span:last-child i::after { animation: bvxKnob 8s infinite; }
@keyframes bvxToggle { 0%, 40% { background: #dcdce3; } 48%, 90% { background: var(--brand); } 100% { background: #dcdce3; } }
@keyframes bvxKnob { 0%, 40% { left: 2px; } 48%, 90% { left: 15px; } 100% { left: 2px; } }

.bvx-bars { display: grid; gap: 10px; max-width: 280px; }
.bvx-bars > span { display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.bvx-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand), #b3a9f5); transform-origin: bottom; animation: bvxBar 8s infinite; animation-delay: calc(var(--k) * .08s); }
.bvx-bars i:nth-last-child(2) { background: linear-gradient(180deg, #f2b705, #ffe28a); }
@keyframes bvxBar { 0% { transform: scaleY(0); } 14%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

.bvx-review { display: grid; gap: 6px; max-width: 280px; }
.bvx-review__stars { font-size: 17px; letter-spacing: 2px; color: #f2b705; background: linear-gradient(90deg, #f2b705 50%, #dcdce3 50%) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bvxStars 8s infinite; }
.bvx-review small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.bvx-review small .ico { width: 14px; height: 14px; }
@keyframes bvxStars { 0%, 6% { background-position: 100% 0; } 30%, 92% { background-position: 0 0; } 100% { background-position: 100% 0; } }

.vx-ico { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: #fff; color: var(--brand); box-shadow: 0 18px 34px -24px rgba(59, 42, 158, .6); }
.vx-ico .ico { width: 38px; height: 38px; }

/* ── Satış: koyu zeminde yolculuk (teklif → ödeme → kargo). Sayfadaki tek koyu bölüm; durakları bir çizgi ve üzerinde akan
   ışık bağlar. ── */
.fx--flow { background: #0f0e17; color: #fff; }
.fx--flow::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(108, 92, 231, .35), transparent 62%); pointer-events: none; }
.fx--flow .fx__no { -webkit-text-stroke-color: rgba(255, 255, 255, .08); }
.fx--flow .fx__title { color: #fff; }
.fx--flow .fx__lead { color: #c4c3d4; }
.fx--flow .make__eyebrow { color: #b9b0ff; }
.fxflow { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; list-style: none; }
.fxflow::before, .fxflow::after { content: ''; position: absolute; top: calc(clamp(210px, 19vw, 250px) + 22px); left: 6px; right: 6px; height: 2px; border-radius: 2px; }
.fxflow::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 14px); }
.fxflow::after { background: linear-gradient(90deg, transparent, #b9b0ff 45%, #fff 50%, transparent 56%) -60% 0 / 60% 100% no-repeat; animation: fxRun 4.5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes fxRun { to { background-position: 160% 0; } }
.fxflow__step { position: relative; display: flex; flex-direction: column; }
.fxflow__vis { display: grid; place-items: center; height: clamp(210px, 19vw, 250px); padding: clamp(14px, 1.6vw, 22px); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); transition: border-color .3s, transform .4s var(--ease); }
.fxflow__step:hover .fxflow__vis { border-color: rgba(185, 176, 255, .45); transform: translateY(-4px); }
.fxflow__stop { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 12px; padding: 5px 13px 5px 6px; border-radius: 999px; background: #0f0e17; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fxflow__stop i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(108, 92, 231, .3); }
.fxflow__step h3 { margin-top: 16px; font-size: clamp(1.2rem, 1.55vw, 1.45rem); font-weight: 700; color: #fff; }
.fxflow__step p { margin-top: 6px; line-height: 1.55; color: #c4c3d4; }
.fx--flow .fxb__pts li { background: rgba(255, 255, 255, .08); color: #e5e2ff; }
.fx--flow .bv { border-color: transparent; box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .8); }

.bvx-quote { display: grid; gap: 7px; max-width: 270px; position: relative; }
.bvx-quote__head, .bvx-track__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px dashed var(--line); }
.bvx-quote > span { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bvx-quote > span em { font-style: normal; color: #3c3f4a; }
.bvx-quote__sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 7px; border-top: 1px solid var(--line); }
.bvx-quote__sum b { font-size: 15px; }
.bvx-quote__ok { position: absolute; right: 10px; bottom: 34px; padding: 4px 10px; border: 2px solid #1f8f4e; border-radius: 7px; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1f8f4e; background: rgba(255, 255, 255, .92); rotate: -8deg; animation: bvxStamp 8s infinite; }
@keyframes bvxStamp { 0%, 40% { opacity: 0; transform: scale(1.6); } 46%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.bvx-pay { display: grid; gap: 6px; max-width: 260px; }
.bvx-pay__card { display: flex; justify-content: space-between; align-items: flex-end; height: 64px; margin-bottom: 4px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #2d2a4a, var(--brand)); color: #fff; }
.bvx-pay__card small { align-self: flex-start; font-size: 11px; opacity: .7; }
.bvx-pay__card b { font-size: 14px; letter-spacing: .08em; }
.bvx-pay__opt { display: flex; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; animation: bvxOpt 6s infinite; animation-delay: calc(var(--k) * 2s); }
.bvx-pay__opt em { font-style: normal; }
@keyframes bvxOpt { 0%, 28% { border-color: var(--brand); background: #f3f1fd; box-shadow: 0 0 0 1px var(--brand); } 34%, 100% { border-color: var(--line); background: #fff; box-shadow: none; } }

.bvx-track { display: grid; gap: 10px; max-width: 260px; }
.bvx-track ol { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bvx-track ol::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: #e6e6ec; }
.bvx-track li { position: relative; display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 700; color: #9a9da8; animation: bvxStep 8s infinite; animation-delay: calc(var(--k) * 1.2s); }
.bvx-track li i { width: 16px; height: 16px; border: 2px solid #d4d4db; border-radius: 50%; background: #fff; }
@keyframes bvxStep { 0%, 4% { color: #9a9da8; } 10%, 70% { color: var(--black); } 76%, 100% { color: #9a9da8; } }
.bvx-track li i { animation: bvxDot 8s infinite; animation-delay: inherit; }
@keyframes bvxDot { 0%, 4% { border-color: #d4d4db; background: #fff; } 10%, 70% { border-color: #1f8f4e; background: #1f8f4e; box-shadow: inset 0 0 0 2px #fff; } 76%, 100% { border-color: #d4d4db; background: #fff; } }

/* Sorular: sayfanın TEK gri zemini */
.hfaq--tint { background: var(--stage); }
.hfaq--tint .hfaq__item { background: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .fxmarq__track, .fxflow::after, .bvx-imp__bar i, .bvx-imp__done, .bvx-mail, .bvx-pop, .bvx-blocks__b, .bvx-lang__words span, .bvx-lang__tags b,
    .bvx-domain__bar b, .bvx-domain__bar em, .bvx-roles i, .bvx-roles i::after, .bvx-bars i, .bvx-review__stars, .bvx-quote__ok, .bvx-pay__opt,
    .bvx-track li, .bvx-track li i { animation: none; }
    .bvx-lang__words span:first-child, .bvx-imp__done, .bvx-quote__ok { opacity: 1; }
    .bvx-imp__bar i { width: 100%; }
    .bvx-domain__bar b { width: 14ch; }
    .bvx-review__stars { background-position: 0 0; }
}
@media (max-width: 960px) {
    .fxflow { grid-template-columns: 1fr; gap: 34px; max-width: 520px; }
    .fxflow::before, .fxflow::after { display: none; }
    .fxb .bento__big--row { flex-direction: column; }
    .fxb .bento__big--row .bento__vis { margin: 0 clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px); }
}
@media (max-width: 720px) {
    .fxb .bento__big { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .fxsum__box { grid-template-columns: 1fr; }
    .fxsum__label { justify-self: start; grid-row: auto; }
    .fx__no { font-size: 7rem; }
    .fxmarq span { padding: 7px 13px 7px 8px; font-size: 13px; }
}

/* ── Ürün & Stok: sahne (Nursel: "bu adımı değiştir, çok şık yap"). Solda yazı, sağda pastel sahnede ürün listesi + süzülen
   iki kart. Kartlar yavaşça aşağı yukarı süzülür; varyant noktaları/çipleri ana sayfadaki bv animasyonunu kullanır. ── */
.fxst { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.fxst .fx__head::before { display: none; }
.fxst__copy { order: 2; } /* görsel solda, yazı sağda (Nursel) */
.fxst__stage { order: 1; }
.fxst__feats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); }
.fxst__feat h3 { display: flex; align-items: center; gap: 10px; }
.fxst__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f3f1fd; color: var(--brand); }
.fxst__ico .ico { width: 18px; height: 18px; }
.fxst__pts { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.fxst__pts li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.4; color: #3c3f4a; }
.fxst__pts li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.fxst__feat h3 { font-size: clamp(1.08rem, 1.25vw, 1.25rem); font-weight: 700; }
.fxst__feat p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.fxst__stage { position: relative; padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 44px) clamp(48px, 5.6vw, 84px); border-radius: 36px; background: radial-gradient(90% 70% at 100% 0%, #fff1c4 0%, transparent 60%), radial-gradient(80% 80% at 0% 100%, #e3defd 0%, transparent 65%), linear-gradient(160deg, #f7f5ff, #fdfbf3); }
.fxst__win { position: relative; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .05), 0 40px 70px -40px rgba(59, 42, 158, .45); overflow: hidden; font-size: 13px; }
.fxst__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fxst__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #e3e3ea; }
.fxst__bar b { margin-left: 10px; font-size: 14px; }
.fxst__bar span { margin-left: auto; padding: 5px 11px; border-radius: 8px; background: var(--black); font-size: 11.5px; font-weight: 700; color: #fff; }
.fxst__th, .fxst__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 10px; padding: 0 16px; }
.fxst__th { padding-block: 9px; background: #fafafc; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9da8; }
.fxst__row { padding-block: 11px; border-top: 1px solid #f1f1f4; }
.fxst__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxst__name i { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.fxst__dots { display: flex; gap: 4px; }
.fxst__dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.fxst__stock { justify-self: start; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fxst__stock--ok { background: #dcf4e7; color: #11683a; }
.fxst__stock--low { background: #fff1c4; color: #7a5600; animation: fxstPulse 2.4s ease-in-out infinite; }
.fxst__stock--out { background: #fde3ec; color: #a3194f; }
.fxst__price { justify-self: end; font-weight: 700; }
@keyframes fxstPulse { 50% { box-shadow: 0 0 0 4px rgba(242, 183, 5, .18); } }
.fxst__float { position: absolute; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 15, .06), 0 30px 50px -28px rgba(59, 42, 158, .55); font-size: 13px; animation: fxstFloat 6s ease-in-out infinite; }
.fxst__float small { display: block; font-size: 11px; color: var(--muted); }
.fxst__float small + div { display: flex; gap: 6px; margin: 6px 0 10px; }
.fxst__float small + div:last-child { margin-bottom: 0; }
.fxst__float--var { left: clamp(-40px, -2.6vw, -14px); bottom: clamp(-56px, -3.6vw, -30px); } /* son satırı örtmesin: sahnenin altından taşar */
.fxst__float--imp { top: clamp(-22px, -1.6vw, -10px); right: clamp(-30px, -2vw, -12px); display: flex; align-items: center; gap: 12px; animation-delay: -3s; }
.fxst__float--imp > i { display: grid; place-items: center; width: 38px; height: 44px; border-radius: 8px; background: #1f8f4e; font-size: 10px; font-style: normal; font-weight: 800; color: #fff; }
.fxst__float--imp span { display: grid; gap: 2px; }
.fxst__float--imp em { display: block; width: 150px; height: 5px; margin-top: 5px; border-radius: 99px; background: #eeeef2; overflow: hidden; }
.fxst__float--imp u { display: block; height: 100%; background: #1f8f4e; animation: bvxFill 8s infinite; }
@keyframes fxstFloat { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fxst__float, .fxst__stock--low, .fxst__float--imp u { animation: none; } .fxst__float--imp u { width: 100%; } }
@media (max-width: 960px) {
    .fxst { grid-template-columns: 1fr; }
    .fxst__copy { order: 1; }
    .fxst__stage { order: 2; }
    .fxst__stage { margin-top: 8px; }
}
@media (max-width: 620px) {
    .fxst__stage { padding: 56px 12px 28px; border-radius: 26px; }
    .fxst__th, .fxst__row { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, .8fr); }
    .fxst__th span:nth-child(2), .fxst__dots { display: none; }
    .fxst__feats { grid-template-columns: 1fr; }
    .fxst__float--var { display: none; } /* telefonda listeyi örtüyordu */
    .fxst__float--imp { right: 8px; top: -20px; }
    .fxst__float--imp em { width: 110px; }
}

/* ── Ürün & Stok: ana sayfadaki 3 kutulu düzen (Nursel). .bento__big--row / --tall ana sayfanın sınıfları; burada yalnız
   uzun karttaki stok listesi. ── */
.fxtrio { margin-inline: auto; }
.fxtrio .bento__big--tall .bento__vis { align-items: stretch; }
.fxtrio__stock { display: grid; align-content: start; gap: 0; max-width: 100%; padding: 14px 16px 8px; }
.fxtrio__stock > small { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fxtrio__row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f0f0f3; }
.fxtrio__row:last-child { border-bottom: 0; }
.fxtrio__row > i { flex: none; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #f1f1f4, #e2e3e9); box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .04); }
.fxtrio__row > span { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fxtrio__row b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxtrio__row u { position: relative; display: block; height: 3px; border-radius: 3px; background: #eeeef2; overflow: hidden; }
.fxtrio__row u::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--black); }
.fxtrio__row em { flex: none; display: grid; justify-items: end; gap: 2px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
.fxtrio__row em small { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b7791f; }
.fxtrio__row em small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e0a526; box-shadow: 0 0 0 3px rgba(224, 165, 38, .18); }
.fxtrio__row--low u::after { background: #e0a526; }
.fxtrio__row--out em { color: #9a9da8; font-weight: 400; }
.fxtrio__row--out b { color: #9a9da8; }
/* Ürün & Stok: başlık solda, açıklama sağda (Nursel); bento ile aynı genişlikte */
.fx__intro--split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; max-width: 1120px; margin-inline: auto; }
.fx__intro--split .fx__head::before { display: none; }
.fx__intro--split .fx__lead { margin-top: 0; }
@media (max-width: 860px) { .fx__intro--split { grid-template-columns: 1fr; } }
/* Ürün yönetimi kartının zemini üstteki "Kısaca" kutusunun mor→krem geçişine çok yakındı (Nursel): mavi→nane geçişi */
.fxtrio .bento__big--tint { background: linear-gradient(135deg, #eef0f3 0%, #eceef2 50%, #e9e6f6 100%); } /* ağırlıkla gri, uçta az mor (Nursel: "morlu grili, moru az") */
.fxtrio .bento__big--tint .bento__vis { background: rgba(255, 255, 255, .6); }
/* Kayan şerit hapları şeffaf, buzlu cam (Nursel: "şeffaf, daha şık"): gölge ve dolu ikon dairesi yok; bandın arkasında
   hafif mor-krem ışık, cam etkisi görünsün diye */
.fxmarq-band { position: relative; overflow: hidden; }
.fxmarq-band::before { content: ''; position: absolute; inset: 10% 15%; background: radial-gradient(50% 120% at 30% 50%, rgba(108, 92, 231, .14), transparent 70%), radial-gradient(40% 120% at 75% 50%, rgba(242, 183, 5, .12), transparent 70%); filter: blur(10px); pointer-events: none; }
.fxmarq-band .fxmarq span { border-color: rgba(108, 92, 231, .16); background: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; font-weight: 600; color: #3c3f4a; }
.fxmarq-band .fxmarq span .ico { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: var(--brand); }
/* Satış durakları ferahladı (Nursel: "çok bitişik, düzen ver"): sütun arası, görsel–durak–başlık–metin–liste aralıkları
   açıldı; madde hapları yerine noktalı sade liste. Kesik çizgi durak etiketinin ortasından geçer. */
.fxflow { column-gap: clamp(28px, 3.6vw, 60px); }
.fxflow::before, .fxflow::after { top: calc(clamp(210px, 19vw, 250px) + 22px + 14px); }
.fxflow__stop { margin-top: 22px; }
.fxflow__step h3 { margin-top: 22px; }
.fxflow__step p { margin-top: 10px; max-width: 34ch; }
.fx--flow .fxb__pts { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fx--flow .fxb__pts li { padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 400; line-height: 1.4; color: #d5d4e2; align-items: flex-start; }
.fx--flow .fxb__pts svg { margin-top: 1px; color: #b9b0ff; }
/* Stok yönetimi örneği 2. tur (Nursel: "daha şık"): başlık + sekmeler, ürün simgeli nötr görsel, SKU, çubuk dolarak gelir */
.fxtrio__stock { padding: 0 0 6px; overflow: hidden; }
.fxtrio__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f0f0f3; background: #fcfcfd; }
.fxtrio__top > b { font-size: 13px; }
.fxtrio__tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #f1f1f4; }
.fxtrio__tabs i { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; font-size: 11px; font-style: normal; font-weight: 700; color: #6b6e7a; white-space: nowrap; }
.fxtrio__tabs i.is-on { background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .08); }
.fxtrio__tabs u { min-width: 16px; padding: 0 4px; border-radius: 99px; background: #fff; font-size: 10px; text-decoration: none; text-align: center; color: #6b6e7a; }
.fxtrio__stock .fxtrio__row { margin: 0 14px; padding: 10px 0; }
.fxtrio__row > i { display: grid; place-items: center; color: #a3a6b1; }
.fxtrio__row > i .ico { width: 15px; height: 15px; }
.fxtrio__row b { display: flex; align-items: baseline; gap: 7px; }
.fxtrio__row b small { font-size: 10.5px; font-weight: 400; letter-spacing: .02em; color: #9a9da8; }
.fxtrio__row u::after { animation: fxtrioBar 8s var(--ease) infinite; animation-delay: calc(var(--k, 0) * .08s); }
@keyframes fxtrioBar { 0% { width: 0; } 18%, 92% { width: var(--v); } 100% { width: 0; } }
@media (prefers-reduced-motion: reduce) { .fxtrio__row u::after { animation: none; } }

/* ═════ ÖZELLİKLER — GRUPLARIN ELDEN GEÇİRİLMESİ (08.10.2026, Nursel: "hepsini elden geçir") ═════
   Bütün grup başlıkları ince ve "başlık solda / açıklama sağda" (partials/feature-intro). Pazarlama koyu Satış'tan daha
   ayrık. Kart örnekleri aynı sade dilde: üstte küçük gri başlık, nötr renk, vurgu yalnız mor/durum renginde. */
.fx__title { font-weight: 400; }
.fx.fx--flow + .fx { padding-top: clamp(88px, 10vw, 160px); }
.fxb .bento__big--tint, .fxtrio .bento__big--tint { background: linear-gradient(135deg, #eef0f3 0%, #eceef2 50%, #e9e6f6 100%); }
.fxb .bento__big--tint .bento__vis, .fxtrio .bento__big--tint .bento__vis { background: rgba(255, 255, 255, .6); }
.fx .bento__vis { background: #f6f6f8; }
.fx .bento__ico { background: #f3f1fd; color: var(--brand); }
.fx .bento__big--tint .bento__ico { background: #fff; }
.fx .bv { border-color: #ececf0; box-shadow: 0 1px 2px rgba(11, 11, 15, .03), 0 18px 34px -26px rgba(59, 42, 158, .35); }
.bvx-cap { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9da8; }

/* Kupon */
.fx .bv--coupon { gap: 10px; padding: 14px 16px 16px; }
.fx .bv__ticket { border: 1px dashed #cfd0d8; border-radius: 10px; background: #fafafc; }
.fx .bv__ticket strong { border-right-color: #cfd0d8; font-size: 13px; letter-spacing: .1em; }
.fx .bv__ticket span { color: var(--brand); }
.fx .bv__sum { padding-top: 10px; border-top: 1px solid #f0f0f3; }

/* Hatırlatma e-postası */
.bvx-mail { padding: 14px 16px 16px; }
.bvx-mail__from { display: flex; align-items: center; gap: 9px; }
.bvx-mail__from i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--black); font-size: 11px; font-style: normal; font-weight: 800; color: #fff; }
.bvx-mail__from span { display: grid; line-height: 1.2; }
.bvx-mail__from b { font-size: 12.5px; }
.bvx-mail__from small { font-size: 11px; color: #9a9da8; }
.bvx-mail__item { background: #fafafc; border: 1px solid #f0f0f3; }
.bvx-mail__item i { display: grid; place-items: center; background: linear-gradient(135deg, #f1f1f4, #e2e3e9) !important; color: #a3a6b1; }
.bvx-mail__item i .ico { width: 16px; height: 16px; }
.bvx-mail__item u { font-size: 12px; font-weight: 700; text-decoration: none; }

/* Popup */
.bvx-pop { padding: 16px; }
.bvx-pop i { background: #fafafc; }

/* Bölüm sırası */
.bvx-blocks { padding: 14px 16px 16px; }
.bvx-blocks__b { border-color: #ececf0; background: #fff; }

/* Dil ve para birimi: diller gri zeminde sekme, para birimleri ince ayraçlı satır */
.bvx-lang { padding: 14px 16px 16px; }
.bvx-lang__tags { gap: 2px; justify-self: center; padding: 3px; border-radius: 9px; background: #f1f1f4; }
.bvx-lang__tags b { padding: 4px 11px; border: 0; border-radius: 7px; font-size: 11px; color: #6b6e7a; animation-name: bvxSeg; }
@keyframes bvxSeg { 0%, 22% { background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .1); } 28%, 100% { background: transparent; color: #6b6e7a; box-shadow: none; } }
.bvx-lang__cur { align-items: center; gap: 10px; }
.bvx-lang__cur span { padding: 0; background: none; font-size: 12.5px; color: #3c3f4a; }
.bvx-lang__cur i { width: 3px; height: 3px; border-radius: 50%; background: #c6c8cf; }

/* Alan adı */
.bvx-domain { padding: 14px 16px 16px; }
.bvx-domain__bar { background: #f4f4f7; }
.bvx-domain__ok { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; color: #3c3f4a; }
.bvx-domain__ok i { width: 7px; height: 7px; border-radius: 50%; background: #1f8f4e; box-shadow: 0 0 0 3px rgba(31, 143, 78, .16); }

/* Roller */
.bvx-roles { padding: 14px 16px 16px; }
.bvx-roles > span { border-color: #ececf0; }

/* Rapor: gri çubuklar, bugün mor */
.bvx-bars { padding: 14px 16px 16px; }
.bvx-bars__top { display: flex; align-items: baseline; justify-content: space-between; }
.bvx-bars__top b { font-size: 15px; }
.bvx-bars i { background: #e4e5ea; }
.bvx-bars i:nth-last-child(2) { background: var(--brand); }

/* Yorum */
.bvx-review { padding: 14px 16px 16px; }
.bvx-review__who { display: flex; align-items: center; gap: 9px; }
.bvx-review__who > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f3f1fd; font-size: 10.5px; font-style: normal; font-weight: 800; color: var(--brand); }
.bvx-review__who > span { display: grid; flex: 1; line-height: 1.2; }
.bvx-review__who b { font-size: 12.5px; }
.bvx-review__who small { font-size: 10.5px; color: #1f8f4e; }
.bvx-review__who em { font-style: normal; font-size: 13px; letter-spacing: 1px; }

/* Mobil uyumlu temalar: bilgisayar + telefon */
.bvx-dev { position: relative; width: 100%; max-width: 330px; height: 150px; }
.bvx-dev__lap { position: absolute; left: 0; top: 6px; width: 78%; height: 128px; padding: 8px; border: 1px solid #ececf0; border-radius: 12px; background: #fff; box-shadow: 0 18px 34px -26px rgba(59, 42, 158, .35); display: grid; grid-template-rows: auto 44px 1fr; gap: 6px; }
.bvx-dev__bar { display: flex; gap: 4px; }
.bvx-dev__bar i { width: 6px; height: 6px; border-radius: 50%; background: #e3e3ea; }
.bvx-dev__hero { border-radius: 7px; background: linear-gradient(120deg, #2d2a4a, var(--brand)); }
.bvx-dev__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bvx-dev__grid i { border-radius: 5px; background: #f1f1f4; }
.bvx-dev__ph { position: absolute; right: 0; bottom: 0; width: 34%; height: 140px; padding: 14px 6px 6px; border: 1px solid #ececf0; border-radius: 16px; background: #fff; box-shadow: 0 22px 40px -24px rgba(59, 42, 158, .55); display: grid; grid-template-rows: 46px 1fr; gap: 5px; animation: fxstFloat 6s ease-in-out infinite; }
.bvx-dev__notch { position: absolute; top: 5px; left: 50%; width: 22px; height: 4px; margin-left: -11px; border-radius: 4px; background: #e3e3ea; }
.bvx-dev__ph .bvx-dev__grid { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .bvx-dev__ph { animation: none; } }
/* Kartlardaki madde hapları yerine sade, tikli liste (Nursel: "kartlar daha şık") */
.fxb .fxb__pts { display: grid; gap: 7px; margin-top: 16px; }
.fxb .fxb__pts li { padding: 0; border-radius: 0; background: none; font-size: 13.5px; font-weight: 400; color: #3c3f4a; }
.fxb .fxb__pts svg { color: var(--brand); }
/* Pazarlama → Kampanya ve kupon ve Yönetim → Personel ve yetkiler kartları sarı → mor geçiş (Nursel); diğerlerinde gri → az mor */
#grup-pazarlama .bento__big--tint, #grup-yonetim .bento__big--tint { background: linear-gradient(135deg, #fff6dc 0%, #f6efe9 45%, #ebe5fb 100%); }
/* Dil ve alan adı örnekleri renkli (Nursel: "renklilik olsun") */
.bvx-lang__words span { color: var(--c); }
.bvx-lang__tags b { animation-name: bvxSegC; }
.bvx-lang__tags b::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
@keyframes bvxSegC { 0%, 22% { background: var(--c); color: #fff; box-shadow: 0 4px 10px -4px var(--c); } 28%, 100% { background: transparent; color: #6b6e7a; box-shadow: none; } }
.bvx-lang__tags b { --c: var(--brand); }
@keyframes bvxSegDot { 0%, 22% { background: #fff; } }
.bvx-lang__tags b::before { animation: bvxSegDot 8s infinite; animation-delay: inherit; }
.bvx-lang__cur { gap: 6px; }
.bvx-lang__cur span { padding: 3px 9px; border-radius: 7px; background: color-mix(in srgb, var(--c) 12%, #fff); font-weight: 700; color: var(--c); }
.bvx-domain__bar > i:nth-child(1) { background: #ff5f57; }
.bvx-domain__bar > i:nth-child(2) { background: #febc2e; }
.bvx-domain__bar > i:nth-child(3) { background: #28c840; }
.bvx-domain__bar b { background: linear-gradient(90deg, #6c5ce7, #e05297); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bvx-domain__site { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 38px auto; gap: 6px; padding: 8px; border: 1px solid #ececf0; border-radius: 10px; text-align: left; animation: bvxShow 8s infinite; }
.bvx-domain__logo { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: -.01em; background: linear-gradient(90deg, #6c5ce7, #e05297); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bvx-domain__hero { grid-column: 1 / -1; border-radius: 7px; background: linear-gradient(120deg, #6c5ce7 0%, #e05297 55%, #f2b705 100%); }
.bvx-domain__tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bvx-domain__tiles i { height: 18px; border-radius: 5px; background: #f3f1fd; }
.bvx-domain__tiles i:nth-child(2) { background: #fde3ec; }
.bvx-domain__tiles i:nth-child(3) { background: #fff1c4; }
@media (prefers-reduced-motion: reduce) { .bvx-domain__site { animation: none; opacity: 1; } .bvx-lang__tags b::before { animation: none; } }
/* Ara söz: Yönetim'den sonra tam genişlik gri bant, ortada büyük tek cümle (Nursel) */
.fxsay { position: relative; overflow: hidden; padding: clamp(44px, 5.4vw, 80px) 0; background: linear-gradient(120deg, #f6f6f9 0%, #f3f2f8 50%, #f7f5f0 100%); } /* daha açık, sıcak gri (Nursel: "bu gri olmasa") */
.fxsay::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70vw; height: 40vw; translate: -50% -50%; background: radial-gradient(closest-side, rgba(108, 92, 231, .1), transparent); pointer-events: none; }
.fxsay__text { position: relative; max-width: 32em; margin-inline: auto; font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; text-align: center; text-wrap: balance; color: var(--black); }
.fxsay__text em { display: block; font-style: normal; font-weight: 700; color: var(--brand); }
/* Dil örneği hafifletildi (Nursel: "çok kalın, aşırı renkli"): selam yarı kalın ve renk yumuşak; seçili sekme beyaz zemin + renkli
   nokta (dolu renk yok); para birimleri sade yazı + küçük renkli nokta */
.bvx-lang__words span { font-size: 21px; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #1c1d21); }
@keyframes bvxSegC { 0%, 22% { background: #fff; color: var(--black); box-shadow: 0 1px 2px rgba(11, 11, 15, .1); } 28%, 100% { background: transparent; color: #6b6e7a; box-shadow: none; } }
.bvx-lang__tags b::before { animation: none; opacity: .85; }
.bvx-lang__cur span { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; font-weight: 400; color: #3c3f4a; }
.bvx-lang__cur span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c); opacity: .8; }
/* Fiyatlar: seçili olmayan düğme (Yıllık seçiliyken "Aylık") biraz daha belirgin (Nursel): koyu yazı + çok hafif zemin, üstüne gelince koyulaşır */
.cycle button:not(.is-on) { color: var(--black); background: rgba(11, 11, 15, .04); }
.cycle button:not(.is-on):hover { background: rgba(11, 11, 15, .08); }

/* ═════ POLİTİKA SAYFALARI (08.10.2026, Nursel: "politikalar için güzel bir sayfa") ═════
   Kısa üst alan + solda yapışkan menü (politikalar, bu sayfadaki başlıklar, yardım kutusu) + sağda okunaklı metin. */
.lghero { position: relative; padding: clamp(22px, 3vw, 44px) 0 clamp(28px, 3.4vw, 48px); overflow-x: clip; border-bottom: 1px solid var(--line); }
.lghero > .wrap { position: relative; z-index: 1; }
.lghero__row { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(14px, 1.6vw, 22px); }
.lghero__ico { flex: none; display: grid; place-items: center; width: clamp(48px, 4.4vw, 60px); height: clamp(48px, 4.4vw, 60px); border-radius: 16px; background: #f3f1fd; color: var(--brand); }
.lghero__ico .ico { width: 50%; height: 50%; }
.lghero__title { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
.lghero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.lghero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.lghero__meta .ico { width: 17px; height: 17px; color: var(--brand); }

.lg { padding: clamp(36px, 4.4vw, 72px) 0 clamp(64px, 8vw, 120px); }
.lg__grid { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.lg__side { position: sticky; top: calc(var(--hdr-h, 72px) + 24px); display: grid; gap: 24px; }
.lg__cap { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9da8; }
.lg__docs ul, .lg__toc ol { margin: 0; padding: 0; list-style: none; }
.lg__docs a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: #3c3f4a; transition: background-color .25s ease, color .25s ease; }
.lg__docs a .ico { flex: none; width: 18px; height: 18px; color: #9a9da8; transition: color .25s ease; }
.lg__docs a:hover { background: #f6f6f8; color: var(--black); }
.lg__docs a.is-on { background: #f3f1fd; color: var(--brand); }
.lg__docs a.is-on .ico { color: var(--brand); }
.lg__toc { padding-top: 22px; border-top: 1px solid var(--line); }
.lg__toc ol { display: grid; gap: 2px; border-left: 2px solid #ececf0; }
.lg__toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--muted); transition: color .25s ease, border-color .25s ease; }
.lg__toc li.is-sub a { padding-left: 26px; font-size: 13px; }
.lg__toc a:hover { color: var(--black); }
.lg__toc a.is-on { border-left-color: var(--brand); color: var(--brand); font-weight: 700; }
.lg__help { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #f3f1fd 0%, #fbf8ef 100%); }
.lg__help b { font-size: 15px; }
.lg__help p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lg__help a { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--black); }
.lg__help a svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.lg__help a:hover svg { transform: translateX(4px); }
.lg__help span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #3c3f4a; }
.lg__help span .ico { width: 15px; height: 15px; color: var(--brand); }

/* Metin: okunaklı satır uzunluğu, başlıklar ince çizgiyle ayrılır, liste işaretleri mor */
.lg__doc { max-width: 46em; font-size: clamp(1rem, 1.08vw, 1.06rem); line-height: 1.75; color: #3c3f4a; }
.lg__doc > :first-child { margin-top: 0; }
.lg__doc h2, .lg__doc h3 { scroll-margin-top: calc(var(--hdr-h, 72px) + 24px); color: var(--black); line-height: 1.25; letter-spacing: -.01em; }
.lg__doc h2 { margin-top: 2.2em; font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 700; }
.lg__doc h3 { margin-top: 2em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: clamp(1.12rem, 1.4vw, 1.28rem); font-weight: 700; }
.lg__doc > h3:first-child, .lg__doc > h2:first-child { padding-top: 0; border-top: 0; }
.lg__doc strong { color: var(--black); }
.lg__doc ul { padding-left: 0; list-style: none; }
.lg__doc ul li { position: relative; padding-left: 22px; }
.lg__doc ul li + li { margin-top: .45em; }
.lg__doc ul li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .75; }
.lg__doc a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
    .lg__grid { grid-template-columns: minmax(0, 1fr); } /* 1fr değil: yatay haplar sütunu genişletip metni taşırıyordu */
    .lg__side { position: static; }
    .lg__toc, .lg__help { display: none; }
    .lg__docs ul { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .lg__docs a { white-space: nowrap; border: 1px solid var(--line); }
    .lg__docs a.is-on { border-color: transparent; }
    .lg__cap { display: none; }
}

/* ═════ ÇÖZÜM SAYFASI: KAMPANYA SİHİRBAZI — 2. tur (08.10.2026, Nursel: "daha şık, çok farklı") ═════
   Koyu afiş üst alan (dönen kampanya cümlesi + aynı anda değişen ürün kartı) → afiş duvarı (9 kurgu, dönen karolar) →
   kampanyanın yolculuğu (yatay zaman çizgisi) → sorular (gri) → diğer çözümler → son çağrı. */
.kp { position: relative; overflow: hidden; margin: 0 clamp(8px, 1vw, 16px); border-radius: clamp(20px, 2.4vw, 36px); padding: clamp(28px, 4vw, 64px) 0 clamp(64px, 8vw, 120px); background: #0f0e17; color: #fff; }
.kp__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.kp__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.kp__crumb, .kp__crumb a { color: rgba(255, 255, 255, .55); }
.kp__crumb a:hover { color: #fff; }
.kp__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; color: #fff; }
.kp__title em { display: block; font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kp__say { display: grid; gap: 6px; margin-top: clamp(20px, 2.4vw, 30px); }
.kp__say-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.kp__say-words { position: relative; display: block; height: 1.25em; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
.kp__say-words b { position: absolute; inset: 0; white-space: nowrap; color: #ffd75e; opacity: 0; animation: kpWord 15s infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes kpWord { 0% { opacity: 0; transform: translateY(.5em); filter: blur(4px); } 3%, 17% { opacity: 1; transform: none; filter: none; } 20%, 100% { opacity: 0; transform: translateY(-.5em); filter: blur(4px); } }
.kp__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.kp__text b { color: #fff; }
.kp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(24px, 2.8vw, 34px); }
.kp__link { font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 5px; }
.kp__link:hover { text-decoration-color: #ffd75e; }

.kp__stage { position: relative; display: grid; place-items: center; min-height: clamp(380px, 34vw, 460px); }
.kp__stage::before { content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); animation: kpSpin 40s linear infinite; }
@keyframes kpSpin { to { rotate: 360deg; } }
.kp__card { grid-area: 1 / 1; width: min(300px, 76%); border-radius: 24px; background: #fff; color: var(--black); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; animation: kpCard 15s infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes kpCard { 0% { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.96); } 3%, 17% { opacity: 1; transform: rotate(-2deg); } 20%, 100% { opacity: 0; transform: translateY(-14px) rotate(2deg) scale(.97); } }
.kp__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 10px; border-radius: 16px; color: rgba(11, 11, 15, .25); }
.kp__img > .ico { width: 64px; height: 64px; }
.kp__badge { position: absolute; top: 12px; left: 12px; padding: 7px 12px; border-radius: 10px; background: var(--black); font-size: 13px; font-weight: 800; color: #ffd75e; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); rotate: -4deg; }
.kp__body { display: grid; gap: 2px; padding: 4px 18px 18px; }
.kp__body b { font-size: 16px; }
.kp__body small { font-size: 12.5px; color: var(--muted); }
.kp__price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.kp__price s { font-size: 14px; color: #9a9da8; }
.kp__price strong { font-size: 24px; font-weight: 800; color: var(--brand); }
.kp__add { margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--black); font-size: 13px; font-style: normal; font-weight: 700; text-align: center; color: #fff; }
.kp__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; color: #fff; animation: fxstFloat 6s ease-in-out infinite; }
.kp__chip .ico { width: 16px; height: 16px; color: #ffd75e; }
.kp__chip--a { top: 0; right: 2%; z-index: 2; }
.kp__chip--b { bottom: 0; left: 2%; z-index: 2; animation-delay: -3s; }

@media (prefers-reduced-motion: reduce) {
    .kp__say-words b, .kp__card { animation: none; }
    .kp__say-words b:first-child, .kp__card:first-of-type { opacity: 1; }
    .kp__stage::before, .kp__chip { animation: none; }
}
@media (max-width: 960px) {
    .kp__grid { grid-template-columns: minmax(0, 1fr); }
    .kp__stage { min-height: 400px; }
}
@media (max-width: 480px) {
    .kp__chip { display: none; }
}

/* Kampanya kartında telifsiz ürün fotoğrafı (Nursel) */
.kp__img { overflow: hidden; background: #f1f1f4; }
.kp__img img { width: 100%; height: 100%; object-fit: cover; }
/* Koyu afişteki düğmeler sitenin genel düğmeleri (btn--dark btn--brand / btn--line; yükselen dolgu) — koyu zeminde kaybolmasınlar
   diye dolgu beyaz, yazı siyaha döner; çerçeveli düğme şeffaf + beyaz çerçeve (Nursel: "hover'lar sitenin genelindeki gibi") */
.kp .btn--brand::before { background: #fff; }
.kp .btn--brand:hover, .kp .btn--brand:focus-visible { color: var(--black); }
.kp .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.kp .btn--line::before { background: #fff; }
.kp .btn--line:hover, .kp .btn--line:focus-visible { color: var(--black); border-color: #fff; }
/* Koyu afiş tam ekran genişliğinde, köşesiz (Nursel: önce "üst köşe düz", sonra "tam ekran, sağ sol kesmesin") */
.kp { margin: 0; border-radius: 0; }
/* Kartın arkasındaki dönen halka daha belirgin (Nursel): kalın kesik çizgi + ters dönen iç halka, üzerinde sarı ve mor nokta */
.kp__stage::before { border: 1.5px dashed rgba(255, 255, 255, .34); }
.kp__stage::after { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(185, 176, 255, .35); background: radial-gradient(circle at 50% 0, #ffd75e 0 5px, transparent 6px), radial-gradient(circle at 50% 100%, #b9b0ff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .kp__stage::after { animation: none; } }
.kp__card { position: relative; z-index: 1; } /* halkaların üstünde kalsın */
.kp__stage::before { width: min(540px, 98%); border: 2px dashed rgba(255, 255, 255, .42); }
.kp__stage::after { width: min(430px, 82%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); }

/* DİĞER ÇÖZÜMLER — 2. biçim (09.10.2026, Nursel: dizin "SSS alanına benzedi"). Başlık üstte; 4 sütunlu ızgara, hücreler arası
   ince dikey/yatay çizgi, kutu ve zemin yok. Üzerine gelince hücre açık lila olur, ikon ve ok mora döner, ok sağa kayar.
   Son hücre mor "Bütün özellikler" çağrısı (çözüm sayısı 4'ün katı değilse boşluğu doldurur). */
.kidx { padding: clamp(64px, 8vw, 128px) 0 clamp(32px, 4vw, 64px); }
.kidx__head { max-width: 640px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.kidx__head h2 { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.kidx__head h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.kidx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kidx__grid > li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kidx__grid a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(220px, 20vw, 260px); padding: clamp(20px, 2.2vw, 30px); transition: background .4s ease; }
.kidx__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f3f1fd; color: var(--brand); transition: background .4s ease, color .4s ease; }
.kidx__ico .ico { width: 22px; height: 22px; }
.kidx__grid a > b { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(1.15rem, 1.45vw, 1.4rem); font-weight: 400; line-height: 1.2; color: var(--black); }
.kidx__grid a > small { margin-top: 6px; font-size: clamp(.88rem, .95vw, .96rem); line-height: 1.5; color: var(--muted); }
.kidx__go { margin-top: auto; padding-top: 18px; color: #b0b3bc; transition: color .4s ease, transform .5s var(--ease); }
.kidx__go svg { width: 22px; height: 22px; }
.kidx__grid a:hover, .kidx__grid a:focus-visible { background: #f7f6fe; }
.kidx__grid a:hover .kidx__ico, .kidx__grid a:focus-visible .kidx__ico { background: var(--brand); color: #fff; }
.kidx__grid a:hover .kidx__go, .kidx__grid a:focus-visible .kidx__go { color: var(--brand); transform: translateX(6px); }
/* Son hücre: mor çağrı */
.kidx__grid > li.kidx__all { grid-column: span var(--rest, 1); }
.kidx__all a { justify-content: space-between; background: var(--brand); color: #fff; }
.kidx__all a > b { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.55rem); line-height: 1.25; color: #fff; }
.kidx__all a > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.kidx__all a > span svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.kidx__all a:hover, .kidx__all a:focus-visible { background: #5b4bd6; }
.kidx__all a:hover > span svg { transform: translateX(6px); }
@media (max-width: 960px) { .kidx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kidx__grid > li.kidx__all { grid-column: span var(--rest2, 1); } }
@media (max-width: 520px) { .kidx__grid > li.kidx__all { grid-column: span var(--rest2, 1); } }
@media (max-width: 520px) { .kidx__grid { grid-template-columns: minmax(0, 1fr); } .kidx__grid a { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .kidx__grid a, .kidx__go, .kidx__ico { transition: none; } }

/* Kampanya Sihirbazı bandı (ana sayfadaki ödeme bandının sınıflarıyla) */
.kband p { max-width: 620px; }

/* KAMPANYA SİHİRBAZI — dokuz kurgu kartları, 4. tur (09.10.2026, Nursel: "önceki kartlar güzeldi ama siteye uygun olmalı").
   Dönen kart fikri korundu; renkler sitenin: ön yüzde ana sayfadaki görsel karelerinin pastel zemini (üç ton sırayla),
   siyah ince büyük sembol (başlıklar gibi 400), mor küçük grup etiketi; arka yüz beyaz, ince çizgili, yumuşak gölgeli. */
.kwall { padding: clamp(72px, 9vw, 140px) 0 clamp(40px, 5vw, 80px); }
.kwall__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(16px, 4vw, 64px); margin-bottom: clamp(28px, 3.4vw, 52px); }
.kwall__head h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; letter-spacing: .003em; }
.kwall__head .make__lead { max-width: 30em; margin: 0; color: #3d3f48; }
.kwall__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 22vw, 290px); grid-auto-flow: dense; gap: clamp(12px, 1.4vw, 20px); }
.kwall__tile.is-wide { grid-column: span 2; }
.kwall__tile { perspective: 1400px; }
.kwall__flip { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.kwall__tile:hover .kwall__flip, .kwall__flip.is-flip { transform: rotateY(180deg); }
.kwall__front, .kwall__back { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px); border-radius: clamp(14px, 1.7vw, 22px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kwall__front { overflow: hidden; }
/* Zeminler sitenin paletinden: siyah (üst alan ve düğmeler), mor (--brand), sarı işaret kalemi (--mark), çerçeveli beyaz,
   sahne grisi (--stage), açık mor (--brand-soft) ve ana sayfa görsel karelerinin pastelleri. Koyu zeminde yazı beyaz. */
.kwall__tile--ink .kwall__front { background: var(--black); color: #fff; }
.kwall__tile--ink .kwall__glyph, .kwall__tile--ink .kwall__name { color: #fff; }
.kwall__tile--ink .kwall__group { color: var(--mark); }
.kwall__tile--ink .kwall__glyph { color: var(--mark); }
.kwall__tile--brand .kwall__front { background: var(--brand); }
.kwall__tile--brand .kwall__glyph, .kwall__tile--brand .kwall__name { color: #fff; }
.kwall__tile--brand .kwall__group { color: rgba(255, 255, 255, .72); }
.kwall__tile--mark .kwall__front { background: var(--mark); }
.kwall__tile--mark .kwall__group { color: var(--black); opacity: .62; }
.kwall__tile--line .kwall__front { background: #fff; border: 1.5px solid var(--black); }
.kwall__tile--line .kwall__glyph { color: var(--brand); }
.kwall__tile--stage .kwall__front { background: var(--stage); }
.kwall__tile--lilac .kwall__front { background: var(--brand-soft); }
.kwall__tile--lilac .kwall__group { color: #4a3cc4; }
.kwall__tile--pastel .kwall__front { background: linear-gradient(200deg, #fff3c9 0%, #fbe9f1 52%, #e7e6f8 100%); }
.kwall__tile--peach .kwall__front { background: linear-gradient(135deg, #fdf0e4 0%, #fbe9f1 50%, #e7e6f8 100%); }
.kwall__tile--ink .kwall__lede { color: rgba(255, 255, 255, .7); }
/* Geniş kart: sembol solda, açıklama sağda; büyük boşluk kalmasın */
.kwall__tile.is-wide .kwall__front { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(16px, 2.4vw, 40px); }
.kwall__tile.is-wide .kwall__group, .kwall__tile.is-wide .kwall__foot { grid-column: 1 / -1; }
.kwall__tile.is-wide .kwall__glyph { font-size: clamp(3.2rem, 6.4vw, 5.8rem); }
.kwall__tile.is-wide .kwall__glyph .ico { width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); }
.kwall__lede { align-self: center; max-width: 24em; font-size: clamp(.92rem, 1vw, 1.02rem); line-height: 1.5; color: #3d3f48; }
.kwall__group { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.kwall__glyph { flex: 1; display: flex; align-items: center; font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; color: var(--black); font-variant-numeric: tabular-nums; transition: transform .6s var(--ease); }
.kwall__glyph .ico { width: clamp(48px, 4.6vw, 66px); height: clamp(48px, 4.6vw, 66px); stroke-width: 1.2; }
.kwall__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kwall__name { font-size: clamp(1rem, 1.15vw, 1.12rem); font-weight: 700; color: var(--black); }
.kwall__turn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--black); box-shadow: 0 6px 16px -8px rgba(11, 11, 15, .3); }
.kwall__turn svg { width: 16px; height: 16px; }
.kwall__back { justify-content: space-between; gap: 10px; transform: rotateY(180deg); background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 24px 50px -30px rgba(59, 42, 158, .4); }
.kwall__bname { font-size: clamp(1rem, 1.15vw, 1.12rem); font-weight: 700; color: var(--black); }
.kwall__say { flex: 1; font-size: clamp(.9rem, .98vw, .98rem); line-height: 1.5; color: #3d3f48; }
.kwall__ex { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.kwall__ex small { font-size: .84rem; color: var(--muted); }
.kwall__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.kwall__price s { font-size: .9rem; color: #9a9da8; }
.kwall__price b { font-size: 1.2rem; font-weight: 900; color: var(--black); }
.kwall__price em { padding: 2px 8px; border-radius: 6px; background: #f3f1fd; font-size: .8rem; font-style: normal; font-weight: 700; color: var(--brand); }
@media (max-width: 900px) {
    .kwall__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .kwall__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: clamp(220px, 40vw, 280px); }
}
@media (max-width: 560px) {
    .kwall__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(240px, auto); }
    .kwall__tile.is-wide { grid-column: auto; }
    .kwall__tile.is-wide .kwall__front { grid-template-columns: minmax(0, 1fr); }
    .kwall__lede { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kwall__flip { transition: none; } }

/* 09.10.2026 (Nursel: "siyahlar tam siyah olmasın, çok sert"; "3. kart hoş değil") — koyu kartlar yumuşak, derin çivit-gri;
   N'inci ürün kartı çerçeveli beyaz yerine açık mavi zemin + mor sembol. */
.kwall__tile--ink .kwall__front { background: #2e2b45; }
.kwall__tile--line .kwall__front { border: 0; background: #e6ebfb; }
/* Sarı kart (Sepet indirimi) işaret kalemi sarısı yerine yumuşak tereyağı sarısı (Nursel: "çok patlak") */
.kwall__tile--mark .kwall__front { background: #fcefc0; }

/* KURULUMDAN RAPORA — 09.10.2026 (Nursel: "farklı, şık bir şey"; sonra "koyu renk hoş değil" → açık pastel pano, mor çizgi;
   sonra "arka plan yapma" → zeminsiz; "tek büyük sahne" denendi, beğenilmedi, bu hâle dönüldü). Pano; dört durak, üstte soldan sağa sarıyla dolan
   çizgi. Her durak çizgi ona varınca (--i × 0,55 sn) canlanır: nokta sarı olur, küçük ekran yükselir, içindekiler sırayla gelir. */
.kjour { padding: clamp(24px, 3vw, 48px) 0 clamp(60px, 8vw, 120px); }
.kjour__panel { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 76px) clamp(20px, 4.4vw, 68px) clamp(32px, 4.4vw, 64px); border-radius: clamp(20px, 2.4vw, 32px); background: linear-gradient(160deg, #efedfc 0%, #f6f1fb 45%, #fdf5e3 100%); color: var(--text); }
/* Panonun sağ üstünde çok hafif ince çizgi ızgarası: düz siyahı kırar, parlama/gradyan kullanmadan derinlik verir */
.kjour__panel::before { content: ''; position: absolute; inset: 0 0 auto auto; width: 60%; height: 70%; pointer-events: none; background-image: linear-gradient(rgba(108, 92, 231, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 92, 231, .08) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%); mask-image: linear-gradient(225deg, #000 0%, transparent 70%); }
.kjour__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(16px, 4vw, 64px); }
.kjour__eyebrow { display: block; font-size: clamp(11.5px, .82vw, 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.kjour__head h2 { margin-top: clamp(16px, 2vw, 26px); font-size: clamp(1.9rem, 3.4vw, 3.1rem); font-weight: 400; line-height: 1.1; color: var(--black); }
.kjour__head h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.kjour__head p { max-width: 32em; font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.6; color: #3d3f48; }

.kjour__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 72px); padding-top: 34px; }
/* Çizgi: soluk taban + üstünde soldan dolan sarı */
.kjour__track::before, .kjour__track::after { content: ''; position: absolute; top: 6px; left: 6px; right: 0; height: 1px; background: rgba(11, 11, 15, .14); }
.kjour__track::after { height: 2px; top: 5.5px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.5, 0, .3, 1) .2s; }
.kjour__track.is-in::after { transform: none; }
.kjour__stop { position: relative; --at: calc(.2s + var(--i) * .55s); }
/* Durak noktası */
.kjour__stop::before { content: ''; position: absolute; top: -34px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(11, 11, 15, .2); transition: background .4s ease var(--at), box-shadow .4s ease var(--at); }
.kjour__track.is-in .kjour__stop::before { background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 5px rgba(108, 92, 231, .16); }

/* Küçük ekran */
.kjour__ui { display: grid; align-content: start; gap: 8px; height: 252px; overflow: hidden; padding: 16px; border-radius: 16px; background: #fff; color: var(--black); font-size: 13px; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 24px 50px -30px rgba(59, 42, 158, .4);
    opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--at), transform .8s var(--ease) var(--at); }
.kjour__track.is-in .kjour__ui { opacity: 1; transform: none; }
.kjour__ui > * { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .5s var(--ease); }
.kjour__track.is-in .kjour__ui > * { opacity: 1; transform: none; }
.kjour__track.is-in .kjour__ui > :nth-child(1) { transition-delay: calc(var(--at) + .25s); }
.kjour__track.is-in .kjour__ui > :nth-child(2) { transition-delay: calc(var(--at) + .35s); }
.kjour__track.is-in .kjour__ui > :nth-child(3) { transition-delay: calc(var(--at) + .45s); }
.kjour__track.is-in .kjour__ui > :nth-child(4) { transition-delay: calc(var(--at) + .55s); }
.kjour__track.is-in .kjour__ui > :nth-child(5) { transition-delay: calc(var(--at) + .65s); }
.kjour__lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8e9a; }
.kjour__sel { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border: 1px solid #e3e5ea; border-radius: 9px; font-weight: 700; }
.kjour__sel i { width: 7px; height: 7px; margin-top: -4px; border-right: 1.6px solid #8a8e9a; border-bottom: 1.6px solid #8a8e9a; transform: rotate(45deg); }
.kjour__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kjour__pair span { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 11px; border: 1px solid #e3e5ea; border-radius: 9px; font-weight: 900; }
.kjour__pair small { font-weight: 400; color: #8a8e9a; }
.kjour__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kjour__chips em { padding: 4px 10px; border-radius: 999px; background: #f3f1fd; font-size: 12px; font-style: normal; font-weight: 700; color: var(--brand); }
.kjour__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid #eceef2; }
.kjour__row small { color: #8a8e9a; }
.kjour__count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.kjour__count span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: #f3f1fd; font-size: 11px; color: #6b6f7c; }
.kjour__count b { font-size: 20px; font-weight: 400; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.kjour__ui--shop { gap: 4px; }
.kjour__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 6px; border-radius: 10px; background: #f1f1f4; }
.kjour__img img { width: 100%; height: 100%; object-fit: cover; }
.kjour__img em { position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 7px; background: var(--black); font-size: 11.5px; font-style: normal; font-weight: 800; color: var(--mark); }
.kjour__price { display: flex; align-items: baseline; gap: 8px; }
.kjour__price s { color: #9a9da8; }
.kjour__price strong { font-size: 18px; font-weight: 900; color: var(--brand); }
.kjour__bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding-top: 6px; }
.kjour__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: var(--brand-soft); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.kjour__bars i:last-child { background: var(--brand); }
.kjour__track.is-in .kjour__bars i { transform: none; transition-delay: calc(var(--at) + .5s); }
.kjour__track.is-in .kjour__bars i:nth-child(2) { transition-delay: calc(var(--at) + .56s); }
.kjour__track.is-in .kjour__bars i:nth-child(3) { transition-delay: calc(var(--at) + .62s); }
.kjour__track.is-in .kjour__bars i:nth-child(4) { transition-delay: calc(var(--at) + .68s); }
.kjour__track.is-in .kjour__bars i:nth-child(5) { transition-delay: calc(var(--at) + .74s); }
.kjour__track.is-in .kjour__bars i:nth-child(6) { transition-delay: calc(var(--at) + .8s); }
.kjour__track.is-in .kjour__bars i:nth-child(7) { transition-delay: calc(var(--at) + .86s); }

/* Durak yazısı */
.kjour__no { display: block; margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #a3a6b0; transition: color .4s ease var(--at); }
.kjour__track.is-in .kjour__no { color: var(--brand); }
.kjour__stop h3 { margin-top: 6px; font-size: clamp(1.05rem, 1.2vw, 1.2rem); font-weight: 700; color: var(--black); }
.kjour__stop p { margin-top: 8px; font-size: clamp(.9rem, .95vw, .98rem); line-height: 1.55; color: #3d3f48; }
.kjour__more { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(32px, 4vw, 56px); font-size: clamp(.98rem, 1.05vw, 1.1rem); font-weight: 700; color: var(--black); }
.kjour__more svg { width: 18px; height: 18px; color: var(--brand); transition: transform .3s var(--ease); }
.kjour__more:hover svg { transform: translateX(5px); }

@media (max-width: 960px) {
    .kjour__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .kjour__track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 56px; }
    .kjour__track::before, .kjour__track::after { display: none; }
    .kjour__stop::before { top: -24px; }
}
@media (max-width: 560px) {
    .kjour__track { grid-template-columns: minmax(0, 1fr); padding-top: 24px; row-gap: 48px; }
    .kjour__ui { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .kjour__track::after, .kjour__ui, .kjour__ui > *, .kjour__bars i, .kjour__stop::before, .kjour__no { transition: none; }
}
.kjour__btn { margin-top: 4px; padding: 9px; border-radius: 9px; background: var(--black); font-weight: 700; text-align: center; color: #fff; }
.kjour__note { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: #6b6f7c; }
.kjour__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 138, 75, .15); }
.kjour__bars { height: 76px; }
.kjour__row:last-child { border-bottom: 0; }
.kjour__track.is-in .kjour__ui > :nth-child(6) { transition-delay: calc(var(--at) + .75s); }
/* 09.10.2026 (Nursel: "arka plan yapma") — pano zemini, ızgarası ve iç boşluğu kaldırıldı; bölüm sayfanın beyazında durur.
   Beyaz üstünde kaybolmasın diye küçük ekranlar ince çizgili + yumuşak gölgeli. */
.kjour { padding-top: clamp(56px, 7vw, 112px); }
.kjour__panel { overflow: visible; padding: 0; border-radius: 0; background: none; }
.kjour__panel::before { display: none; }
.kjour__ui { border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(11, 11, 15, .03), 0 22px 44px -30px rgba(59, 42, 158, .35); }
/* 09.10.2026 — "bir önceki hâli güzelleştirelim" (Nursel). Küçük ekranlara gerçek pencere gibi ince başlık çubuğu (üç nokta +
   ekran adı); çubuklar dokuz kurgu kartlarının yumuşak tonlarında (lila, açık mavi, tereyağı, şeftali) → iki bölüm birbirine
   bağlanır. Çizgideki noktalar numaralı yuvarlak oldu (altlarındaki ayrı "01" gizlendi); çizgi varınca mor dolar.
   Üzerine gelince ekran hafifçe yükselir. Kaydet düğmesi sitenin mor ana düğmesi. */
.kjour__track { padding-top: 54px; }
.kjour__track::before { top: 15px; left: 15px; }
.kjour__track::after { top: 14.5px; left: 15px; }
.kjour__stop::before { content: attr(data-n); top: -54px; display: grid; place-items: center; width: 31px; height: 31px; font-size: 13px; font-weight: 700; color: #8a8e9a; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(11, 11, 15, .16); transition: background .4s ease var(--at), box-shadow .4s ease var(--at), color .4s ease var(--at); }
.kjour__track.is-in .kjour__stop::before { color: #fff; background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 6px rgba(108, 92, 231, .14); }
.kjour__no { display: none; }
.kjour__stop h3 { margin-top: 22px; }
.kjour__ui { height: 286px; padding: 0 16px 16px; border-radius: 18px; transition: opacity .6s ease var(--at), transform .8s var(--ease) var(--at), box-shadow .4s ease; }
.kjour__stop:hover .kjour__ui { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(11, 11, 15, .03), 0 32px 54px -30px rgba(59, 42, 158, .5); transition: transform .45s var(--ease), box-shadow .45s ease; }
.kjour__wbar { display: flex; align-items: center; gap: 5px; height: 36px; margin: 0 -16px 6px; padding: 0 14px; border-bottom: 1px solid rgba(11, 11, 15, .05); background: var(--tint, #f3f1fd); }
.kjour__wbar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 11, 15, .14); }
.kjour__wbar b { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #4b4e5a; }
.kjour__stop[data-n="1"] { --tint: #ebe8fd; }
.kjour__stop[data-n="2"] { --tint: #e6ebfb; }
.kjour__stop[data-n="3"] { --tint: #fcefc0; }
.kjour__stop[data-n="4"] { --tint: #fbe9e6; }
.kjour__btn { background: var(--brand); }
.kjour__track.is-in .kjour__ui > :nth-child(7) { transition-delay: calc(var(--at) + .85s); }
@media (max-width: 960px) { .kjour__track { padding-top: 44px; } .kjour__stop::before { top: -44px; } .kjour__ui { height: auto; } }
.kjour__stop::before { display: block; line-height: 31px; text-align: center; }
/* Numaralı yuvarlaklar çizginin üstünde kalsın (izin çizgisi ::after ile sonra çizildiği için üstte kalıyordu) */
.kjour__stop::before { z-index: 2; }
/* 3 sütun (Nursel: "3 3 versek"); başlık satırının sağında "Bütün özellikler" bağlantısı (ızgara tam dolunca mor hücre çıkmaz) */
.kidx__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.kidx__top .kidx__head { margin-bottom: 0; }
.kidx__link { margin-top: 0; }
@media (min-width: 961px) { .kidx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kidx__grid a { min-height: clamp(190px, 16vw, 214px); }
/* Izgara bitişik kalır, yalnız DIŞ dört köşe yuvarlak (Nursel: "diğeri gibi ama sadece dış 4 alan radius"). Hücre çizgileri
   1 px boşluktan görünen zemin rengiyle çizilir: sütun sayısı tablet/telefonda değişse de çizgiler ve köşeler doğru kalır. */
.kidx__grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(14px, 1.7vw, 22px); background: var(--line); }
.kidx__grid > li { border: 0; background: #fff; }
/* Telefonda "Kurulumdan rapora" dikey zaman çizgisi (Nursel: "mobilde iyi değil" — numaralar üstteki yazıya yapışıyor, kupa
   resmi çok büyük, çizgi yoktu). Çizgi solda yukarıdan aşağı mor dolar, numaralar çizginin üstünde; sağda önce başlık ve
   açıklama, altında küçültülmüş ekran. */
@media (max-width: 700px) {
    .kjour__track { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 0 0 0 48px; }
    .kjour__track::before, .kjour__track::after { display: block; top: 16px; bottom: 16px; left: 15px; right: auto; width: 1px; height: auto; }
    .kjour__track::after { left: 14.5px; width: 2px; transform: scaleY(0); transform-origin: top; }
    .kjour__track.is-in::after { transform: none; }
    .kjour__stop { display: flex; flex-direction: column; }
    .kjour__stop::before { top: 0; left: -48px; }
    .kjour__stop h3 { order: -2; margin-top: 4px; }
    .kjour__stop p { order: -1; margin: 6px 0 16px; }
    .kjour__ui { height: auto; }
    .kjour__img { aspect-ratio: 16 / 8; }
}
/* Dokuz kurgu kartları küçültüldü (Nursel: "aşırı büyük"): satır yüksekliği ~290 → ~205 px, semboller orantılı küçük;
   arka yüzde yazı sığsın diye iç boşluk ve aralık biraz daraltıldı. */
.kwall__grid { grid-auto-rows: clamp(190px, 16vw, 210px); }
.kwall__front, .kwall__back { padding: clamp(16px, 1.6vw, 22px); }
.kwall__back { gap: 6px; }
.kwall__glyph { font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.kwall__glyph .ico { width: clamp(40px, 3.6vw, 52px); height: clamp(40px, 3.6vw, 52px); }
.kwall__tile.is-wide .kwall__glyph { font-size: clamp(2.6rem, 4.6vw, 4.1rem); }
.kwall__tile.is-wide .kwall__glyph .ico { width: clamp(48px, 4.4vw, 64px); height: clamp(48px, 4.4vw, 64px); }
.kwall__ex { padding-top: 8px; }
@media (max-width: 900px) { .kwall__grid { grid-auto-rows: clamp(190px, 34vw, 220px); } }
@media (max-width: 560px) { .kwall__grid { grid-auto-rows: minmax(190px, auto); } }
/* "Kurulumdan rapora" çizgi ve başlıklar daha şık (Nursel, 09.10.2026). Taban çizgi kesikli ve soluk; üstünde ince mor çizgi
   dolar. Numara: beyaz yuvarlak + ince halka; çizgi varınca mor numara + çift halka (iç mor, dış açık mor). Yanında küçük
   "ADIM 1" etiketi (beyaz zeminle çizgiyi keser). Kutu altındaki başlığın üstünde kısa mor çizgi; başlık biraz büyük,
   açıklama yumuşak gri. */
.kjour__track::before { height: 0; background: none; border-top: 1px dashed rgba(11, 11, 15, .18); }
.kjour__track::after { height: 1.5px; top: 15px; }
.kjour__stop::before { width: 32px; height: 32px; line-height: 32px; font-size: 12.5px; color: #8a8e9a; background: #fff; box-shadow: 0 0 0 1px rgba(11, 11, 15, .14); }
.kjour__track.is-in .kjour__stop::before { color: var(--brand); background: #fff; box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 6px #fff, 0 0 0 7px var(--brand-soft); }
.kjour__stop::after { content: 'Adım ' attr(data-n); position: absolute; top: -47px; left: 40px; z-index: 2; padding: 0 10px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a3a6b0; transition: color .4s ease var(--at); }
.kjour__track.is-in .kjour__stop::after { color: var(--brand); }
.kjour__stop h3 { position: relative; margin-top: 30px; padding-top: 16px; font-size: clamp(1.12rem, 1.35vw, 1.3rem); letter-spacing: -.01em; }
.kjour__stop h3::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--brand); }
.kjour__stop p { margin-top: 10px; max-width: 30ch; font-size: clamp(.92rem, .98vw, 1rem); line-height: 1.6; color: var(--muted); }
@media (max-width: 960px) { .kjour__stop::after { top: -37px; } }
@media (max-width: 700px) {
    .kjour__track::before { width: 0; border-top: 0; border-left: 1px dashed rgba(11, 11, 15, .18); }
    .kjour__track::after { width: 1.5px; left: 15px; }
    .kjour__stop::after { display: none; }
    .kjour__stop h3 { margin-top: 2px; padding-top: 0; }
    .kjour__stop h3::before { display: none; }
    .kjour__stop p { max-width: none; }
}
/* Adım numaraları dolu (Nursel: "içi dolu mu olsa"): çizgi varınca mor dolgu + beyaz numara, dışta beyaz boşluk + açık mor halka */
.kjour__track.is-in .kjour__stop::before { color: #fff; background: var(--brand); box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 5px #fff, 0 0 0 6px var(--brand-soft); }
.kjour__stop::after { left: 36px; padding: 0 10px 0 12px; }
/* Başlık üstündeki kısa mor çizgi kaldırıldı (Nursel: "sevmedim") */
.kjour__stop h3 { margin-top: 24px; padding-top: 0; }
.kjour__stop h3::before { display: none; }
@media (max-width: 700px) { .kjour__stop h3 { margin-top: 2px; } }
@media (max-width: 700px) {
    .kjour__track::before, .kjour__track::after { top: 16px; bottom: 16px; height: auto; }
}
/* Diğer çözümler: hücreler tek tek gelirken ızgara zemini (çizgi rengi) gri bloklar hâlinde görünüyordu (Nursel: "gelişi hoş değil").
   Artık ızgara tek parça, yumuşakça belirir; hücrelerin ayrı gelişi yok. */
.js .kidx__grid[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s ease .1s, transform 1s var(--ease) .1s; }
.js .kidx__grid[data-reveal].is-in { opacity: 1; transform: none; }
/* Telefonda kurgu kartları 2'li yan yana (Nursel, 09.10.2026). Geniş kartlar tam satır. Dar kartta arka yüze yer az: örnek
   cümlesi gizlenir (ad + açıklama + tutar kalır), yazılar ve semboller küçülür. */
@media (max-width: 560px) {
    .kwall__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 196px; gap: 10px; }
    .kwall__tile.is-wide { grid-column: span 2; }
    .kwall__front, .kwall__back { padding: 14px; border-radius: 16px; }
    .kwall__group { font-size: 9.5px; letter-spacing: .1em; }
    .kwall__glyph, .kwall__tile.is-wide .kwall__glyph { font-size: 2.1rem; }
    .kwall__glyph .ico, .kwall__tile.is-wide .kwall__glyph .ico { width: 40px; height: 40px; }
    .kwall__name { font-size: .92rem; line-height: 1.25; }
    .kwall__turn { width: 28px; height: 28px; }
    .kwall__turn svg { width: 13px; height: 13px; }
    .kwall__back { gap: 4px; }
    .kwall__bname { font-size: .92rem; }
    .kwall__say { font-size: .8rem; line-height: 1.4; }
    .kwall__ex { gap: 2px; padding-top: 6px; }
    .kwall__ex small { display: none; }
    .kwall__price { gap: 2px 6px; }
    .kwall__price s { font-size: .74rem; }
    .kwall__price b { font-size: .98rem; }
    .kwall__price em { padding: 1px 6px; font-size: .7rem; }
    .kwall__tile.is-wide .kwall__front { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .kwall__tile.is-wide .kwall__lede { display: block; font-size: .82rem; line-height: 1.45; }
}

/* ==========================================================================
   PAZARLAMA ARAÇLARI (/cozumler/pazarlama-araclari) — 09.10.2026. Kampanya Sihirbazı'yla aynı dil (mor, yumuşak pastel tonlar,
   ince başlıklar) ama farklı kurgu: açık zeminli üst alan, huni, kupon ve yorum yakından, rapor bandı.
   ========================================================================== */

/* Üst alan — açık lila→beyaz geçişli; sağda tarayıcı penceresinde mağaza + beliren popup */
.pzh { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); background: linear-gradient(180deg, #f3f1fd 0%, #f8f7fe 55%, #fff 100%); }
.pzh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.pzh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
.pzh__title em { display: block; font-style: normal; font-weight: 700; color: var(--brand); }
.pzh__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: #3d3f48; }
.pzh__text b { color: var(--black); }
.pzh__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(24px, 2.8vw, 34px); }

.pzh__stage { position: relative; padding: 28px 0; }
.pzh__browser { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 44px 80px -44px rgba(59, 42, 158, .45); }
.pzh__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fafafc; }
.pzh__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e4ea; }
.pzh__bar span { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: #f0f0f4; font-size: 12px; color: #8a8e9a; }
.pzh__shop { position: relative; padding: 16px; font-size: clamp(11px, 1vw, 13px); }
.pzh__nav { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.pzh__nav b { margin-right: auto; font-size: 1.15em; }
.pzh__nav span { width: 3.4em; height: .55em; border-radius: 4px; background: #eceef2; }
.pzh__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pzh__prod { display: grid; gap: 3px; }
.pzh__prod img { aspect-ratio: 1; object-fit: cover; margin-bottom: 6px; border-radius: 10px; background: #f1f1f4; }
.pzh__prod small { color: var(--brand); font-weight: 700; }
/* Popup: 10 sn'lik döngü — 1. sn'de belirir, 7. sn'de kapanır */
.pzh__veil { position: absolute; inset: 0; background: rgba(15, 14, 23, .38); opacity: 0; animation: pzVeil 10s ease infinite; }
.pzh__popup { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 14px; width: 76%; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, -44%) scale(.94); animation: pzPop 10s cubic-bezier(.22, .7, .2, 1) infinite; }
.pzh__popup img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.pzh__popup b { display: block; font-size: 1.2em; line-height: 1.25; }
.pzh__popup small { display: block; margin-top: 4px; color: var(--muted); }
.pzh__pbtn { display: inline-block; margin-top: 10px; padding: .6em 1.1em; border-radius: 8px; background: var(--brand); font-weight: 700; color: #fff; }
.pzh__x { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; }
.pzh__x::before, .pzh__x::after { content: ''; position: absolute; left: 8px; top: 2px; width: 1.5px; height: 14px; background: #8a8e9a; transform: rotate(45deg); }
.pzh__x::after { transform: rotate(-45deg); }
@keyframes pzVeil { 0%, 10% { opacity: 0; } 16%, 68% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes pzPop { 0%, 10% { opacity: 0; transform: translate(-50%, -44%) scale(.94); } 17%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 74%, 100% { opacity: 0; transform: translate(-50%, -52%) scale(.97); } }
.pzh__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px -18px rgba(11, 11, 15, .35); }
.pzh__chip .ico { width: 16px; height: 16px; color: var(--brand); }
.pzh__chip--a { top: 0; right: 4%; }
.pzh__chip--b { bottom: 0; left: 4%; }

/* Ziyaretçiden sadık müşteriye — başlık + küçük ekranlı dört adım (.pzs) */
.pzf { padding: clamp(72px, 9vw, 136px) 0 clamp(40px, 5vw, 72px); }
.pzf__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(16px, 4vw, 64px); margin-bottom: clamp(28px, 3.4vw, 52px); }
.pzf__head h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; }
.pzf__head h2 em, .pzc__copy h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.pzf__head .make__lead { margin: 0; max-width: 30em; color: #3d3f48; }
.pzf__note { margin-top: 16px; font-size: 13px; text-align: center; color: var(--muted); }

/* Kupon ve yorum — iki sütun; görsel karesi yumuşak pastel */
.pzc, .pzr { padding: clamp(48px, 6vw, 96px) 0; }
.pzc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 88px); max-width: 1120px; }
.pzc__copy h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; }
.pzc__list { display: grid; margin: clamp(22px, 2.6vw, 36px) 0 0; border-top: 1px solid var(--line); }
.pzc__list div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pzc__list dt { font-weight: 700; color: var(--brand); }
.pzc__list dd { margin: 0; line-height: 1.5; color: #3d3f48; }

.pzc__media { display: grid; gap: 14px; padding: clamp(22px, 3vw, 40px); border-radius: clamp(14px, 1.7vw, 26px); background: linear-gradient(200deg, #fff3c9 0%, #fbe9f1 48%, #e7e6f8 100%); font-size: clamp(12px, 1.05vw, 14px); }
.pzc__ticket { position: relative; display: grid; grid-template-columns: 1fr auto; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -28px rgba(59, 42, 158, .5); }
/* Bilet: ortada kesik çizgi + iki yanda yarım daire oyuk */
.pzc__ticket::before, .pzc__ticket::after { content: ''; position: absolute; right: calc(7.5em - 9px); width: 18px; height: 18px; border-radius: 50%; background: #f6eaf0; }
.pzc__ticket::before { top: -9px; }
.pzc__ticket::after { bottom: -9px; }
.pzc__tl, .pzc__tr { display: grid; gap: 2px; padding: 1.1em 1.3em; }
.pzc__tr { width: 7.5em; justify-items: center; border-left: 2px dashed #e3e0f5; text-align: center; }
.pzc__tl small, .pzc__tr small { color: #8a8e9a; }
.pzc__tl b { font-size: 1.5em; font-weight: 900; letter-spacing: .08em; }
.pzc__tr b { font-size: 1.9em; font-weight: 900; line-height: 1; color: var(--brand); }
.pzc__rules { display: grid; gap: 1px; overflow: hidden; border-radius: 12px; background: #ece9f7; }
.pzc__rules li { display: flex; align-items: center; gap: .7em; padding: .75em 1em; background: #fff; color: #3d3f48; }
.pzc__rules li b { margin-left: auto; color: var(--black); }
.pzc__rules i { width: 2.1em; height: 1.2em; border-radius: 999px; background: var(--brand); position: relative; flex: none; }
.pzc__rules i::after { content: ''; position: absolute; right: .15em; top: .15em; width: .9em; height: .9em; border-radius: 50%; background: #fff; }
.pzc__checkout { display: grid; gap: .5em; padding: 1em; border-radius: 12px; background: #fff; }
.pzc__checkout > small { color: #8a8e9a; }
.pzc__field { display: flex; align-items: center; gap: .6em; padding: .35em .35em .35em .9em; border: 1px solid #e3e5ea; border-radius: 10px; }
.pzc__code { flex: 1; overflow: hidden; white-space: nowrap; font-weight: 700; letter-spacing: .06em; }
.pzc__field em { padding: .55em 1em; border-radius: 8px; background: var(--black); font-style: normal; font-weight: 700; color: #fff; }
.pzc__ok { display: flex; align-items: center; gap: .5em; color: var(--ok); font-weight: 700; }
.pzc__ok .ico { width: 1.3em; height: 1.3em; }
.pzc__ok b { margin-left: auto; }
/* Kod yazılır gibi soldan açılır, sonra "uygulandı" belirir (görününce bir kez) */
.js .pzc__media .pzc__code { max-width: 0; transition: max-width 1.2s steps(10) .6s; }
.js .pzc__media.is-in .pzc__code { max-width: 12em; }
.js .pzc__media .pzc__ok { opacity: 0; transform: translateY(6px); transition: opacity .5s ease 2s, transform .5s var(--ease) 2s; }
.js .pzc__media.is-in .pzc__ok { opacity: 1; transform: none; }

.pzr__media { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: clamp(14px, 1.7vw, 26px); background: linear-gradient(135deg, var(--stage) 0%, #e4e2f5 42%, #fff2c2 100%); font-size: clamp(12px, 1.05vw, 14px); }
.pzr__card { display: grid; gap: 1em; padding: 1.4em; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -28px rgba(59, 42, 158, .5); }
.pzr__sum { display: flex; align-items: baseline; gap: .6em; padding-bottom: 1em; border-bottom: 1px solid #eceef2; }
.pzr__sum b { font-size: 2.2em; font-weight: 900; line-height: 1; }
.pzr__sum small { color: #8a8e9a; }
.pzr__stars { letter-spacing: .1em; color: #f2b705; font-size: 1.15em; }
.pzr__stars--s { font-size: .9em; }
.pzr__who { display: flex; align-items: center; gap: .6em; }
.pzr__who i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #ebe8fd; font-size: .85em; font-style: normal; font-weight: 700; color: var(--brand); }
.pzr__rev p { margin-top: .5em; line-height: 1.5; color: #3d3f48; }
.pzr__qa { display: grid; gap: .5em; padding: 1em; border-radius: 10px; background: #f7f6fb; }
.pzr__qa p { line-height: 1.45; color: #3d3f48; }
.pzr__qa b { display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: #8a8e9a; }
.pzr__ans b { color: var(--brand); }
.pzr__serp { display: grid; gap: .2em; width: 82%; margin: -1.2em 0 0 auto; padding: 1em 1.2em; border-radius: 12px; background: #fff; box-shadow: 0 20px 40px -24px rgba(11, 11, 15, .35); position: relative; }
.pzr__serp small { color: #4b6b3c; }
.pzr__serp b { font-size: 1.2em; font-weight: 400; color: #1a0dab; }
.pzr__serp > span { color: #6b6f7c; }

/* Rapor bandı */
.pzband { margin-block: clamp(16px, 2vw, 32px) clamp(56px, 7vw, 104px); }
.pzband p { max-width: 640px; }
.pzband__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 420px; padding-left: clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.pzband__tags li { padding: 7px 13px; border-radius: 999px; background: #f3f1fd; font-size: 13.5px; font-weight: 700; color: var(--brand); }

@media (max-width: 960px) {
    .pzh__grid, .pzc__grid, .pzf__head { grid-template-columns: minmax(0, 1fr); }
    .pzh__stage { max-width: 560px; width: 100%; margin-inline: auto; }
    .pzr__grid .pzr__media { order: 2; }
    .pzband__tags { justify-content: flex-start; padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
    .pzh__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pzh__prod:nth-child(3) { display: none; }
    .pzh__popup { width: 90%; }
    .pzh__chip { font-size: 12px; }
    .pzc__list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .pzr__serp { width: 100%; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .pzh__veil, .pzh__popup { animation: none; }
    .pzh__veil { opacity: 1; }
    .pzh__popup { opacity: 1; transform: translate(-50%, -50%); }
}
/* Mağaza ekranı daha gerçekçi ve büyük: ürünlerin üstünde afiş; sağ sütun biraz geniş; üst alan ile huni arası boşluk azaldı */
@media (min-width: 961px) { .pzh__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); } }
.pzh__banner { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 14px; padding: 1.6em 1.4em; border-radius: 12px; background: linear-gradient(120deg, #fcefc0 0%, #fbe9e6 55%, #ebe8fd 100%); }
.pzh__banner span { display: grid; gap: 2px; }
.pzh__banner small { font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a6d00; }
.pzh__banner b { font-size: 1.6em; font-weight: 400; line-height: 1.1; }
.pzh__banner i { padding: .55em 1.1em; border-radius: 8px; background: var(--black); font-size: .9em; font-style: normal; font-weight: 700; color: #fff; }
.pzh { padding-bottom: clamp(40px, 5vw, 72px); }
.pzf { padding-top: clamp(48px, 6vw, 96px); }
.pzc__field em { margin-left: auto; }
.pzc__tr { width: 8.6em; }
.pzc__tr small { white-space: nowrap; }
.pzc__ticket::before, .pzc__ticket::after { right: calc(8.6em - 9px); }
.pzs__win { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgba(11, 11, 15, .03), 0 22px 44px -30px rgba(59, 42, 158, .35); transition: transform .45s var(--ease), box-shadow .45s ease; }
.pzs__bar { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(11, 11, 15, .05); background: var(--tone); }
.pzs__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 11, 15, .14); }
.pzs__bar b { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #4b4e5a; }
.pzs__screen { display: grid; align-content: start; gap: 9px; height: 214px; padding: 16px; font-size: 13px; }
.pzs__h { font-size: 1.08em; font-weight: 900; }
.pzs__serp { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid #eceef2; }
.pzs__serp small { color: #4b6b3c; }
.pzs__serp b { font-size: 1.08em; font-weight: 400; line-height: 1.3; color: #1a0dab; }
.pzs__serp span { font-size: .92em; line-height: 1.45; color: #6b6f7c; }
.pzs__share { display: flex; flex-wrap: wrap; gap: 6px; }
.pzs__share em { padding: 5px 10px; border-radius: 999px; background: #f3f1fd; font-size: .86em; font-style: normal; font-weight: 700; color: var(--brand); }
.pzs__input { padding: 10px 12px; border: 1px solid #e3e5ea; border-radius: 9px; color: #8a8e9a; }
.pzs__check { display: flex; align-items: flex-start; gap: 8px; font-size: .9em; line-height: 1.4; color: #4b4e5a; }
.pzs__check i { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; background: var(--brand); }
.pzs__check i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pzs__btn { padding: 10px; border-radius: 9px; background: var(--brand); font-weight: 700; text-align: center; color: #fff; }
.pzs__coupon { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1.5px dashed #c9c2f5; border-radius: 12px; background: #faf9ff; }
.pzs__coupon span { display: grid; }
.pzs__coupon small { font-size: .82em; color: #8a8e9a; }
.pzs__coupon b { font-size: 1.15em; font-weight: 900; letter-spacing: .06em; }
.pzs__coupon em { padding: 7px 11px; border-radius: 8px; background: var(--black); font-size: .86em; font-style: normal; font-weight: 700; color: #fff; }
.pzs__lbl { margin-top: 4px; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8e9a; }
.pzs__count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pzs__count span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: #f3f1fd; font-size: .8em; color: #6b6f7c; }
.pzs__count b { font-size: 1.7em; font-weight: 400; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.pzs__mail { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #f7f6fb; }
.pzs__mail img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.pzs__mail span { display: grid; gap: 2px; }
.pzs__mail small { color: #8a8e9a; }
/* Pazarlama Araçları üst alanı KOYU (Nursel 09.10.2026: "üst kısmı koyu yapsak"; "Her adım için bir araç" koyu pano denemesi geri alındı).
   Kampanya Sihirbazı afişinin dili: #0f0e17 zemin, sağda mor + altta sarı yumuşak ışıma, beyaz başlık, vurgu mor→beyaz→sarı geçişli;
   düğmeler sitenin genel düğmeleri (koyu zeminde dolgu beyaz). Mağaza penceresi beyaz kalır, öne çıkar. */
.pzh { position: relative; overflow: hidden; background: #0f0e17; color: #fff; padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.pzh::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .5), transparent 70%), radial-gradient(35% 45% at 70% 90%, rgba(242, 183, 5, .16), transparent 70%); }
.pzh__grid { position: relative; }
.pzh .crumb, .pzh .crumb a { color: rgba(255, 255, 255, .55); }
.pzh .crumb a:hover { color: #fff; }
.pzh__title { color: #fff; }
.pzh__title em { background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pzh__text { color: rgba(255, 255, 255, .72); }
.pzh__text b { color: #fff; }
.pzh .btn--brand::before { background: #fff; }
.pzh .btn--brand:hover, .pzh .btn--brand:focus-visible { color: var(--black); }
.pzh .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.pzh .btn--line::before { background: #fff; }
.pzh .btn--line:hover, .pzh .btn--line:focus-visible { color: var(--black); border-color: #fff; }
.pzh__browser { border-color: transparent; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.pzh__chip { border-color: transparent; }
.pzh__browser, .pzh__chip { color: var(--text); } /* koyu üst alanın beyaz yazısı mağaza penceresine ve haplara miras kalmasın */
/* "Her adım için bir araç" — Satış alanı düzeni, açık zemin (Nursel 09.10.2026). Pastel çerçeve (adımın tonu) içinde beyaz pencere;
   altta noktalı etiket, etiketleri kesikli çizgi bağlar, üzerinden mor ışık akar (Satış'taki fxRun); başlık, açıklama, tikli araçlar. */
.pzs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); --vis: clamp(282px, 24vw, 300px); }
.pzs::before, .pzs::after { content: ""; position: absolute; top: calc(var(--vis) + 32px); left: 6px; right: 6px; height: 2px; border-radius: 2px; }
.pzs::before { background: repeating-linear-gradient(90deg, rgba(11, 11, 15, .16) 0 8px, transparent 8px 14px); }
.pzs::after { background: linear-gradient(90deg, transparent, #b9b0ff 45%, var(--brand) 50%, transparent 56%) -60% 0 / 60% 100% no-repeat; animation: fxRun 4.5s cubic-bezier(.6, 0, .4, 1) infinite; }
.pzs__item { position: relative; display: flex; flex-direction: column; }
.pzs__item--lilac { --tone: #ebe8fd; }
.pzs__item--blue { --tone: #e6ebfb; }
.pzs__item--butter { --tone: #fcefc0; }
.pzs__item--peach { --tone: #fbe9e6; }
.pzs__vis { display: grid; align-items: center; height: var(--vis); padding: clamp(14px, 1.4vw, 18px); border-radius: var(--r-lg); background: var(--tone); transition: transform .4s var(--ease); }
.pzs__item:hover .pzs__vis { transform: translateY(-4px); }
.pzs__win { overflow: hidden; border-radius: 14px; background: #fff; color: var(--text); box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(59, 42, 158, .45); }
.pzs__bar { background: #fafafc; }
.pzs__screen { height: auto; min-height: 0; }
.pzs__stop { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 20px; padding: 5px 13px 5px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 11, 15, .14); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
.pzs__stop i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(108, 92, 231, .2); }
.pzs__item h3 { margin-top: 20px; font-size: clamp(1.15rem, 1.4vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; }
.pzs__item p { margin-top: 8px; font-size: clamp(.9rem, .97vw, .98rem); line-height: 1.6; color: var(--muted); }
.pzs__pts { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pzs__pts li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: #3d3f48; }
.pzs__pts svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--brand); }
@media (max-width: 960px) { .pzs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } .pzs::before, .pzs::after { display: none; } }
@media (max-width: 560px) { .pzs { grid-template-columns: minmax(0, 1fr); } .pzs__vis { height: auto; } }
@media (prefers-reduced-motion: reduce) { .pzs::after { animation: none; } }
.pzs__win { border: 0; } /* pastel çerçeve içinde ince çizgi gerekmez */
/* Üst alandaki küçük haplar Kampanya Sihirbazı afişindekiyle aynı (Nursel: "kampanya sihirbazındaki gibi olsa"): koyu zeminde
   yarı saydam buzlu cam, beyaz yazı, sarı ikon, yavaşça süzülür. */
.pzh__chip { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: none; animation: fxstFloat 6s ease-in-out infinite; }
.pzh__chip .ico { color: #ffd75e; }
.pzh__chip--b { animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) { .pzh__chip { animation: none; } }
/* Haplar beyaz pencerenin üstüne binmesin (yarı saydam olunca okunmuyordu): pencerenin üstünde ve altında koyu zeminde dururlar */
.pzh__stage { padding: 58px 0; }
/* Dört adımın çerçevesi tek ton (Nursel: "rengarenk olmasın"): hepsi aynı çok açık lila */
.pzs__item--lilac, .pzs__item--blue, .pzs__item--butter, .pzs__item--peach { --tone: #f2f0fc; }
/* Adım etiketleri (Nursel: "Bul, Yakala kısımları farklı olmalı"): hap yerine Kampanya Sihirbazı yolculuğundaki dolu numara —
   mor yuvarlak + beyaz numara + beyaz boşluk + açık mor halka; yanında mor büyük harfli adım adı (beyaz zeminle çizgiyi keser). */
.pzs__stop { gap: 12px; padding: 0 12px 0 0; border-radius: 0; background: #fff; box-shadow: none; font-size: 12.5px; letter-spacing: .14em; color: var(--brand); }
.pzs__stop i { display: grid; place-items: center; width: 30px; height: 30px; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0; color: #fff; background: var(--brand); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand-soft); }
.pzs::before, .pzs::after { top: calc(var(--vis) + 34px); }
/* Pazarlama Araçları — mor azaltıldı (Nursel 09.10.2026: "çok mor her yer"). Mor yalnız sitenin genelinde de olduğu yerlerde kalır:
   başlık vurguları ve ana düğme. Adım numaraları, çizgi, tikler, çerçeveler, pencere içi düğmeler, kupon anahtarları ve etiketler
   siyah / nötr gri. */
.pzs__item--lilac, .pzs__item--blue, .pzs__item--butter, .pzs__item--peach { --tone: #f3f3f5; }
.pzs__stop { color: var(--black); }
.pzs__stop i { background: var(--black); box-shadow: 0 0 0 4px #fff, 0 0 0 5px #d9dae0; }
.pzs::after { background: linear-gradient(90deg, transparent, #9a9cab 45%, var(--black) 50%, transparent 56%) -60% 0 / 60% 100% no-repeat; }
.pzs__pts svg { color: var(--black); }
.pzs__btn, .pzh__pbtn { background: var(--black); }
.pzs__share em, .pzs__count span { background: #f1f1f4; color: #3d3f48; }
.pzs__count b { color: var(--black); }
.pzs__check i { background: var(--black); }
.pzs__coupon { border-color: #cfd1d8; background: #fafafb; }
.pzh__prod small { color: var(--black); }
.pzc__list dt { color: var(--black); }
.pzc__rules i { background: var(--black); }
.pzc__tr b { color: var(--black); }
.pzc__tr { border-left-color: #e4e5ea; }
.pzr__who i { background: #f1f1f4; color: #3d3f48; }
.pzr__ans b { color: var(--black); }
.pzband__tags li { background: #f1f1f4; color: #3d3f48; }
.pzs__stop i { display: block; line-height: 30px; text-align: center; } /* numara yuvarlakta dikey ortalı (Nursel) */
.pzs__stop i { background: var(--brand); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand-soft); } /* adım numaraları mor dolu (Nursel: "numara butonları" mor olsun); pencere içi düğmeler siyah kaldı */
.pzs::after { background: linear-gradient(90deg, transparent, #b9b0ff 45%, var(--brand) 50%, transparent 56%) -60% 0 / 60% 100% no-repeat; } /* akan çizgi yine mor (Nursel) */
.pzs__item p { flex: 1; } /* açıklama boşluğu doldurur: alt çizgi ve tikli araçlar dört sütunda aynı hizada (Nursel: "alt çizgiler düzensiz") */
/* Rapor bandının sağı (Nursel: haplar "hoş değil"): hap yerine sade ikonlu liste, satırlar ince çizgiyle ayrılır */
.pzband__list { display: grid; min-width: min(100%, 340px); padding-left: clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.pzband__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .98rem; color: #3d3f48; }
.pzband__list li:last-child { border-bottom: 0; }
.pzband__list .ico { flex: none; width: 20px; height: 20px; color: var(--black); }
@media (max-width: 960px) { .pzband__list { padding-left: 0; border-left: 0; } }
/* Pazarlama Araçları kupon ve yorum kartları ana sayfadaki ekran kutuları gibi kaydırmaya bağlı, ortadan büyüyerek gelir (site.js .zoomin
   sarmalayıcısını ekler). Bu kartların içi akışta durduğu için sarmalayıcı mutlak değil, kartın düzenini taşır. */
.js .pzc__media.is-zoom, .js .pzr__media.is-zoom { opacity: 1; transform: none; transition: none; overflow: hidden; }
.pzc__media > .zoomin { position: relative; inset: auto; display: grid; gap: 14px; }
.pzr__media > .zoomin { position: relative; inset: auto; }
/* Kupon kartındaki ve 3. adım penceresindeki sert siyahlar yumuşak çivit (Nursel: "ilk sipariş kartındaki siyahlar çok sert") */
.pzc__rules i, .pzc__field em, .pzs__coupon em { background: #3b3852; }
.pzc__tr b { color: #3b3852; }
/* Diğer çözümler ikonları sade (Nursel: "mor butonları sevemedim, sade mi olsa"): mor kutu yok, ince koyu gri ikon; üzerine gelince
   kutu mora dolmaz, yalnız ok koyulaşıp kayar. Kampanya Sihirbazı ve Pazarlama Araçları sayfalarında ortak. */
.kidx__ico { width: auto; height: auto; justify-content: start; border-radius: 0; background: none; color: #3d3f48; }
.kidx__ico .ico { width: 26px; height: 26px; stroke-width: 1.4; }
.kidx__grid a:hover .kidx__ico, .kidx__grid a:focus-visible .kidx__ico { background: none; color: var(--black); }
.kidx__grid a:hover .kidx__go, .kidx__grid a:focus-visible .kidx__go { color: var(--black); }
/* İkonlar açık gri kare zeminde (Nursel: "gri arka planda mı olsa"); üzerine gelince zemin biraz koyulaşır, mor yok */
.kidx__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #f1f1f4; color: #3d3f48; }
.kidx__ico .ico { width: 22px; height: 22px; }
.kidx__grid a:hover .kidx__ico, .kidx__grid a:focus-visible .kidx__ico { background: #e6e6eb; color: var(--black); }
.kidx__ico { justify-content: center; align-content: center; } /* ikon gri karede ortalı (sade sürümden kalan start hizası ezildi) */
.kidx__ico .ico { display: block; }
/* Paket notu (Nursel: "daha güzel yazılabilir mi"): ortada, açık gri yuvarlak not, bilgi ikonu */
.pzf__note { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 32px auto 0; padding: 12px 20px; border-radius: 999px; background: #f3f3f5; font-size: 14px; line-height: 1.45; text-align: left; color: #3d3f48; }
.pzf__note .ico { flex: none; width: 20px; height: 20px; color: var(--black); }
.pzf__note b { color: var(--black); }
@media (max-width: 560px) { .pzf__note { border-radius: 16px; align-items: flex-start; } }
.pzf__note { margin-top: clamp(48px, 5vw, 72px); } /* üstteki maddelere bitişik durmasın (Nursel) */
/* Pazarlama Araçları adımları kaydırmaya bağlı gelir (fiyat kartları gibi aşağıdan yükselir, soldan sağa sırayla); genel data-reveal geçişi kapatılır */
.js .pzs .pzs__item.is-scrub { opacity: var(--so, 1); scale: var(--sc, 1); transform: translateY(var(--sy, 0)); transition: none; will-change: scale, transform, opacity; }
/* Adım çerçeveleri hafif sarı (Nursel: "kartlara hafiften sarı renk ver"): dördü aynı, çok açık krem-sarı */
.pzs__item--lilac, .pzs__item--blue, .pzs__item--butter, .pzs__item--peach { --tone: #fdf6dc; }
.pzs__item--lilac, .pzs__item--blue, .pzs__item--butter, .pzs__item--peach { --tone: #fefaec; } /* sarı çok az (Nursel: "çok az verecektin") */
.pzs__item { z-index: 1; } /* kaydırma animasyonu katman açınca akan çizgi etiketlerin üstüne biniyordu */
/* Adım çerçeveleri koyu gri + sağ altta çok hafif sarı geçiş (Nursel: "koyu gri olacaktı, çok az sarı geçiş") */
.pzs__vis { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .16), transparent 60%), #2c2c33; }
.pzs__win { box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .6); }
/* Düzeltme (Nursel: "gri çok koyu, ilk hali gibi"): ilk açık gri #f3f3f5, sağ altta çok hafif sarı geçiş */
.pzs__vis { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f3f3f5; }
.pzs__win { box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(11, 11, 15, .3); }
/* Kupon ve yorum yanındaki madde listesinde çizgi yok (Nursel: "alt çizgi olmasın"); satırlar boşlukla ayrılır */
.pzc__list { border-top: 0; }
.pzc__list div { padding: 10px 0; border-bottom: 0; }
/* Kupon ve yorum kartlarının içi net olsun (Nursel: "içindeki resimler net olsun"): will-change ölçeği önceden düşük çözünürlükte
   çizdirip bulanıklaştırıyordu → kapatıldı; iç yakınlaştırma yok (yalnız kart .92→1 büyür, içerik her karede yeniden keskin çizilir). */
.pzc__media.is-zoom, .pzr__media.is-zoom { will-change: auto; }
.pzc__media > .zoomin, .pzr__media > .zoomin { scale: none; will-change: auto; }
.pzband__list li { border-bottom: 0; padding: 8px 0; } /* rapor bandı listesinde alt çizgi yok (Nursel) */
.pzs__pts { border-top: 0; padding-top: 4px; } /* açıklama ile tikli araçlar arasında çizgi yok (Nursel) */
.pzband { margin-block: clamp(8px, 1vw, 16px) 0; } /* bant artık huni ile kupon arasında */
/* Haplar mağaza penceresine biraz biner (Nursel: "mağaza görüntüsüne biraz girsin"); beyaz üstünde de okunsun diye cam koyulaştırıldı */
.pzh__chip { background: rgba(22, 20, 36, .8); border-color: rgba(255, 255, 255, .16); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.pzh__chip--a { top: 30px; right: 3%; } /* pencereye ~10 px biner (Nursel: "çok binmiş") */
.pzh__chip--b { bottom: 30px; left: 3%; }
/* Pazarlama Araçları: fare üstünde gezerken perspektifli hafif eğilme (Nursel: "perspektif olsun") — ana sayfa kartlarıyla aynı
   site.js data-spot kodu (--tx). Adımlarda yalnız pencere çerçevesi döner, yazılar sabit; kupon ve yorum kartının tamamı döner. */
.pzs__item, .pzc__grid { perspective: 1400px; }
.pzs__item .pzs__vis { rotate: y calc(var(--tx, 0) * 3deg); }
.pzc__media[data-spot-box], .pzr__media[data-spot-box] { rotate: y calc(var(--tx, 0) * 2.5deg); }
.pzs__item .pzs__win { translate: calc(var(--tx, 0) * -4px) 0; }
@media (prefers-reduced-motion: reduce) { .pzs__item .pzs__vis, .pzc__media, .pzr__media { rotate: none; } }

/* ==========================================================================
   DÖNÜŞÜM ARTIRMA (/cozumler/donusum-artirma) — 09.10.2026. Nursel'in Pazarlama sayfasındaki son tercihleriyle: mor az,
   açık gri çerçeve + çok hafif sarı geçiş, yumuşak çivit siyah, numaralı mor yuvarlaklar. Üst alan açık (diğer ikisi koyu).
   ========================================================================== */
.dnh { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); background: radial-gradient(60% 70% at 85% 30%, rgba(255, 216, 74, .14), transparent 70%), #f6f6f8; }
.dnh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.dnh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
.dnh__title em { display: block; font-style: normal; font-weight: 700; color: var(--brand); }
.dnh__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: #3d3f48; }
.dnh__text b { color: var(--black); }
.dnh__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(24px, 2.8vw, 34px); }
.dnh__stage { position: relative; display: grid; place-items: center; padding: 48px 0; }
.dnh__cart { display: grid; gap: 14px; width: min(420px, 92%); padding: 22px; border-radius: 20px; background: #fff; font-size: 14px; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 40px 80px -40px rgba(11, 11, 15, .35); }
.dnh__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid #eceef2; }
.dnh__head b { font-size: 1.1em; font-weight: 900; }
.dnh__head span { color: #8a8e9a; font-size: .9em; }
.dnh__lines { display: grid; gap: 10px; }
.dnh__lines li { display: flex; align-items: center; gap: 12px; }
.dnh__lines img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; }
.dnh__lines span { flex: 1; display: grid; gap: 2px; line-height: 1.3; }
.dnh__lines small { color: #8a8e9a; }
.dnh__lines em { font-style: normal; font-weight: 700; }
/* Ücretsiz kargo: çubuk dolar, ilk yazı söner, "Tebrikler" belirir (8 sn döngü) */
.dnh__ship { position: relative; display: grid; gap: 9px; padding: 14px; border-radius: 12px; background: #f6f6f8; }
.dnh__msg { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; font-size: .92em; line-height: 1.35; }
.dnh__msg .ico { flex: none; width: 18px; height: 18px; }
.dnh__msg--a { animation: dnMsgA 8s ease infinite; }
.dnh__msg--b { color: var(--ok); font-weight: 700; opacity: 0; animation: dnMsgB 8s ease infinite; }
.dnh__bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e4e5ea; }
.dnh__bar i { display: block; height: 100%; width: 72%; border-radius: inherit; background: #3b3852; animation: dnBar 8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes dnBar { 0%, 30% { width: 72%; background: #3b3852; } 50%, 85% { width: 100%; background: var(--ok); } 100% { width: 72%; background: #3b3852; } }
@keyframes dnMsgA { 0%, 38% { opacity: 1; } 46%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes dnMsgB { 0%, 44% { opacity: 0; transform: translateY(4px); } 52%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.dnh__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.dnh__total b { font-size: 1.3em; font-weight: 900; }
.dnh__btn { padding: 12px; border-radius: 11px; background: var(--brand); font-weight: 700; text-align: center; color: #fff; }
.dnh__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px -16px rgba(11, 11, 15, .35); animation: fxstFloat 6s ease-in-out infinite; }
.dnh__chip .ico { width: 16px; height: 16px; color: #c99a00; }
.dnh__chip--a { top: 22px; right: 0; }
.dnh__chip--b { bottom: 22px; left: 0; animation-delay: -3s; }

/* Terk edilen sepet */
.dnc, .dnk { padding: clamp(64px, 8vw, 120px) 0 0; }
.dnc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(16px, 4vw, 64px); margin-bottom: clamp(28px, 3.4vw, 52px); }
.dnc__head h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.16; }
.dnc__head h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.dnc__head .make__lead { margin: 0; max-width: 30em; color: #3d3f48; }
.dnc__set { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; }
.dnc__tog { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.dnc__tog i { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #3b3852; }
.dnc__tog i::after { content: ''; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.dnc__hrs { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid #e3e5ea; border-radius: 9px; }
.dnc__hrs small { color: #8a8e9a; }

/* Kararsız ziyaretçi — üç kart */
.dnk__pop { position: relative; display: grid; gap: 4px; width: 82%; padding: 16px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 18px 36px -20px rgba(11, 11, 15, .45); }
.dnk__pop b { font-size: 1.05rem; }
.dnk__pop small { color: var(--muted); }
.dnk__pop em { justify-self: center; margin-top: 8px; padding: 8px 16px; border-radius: 8px; background: var(--brand); font-size: 13px; font-style: normal; font-weight: 700; color: #fff; }
/* İmleç sayfanın üstüne doğru gider (çıkış niyeti) */
.dnk__cursor { position: absolute; width: 22px; translate: 70px 40px; animation: dnExit 4s ease-in-out infinite; }
@keyframes dnExit { 0%, 20% { translate: 70px 60px; opacity: 1; } 60% { translate: 110px -90px; opacity: 1; } 75%, 100% { translate: 110px -110px; opacity: 0; } }
.dnk + .hfaq { margin-top: clamp(64px, 8vw, 120px); }

@media (max-width: 960px) {
    .dnh__grid, .dnc__head, .dnc__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .dnh__chip { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .dnh__msg--a, .dnh__msg--b, .dnh__bar i, .dnh__chip, .dnk__cursor { animation: none; }
}
/* Tutarlılık: ₺720 sepette "₺280 daha ekleyin" doğru (sınır ₺1.000); "Tebrikler" geçişi sepet değişmeden yanlış olurdu → kaldırıldı,
   çubuk her döngüde boştan %72ye dolar, yazı sabit. */
.dnh__msg--a { animation: none; opacity: 1; }
.dnh__msg--b { display: none; }
.dnh__bar i { background: #3b3852; animation: dnFill 5s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes dnFill { 0% { width: 0; } 45%, 90% { width: 72%; } 100% { width: 72%; } }
/* Dönüşüm Artırma üst alanı KOYU (Nursel 09.10.2026: "bu sayfanın da ilk girişini koyu yap") — Pazarlama Araçları üst alanıyla
   aynı: #0f0e17, mor + sarı yumuşak ışıma, beyaz başlık, vurgu mor→beyaz→sarı; sepet kartı beyaz (koyu yazıya sabit);
   haplar koyu cam, karta ~10 px biner. */
.dnh { position: relative; overflow: hidden; background: #0f0e17; color: #fff; padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.dnh::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .5), transparent 70%), radial-gradient(35% 45% at 70% 90%, rgba(242, 183, 5, .16), transparent 70%); }
.dnh__grid { position: relative; }
.dnh .crumb, .dnh .crumb a { color: rgba(255, 255, 255, .55); }
.dnh .crumb a:hover { color: #fff; }
.dnh__title { color: #fff; }
.dnh__title em { background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dnh__text { color: rgba(255, 255, 255, .72); }
.dnh__text b { color: #fff; }
.dnh .btn--brand::before { background: #fff; }
.dnh .btn--brand:hover, .dnh .btn--brand:focus-visible { color: var(--black); }
.dnh .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.dnh .btn--line::before { background: #fff; }
.dnh .btn--line:hover, .dnh .btn--line:focus-visible { color: var(--black); border-color: #fff; }
.dnh__cart { color: var(--text); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.dnh__stage { padding: 58px 0; }
.dnh__chip { background: rgba(22, 20, 36, .8); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.dnh__chip .ico { color: #ffd75e; }
.dnh__chip--a { top: 30px; right: 3%; }
.dnh__chip--b { bottom: 30px; left: 3%; }
/* Üç çözüm sayfasında perspektif (Nursel: "mouse hareketi ile perspektif"): üst alan görseli için kaçış noktası; Kampanyada
   kurgu kartları ve "Kurulumdan rapora" küçük ekranları imlecin olduğu yana hafifçe döner (site.js data-spot, --tx). */
.kp__grid, .pzh__grid, .dnh__grid { perspective: 1600px; }
.kwall__tile[data-spot-box] { rotate: y calc(var(--tx, 0) * 3deg); }
.kjour__track[data-spot] { perspective: 1400px; }
.kjour__stop[data-spot-box] .kjour__ui { rotate: y calc(var(--tx, 0) * 4deg); }
@media (prefers-reduced-motion: reduce) { .kwall__tile, .kjour__ui { rotate: none; } }
/* Pazarlama ve Dönüşüm üst alan hapları Kampanya Sihirbazındaki gibi AÇIK cam (Nursel: "badgeler açık olsa, ilk sayfadaki gibi") */
.pzh__chip, .dnh__chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
/* Açık cam hap beyaz pencerenin üstünde okunmuyordu → bindirme yok, pencerenin hemen kenarında (Kampanyadaki gibi) */
.pzh__chip--a, .dnh__chip--a { top: 12px; }
.pzh__chip--b, .dnh__chip--b { bottom: 12px; }
/* Pazarlama ve Dönüşüm üst alan zeminleri Kampanya Sihirbazı'nınkiyle aynı (Nursel: "bg'ler ilk sayfanınki gibi olsun"):
   aynı üç ışıma (sağda mor, altta sarı, sol üstte hafif mor) ve görselin arkasında ters yönlere dönen iki halka. */
.pzh::before, .dnh::before { background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.pzh__stage, .dnh__stage { display: grid; place-items: center; }
.pzh__stage::before, .dnh__stage::before, .pzh__stage::after, .dnh__stage::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.pzh__stage::before, .dnh__stage::before { width: min(540px, 98%); border: 2px dashed rgba(255, 255, 255, .42); animation: kpSpin 40s linear infinite; }
.pzh__stage::after, .dnh__stage::after { width: min(430px, 82%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
.pzh__browser, .dnh__cart { position: relative; z-index: 1; width: 100%; }
.dnh__cart { width: min(420px, 92%); }
@media (prefers-reduced-motion: reduce) { .pzh__stage::before, .dnh__stage::before, .pzh__stage::after, .dnh__stage::after { animation: none; } }

/* DÖNÜŞÜM ARTIRMA — terk edilen sepet ve kararsız ziyaretçi, 2. biçim (Nursel 09.10.2026: "daha şık, farklı") */
/* Terk edilen sepet: telefon + sırayla düşen bildirimler | büyük rakamlı bilgiler */
.dnx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 88px); perspective: 1400px; }
.dnx__stage { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) 20px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .24), transparent 62%), #f3f3f5; rotate: y calc(var(--tx, 0) * 2.5deg); }
.dnx__phone { position: relative; width: min(330px, 100%); min-height: 430px; padding: 44px 14px 18px; border: 9px solid #1c1b26; border-radius: 42px; background: linear-gradient(180deg, #ebe8fd, #f6f4fb 45%, #fdf6e3); box-shadow: 0 40px 70px -36px rgba(11, 11, 15, .5); }
.dnx__notch { position: absolute; top: 8px; left: 50%; width: 92px; height: 22px; border-radius: 99px; background: #1c1b26; translate: -50% 0; }
.dnx__time { position: absolute; top: 12px; left: 22px; font-size: 12px; font-weight: 700; color: #1c1b26; }
.dnx__feed { display: grid; gap: 10px; }
.dnx__feed li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px -14px rgba(11, 11, 15, .4); font-size: 13px; line-height: 1.35; }
.dnx__feed i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f1f1f4; color: #3d3f48; }
.dnx__feed .ico { width: 17px; height: 17px; }
.dnx__feed span { display: grid; gap: 2px; }
.dnx__feed small { color: #8a8e9a; }
.dnx__feed li.is-mail i { background: #ebe8fd; color: var(--brand); }
.dnx__feed li.is-ok i { background: #e3f4ea; color: var(--ok); }
/* Bildirimler bölüm görününce sırayla yukarıdan düşer */
.js .dnx__stage .dnx__feed li { opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .5s ease, transform .6s var(--ease); transition-delay: calc(.35s + var(--k) * .55s); }
.js .dnx__stage.is-in .dnx__feed li { opacity: 1; transform: none; }
.dnx__facts { display: grid; gap: 22px; }
.dnx__stats { display: grid; gap: 4px; margin: 0; }
.dnx__stats div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 14px 0; }
.dnx__stats dt { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--brand); }
.dnx__stats dd { margin: 0; line-height: 1.5; color: #3d3f48; }
.dnx__stats dd b { color: var(--black); }
.dnx__plan { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #3d3f48; }
.dnx__plan .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.dnx__plan b { color: var(--black); }
.dnx .dnc__set { background: #f3f3f5; }

/* Kararsız ziyaretçi: bento */
.dnb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 22px); perspective: 1400px; }
.dnb__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f3f3f5; rotate: y calc(var(--tx, 0) * 2deg); }
.dnb__card--big { grid-row: span 2; }
.dnb__txt { padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) 0; }
.dnb__txt h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); font-weight: 700; }
.dnb__txt p { margin-top: 8px; max-width: 34em; line-height: 1.6; color: var(--muted); }
.dnb__vis { flex: 1; display: grid; align-content: end; gap: 12px; padding: clamp(20px, 2.2vw, 30px); }
.dnb__prod { display: grid; grid-template-columns: 42% 1fr; gap: 16px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(11, 11, 15, .3); }
.dnb__prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.dnb__info { display: grid; align-content: start; gap: 8px; font-size: 13.5px; }
.dnb__info > b { font-size: 1.15em; }
.dnb__price { font-size: 1.3em; font-weight: 900; }
.dnb__badge { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 6px 10px; border-radius: 999px; background: #fdecec; font-size: .88em; font-weight: 700; color: #a3261d; }
.dnb__badge .ico { width: 15px; height: 15px; }
.dnb__badge--fav { background: #fdeaf1; color: #b0325e; }
.dnb__add { margin-top: 4px; padding: 10px; border-radius: 10px; background: var(--brand); font-weight: 700; text-align: center; color: #fff; }
.dnb__ship { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; }
.dnb__ship .ico { width: 18px; height: 18px; }
.dnb__ship i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #e4e5ea; }
.dnb__ship i b { display: block; height: 100%; width: 72%; border-radius: inherit; background: #3b3852; }
.dnb__vis--pop { position: relative; place-items: center; align-content: center; min-height: 170px; overflow: hidden; }
.dnb__helpers { display: grid; gap: 10px; padding: clamp(16px, 2vw, 24px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px); }
.dnb__helpers li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.dnb__helpers i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #f1f1f4; color: #3d3f48; }
.dnb__helpers .ico { width: 18px; height: 18px; }
.dnb__helpers span { display: grid; gap: 1px; line-height: 1.35; }
.dnb__helpers b { font-size: .95rem; }
.dnb__helpers small { font-size: .84rem; color: var(--muted); }

@media (max-width: 960px) {
    .dnx, .dnb { grid-template-columns: minmax(0, 1fr); }
    .dnb__card--big { grid-row: auto; }
    .dnx__stage { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 520px) {
    .dnb__prod { grid-template-columns: minmax(0, 1fr); }
    .dnx__stats div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .dnx__stage, .dnb__card { rotate: none; }
    .js .dnx__stage .dnx__feed li { opacity: 1; transform: none; transition: none; }
}
.dnx__phone { min-height: 0; padding-bottom: 26px; }
.dnx__stats div { grid-template-columns: 9.5rem minmax(0, 1fr); }
.dnx__stats dt { white-space: nowrap; }
/* Bento dengesi: yardımcılar 2×2 kısa (açıklama yok), büyük kartta görsel ortada; boşluk kalmaz */
.dnb__helpers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dnb__helpers small { display: none; }
.dnb__card--big .dnb__vis { align-content: center; }
@media (max-width: 520px) { .dnb__helpers { grid-template-columns: minmax(0, 1fr); } }
/* Üç bilgi ana sayfadaki ödeme bandının rakamları gibi (Nursel: "2 saat / saat başı / 1 kez hoş değil"): yan yana üç sütun,
   aralarında ince dikey çizgi, büyük ince siyah yazı + altında kısa gri açıklama */
.dnx__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-block: 6px; border-block: 1px solid var(--line); }
.dnx__stats div { display: grid; grid-template-columns: none; align-content: start; gap: 6px; padding: 18px clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--line); }
.dnx__stats div:first-child { padding-left: 0; border-left: 0; }
.dnx__stats dt { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: -.02em; color: var(--black); white-space: nowrap; }
.dnx__stats dd { font-size: .9rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 520px) { .dnx__stats { grid-template-columns: minmax(0, 1fr); } .dnx__stats div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .dnx__stats div:first-child { border-top: 0; } }
/* Dönüşüm: telefonlu çerçeve hafifçe büyüyerek, bento kartları aşağıdan yükselerek kaydırmaya bağlı gelir (Nursel: "scroll geliş ver") */
.js .dnx__stage.is-zoom { opacity: 1; transform: none; transition: none; overflow: hidden; will-change: auto; }
.dnx__stage > .zoomin { position: relative; inset: auto; display: grid; place-items: center; scale: none; will-change: auto; }
.js .dnb .dnb__card.is-scrub { opacity: var(--so, 1); scale: var(--sc, 1); transform: translateY(var(--sy, 0)); transition: none; will-change: scale, transform, opacity; }
/* Bento ürün kartındaki sosyal kanıt rozetleri kırmızı/pembe değil (Nursel: "kırmızı hoş değil, farklı ver"): açık gri zemin, koyu yazı, yumuşak çivit ikon */
.dnb__badge, .dnb__badge--fav { background: #f1f1f4; color: #3d3f48; }
.dnb__badge .ico { color: #3b3852; }

/* ==========================================================================
   SEO ARAÇLARI (/cozumler/seo-araclari) — 09.10.2026. Diğer çözüm sayfalarının dili: koyu üst alan + aynı ışıma ve halkalar,
   açık gri + çok hafif sarı çerçeveler, yumuşak çivit, az mor, fareyle perspektif, kaydırmaya bağlı geliş.
   ========================================================================== */
.sxh { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 112px); background: #0f0e17; color: #fff; }
.sxh::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.sxh__grid { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); perspective: 1600px; }
.sxh .crumb, .sxh .crumb a { color: rgba(255, 255, 255, .55); }
.sxh .crumb a:hover { color: #fff; }
.sxh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; color: #fff; }
.sxh__title em { display: block; font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sxh__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.sxh__text b { color: #fff; }
.sxh__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(24px, 2.8vw, 34px); }
.sxh .btn--brand::before { background: #fff; }
.sxh .btn--brand:hover, .sxh .btn--brand:focus-visible { color: var(--black); }
.sxh .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.sxh .btn--line::before { background: #fff; }
.sxh .btn--line:hover, .sxh .btn--line:focus-visible { color: var(--black); border-color: #fff; }
.sxh__stage { position: relative; display: grid; place-items: center; padding: 58px 0; }
.sxh__stage::before, .sxh__stage::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.sxh__stage::before { width: min(540px, 98%); border: 2px dashed rgba(255, 255, 255, .42); animation: kpSpin 40s linear infinite; }
.sxh__stage::after { width: min(430px, 82%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
.sxh__serp { position: relative; z-index: 1; display: grid; gap: 14px; width: min(500px, 100%); padding: 18px; border-radius: 18px; background: #fff; color: var(--text); font-size: 13.5px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.sxh__search { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #e3e5ea; border-radius: 999px; color: #3d3f48; }
.sxh__search .ico { width: 18px; height: 18px; color: #8a8e9a; }
.sxh__res { display: grid; gap: 4px; }
.sxh__res small { display: flex; align-items: center; gap: 8px; color: #4d5156; }
.sxh__res small i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ebe8fd; font-size: 11px; font-style: normal; font-weight: 700; color: var(--brand); }
.sxh__res b { font-size: 1.22em; font-weight: 400; line-height: 1.3; color: #1a0dab; }
.sxh__res p { line-height: 1.5; color: #4d5156; }
.sxh__rich { color: #4d5156; }
.sxh__rich em { font-style: normal; letter-spacing: .06em; color: #f2b705; }
.sxh__rich b { font-size: 1em; font-weight: 700; color: var(--black); }
.sxh__stock { color: var(--ok); font-weight: 700; }
.sxh__res--top { padding: 14px; border-radius: 12px; background: #f7f6fb; box-shadow: inset 0 0 0 1px #ebe8fd; }
.sxh__res--dim { padding-inline: 14px; opacity: .45; }
.sxh__res--dim small i { background: #e4e5ea; }
.sxh__ln { display: block; height: 9px; border-radius: 5px; background: #e4e5ea; }
.sxh__ln--s { width: 70%; }
.sxh__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; color: #fff; animation: fxstFloat 6s ease-in-out infinite; }
.sxh__chip .ico { width: 16px; height: 16px; color: #ffd75e; }
.sxh__chip--a { top: 12px; right: 3%; }
.sxh__chip--b { bottom: 12px; left: 3%; animation-delay: -3s; }

/* Panelde yaz, aramada görün */

/* Arka planda kendiliğinden — 2×2 kod pencereleri */

/* Hız ve dil şeridi */

@media (max-width: 960px) {
    .sxh__grid, .sxm__grid { grid-template-columns: minmax(0, 1fr); }
    .sxh__stage, .sxm__media { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 520px) {
    .sxh__chip { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sxh__stage::before, .sxh__stage::after, .sxh__chip { animation: none; }
}
/* Kaydırmaya bağlı geliş: panel kartı hafifçe büyür (içi keskin), kod kartları aşağıdan yükselir */

/* Bütün SEO özellikleri — gruplu, numaralı liste (ticimax-seo örneği). İki sütun kart; numaralar mor, maddeler çizgisiz. */
/* Gruplar iki sütunda akar (kart boyları farklı; ızgarada düzensiz boşluk kalıyordu) */

/* SEO Araçları 2. biçim (Nursel: "tekrar ediyor, çok teknik") — sade dil, her bölüm tek şey */
.sxy, .sxw { padding: clamp(64px, 8vw, 120px) 0 0; }
.sxw { padding-bottom: clamp(64px, 8vw, 120px); }
.sxy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); perspective: 1400px; }
.sxy__card { padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r-lg); rotate: y calc(var(--tx, 0) * 2deg); }
.sxy__card--you { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sxy__card--auto { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f3f3f5; }
.sxy__tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #f1f1f4; font-size: 13px; font-weight: 700; color: #3d3f48; }
.sxy__card--auto .sxy__tag { background: #fff; }
.sxy__tag .ico { width: 16px; height: 16px; }
.sxy__list { display: grid; gap: 22px; margin-top: 26px; }
.sxy__list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; }
.sxy__list i { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); font-size: 13px; font-style: normal; font-weight: 700; line-height: 32px; text-align: center; color: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand-soft); }
.sxy__list b, .sxy__auto b { display: block; font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
.sxy__list small, .sxy__auto small { display: block; margin-top: 4px; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.sxy__auto { display: grid; gap: 12px; margin-top: 26px; }
.sxy__auto li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.sxy__auto .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #3b3852; }
.sxy__auto small { margin-top: 2px; }

.sxw__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); perspective: 1400px; }
.sxw__vis { display: grid; place-items: center; height: clamp(210px, 18vw, 230px); padding: 20px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f3f3f5; rotate: y calc(var(--tx, 0) * 3deg); }
.sxw__card h3 { margin-top: 20px; font-size: clamp(1.12rem, 1.35vw, 1.3rem); font-weight: 700; }
.sxw__card p { margin-top: 8px; line-height: 1.6; color: var(--muted); }
.sxw__chat { display: grid; gap: 8px; width: 92%; padding: 14px; border-radius: 16px; background: #e9e4dc; font-size: 13px; }
.sxw__msg { justify-self: end; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #d9fdd3; }
.sxw__link { justify-self: end; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; width: 92%; padding: 8px; border-radius: 12px; background: #d9fdd3; }
.sxw__link img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.sxw__link span { display: grid; gap: 2px; line-height: 1.3; }
.sxw__link small { color: #5b6b5a; }
.sxw__langs { display: grid; gap: 10px; width: 92%; }
.sxw__langs span { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; font-weight: 700; box-shadow: 0 10px 24px -18px rgba(11, 11, 15, .4); }
.sxw__langs em { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #3b3852; font-size: 12px; font-style: normal; color: #fff; }
.sxw__langs small { font-size: 12px; font-weight: 400; color: #8a8e9a; }
.sxw__speed { display: grid; justify-items: center; gap: 12px; text-align: center; }
.sxw__ring { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--ok) 0 92%, #e4e5ea 92% 100%); }
.sxw__ring b { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #fff; font-size: 1.05rem; color: var(--ok); }
.sxw__speed small { max-width: 22em; color: #3d3f48; }
.js .sxw__grid .sxw__card.is-scrub, .js .sxy__grid .sxy__card.is-scrub { opacity: var(--so, 1); scale: var(--sc, 1); transform: translateY(var(--sy, 0)); transition: none; will-change: scale, transform, opacity; }
@media (max-width: 960px) { .sxy__grid { grid-template-columns: minmax(0, 1fr); } .sxw__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .sxw__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sxy__card, .sxw__vis { rotate: none; } }
/* "Senin yapacakların" daha hoş (Nursel): yumuşak lila zemin, her adım beyaz kutu + altında küçük örnek; kart sağdakiyle aynı boy */
.sxy__card--you { display: flex; flex-direction: column; background: linear-gradient(170deg, #f3f1fd 0%, #f8f7fd 60%, #fff 100%); box-shadow: none; }
.sxy__card--you .sxy__tag { background: #fff; }
.sxy__list { flex: 1; align-content: space-between; gap: 12px; }
.sxy__list li { padding: 16px 16px 16px 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px -20px rgba(59, 42, 158, .35); }
.sxy__list li > span { display: grid; gap: 2px; }
.sxy__ex { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 10px; padding: 7px 12px; border-radius: 10px; background: #f3f3f5; font-size: .9rem; font-style: normal; font-weight: 700; color: #3d3f48; }
.sxy__ex .ico { width: 16px; height: 16px; color: #3b3852; }
.sxy__ex--in { position: relative; padding-right: 16px; border: 1px solid #e3e5ea; background: #fff; font-weight: 400; color: var(--black); }
/* yazı alanında yanıp sönen imleç */
.sxy__ex--in u { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; background: var(--black); vertical-align: middle; animation: sxyCaret 1.1s steps(1) infinite; }
@keyframes sxyCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sxy__ex--in u { animation: none; } }
.sxy__card--you .sxy__tag { align-self: flex-start; }
.sxy__card--you { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .18), transparent 62%), #f1effc; } /* altı beyaza dönmesin (Nursel: "kartın altı çok beyaz") */

/* WhatsApp sohbeti (Nursel: "daha şık"): kişi çubuğu, desenli zemin, büyük önizlemeli giden mesaj, mavi çift tik, gelen cevap */
.sxw__vis { height: clamp(250px, 21vw, 270px); padding: 18px; }
.sxw__wa { display: flex; flex-direction: column; width: 100%; max-width: 300px; overflow: hidden; border-radius: 16px; background: #efe7dd; font-size: 12.5px; box-shadow: 0 18px 36px -22px rgba(11, 11, 15, .45); }
.sxw__wahead { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: #075e54; color: #fff; }
.sxw__wahead i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dfe9e7; font-size: 12px; font-style: normal; font-weight: 700; color: #075e54; }
.sxw__wahead span { display: grid; line-height: 1.15; }
.sxw__wahead small { font-size: 10.5px; opacity: .8; }
.sxw__wabody { display: grid; gap: 6px; padding: 10px; background-color: #efe7dd; background-image: radial-gradient(rgba(11, 11, 15, .05) 1px, transparent 1.2px); background-size: 10px 10px; }
.sxw__out { justify-self: end; display: grid; gap: 4px; width: 86%; padding: 4px; border-radius: 10px 10px 2px 10px; background: #d9fdd3; box-shadow: 0 1px 1px rgba(11, 11, 15, .08); }
.sxw__prev { display: grid; overflow: hidden; border-radius: 7px; background: #cfeec9; }
.sxw__prev img { width: 100%; height: 64px; object-fit: cover; }
.sxw__prev > span { display: grid; gap: 1px; padding: 6px 8px; line-height: 1.3; }
.sxw__prev small { color: #4f5f4c; }
.sxw__prev em { font-size: 10.5px; font-style: normal; color: #6b7d68; }
.sxw__txt, .sxw__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 2px 6px 2px; }
.sxw__in { justify-self: start; padding: 6px 8px; border-radius: 10px 10px 10px 2px; background: #fff; box-shadow: 0 1px 1px rgba(11, 11, 15, .08); }
.sxw__wa time { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #7a8a78; white-space: nowrap; }
.sxw__wa time svg { width: 15px; height: 10px; color: #34b7f1; }
/* Hız göstergesi: görününce yay dolar, ibre Yavaş'tan Hızlı'ya gelir */
.sxw__gauge { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 260px; }
.sxw__gauge svg { width: 100%; height: auto; overflow: visible; }
.sxw__arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
.sxw__needle { transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform 1.6s cubic-bezier(.3, 1.3, .4, 1) .2s; }
.sxw__card.is-in .sxw__arc { stroke-dashoffset: 12; }
.sxw__card.is-in .sxw__needle { transform: rotate(68deg); }
.sxw__chips { display: flex; gap: 6px; }
.sxw__chips em { padding: 5px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-style: normal; font-weight: 700; color: #3d3f48; }
@media (prefers-reduced-motion: reduce) { .sxw__arc { stroke-dashoffset: 12; transition: none; } .sxw__needle { transform: rotate(68deg); transition: none; } }
/* "Senin yapacakların" numaraları (Nursel: "numaralandırma hoş olsun"): mor yuvarlak yerine büyük, ince, iki haneli tipografik numara;
   kutunun solunda dikey ince çizgiyle ayrılır */
.sxy__list li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 14px; }
.sxy__list i { width: auto; height: auto; padding-right: 12px; border-radius: 0; background: none; box-shadow: none; border-right: 1px solid #ebe8fd; font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; text-align: left; color: #b9b0ff; }
.sxw__vis { height: clamp(270px, 22vw, 290px); } /* WhatsApp sohbeti kenarlara değmesin */
.sxw__prev img { height: 54px; }

/* ==========================================================================
   ÇOKLU DİL VE DÖVİZ (/cozumler/coklu-dil-ve-doviz) — 09.10.2026. Diğer çözüm sayfalarıyla aynı dil; SEO'daki sade anlatım.
   Ortak parçalar yeniden kullanılır: .sxy__list (01/02/03 adımlar), .sxm__bar (pencere çubuğu), .dnx__stats (üçlü bilgi),
   .sxs__row (şerit), .dnc__head (bölüm başı).
   ========================================================================== */
.mlh { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 112px); background: #0f0e17; color: #fff; }
.mlh::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.mlh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); perspective: 1600px; }
.mlh .crumb, .mlh .crumb a { color: rgba(255, 255, 255, .55); }
.mlh .crumb a:hover { color: #fff; }
.mlh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; color: #fff; }
.mlh__title em { display: block; font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mlh__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.mlh__text b { color: #fff; }
.mlh__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(24px, 2.8vw, 34px); }
.mlh .btn--brand::before { background: #fff; }
.mlh .btn--brand:hover, .mlh .btn--brand:focus-visible { color: var(--black); }
.mlh .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.mlh .btn--line::before { background: #fff; }
.mlh .btn--line:hover, .mlh .btn--line:focus-visible { color: var(--black); border-color: #fff; }
.mlh__stage { position: relative; display: grid; place-items: center; padding: 58px 0; }
.mlh__stage::before, .mlh__stage::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.mlh__stage::before { width: min(540px, 98%); border: 2px dashed rgba(255, 255, 255, .42); animation: kpSpin 40s linear infinite; }
.mlh__stage::after { width: min(430px, 82%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
.mlh__card { position: relative; z-index: 1; display: grid; gap: 12px; width: min(320px, 90%); padding: 12px 12px 16px; border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.mlh__bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0; }
.mlh__bar b { font-size: 14px; }
.mlh__langs { display: flex; gap: 4px; }
.mlh__langs em { padding: 3px 7px; border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 700; color: #8a8e9a; animation: mlLang 16s infinite; animation-delay: calc(var(--k) * 4s); }
@keyframes mlLang { 0%, 23% { background: #2e2b45; color: #fff; } 25%, 100% { background: transparent; color: #8a8e9a; } }
.mlh__card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.mlh__faces { display: grid; }
.mlh__face { grid-area: 1 / 1; display: grid; gap: 3px; padding: 0 6px; opacity: 0; animation: mlFace 16s infinite; animation-delay: calc(var(--k) * 4s); }
@keyframes mlFace { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-6px); } }
.mlh__face small { font-size: 11px; color: #8a8e9a; direction: ltr; unicode-bidi: plaintext; }
.mlh__face b { font-size: 17px; }
.mlh__face span { font-size: 13px; color: var(--muted); }
.mlh__face strong { margin-top: 4px; font-size: 20px; font-weight: 900; }
.mlh__face i { margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--brand); font-size: 13px; font-style: normal; font-weight: 700; text-align: center; color: #fff; }
.mlh__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; color: #fff; animation: fxstFloat 6s ease-in-out infinite; }
.mlh__chip .ico { width: 16px; height: 16px; color: #ffd75e; }
.mlh__chip--a { top: 12px; right: 3%; }
.mlh__chip--b { bottom: 12px; left: 3%; animation-delay: -3s; }

/* Yabancı dile üç adımda */
.mls, .mlc { padding: clamp(64px, 8vw, 120px) 0 0; }
.mls__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 88px); perspective: 1400px; }
.mls__steps { margin-top: 0; }
.mls__media { padding: clamp(22px, 3vw, 40px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f1effc; rotate: y calc(var(--tx, 0) * 2.5deg); }
.mls__win { overflow: hidden; border-radius: 14px; background: #fff; font-size: 13.5px; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(59, 42, 158, .35); }
.mls__body { display: grid; gap: 14px; padding: 16px; }
.mls__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mls__row span { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #e3e5ea; border-radius: 10px; }
.mls__row small { font-size: .82em; color: #8a8e9a; }
.mls__groups { display: grid; gap: 6px; }
.mls__groups li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #f6f6f8; }
.mls__groups span { flex: 1; font-weight: 700; }
.mls__groups em { font-size: .85em; font-style: normal; color: #8a8e9a; }
.mls__groups i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d9dae0; }
.mls__groups i.is-done { border-color: var(--ok); background: var(--ok); color: #fff; }
.mls__groups i .ico { width: 13px; height: 13px; stroke-width: 2.5; }
.mls__groups i.is-run { border-color: #e4e5ea; border-top-color: #3b3852; animation: mlSpin 1s linear infinite; }
@keyframes mlSpin { to { rotate: 360deg; } }
.mls__prog { display: grid; gap: 8px; }
.mls__prog > span { display: flex; justify-content: space-between; align-items: baseline; }
.mls__prog small { color: #8a8e9a; }
.mls__prog i { height: 7px; overflow: hidden; border-radius: 99px; background: #e4e5ea; }
.mls__prog u { display: block; height: 100%; width: 62%; border-radius: inherit; background: #3b3852; animation: mlProg 6s ease-in-out infinite; }
@keyframes mlProg { 0% { width: 18%; } 80%, 100% { width: 86%; } }

/* Dövizle fiyat (ters düzen) */
.mlc { padding-bottom: clamp(48px, 6vw, 88px); }
.mlc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 88px); perspective: 1400px; }
.mlc__copy h2, .mls h2 { font-weight: 400; }
.mlc__copy h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.16; }
.mlc__copy h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.mlc__stats { margin-top: clamp(24px, 3vw, 40px); }
.mlc__media { display: grid; justify-items: center; gap: 12px; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f3f3f5; rotate: y calc(var(--tx, 0) * 2.5deg); }
.mlc__in, .mlc__out { display: grid; gap: 6px; width: min(340px, 100%); padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(11, 11, 15, .3); }
.mlc__in small, .mlc__out small { font-size: 12px; color: #8a8e9a; }
.mlc__price { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; border: 1px solid #e3e5ea; border-radius: 10px; font-size: 1.5rem; font-weight: 400; }
.mlc__price em { font-style: normal; color: #8a8e9a; }
.mlc__price u { margin-left: auto; font-size: .8rem; font-weight: 700; text-decoration: none; color: #3b3852; }
.mlc__arrow { display: grid; justify-items: center; gap: 2px; color: #3b3852; }
.mlc__arrow span { padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.mlc__arrow .ico { width: 22px; height: 22px; }
.mlc__arrow small { font-size: 12px; color: #6b6f7c; }
.mlc__out b { font-size: 1.05rem; }
.mlc__out strong { font-size: 1.8rem; font-weight: 900; color: var(--black); }

/* Paket şeridi */
.mlp { padding: 0 0 clamp(64px, 8vw, 112px); }
.mlp__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Kaydırmaya bağlı geliş: pencere ve döviz kartı hafifçe büyür (içi keskin) */
.js .mls__media.is-zoom, .js .mlc__media.is-zoom { opacity: 1; transform: none; transition: none; overflow: hidden; will-change: auto; }
.mls__media > .zoomin, .mlc__media > .zoomin { position: relative; inset: auto; scale: none; will-change: auto; }
.mlc__media > .zoomin { display: grid; justify-items: center; gap: 12px; width: 100%; }

@media (max-width: 960px) {
    .mlh__grid, .mls__grid, .mlc__grid { grid-template-columns: minmax(0, 1fr); }
    .mlh__stage, .mls__media, .mlc__media { width: 100%; max-width: 560px; margin-inline: auto; }
    .mlp__row { grid-template-columns: minmax(0, 1fr); }
    .mlp__row div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
    .mlp__row div:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mlh__stage::before, .mlh__stage::after, .mlh__chip, .mls__groups i.is-run, .mls__prog u, .mlh__langs em { animation: none; }
    .mlh__face { animation: none; }
    .mlh__face:first-child { opacity: 1; }
    .mls__media, .mlc__media { rotate: none; }
}
/* Çoklu Dil: pencere çubuğu ve paket şeridi kendi stilleriyle (SEO sayfasının kaldırılan .sxm__bar / .sxs__row'una bağlı kalmasın) */
.mls__bar { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-bottom: 1px solid #eceef2; background: #fafafc; }
.mls__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 11, 15, .14); }
.mls__bar b { margin-left: auto; font-size: 11.5px; color: #4b4e5a; }
.mlp__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.mlp__row div { display: grid; align-content: start; gap: 8px; padding: 22px clamp(14px, 1.8vw, 26px); border-left: 1px solid var(--line); }
.mlp__row div:first-child { padding-left: 0; border-left: 0; }
.mlp__row dt { font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -.01em; color: var(--black); }
.mlp__row dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 960px) { .mlp__row { grid-template-columns: minmax(0, 1fr); } .mlp__row div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .mlp__row div:first-child { border-top: 0; } }
.mlc { padding-bottom: clamp(64px, 8vw, 112px); } /* paket şeridi kaldırıldı (Nursel); döviz bölümü ile sorular arası */

/* ==========================================================================
   TASARIM VE TEMALAR (/cozumler/tasarim-ve-temalar) — 09.10.2026. Diğer çözüm sayfalarının dili + canlı deneme.
   ========================================================================== */
.tdh { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 112px); background: #0f0e17; color: #fff; }
.tdh::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.tdh__grid { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); perspective: 1600px; }
.tdh .crumb, .tdh .crumb a { color: rgba(255, 255, 255, .55); }
.tdh .crumb a:hover { color: #fff; }
.tdh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.03em; color: #fff; }
.tdh__title em { display: block; font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tdh__text { max-width: 36em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.tdh__text b { color: #fff; }
.tdh__cta { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(24px, 2.8vw, 34px); }
.tdh .btn--brand::before { background: #fff; }
.tdh .btn--brand:hover, .tdh .btn--brand:focus-visible { color: var(--black); }
.tdh .btn--line { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.tdh .btn--line::before { background: #fff; }
.tdh .btn--line:hover, .tdh .btn--line:focus-visible { color: var(--black); border-color: #fff; }
.tdh__stage { position: relative; display: grid; place-items: center; padding: 58px 0; }
.tdh__stage::before, .tdh__stage::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.tdh__stage::before { width: min(540px, 98%); border: 2px dashed rgba(255, 255, 255, .42); animation: kpSpin 40s linear infinite; }
.tdh__stage::after { width: min(430px, 82%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
.tdh__shop { position: relative; z-index: 1; display: grid; width: min(500px, 100%); }
/* Dört tema sırayla (16 sn): her "deri" kendi ana rengi, zemini ve köşesiyle */
.tdh__skin { grid-area: 1 / 1; display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--bg); color: var(--text); font-size: clamp(11px, 1vw, 13px); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; animation: tdSkin 16s infinite; animation-delay: calc(var(--k) * 4s); }
@keyframes tdSkin { 0% { opacity: 0; } 4%, 23% { opacity: 1; } 27%, 100% { opacity: 0; } }
.tdh__nav { display: flex; align-items: center; gap: 10px; }
.tdh__nav b { margin-right: auto; font-size: 1.15em; color: var(--p); }
.tdh__nav span { width: 3em; height: .5em; border-radius: 4px; background: rgba(11, 11, 15, .12); }
.tdh__nav em { padding: 3px 9px; border-radius: 999px; background: var(--p); font-size: .85em; font-style: normal; font-weight: 700; color: #fff; }
.tdh__banner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 1.4em 1.3em; border-radius: var(--r); background: var(--p); color: #fff; }
.tdh__banner small { width: 100%; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.tdh__banner b { margin-right: auto; font-size: 1.4em; font-weight: 400; }
.tdh__banner i { padding: .5em 1em; border-radius: var(--r); background: #fff; font-style: normal; font-weight: 700; color: var(--p); }
.tdh__prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tdh__prods div { display: grid; gap: 2px; padding: 6px; border-radius: var(--r); background: #fff; }
.tdh__prods img { aspect-ratio: 1; object-fit: cover; margin-bottom: 4px; border-radius: calc(var(--r) * .7); }
.tdh__prods small { font-weight: 700; color: var(--p); }
.tdh__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; color: #fff; animation: fxstFloat 6s ease-in-out infinite; }
.tdh__chip .ico { width: 16px; height: 16px; color: #ffd75e; }
.tdh__chip--a { top: 12px; right: 3%; }
.tdh__chip--b { bottom: 12px; left: 3%; animation-delay: -3s; }

/* Canlı deneme */
.tdl, .tde { padding: clamp(64px, 8vw, 120px) 0 0; }
.tde { padding-bottom: clamp(64px, 8vw, 120px); }
.tdl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(22px, 3vw, 44px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .2), transparent 62%), #f3f3f5; }
.tdl__ctrl { display: grid; gap: 22px; }
.tdl__lbl { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b6f7c; }
.tdl__sw { display: flex; flex-wrap: wrap; gap: 10px; }
.tdl__sw button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--p) 50%, var(--a) 50%); box-shadow: 0 0 0 3px #fff; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s ease; }
.tdl__sw button:hover { transform: scale(1.08); }
.tdl__sw button.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--black); }
.tdl .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tdl__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tdl__opts button { padding: 9px 16px; border: 1px solid #e3e5ea; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: #3d3f48; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.tdl__opts button:hover { border-color: #3b3852; }
.tdl__opts button.is-on { border-color: #3b3852; background: #3b3852; color: #fff; }
.tdl__more { display: flex; align-items: flex-start; gap: 10px; padding-top: 6px; font-size: 14px; line-height: 1.5; color: #3d3f48; }
.tdl__more .ico { flex: none; width: 20px; height: 20px; color: #3b3852; }
.tdl__stage { display: grid; place-items: center; padding: 10px; }
.tdl__card { --tp: #111827; --ta: #2563eb; --tr: 14px; --tf: var(--font); position: relative; display: grid; gap: 4px; width: min(300px, 100%); padding: 12px 12px 16px; border-radius: calc(var(--tr) + 6px); background: #fff; font-family: var(--tf); box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 30px 60px -30px rgba(11, 11, 15, .35); transition: border-radius .35s ease; }
.tdl__card img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; border-radius: var(--tr); transition: border-radius .35s ease; }
.tdl__tag { position: absolute; top: 22px; left: 22px; padding: 4px 10px; border-radius: calc(var(--tr) * .6 + 4px); background: var(--ta); font-size: 12px; font-weight: 700; color: #fff; transition: background .3s ease; }
.tdl__card > b { font-size: 1.15rem; color: var(--tp); transition: color .3s ease; }
.tdl__card > small { color: var(--muted); }
.tdl__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.tdl__price s { color: #9a9da8; }
.tdl__price strong { font-size: 1.35rem; font-weight: 900; color: var(--ta); transition: color .3s ease; }
.tdl__btn { margin-top: 10px; padding: 12px; border: 2px solid var(--tp); border-radius: var(--tr); background: var(--tp); font-weight: 700; text-align: center; color: #fff; transition: all .3s ease; }
.tdl__card[data-btn="soft"] .tdl__btn { border-color: transparent; background: color-mix(in srgb, var(--tp) 12%, #fff); color: var(--tp); }
.tdl__card[data-btn="line"] .tdl__btn { background: transparent; color: var(--tp); }
.tdl__card[data-btn="hard"] .tdl__btn { box-shadow: 4px 4px 0 var(--ta); }

/* Sürükle bırak düzenleyici */
.tde__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 88px); max-width: 1120px; perspective: 1400px; }
.tde__media { padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .22), transparent 62%), #f1effc; rotate: y calc(var(--tx, 0) * 2.5deg); }
.tde__win { overflow: hidden; border-radius: 14px; background: #fff; font-size: 12.5px; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 40px -26px rgba(59, 42, 158, .35); }
.tde__bar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid #eceef2; background: #fafafc; }
.tde__dev, .tde__undo { display: flex; gap: 4px; }
.tde__dev i { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 7px; color: #8a8e9a; }
.tde__dev i.is-on { background: #fff; color: var(--black); box-shadow: 0 1px 3px rgba(11, 11, 15, .15); }
.tde__dev .ico, .tde__undo .ico { width: 16px; height: 16px; }
.tde__undo { color: #8a8e9a; }
.tde__bar em { margin-left: auto; padding: 6px 14px; border-radius: 8px; background: var(--brand); font-style: normal; font-weight: 700; color: #fff; }
.tde__body { display: grid; grid-template-columns: 38% 1fr; min-height: 250px; }
.tde__blocks { display: grid; align-content: start; gap: 6px; padding: 12px; border-right: 1px solid #eceef2; background: #fafafc; }
.tde__blocks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e8e9ee; border-radius: 9px; background: #fff; font-weight: 700; color: #3d3f48; }
.tde__blocks .ico { width: 15px; height: 15px; color: #6b6f7c; }
.tde__blocks li.is-drag { position: relative; z-index: 2; border-color: var(--brand); box-shadow: 0 12px 24px -10px rgba(59, 42, 158, .5); animation: tdDrag 5s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes tdDrag { 0%, 12% { transform: none; opacity: 1; } 45% { transform: translate(120%, -2px) rotate(-2deg); opacity: 1; } 55% { transform: translate(120%, -2px); opacity: 0; } 56%, 100% { transform: none; opacity: 0; } 62%, 100% { opacity: 1; } }
.tde__canvas { display: grid; align-content: start; gap: 8px; padding: 12px; }
.tde__sec { border-radius: 9px; background: #f3f3f5; }
.tde__sec--hero { display: grid; gap: 8px; padding: 18px 14px; background: #2e2b45; color: #fff; }
.tde__sec--hero b { font-size: 1.1em; font-weight: 400; }
.tde__sec--hero i { width: 40%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.tde__drop { padding: 4px; border: 1.5px dashed #c9c2f5; border-radius: 10px; }
.tde__drop span { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 7px; background: #f3f1fd; font-weight: 700; color: #3b3852; opacity: 0; animation: tdDrop 5s ease infinite; }
.tde__drop .ico { width: 15px; height: 15px; }
@keyframes tdDrop { 0%, 50% { opacity: 0; transform: scale(.97); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tde__sec--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.tde__sec--grid i { aspect-ratio: 1; border-radius: 6px; background: #e4e5ea; }
.tde__copy h2, .tdl h2 { font-weight: 400; }
.tde__copy h2 { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.16; }
.tde__copy h2 em { font-style: normal; font-weight: 700; color: var(--brand); }
.tde__list { display: grid; gap: 16px; margin-top: clamp(22px, 2.6vw, 36px); }
.tde__list li { display: flex; align-items: flex-start; gap: 14px; }
.tde__list .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #3b3852; }
.tde__list span { display: grid; gap: 2px; }
.tde__list b { font-size: 1.02rem; }
.tde__list small { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.js .tde__media.is-zoom { opacity: 1; transform: none; transition: none; overflow: hidden; will-change: auto; }
.tde__media > .zoomin { position: relative; inset: auto; scale: none; will-change: auto; }

@media (max-width: 960px) {
    .tdh__grid, .tdl__grid, .tde__grid { grid-template-columns: minmax(0, 1fr); }
    .tdh__stage, .tde__media { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .tdh__stage::before, .tdh__stage::after, .tdh__chip, .tde__blocks li.is-drag, .tde__drop span { animation: none; }
    .tdh__skin { animation: none; }
    .tdh__skin:first-child { opacity: 1; }
    .tde__drop span { opacity: 1; }
    .tde__media { rotate: none; }
}
/* Telefonda örnek kart seçeneklerin ÜSTÜNDE (seçince değişikliği görsün) ve biraz küçük */
@media (max-width: 960px) { .tdl__stage { order: -1; } .tdl__card { width: min(240px, 80%); } }

/* ==========================================================================
   ENTEGRASYONLAR — 2. biçim (09.10.2026, Nursel: "elden geçir"). Çözüm sayfalarının dili; liste admin'den, arama kutulu.
   ========================================================================== */
.igh { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 112px); background: #0f0e17; color: #fff; }
.igh::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 82% 30%, rgba(108, 92, 231, .55), transparent 70%), radial-gradient(35% 45% at 70% 85%, rgba(242, 183, 5, .28), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(108, 92, 231, .25), transparent 70%); }
.igh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); perspective: 1600px; }
.igh .crumb, .igh .crumb a { color: rgba(255, 255, 255, .55); }
.igh .crumb a:hover { color: #fff; }
.igh__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; color: #fff; }
.igh__title em { font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 45%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.igh__text { max-width: 34em; margin-top: clamp(18px, 2vw, 26px); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.igh__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.8vw, 36px); }
.igh__stats a { display: grid; gap: 2px; min-width: 128px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s ease, border-color .3s ease; }
.igh__stats a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.igh__stats b { font-size: 2rem; font-weight: 400; line-height: 1; color: #fff; }
.igh__stats span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.igh__stage { position: relative; display: grid; place-items: center; min-height: clamp(380px, 34vw, 460px); }
.igh__stage::before, .igh__stage::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.igh__stage::before { width: min(460px, 96%); border: 2px dashed rgba(255, 255, 255, .42); animation: kpSpin 40s linear infinite; }
.igh__stage::after { width: min(320px, 70%); border: 1.5px solid rgba(185, 176, 255, .55); background: radial-gradient(circle at 50% 0, #ffd75e 0 6px, transparent 7px), radial-gradient(circle at 0 50%, #b9b0ff 0 5px, transparent 6px), radial-gradient(circle at 100% 50%, #fff 0 4px, transparent 5px); animation: kpSpin 26s linear infinite reverse; }
.igh__hub { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; padding: 22px 26px; border-radius: 22px; background: #fff; color: var(--black); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.igh__logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #fff; }
.igh__logo .ico { width: 26px; height: 26px; }
.igh__hub b { font-size: 1.1rem; }
.igh__hub small { display: flex; gap: 6px; color: #8a8e9a; }
.igh__hub small .ico { width: 16px; height: 16px; }
/* Altı rozet halkanın çevresinde, sırayla hafifçe süzülür */
.igh__node { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--black); white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); animation: fxstFloat 6s ease-in-out infinite; animation-delay: calc(var(--k) * -1s); }
.igh__node i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2e2b45; font-size: 12px; font-style: normal; color: #fff; }
.igh__node--0 { top: 6%; left: 18%; }
.igh__node--1 { top: 4%; right: 10%; }
.igh__node--2 { top: 44%; right: -2%; }
.igh__node--3 { bottom: 6%; right: 14%; }
.igh__node--4 { bottom: 4%; left: 10%; }
.igh__node--5 { top: 44%; left: -2%; }

/* Liste */
.igl { padding: clamp(56px, 7vw, 104px) 0 0; }
.igl__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.igl__search { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 10px 26px -20px rgba(11, 11, 15, .35); transition: border-color .2s ease, box-shadow .2s ease; }
.igl__search:focus-within { border-color: #3b3852; box-shadow: 0 0 0 4px #ebe8fd; }
.igl__search .ico { flex: none; width: 20px; height: 20px; color: #8a8e9a; }
.igl__search input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--black); outline: none; }
.igl__hint { font-size: .95rem; color: var(--muted); }
.igl__groups { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.igl__grp { padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 100%, rgba(255, 216, 74, .2), transparent 62%), #f3f3f5; }
.igl__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.igl__head i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #fff; color: #3b3852; }
.igl__head .ico { width: 22px; height: 22px; }
.igl__head h2 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 400; }
.igl__head span { font-size: .92rem; color: var(--muted); }
.igl__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.igl__tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s ease; }
.igl__tile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(59, 42, 158, .45); }
.igl__tile img { width: 40px; height: 40px; object-fit: contain; }
.igl__mono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #f1f1f4; font-weight: 700; color: #3b3852; }
.igl__mono .ico { width: 20px; height: 20px; }
.igl__txt { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.igl__txt b { font-size: .98rem; }
.igl__txt small { font-size: .82rem; color: var(--muted); }
.igl__tile--soon em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #fcefc0; font-size: 11.5px; font-style: normal; font-weight: 700; color: #6b5300; }
.igl__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .92rem; line-height: 1.55; color: #3d3f48; }
.igl__note .ico { flex: none; width: 19px; height: 19px; margin-top: 2px; color: #3b3852; }
.igl__empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: #f3f3f5; color: #3d3f48; }
.igl__empty .ico { width: 20px; height: 20px; }
.igl__empty a { font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Nasıl bağlanır */
.igs { padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 104px); }
.igs__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.igs__steps li { align-content: start; }
.igs__help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.igs__help h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 400; }
.igs__help p { margin-top: 8px; color: var(--muted); }

@media (max-width: 1080px) { .igl__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
    .igh__grid, .igs__help { grid-template-columns: minmax(0, 1fr); }
    .igs__steps { grid-template-columns: minmax(0, 1fr); }
    .igl__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .igl__tiles { grid-template-columns: minmax(0, 1fr); }
    .igh__node { font-size: 11.5px; }
    .igh__node--2, .igh__node--5 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .igh__stage::before, .igh__stage::after, .igh__node { animation: none; } }
@media (max-width: 520px) { .igl__tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .igl__tile { gap: 8px; padding: 10px; } .igl__mono { width: 32px; height: 32px; } .igl__txt b { font-size: .88rem; } .igl__txt small { font-size: .74rem; } } /* telefonda iki sütun, liste kısalır */
/* Entegrasyonlar — kutusuz, ince liste (Nursel: "ödeme kuruluşlarını ince versek, aşağıdakilerde hep kutu kutu"). Grup çerçevesi
   ve beyaz kartlar kalktı: başlık + ince çizgilerle ayrılmış dört sütunlu liste; adımlar da kutusuz. */
.igl__grp { padding: 0; border-radius: 0; background: none; }
.igl__groups { gap: clamp(40px, 5vw, 64px); }
.igl__head { padding-bottom: 16px; margin-bottom: 0; border-bottom: 1px solid var(--black); }
.igl__head i { width: 40px; height: 40px; background: #f3f3f5; }
.igl__tiles { gap: 0 clamp(16px, 2vw, 32px); }
.igl__tile { padding: 14px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.igl__tile:hover { transform: none; box-shadow: none; }
.igl__tile:hover b { color: var(--brand); }
.igl__txt b { font-weight: 700; transition: color .2s ease; }
.igl__mono { width: 30px; height: 30px; border-radius: 50%; background: #f3f3f5; font-size: 12.5px; }
.igl__note { margin-top: 18px; color: var(--muted); }
.igs__steps li { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.igs__steps i { border-right-color: var(--line); }
@media (max-width: 520px) { .igl__tile { padding: 12px 0; } }
/* Çizgiler azaltıldı (Nursel: "bu sefer de çok çizgi"): firma satırları arasında çizgi yok, yalnız boşluk; başlık altında tek açık gri çizgi */
.igl__head { border-bottom-color: var(--line); margin-bottom: 8px; }
.igl__tile { padding: 12px 0; border-bottom: 0; }
/* Grup başlıkları belirgin kutu (Nursel: "başlıkları belirginleştirecek kutu"): açık lila + hafif sarı zemin, beyaz ikon, sağda sayı etiketi */
.igl__head { padding: 16px 20px; margin-bottom: 10px; border-bottom: 0; border-radius: 18px; background: radial-gradient(120% 140% at 100% 100%, rgba(255, 216, 74, .22), transparent 60%), #f1effc; }
.igl__head i { background: #fff; }
.igl__head > div { flex: 1; }
.igl__count { padding: 6px 13px; border-radius: 999px; background: #fff; font-size: 13px; font-style: normal; font-weight: 700; color: #3b3852; white-space: nowrap; }
.igl__grp--soon .igl__head { background: #f3f3f5; }
.igs__help { border-top: 0; padding-top: 0; } /* adımlar ile yardım alanı arasında çizgi yok (Nursel) */
.igs__steps { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); } /* başlık ile adımlar arasında ince çizgi (Nursel) */

/* ==========================================================================
   KAYIT (/kayit) ve KAYIT TAMAM — 09.10.2026. Ana sitenin dili: solda tanıtım (koyu zemin, ışıma), sağda beyaz form kartı.
   ========================================================================== */
.kyt { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); background: #0f0e17; color: #fff; }
.kyt::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 20% 30%, rgba(108, 92, 231, .5), transparent 70%), radial-gradient(35% 45% at 30% 90%, rgba(242, 183, 5, .22), transparent 70%); }
.kyt__grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.kyt .crumb, .kyt .crumb a { color: rgba(255, 255, 255, .55); }
.kyt__intro { position: sticky; top: calc(var(--hdr-h) + 32px); padding-top: 8px; }
.kyt__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 700; }
.kyt__eyebrow .ico { width: 16px; height: 16px; color: #ffd75e; }
.kyt__title { margin-top: 18px; font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; color: #fff; }
.kyt__title em { font-style: normal; font-weight: 700; background: linear-gradient(90deg, #b9b0ff 0%, #fff 50%, #ffd75e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kyt__lead { max-width: 30em; margin-top: 18px; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.kyt__perks { display: grid; gap: 14px; margin-top: 28px; }
.kyt__perks li { display: flex; align-items: flex-start; gap: 12px; }
.kyt__perks .ico { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: #ffd75e; }
.kyt__perks span { display: grid; gap: 2px; }
.kyt__perks small { color: rgba(255, 255, 255, .62); }

.kyt__form { display: grid; gap: 22px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-lg); background: #fff; color: var(--text); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.kyt__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.kyt__step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--black); }
.kyt__step legend i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); font-size: 13px; font-style: normal; line-height: 28px; text-align: center; color: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--brand-soft); }
.kyt__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kyt__plan { position: relative; display: grid; align-content: start; gap: 4px; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.kyt__plan:hover { border-color: #c9c2f5; }
.kyt__plan input { position: absolute; opacity: 0; pointer-events: none; }
.kyt__plan:has(input:checked) { border-color: var(--brand); background: #f7f6fe; box-shadow: 0 14px 30px -20px rgba(59, 42, 158, .5); }
.kyt__plan:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.kyt__check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d9dae0; color: transparent; transition: all .2s ease; }
.kyt__check svg { width: 13px; height: 13px; }
.kyt__plan:has(input:checked) .kyt__check { border-color: var(--brand); background: var(--brand); color: #fff; }
.kyt__plan > b { font-size: 1rem; }
.kyt__price { font-size: 1.35rem; font-weight: 900; color: var(--black); }
.kyt__price small { margin-left: 2px; font-size: .8rem; font-weight: 400; color: var(--muted); }
.kyt__plan ul { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #eceef2; }
.kyt__plan li { position: relative; padding-left: 16px; font-size: .86rem; color: #3d3f48; }
.kyt__plan li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 7px; height: 4px; border: solid var(--ok); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.kyt__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.kyt__field { display: grid; gap: 6px; }
.kyt__field > span:first-child { font-size: .88rem; font-weight: 700; color: #3d3f48; }
.kyt__field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #e3e5ea; border-radius: 12px; background: #fff; font: inherit; font-size: .98rem; color: var(--black); transition: border-color .2s ease, box-shadow .2s ease; }
.kyt__field input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px #ebe8fd; }
.kyt__sub { display: flex; align-items: stretch; overflow: hidden; border: 1px solid #e3e5ea; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.kyt__sub:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px #ebe8fd; }
.kyt__sub input { min-width: 0; border: 0; border-radius: 0; }
.kyt__sub input:focus { box-shadow: none; }
.kyt__sub em { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid #e3e5ea; background: #f6f6f8; font-size: .9rem; font-style: normal; color: var(--muted); white-space: nowrap; }
.kyt__err { display: block; font-size: .84rem; font-style: normal; color: var(--err); }
.kyt__submit { justify-content: center; width: 100%; }
.kyt__fine { margin-top: -10px; font-size: .88rem; text-align: center; color: var(--muted); }

/* Kayıt tamam */
.kyt--done .wrap { position: relative; display: grid; place-items: center; min-height: 52vh; }
.kyt__done { display: grid; justify-items: center; gap: 14px; width: min(620px, 100%); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: #fff; color: var(--text); text-align: center; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.kyt__ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e3f4ea; color: var(--ok); }
.kyt__ok svg { width: 32px; height: 32px; }
.kyt__done h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 400; }
.kyt__done h1 em { font-style: normal; font-weight: 700; color: var(--brand); }
.kyt__done > p { max-width: 34em; line-height: 1.6; color: var(--muted); }
.kyt__info { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f3f1fd; font-size: .92rem; line-height: 1.5; text-align: left; color: #3d3f48; }
.kyt__info .ico { flex: none; width: 20px; height: 20px; color: var(--brand); }
.kyt__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.kyt__dev { padding: 10px 12px; border-radius: 10px; background: #fff7e0; font-size: .82rem; text-align: left; color: #6b5300; }

@media (max-width: 960px) {
    .kyt__grid { grid-template-columns: minmax(0, 1fr); }
    .kyt__intro { position: static; }
}
@media (max-width: 640px) {
    .kyt__plans, .kyt__row { grid-template-columns: minmax(0, 1fr); }
}
.kyt__eyebrow { display: flex; width: fit-content; } /* sayfa yolunun altında ayrı satır */
/* KAYIT 2. biçim — üst menü/alt kısım yok (Nursel): solda koyu tanıtım paneli (sabit), sağda form */
.kys { display: grid; grid-template-columns: minmax(340px, .42fr) minmax(0, .58fr); min-height: 100vh; background: #f6f6f8; }
.kys__side { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; height: 100vh; padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 56px); overflow: hidden; background: #0f0e17; color: #fff; }
.kys__side::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 20% 30%, rgba(108, 92, 231, .5), transparent 70%), radial-gradient(50% 40% at 40% 100%, rgba(242, 183, 5, .22), transparent 70%); }
.kys__side > * { position: relative; }
.kys__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kys__logo img { height: 34px; width: auto; }
.kys__back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; transition: background .2s ease, border-color .2s ease; }
.kys__back:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.kys__back svg { width: 16px; height: 16px; }
.kys__copy .kyt__eyebrow { margin-top: 0; }
.kys__foot { font-size: 13px; color: rgba(255, 255, 255, .45); }
.kys__main { display: grid; align-items: center; padding: clamp(24px, 4vw, 64px) clamp(16px, 3.4vw, 56px); }
.kys__main .kyt__form { width: min(760px, 100%); margin-inline: auto; box-shadow: 0 2px 4px rgba(11, 11, 15, .04), 0 40px 80px -46px rgba(59, 42, 158, .35); }
.kyt__cur { margin-right: 1px; font-size: .75em; font-weight: 700; color: var(--black); }
.kyt__plan li.is-off { color: #b0b3bc; text-decoration: line-through; }
.kyt__plan li.is-off::before { border-color: #d9dae0; border-width: 0 0 2px 0; transform: none; top: .6em; width: 8px; height: 0; }
.kyt__planlink { margin-top: 10px; font-size: .9rem; }
.kyt__planlink a { font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
    .kys { grid-template-columns: minmax(0, 1fr); }
    .kys__side { position: relative; height: auto; }
    .kys__foot { display: none; }
}
/* Telefonda paketler yan yana (Nursel): kaydırılan şerit, kart ~%76 genişlik, yerine oturur; yandakinin kenarı görünür */
@media (max-width: 640px) { .kyt__plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -4px; padding: 4px 4px 10px; scrollbar-width: none; } .kyt__plans::-webkit-scrollbar { display: none; } .kyt__plan { scroll-snap-align: start; } }

/* Kayıt sayfası aylık/yıllık (09.10.2026): Fiyatlar sayfasının anahtarı küçültülmüş hâliyle; kartta seçili dönemin tutarı ve
   altında diğer dönemin karşılığı. .is-yearly kapsayıcıda hangisinin görüneceğini seçer (JS yoksa yıllık görünür). */
.kyt__cycle { display: inline-grid; margin: 0 0 14px; padding: 4px; }
.kyt__cycle button { min-width: 112px; padding: calc(8px + .1em) 14px calc(8px - .1em); font-size: 14px; }
.kyt__cycle .cycle__knob { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); }
.kyt__plans .kyt__py { display: none; }
.kyt__plans.is-yearly .kyt__py { display: block; }
.kyt__plans.is-yearly .kyt__pm { display: none; }
.kyt__alt { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.kyt__alt em { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--mark); font-size: .74rem; font-style: normal; font-weight: 800; color: var(--black); }
@media (max-width: 640px) { .kyt__cycle button { min-width: 0; padding-inline: 12px; } }

/* 09.10.2026 — Nursel: "headerda logo menüye dikeyde ortalı olmalı". Logo bağlantısı satır içi öğeydi: yazının alt payı
   yüzünden içeriğinden ~9 px uzun kutu oluşuyor, logo menünün ortasından ~4 px yukarıda kalıyordu. Esnek kutu → tam orta. */
.hdr__logo { display: flex; align-items: center; }

/* 09.10.2026 — Nursel: "gerçek mağazalar masaüstündeki gibi, yalnız elle sağa-sola kaydırılsın". Telefonda 3B galeri
   sabitlenmez (themes3d.js → .is-touch); kartlar parmakla sürüklenir. Yatay sürükleme galeriye, dikey sayfaya. */
.tgal.is-touch .tgal__stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }