/*
 * Sablonun UZERINE binen kucuk duzeltme katmani.
 *
 * `style.css` sablonun kendi dosyasi ve DEGISTIRILMIYOR - duzen, renk ve
 * olculer oradan geliyor. Buraya yalnizca sablonun kendi kusurlarini
 * kapatan kurallar yaziliyor.
 */

/*
 |=============================================================================
 | YAZI TIPI: SABLON KIRIK BIR ADRESTEN CEKIYORDU
 |=============================================================================
 |
 | `style.css` en basinda su satiri tasiyordu:
 |
 |     @import url(../fonts.googleapis.com/css2.2aeeaf.delayed?family=Inter...)
 |
 | Bu bir AYNA ARTEFAKTI: sablon indirilirken Google Fonts adresi yerel bir
 | yola cevrilmis, ama o dosya hicbir zaman var olmamis. Sonuclari:
 |
 | 1. Adres 404 veriyordu ve Laravel 404'e 23 KB'lik HTML hata sayfasi
 |    donuyor. Yani her public sayfa yuklemesinde, bosuna, 23 KB indirilip
 |    atiliyordu.
 | 2. `@import` bir stil dosyasinin BASINDA yer aldiginda RENDER'I BLOKLAR:
 |    tarayici onu cozmeden sayfayi boyamaya baslamiyor. Yani bu 404 dogrudan
 |    LCP'ye biniyordu.
 | 3. Inter hicbir zaman yuklenmiyordu. Ic sayfalar Vite paketindeki
 |    `resources/css/fonts.css` sayesinde Inter goruyordu; ANA SAYFA o paketi
 |    yuklemiyor, yani sitenin en onemli sayfasi tek basina yedek sistem
 |    yazi tipiyle basiliyordu.
 |
 | `@import` kaldirildi. Asagidaki tanimlar `resources/css/fonts.css` ile
 | BIREBIR ayni dosyalari gosteriyor - yeni bir varlik eklenmedi; amac zaten
 | sitede sunulan yazi tipini ana sayfaya da getirmek. Ayni adres iki
 | pakette de gectigi icin tarayici dosyayi bir kez indirir.
 |
 | Agirlik araligi `400 700`: sablonun gercekten kullandigi araliktir.
 */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 |=============================================================================
 | HAREKET KISITINDA ICERIK KAYBOLUYORDU
 |=============================================================================
 |
 | Sablon WOW.js kullaniyor: `.wow` tasiyan her oge sayfaya `visibility:
 | hidden` ile geliyor ve gorus alanina girdiginde betik onu gorunur
 | yapiyor.
 |
 | Sorun su: betik `prefers-reduced-motion` tercihini HIC dinlemiyor, ama
 | isletim sisteminde animasyon kapali oldugunda tarayici `animation-name`i
 | etkisiz birakiyor. Sonuc, WOW'un asla `animated` sinifini eklememesi ve
 | ICERIGIN HIC GORUNMEMESI - ozellik kartlari, fiyat tablosu ve sorular
 | bombos bir cerceve olarak kaliyor.
 |
 | Bu bir sus kaybi degil, sayfanin yarisinin okunamamasi. Hareket kisiti
 | acan ziyaretci (ve bu projede gelistirmeyi onaylayan kisi) sayfayi bos
 | goruyordu.
 |
 | Duzeltme: kisitli modda animasyonu tamamen birak, ogeyi oldugu yerde ve
 | gorunur birak. Hareket acikken sablonun kendi davranisi aynen suruyor.
 */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/*
 | Betik hic calismazsa da icerik gorunur kalmali.
 |
 | `bundle.js` yuklenmediginde (ag hatasi, betik engelleyici) WOW hicbir
 | ogeyi acmaz. `no-js` isareti sayfanin basinda kaldiriliyor; kalirsa
 | asagidaki kural devreye girer.
 */
.no-js .wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

/*
 |=============================================================================
 | ICERIGE ATLA
 |=============================================================================
 |
 | Sablonun kendi atlama baglantisi yoktu. Stil burada cunku sayfa projenin
 | `app.css` katmanini yuklemiyor - orada tanimli `.skip-link` kurali bu
 | sayfaya ulasmiyor.
 |
 | Baglanti gorunmez ama ODAKLANDIGINDA gorunur olmak zorunda: klavyeyle
 | gezen biri Tab'a bastiginda nereye gittigini gormeli.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    background: #1c1a1b;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/*
 |=============================================================================
 | ORTAK ALT BILGI
 |=============================================================================
 |
 | Alt bilgi projenin ortak parcasi (`layouts/partials/public-footer`) ve
 | `sf-*` siniflari kullaniyor. O siniflarin stili `storefront.css` icinde
 | ve bu sayfa o katmani yuklemiyor - sonucta alt bilgi bicimlenmemis bir
 | baglanti yiginina donusuyordu.
 |
 | Parcayi kopyalamak yerine stilini buraya tasimak tercih edildi: icerik
 | (baglantilar, diller, yasal metinler) TEK yerde kalsin, yalnizca sunum
 | yuzeye gore degissin.
 |
 | 2026-08-06 notu: blog ve yasal sayfalar da bu katmana gecti, artik
 | `storefront.css` yuklenmiyor. Alt bilgi boylece TEK bir stil kaynagindan
 | besleniyor.
 |
 | Renkler sablonun paletinden: koyu serit yerine acik zemin + ust cizgi,
 | cunku sablonun kendi alt bilgisi de oyleydi ve koyu bir blok sayfanin
 | sonuna yabanci duruyordu.
 */
/*
 | Alt bilgi KOYU.
 |
 | Once sablonun acik zeminine uydurulmustu ve marka logosu kayboldu:
 | ortak parca koyu zemin icin `BrandAssets::dark()` (beyaz yazili logo)
 | basiyor ve o logo acik zeminde gorunmez oluyordu.
 |
 | Logoyu degistirmek yerine zemini projenin kendi alt bilgi rengine
 | dondurmek dogru olan: parca blog ve yasal sayfalarda da ayni logoyu
 | basiyor, orada da koyu zemin var. Tek bir yuzey icin ayri logo
 | mantigi acmak, ayrisma uretmenin en kisa yolu.
 */
.sf-footer {
    padding: 80px 0 26px;
    background: #1c1a1b;
    color: #f5f1f2;
}

.sf-footer .sf-wrap {
    width: min(1305px, calc(100% - 40px));
    margin-inline: auto;
}

/*
 | MARKA USTTE, GEZINME SUTUNLARI TEK SIRADA ALTTA.
 |
 | Bu duzen iki kez yanlis kuruldu ve ikisinin de sebebi ayni: sutun
 | sayisini icerige birakmak.
 |
 |   1. `grid-auto-flow: column` - sutun sayisini icerik belirliyordu,
 |      yedi sutun olusuyor ve her biri 148 piksele dusup baglanti
 |      metinlerini iki satira kiriyordu.
 |   2. `1.6fr + repeat(4, 1fr)` - bes tracklik izgaraya marka blogu ve
 |      ALTI gezinme sutunu sigdirilmaya calisiliyordu. Son iki sutun
 |      ikinci satira dusuyor ve alt bilgi yarim kalmis gibi duruyordu.
 |
 | Simdi iki ayri katman var: marka blogu kendi satirinda, gezinme
 | sutunlari kendi izgarasinda. Sutun sayisi markup'tan geliyor
 | (`--footer-cols`), yani icerige degil BILGIYE bagli - Turkce yuzeyde
 | alti sutun, digerlerinde bes, ikisinde de bosluk kalmiyor.
 */
.sf-footer__grid {
    display: grid;
    gap: 48px;
}

.sf-footer__nav {
    display: grid;
    grid-template-columns: repeat(var(--footer-cols, 5), minmax(0, 1fr));
    gap: 40px 28px;
}

.sf-footer .sf-brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.sf-footer__brand p {
    max-width: 420px;
    margin: 18px 0 0;
    color: #b0a8ab;
    font-size: 15px;
    line-height: 1.7;
}

/*
 | Baglantilarin kendi yuksekligi var (dokunma hedefi icin 32 piksel),
 | bu yuzden izgara araligi kucuk. Ikisi ust uste binince satirlar
 | 45 piksel araliga cikip sutunlar seyrek gorunuyordu.
 */
.sf-footer nav {
    display: grid;
    align-content: start;
    gap: 2px;
}

.sf-footer nav strong {
    margin-bottom: 4px;
    color: #948e90;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-footer nav a {
    color: #b0a8ab;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s ease;
}

.sf-footer nav a:hover {
    color: #ffffff;
}

.sf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid #322c2f;
    color: #948e90;
    font-size: 13px;
}

/*
 | Dar ekranda sutun sayisi azaliyor.
 |
 | `--footer-cols` yalnizca genis ekranda gecerli; asagida sabit sayilarla
 | eziliyor cunku alti sutun 900 pikselde 130 piksere dusup baglanti
 | metinlerini kiriyor.
 */
@media (max-width: 1100px) {
    .sf-footer__nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .sf-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .sf-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 |=============================================================================
 | EKRAN KAYDIRICISI - GORSEL CERCEVEYE OTURSUN
 |=============================================================================
 |
 | Sablonun telefon cercevesi (`mobile-frame.png`) 295x594 piksel ve icine
 | AYNI ORANDA bir ekran goruntusu bekliyor. Sablonun kendi `screen-*.png`
 | dosyalari o orandaydi.
 |
 | Bizim gorsellerimiz davetiye kapaklari ve orani farkli (9:16). Kendi
 | oraniyla cizildiginde 265x471 oluyor, cerceve ise 594 - aradaki 123
 | piksel bosta kaliyor ve telefon YARIM gorunuyordu.
 |
 | Duzeltme: gorsel cercevenin ic ekran olcusune sabitleniyor ve `cover` ile
 | kirpiliyor. Kirpma ustten degil MERKEZDEN yapiliyor (`object-position`),
 | cunku davetiye kapaklarinda isimler ortada duruyor - ustten kirpmak
 | ciftin adini kesiyordu.
 */
.mySwiper .swiper-slide img {
    height: 560px;
    object-fit: cover;
    object-position: center;
}

/* Cerceve gorseli ile slaytlar ayni dikey eksende bassin. */
.mySwiper .swiper-wrapper {
    align-items: center;
}

@media (max-width: 640px) {
    .mySwiper .swiper-slide img {
        height: 440px;
    }
}

/*
 |=============================================================================
 | OKUMA METNI - .sf-prose
 |=============================================================================
 |
 | Blog yazilari ve yasal metinler govdelerini bir DONGUDEN basiyor:
 | `BlogPost::blocks()` sirayla <h2>, <h3>, <p>, <ul>, <blockquote> uretiyor.
 | Bu yuzden her etikete ayri utility sinifi yazmak mumkun degil - bicim
 | kapsayicidan inmek zorunda.
 |
 | Olculer sablonun kendi tipografisiyle ayni ailede: govde 16/1.75, baslik
 | agirligi 700, renk `#637381` (sablonun `text-body` rengi).
 */
.sf-prose {
    color: #637381;
    font-size: 16px;
    line-height: 1.75;
}

.sf-prose > * + * {
    margin-top: 20px;
}

.sf-prose h2 {
    margin-top: 44px;
    color: #1d2144;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.sf-prose h3 {
    margin-top: 34px;
    color: #1d2144;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* Ilk baslik bolumun kendi ust bosluguna ekleme yapmasin. */
.sf-prose > :first-child {
    margin-top: 0;
}

.sf-prose a {
    color: #7083f5;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sf-prose strong {
    color: #1d2144;
    font-weight: 600;
}

.sf-prose ul,
.sf-prose ol {
    padding-left: 22px;
}

.sf-prose ul {
    list-style: disc;
}

.sf-prose ol {
    list-style: decimal;
}

.sf-prose li + li {
    margin-top: 8px;
}

.sf-prose blockquote {
    padding: 4px 0 4px 22px;
    border-left: 3px solid #7083f5;
    color: #1d2144;
    font-size: 18px;
    font-style: italic;
}

.sf-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.sf-prose th,
.sf-prose td {
    padding: 12px 14px;
    border: 1px solid #e7e7e7;
    text-align: left;
    vertical-align: top;
}

.sf-prose th {
    background: #f8fafb;
    color: #1d2144;
    font-weight: 600;
}

/* Genis tablo sayfayi yana kaydirmasin. */
.sf-prose .sf-prose__scroll {
    overflow-x: auto;
}

.dark .sf-prose {
    color: #959cb1;
}

.dark .sf-prose h2,
.dark .sf-prose h3,
.dark .sf-prose strong,
.dark .sf-prose blockquote,
.dark .sf-prose th {
    color: #ffffff;
}

.dark .sf-prose th {
    background: #2a2e44;
}

.dark .sf-prose th,
.dark .sf-prose td {
    border-color: #34374a;
}

/*
 |=============================================================================
 | SAYFALAYICI
 |=============================================================================
 |
 | Sayfalayici gorunumu (`vendor/pagination/davetola`) `.ui-pagination` ve
 | `.ui-btn` siniflarina yasliyor; o siniflarin tanimi `app.css` icinde ve bu
 | yuzey o katmani yuklemiyor. Gorunume Tailwind utility'si yazmak da
 | cozum degil - ayni gorunum panelde de basiliyor ve orada `app.css` var;
 | iki farkli yuzey icin iki gorunum tutmak, blog sayfalayicisinin panelden
 | sessizce ayrismasi demekti.
 |
 | Bu yuzden tanimlar burada TEKRARLANIYOR. Tekrar bilincli: gorunum tek,
 | stil kaynagi yuzeye gore iki.
 */
.sf-page .ui-pagination {
    display: grid;
    justify-items: center;
    gap: 16px;
}

.sf-page .ui-pagination__status {
    margin: 0;
    color: #637381;
    font-size: 14px;
}

.sf-page .ui-pagination__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sf-page .ui-pagination__gap {
    padding: 0 4px;
    color: #637381;
}

.sf-page .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 44px dokunma hedefi: parmakla sayfa degistirmek de mumkun olmali. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2144;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.sf-page .ui-btn:hover {
    border-color: #7083f5;
    color: #7083f5;
}

.sf-page .ui-btn.is-active {
    border-color: #7083f5;
    background: #7083f5;
    color: #ffffff;
}

/* Devre disi ok bir <span>; tiklanabilir gorunmemeli. */
.sf-page .ui-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: default;
}

.dark .sf-page .ui-btn {
    border-color: #34374a;
    background: #2a2e44;
    color: #ffffff;
}

.dark .sf-page .ui-pagination__status,
.dark .sf-page .ui-pagination__gap {
    color: #959cb1;
}

/*
 | Yasal metinlerdeki uyari kutusu.
 |
 | Metnin kendisi degil, metnin DURUMU hakkinda: "bu taslak, hukuk
 | danismaniyla kesinlestirilecek". Govdeyle ayni renkte basilirsa
 | okuyan onu maddelerden biri sanar.
 */
.sf-prose .sf-note {
    margin-top: 0;
    padding: 16px 20px;
    border-left: 3px solid #f9c74f;
    border-radius: 0 8px 8px 0;
    background: #fdf8e9;
    color: #6b5a1f;
    font-size: 15px;
}

.dark .sf-prose .sf-note {
    background: #2a2e44;
    color: #e8d9a8;
}

/*
 | HANGI METNIN BAGLAYICI OLDUGU notu, taslak uyarisiyla AYNI gorunmemeli:
 | ikisi ust uste duruyor ve ayni sari kutuda basilsalardi tek bir uyari
 | sanilirlar. Bu yuzden mavi - "dikkat" degil "bilgi" tonu.
 */
.sf-prose .sf-note--legal {
    margin-bottom: 12px;
    border-left-color: #4a6cf7;
    background: #eef1fe;
    color: #2b3a76;
}

/*
 | Baglanti metni uc dilde de uzun ("Read the Turkish original", "Zur
 | turkischen Fassung"); `nowrap` verilseydi dar ekranda kutudan tasardi.
 */
.sf-prose .sf-note--legal a {
    color: inherit;
    text-decoration: underline;
}

.dark .sf-prose .sf-note--legal {
    background: #232a45;
    color: #c3cdf5;
}

/*
 |=============================================================================
 | ORTAK BILESENLER - KAPAK VE BOS DURUM
 |=============================================================================
 |
 | `x-ui.theme-cover` ve `x-ui.empty-state` bilesenleri panel, admin ve tema
 | galerisinde AYNI dosyadan basiliyor. Stilleri `components.css` icinde ve
 | bu yuzey o katmani yuklemiyor.
 |
 | Bilesenin isaretlemesine utility sinifi eklemek cozum degil: ayni bilesen
 | panelde de basiliyor ve orada Appline siniflari yok - eklenen her sinif
 | panelde anlamsiz bir metin olarak kalirdi. Bu yuzden tanim burada
 | tekrarlaniyor, bilesenin kendisi tek kaynak olarak kaliyor.
 |
 | `--cover-*` degiskenleri bilesenin kendisi satir ici stille veriyor;
 | asagidaki kurallar yalnizca duzeni kuruyor.
 */
.sf-page .ui-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #f8fafb;
}

.sf-page .ui-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-page .ui-cover__fallback {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 24px 18px;
    background: var(--cover-paper);
    color: var(--cover-ink);
    text-align: center;
}

.sf-page .ui-cover__rule {
    width: 44px;
    height: 1px;
    background: var(--cover-accent);
    opacity: .5;
}

.sf-page .ui-cover__names {
    color: var(--cover-accent);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(19px, 2.4vw, 25px);
    line-height: 1.25;
}

.sf-page .ui-cover__label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .75;
}

.sf-page .ui-empty {
    padding: 60px 28px;
    border: 1px dashed #e7e7e7;
    border-radius: 12px;
    text-align: center;
}

.sf-page .ui-empty__title {
    margin: 0;
    color: #1d2144;
    font-size: 20px;
    font-weight: 600;
}

.sf-page .ui-empty__desc {
    margin: 10px 0 0;
    color: #637381;
    font-size: 16px;
}

.dark .sf-page .ui-cover {
    background: #2a2e44;
}

.dark .sf-page .ui-empty {
    border-color: #34374a;
}

.dark .sf-page .ui-empty__title {
    color: #ffffff;
}

.dark .sf-page .ui-empty__desc {
    color: #959cb1;
}

/*
 |=============================================================================
 | SABLONUN URETMEDIGI UTILITY'LER
 |=============================================================================
 |
 | `style.css` bir DERLENMIS Tailwind ciktisi ve bu projede yeniden
 | uretilmiyor - sablonun kendi HTML'inde hic gecmeyen bir sinifin karsiligi
 | o dosyada YOKTUR.
 |
 | Bu sessiz bir tuzak: `mt-14` yazarsin, Blade derlenir, sayfa 200 doner ve
 | ekranda hicbir bosluk olusmaz. Yeni sayfalar yazilirken tam olarak bu
 | yasandi - tema galerisinde baslik ust bilginin altina giriyordu cunku
 | `pt-[120px]` diye bir kural hicbir yerde tanimli degildi.
 |
 | Asagidakiler o eksikleri kapatiyor. Degerler Tailwind'in kendi olcegiyle
 | ayni (1 birim = 0.25rem); renkler sablonun paletinden aliniyor
 | (primary rgb(112 131 245), kirmizi uyari icin rgb(239 68 68)).
 |
 | `tests/Feature/AppendedUtilitiesTest` bu listenin sayfalarla ayni kalmasini
 | dogruluyor: yeni bir sinif yazildiginda ya sablonda vardir ya burada
 | olacaktir, ucuncu ihtimal yok.
 */

/* --- Bosluk --- */
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: .25rem; }
.gap-y-2 { row-gap: .5rem; }
.space-y-2 > * + * { margin-top: .5rem; }

.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
/* Kart iclerinde alt baglantiyi tabana iter; ozet uzunlugu degistiginde
   kartlarin okuma satiri ayni hizada kalir. */
.mt-auto { margin-top: auto; }
.ml-2 { margin-left: .5rem; }
.mr-1 { margin-right: .25rem; }

.mt-2 { margin-top: .5rem; }
.mb-1 { margin-bottom: .25rem; }

.p-1 { padding: .25rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pt-\[120px\] { padding-top: 120px; }
/* Parola alaninin sagindaki goz dugmesine yer aciyor; olmadan uzun bir
   parola dugmenin altina giriyordu. */
.pr-14 { padding-right: 3.5rem; }

/* --- Olcu --- */
.h-\[46px\] { height: 46px; }
.w-\[46px\] { width: 46px; }
.h-\[70px\] { height: 70px; }
.w-\[70px\] { width: 70px; }
.h-\[calc\(100\%-2rem\)\] { height: calc(100% - 2rem); }
.max-w-\[430px\] { max-width: 430px; }
.max-w-\[540px\] { max-width: 540px; }
.max-w-\[680px\] { max-width: 680px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[860px\] { max-width: 860px; }
.shrink-0 { flex-shrink: 0; }

/* --- Konum --- */
.inset-x-0 { left: 0; right: 0; }
.top-4 { top: 1rem; }
.left-4 { left: 1rem; }
.items-start { align-items: flex-start; }

/* --- Liste ve form --- */
.list-decimal { list-style-type: decimal; }
.resize-none { resize: none; }
/* Tailwind 4'te `outline-none`un adi bu. Odak halkasi `focus:border-primary`
   ile veriliyor, yani gorunur odak KAYBOLMUYOR. */
.outline-hidden { outline: 2px solid transparent; outline-offset: 2px; }

/* --- Renk --- */
.bg-primary\/10 { background-color: rgb(112 131 245 / .1); }
.bg-white\/20 { background-color: rgb(255 255 255 / .2); }
.bg-white\/90 { background-color: rgb(255 255 255 / .9); }
.bg-black\/45 { background-color: rgb(0 0 0 / .45); }
.text-white\/80 { color: rgb(255 255 255 / .8); }
.text-red-500 { color: rgb(239 68 68); }
.border-primary { border-color: rgb(112 131 245); }
.hover\:border-primary:hover { border-color: rgb(112 131 245); }

/* --- Kirilma noktalari --- */
@media (min-width: 640px) {
    .sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (min-width: 1024px) {
    .lg\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .lg\:text-\[36px\] { font-size: 36px; }
}

/*
 |=============================================================================
 | AUTH EKRANLARI
 |=============================================================================
 |
 | Giris/kayit sekmesi ve parola goster dugmesi BETIGE bagli: `auth-scripts`
 | `is-active` sinifini takip ediyor ve `.auth-password-toggle` ogesini isimle
 | ariyor. Ikisinin de gorunumu utility siniflariyla verilemez cunku sinif
 | listesini JavaScript degistiriyor.
 */

/*
 | SEKME BIR TOGGLE: gosterge kayiyor, zemin atlamiyor.
 |
 | Once her secenegin kendi zemini vardi ve secim aninda renk bir kutudan
 | otekine ATLIYORDU; hangisinden hangisine gecildigi gorunmuyordu. Artik
 | tek bir gosterge var ve iki secenek arasinda kayiyor.
 |
 | Hesap sarmalin `padding: 4px` degerine bagli: her secenek genisligin
 | yarisi eksi bir kenar payi, gosterge de ayni olcude. `translateX(100%)`
 | gostergeyi tam bir secenek boyu tasiyor - piksel sabiti yok, dil
 | degistiginde metin uzasa da hizalama bozulmuyor.
 */
.auth-mode-switch {
    position: relative;
}

.auth-mode-switch__indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 4px;
    background: rgb(112 131 245);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.auth-mode-switch.is-register .auth-mode-switch__indicator {
    transform: translateX(100%);
}

/*
 | Hareket kisiti aciksa gosterge KAYMAZ, yerinde belirir.
 |
 | Kayan bir oge bu tercihin tam olarak kapatmak istedigi sey. Secim yine
 | gorunur kaliyor - konum aninda degisiyor, renk gecisi duruyor.
 |
 | NOT: bu makinede hareket kisiti ACIK; gecisi gormek icin Windows
 | "Animasyon efektlerini goster" ayarinin acik olmasi gerekiyor.
 */
@media (prefers-reduced-motion: reduce) {
    .auth-mode-switch__indicator {
        transition: none;
    }
}

/* Secenekler gostergenin USTUNDE; kendi zeminleri yok. */
.auth-mode-switch__option {
    position: relative;
    z-index: 1;
    background: none;
    color: rgb(24 28 49);
    transition: color .28s ease;
}

.dark .auth-mode-switch__option {
    color: #ffffff;
}

.auth-mode-switch__option.is-active,
.dark .auth-mode-switch__option.is-active {
    color: #ffffff;
}

.auth-mode-switch__option:hover:not(:disabled):not(.is-active) {
    color: rgb(112 131 245);
}

/* Kayit kapaliyken sekme tiklanamaz gorunmeli. */
.auth-mode-switch__option:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Kayit kapaliyken gosterge hic kaymaz; ikinci secenek zaten secilemiyor. */
.auth-mode-switch:has(.auth-mode-switch__option:disabled) .auth-mode-switch__indicator {
    transition: none;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px dokunma hedefi; ikon 20px ama basilabilir alan buyuk. */
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #79808a;
    font-size: 20px;
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle[aria-pressed="true"] {
    color: rgb(112 131 245);
}

/* Yasal metin `__()` icinden HTML olarak geliyor; baglantilara utility
   sinifi eklenemiyor. */
.sf-auth-legal a {
    color: rgb(112 131 245);
}

.sf-auth-legal a:hover {
    text-decoration: underline;
}

/* --- Auth ve hata ekranlarinin ek utility'leri --- */
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.h-px { height: 1px; }
.h-\[18px\] { height: 18px; }
.w-\[18px\] { width: 18px; }
.max-h-\[620px\] { max-height: 620px; }
/* Hata mesaji zemini; sablonun paletinde kirmizi bir ton yok. */
.bg-red-50 { background-color: rgb(254 242 242); }

/*
 |=============================================================================
 | GIRIS EKRANI - BOLUNMUS DUZEN
 |=============================================================================
 |
 | Auth ekranlari bir sure herkese acik duzenin icinde, ortalanmis bir kart
 | olarak duruyordu. Geri alindi: bolunmus ekran (solda form, sagda kapak)
 | daha iyi calisiyordu ve ust bilgi/alt bilgi zaten giris aninda ise
 | yaramiyor - ziyaretci o an gezmiyor, tek bir is yapiyor.
 |
 | Oran 40/60: form kolonunun genisligi okunabilir bir form icin yeterli,
 | kalan yer kapaga birakiliyor. Yariya bolmek kapagi kirpip formu de
 | gereginden genis birakiyordu.
 |
 | Gorunum dili Appline'in: renkler, dugmeler ve alanlar sablonun
 | paletinden geliyor. Degisen sey duzen, tasarim degil.
 */
.sf-auth {
    display: flex;
    min-height: 100vh;
}

.sf-auth__form {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #ffffff;
}

/*
 | SAYFA KAYMAZ.
 |
 | Genis ekranda kabuk tam bir gorunum yuksekligi ve tasmiyor. Bolunmus
 | duzende sayfayi kaydirmak kapagi yukari itip formu bosluga birakiyordu -
 | iki sutun ayni anda kayinca duzenin kendisi dagiliyor.
 |
 | Kayit formu uzun oldugu icin tasma FORM SUTUNUNUN ICINDE cozuluyor:
 | sayfa degil, sutun kayiyor. Boylece kapak yerinde kaliyor.
 |
 | Kural yalnizca genis ekranda. Telefonda 100vh'e kilitlemek dusmanca
 | olurdu: adres cubugu yuksekligi degistiriyor ve klavye acildiginda
 | kullanilabilir alan yariya iniyor.
 */
@media (min-width: 1024px) {
    .sf-auth {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .sf-auth__form {
        overflow-y: auto;
        /* Sutun icindeki serit ince ve sessiz: sayfa seridi kadar
           belirgin olmasi, iki farkli kaydirma varmis izlenimi
           veriyordu. */
        scrollbar-width: thin;
        scrollbar-color: #d8dde6 transparent;
    }

    .sf-auth__form::-webkit-scrollbar {
        width: 8px;
    }

    .sf-auth__form::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #d8dde6;
    }

    .dark .sf-auth__form {
        scrollbar-color: #34374a transparent;
    }

    .dark .sf-auth__form::-webkit-scrollbar-thumb {
        background: #34374a;
    }
}

.sf-auth__inner {
    width: 100%;
    max-width: 420px;
}

/*
 | Kapak yalnizca GENIS ekranda.
 |
 | Telefonda yarim ekran kaplayan bir fotograf, ziyaretcinin geldigi isi
 | ekranin disina itiyordu.
 */
.sf-auth__cover {
    display: none;
}

@media (min-width: 1024px) {
    .sf-auth__form {
        flex: 0 0 40%;
        max-width: 40%;
        padding: 48px;
    }

    .sf-auth__cover {
        position: relative;
        display: block;
        flex: 0 0 60%;
        max-width: 60%;
        overflow: hidden;
        background: #f8fafb;
    }

    .sf-auth__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/*
 | Kapak dosyasi yoksa: sadece sakin bir zemin.
 |
 | Bir sure buraya kocaman bir marka harfi basiliyordu. Kaldirildi -
 | "eksik bir sey var" hissini gidermek icin konulmustu ama sonuc tam
 | tersiydi: bos bir alanda duran dev bir harf, orada olmasi gereken bir
 | seyin yuklenemedigini DAHA COK belli ediyordu.
 */
.sf-auth__cover-empty {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgb(112 131 245 / .1), rgb(112 131 245 / .03));
}

.dark .sf-auth__form {
    background: rgb(31 35 58);
}

.dark .sf-auth__cover {
    background: rgb(21 24 42);
}

/*
 | Marka logosu.
 |
 | `x-ui.brand-logo` bilesenine ait; tanimi `components.css` icinde ve bu
 | yuzey o katmani yuklemiyor. Bilesen ham <img> ile degistirilemez: olcu
 | ozniteliklerini o hesapliyor ve olcusuz bir <img>, dosya inene kadar
 | sifir genislikte durup resim gelince sayfayi kaydiriyor.
 */
.sf-page .brand-logo,
.sf-auth .brand-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    line-height: 0;
}

.sf-page .brand-logo__img,
.sf-auth .brand-logo__img {
    display: block;
    width: auto;
    height: var(--brand-logo-height, 30px);
    max-width: 100%;
    object-fit: contain;
}

/* Koyu varyant yalnizca koyu temada. Isaret sayfa boyanmadan once
   `<html data-theme>` uzerine yaziliyor; dogru logoyu JS ile secmek
   temanin bir kare yanlis logoyla acilmasi demekti. */
.brand-logo--auto .brand-logo__img--dark { display: none; }

:root[data-theme='dark'] .brand-logo--auto .brand-logo__img--light { display: none; }
:root[data-theme='dark'] .brand-logo--auto .brand-logo__img--dark { display: block; }

/*
 | `onerror` gizlemesi CALISSIN.
 |
 | Yukaridaki `.sf-auth__cover img { display: block }` kurali, tarayicinin
 | kendi `[hidden] { display: none }` kuralini eziyor - sinif secicisi daha
 | agir basiyor. Sonuc: kapak dosyasi 404 verdiginde `onerror` calisiyor,
 | `hidden` yaziliyor ve gorsel YINE de duruyor; altindaki yedek hic
 | gorunmuyordu.
 */
.sf-auth__cover img[hidden] {
    display: none;
}

/*
 |=============================================================================
 | GOVDE METNI OKUNUR KOYULUKTA
 |=============================================================================
 |
 | Sablonun `text-body` rengi rgb(121 128 138). Beyaz zeminde kontrast orani
 | 3.99:1 - normal boy metin icin WCAG AA esigi 4.5:1, yani ACIKLAMA
 | METINLERININ TAMAMI esigin altindaydi. Kart aciklamalari, fiyat notlari,
 | SSS cevaplari ve alt satirlar hep bu renkten besleniyor.
 |
 | Bu bir zevk meselesi degil: sayfanin ikincil metinleri parlak ekranda ve
 | gun isiginda okunmuyordu.
 |
 | Yeni deger 5.64:1. Sablonun kendi tonundan sapmiyor - ayni soguk gri,
 | yalnizca esigi gececek kadar koyu. `style.css` sablonun dosyasi ve
 | degistirilmiyor; duzeltme bu katmanda.
 |
 | Koyu temada zemin zaten koyu ve ayni renk orada 6.1:1 veriyor; oraya
 | dokunulmuyor.
 */
.text-body {
    color: #5f6875;
}

.dark .text-body,
.dark .dark\:text-body {
    color: rgb(149 156 177);
}

/*
 |=============================================================================
 | VURGU RENGI - OKUNUR TONA CEKILDI
 |=============================================================================
 |
 | Sablonun vurgu rengi rgb(112 131 245) / #7083F5. Olculdugunde iki yonde de
 | ayni sonucu veriyor: 3.36:1.
 |
 |   beyaz zeminde metin olarak   -> 3.36  (bolum etiketleri, baglantilar)
 |   uzerine beyaz metin olarak   -> 3.36  (BUTUN birincil dugmeler)
 |
 | Normal boy metin icin WCAG AA esigi 4.5:1. Yani sayfadaki her birincil
 | dugmenin ETIKETI ve her bolum etiketi esigin altindaydi - "Davetiyeni
 | olustur", "Bu paketle basla", "Ornek davetiyeyi ac" dahil. Sayfanin en
 | onemli ogesi en zor okunani oluyordu.
 |
 | Yeni ton #4F61D6: ayni yumusak mor-mavi aile, yalnizca esigi gececek
 | kadar koyu. Iki yonde de 5.23:1.
 |
 | `style.css` sablonun dosyasi ve degistirilmiyor; sablonun urettigi on bir
 | secicinin hepsi burada ayni degerle eziliyor. Yeni bir secici eklenirse
 | (ornegin `active:bg-primary`) buraya da eklenmeli.
 |
 | Suslu kullanimlar (daire zeminler, gradyanlar, ikon dolgulari) sablonun
 | kendi degeriyle kaliyor: onlarda metin yok, kontrast esigi de yok.
 */
.bg-primary,
.group-hover\:bg-primary,
.hover\:bg-primary:hover,
.dark\:hover\:bg-primary:hover,
.dark\:group-hover\:bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(79 97 214 / var(--tw-bg-opacity));
}

.text-primary,
.group-hover\:text-primary,
.hover\:text-primary:hover,
.dark\:hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(79 97 214 / var(--tw-text-opacity));
}

.focus\:border-primary:focus,
.dark\:focus\:border-primary:focus {
    --tw-border-opacity: 1;
    border-color: rgb(79 97 214 / var(--tw-border-opacity));
}

/*
 | Koyu temada zemin koyu; orada AYNI ton ters yone dusuyor ve okunmaz
 | oluyor. Koyu tema sablonun kendi acik tonunu kullanmaya devam ediyor -
 | #7083F5 koyu zeminde (rgb 31 35 58) 5.9:1 veriyor.
 */
.dark .text-primary,
.dark .group-hover\:text-primary,
.dark .hover\:text-primary:hover {
    color: rgb(140 156 250);
}

/* Kendi katmanimizdaki sabit degerler de ayni tona gelsin. */
.auth-mode-switch__indicator,
.auth-mode-switch__option.is-active,
.auth-mode-switch__option:hover:not(:disabled) {
    background-color: rgb(79 97 214);
}

.auth-mode-switch__option:hover:not(:disabled):not(.is-active),
.auth-password-toggle:hover,
.auth-password-toggle[aria-pressed="true"],
.sf-prose a,
.sf-auth-legal a {
    color: rgb(79 97 214);
}

.sf-page .ui-btn:hover,
.sf-page .ui-btn.is-active {
    border-color: rgb(79 97 214);
}

.sf-page .ui-btn.is-active {
    background: rgb(79 97 214);
}

.border-primary,
.hover\:border-primary:hover {
    border-color: rgb(79 97 214);
}

.bg-primary\/10 {
    background-color: rgb(79 97 214 / .1);
}

/*
 | Alt bilgi baglantilarinin DOKUNMA ALANI.
 |
 | Baglantilar 14 piksel metin yuksekligindeydi; parmakla hedeflemek icin
 | fazla ince. Metin boyu ayni kaliyor, tiklanabilir alan buyuyor - satir
 | araligi zaten 13 piksel oldugu icin gorunum degismiyor.
 */
.sf-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

@media (pointer: coarse) {
    .sf-footer nav a {
        min-height: 44px;
    }

    .sf-footer nav {
        gap: 4px;
    }
}

/*
 |=============================================================================
 | ACILIS GORSELI - YUKSEKLIKTEN SINIRLI
 |=============================================================================
 |
 | Sablonun kendi hero gorseli GENIS bir uygulama ekranıydi ve 530 piksellik
 | kutuya rahat oturuyordu. Bizim gorsellerimiz dikey davetiye kapaklari
 | (9:16): ayni kutuda yaklasik 940 piksel yukseklige cikiyor ve ilk ekrani
 | tek basina dolduruyordu. Baslik, aciklama ve iki dugme gorselin yaninda
 | eziliyordu.
 |
 | Olcu artik yukseklikten geliyor; genislik orana gore hesaplaniyor.
 */
.sf-hero-shot {
    display: block;
    width: auto;
    max-height: 480px;
    border-radius: 16px;
}

@media (min-width: 1280px) {
    .sf-hero-shot {
        max-height: 540px;
    }
}

@media (max-width: 640px) {
    .sf-hero-shot {
        max-height: 380px;
    }
}

/*
 |=============================================================================
 | HERO OZELLIK SERIDI
 |=============================================================================
 |
 | QR, konum, LCV ve diger faydalar hero'nun altinda yatay bir seritte
 | donuyor. Her kart gercek bir baglanti ve tam metin olarak belgede kalir;
 | kaydirma SEO icin icerik saklamaz, yalnizca dar alani duzenler.
 */
.sf-capability-rail {
    position: relative;
    margin-top: 42px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #e8eaf5;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 8%, rgb(112 131 245 / .13), transparent 27%),
        linear-gradient(135deg, #fbfbff 0%, #f6f7ff 100%);
}

.sf-capability-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.sf-capability-kicker {
    display: block;
    margin-bottom: 5px;
    color: #5262df;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-capability-head h2 {
    max-width: 680px;
    color: #101322;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.sf-capability-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.sf-capability-control {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe2f1;
    border-radius: 50%;
    color: #182044;
    background: rgb(255 255 255 / .88);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.sf-capability-control:hover,
.sf-capability-control:focus-visible {
    border-color: #5262df;
    color: #fff;
    background: #5262df;
    transform: translateY(-1px);
}

.sf-capability-control:focus-visible,
.sf-capability-card:focus-visible {
    outline: 3px solid rgb(82 98 223 / .25);
    outline-offset: 3px;
}

.sf-capability-control svg,
.sf-capability-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 | BURAYA `scroll-behavior: smooth` GERI EKLEME.
 |
 | Bu bildirim aylardir suren `NO_LCP` hatasinin sebebiydi. `scroll-snap-type:
 | inline mandatory` ile birlikteyken tarayici, yerlesim oturur oturmaz seridi
 | kendiliginden "snap" ediyor; `smooth` bu snap'i compositor uzerinde ANIMASYONLU
 | bir kaydirmaya cevirdigi icin Chrome onu gercek bir kaydirma sayip LCP adayi
 | kaydini o anda kesiyor. Hizli makinede aday zaten kaydedilmis oluyor, PSI'nin
 | ~3-8 kat yavas makinesinde ise kaydirma ilk boyamanin ONUNE gectigi icin
 | trace'te hic aday kalmiyor - Lighthouse de `NO_LCP` firlatiyor.
 |
 | Canlida olculdu (2026-08-21, PSI mobil): ayni statik sayfanin yalnizca bu iki
 | ozelligi kapatilan kopyasi 2,6 sn LCP verirken kontrol kopyasi NO_LCP verdi.
 | Ok dugmeleri ve otomatik ilerleme yumusak kaymaya devam ediyor: betik zaten
 | `track.scrollTo({ behavior: "smooth" })` diyor. Kullanicinin parmakla
 | kaydirmasi ve snap hissi de bu bildirimden etkilenmiyor.
 |
 | Kanit zinciri: `docs/DECISIONS.md` -> "NO_LCP - 3. tur".
 */
.sf-capability-track {
    display: flex;
    gap: 16px;
    padding: 3px 3px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.sf-capability-track::-webkit-scrollbar {
    display: none;
}

.sf-capability-card {
    display: flex;
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    min-height: 248px;
    flex-direction: column;
    align-items: flex-start;
    padding: 23px;
    scroll-snap-align: start;
    border: 1px solid #e8eaf3;
    border-radius: 16px;
    color: #101322;
    background: rgb(255 255 255 / .94);
    box-shadow: 0 9px 24px rgb(30 41 93 / .045);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sf-capability-card:hover {
    border-color: rgb(82 98 223 / .35);
    box-shadow: 0 16px 34px rgb(30 41 93 / .1);
    transform: translateY(-3px);
}

.sf-capability-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 14px;
    color: #5262df;
    background: #eef0ff;
}

.sf-capability-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-capability-eyebrow {
    margin-bottom: 6px;
    color: #5262df;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sf-capability-card h3 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.sf-capability-card p {
    margin-bottom: 18px;
    color: #67708a;
    font-size: 14px;
    line-height: 1.65;
}

.sf-capability-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: #5262df;
    font-size: 13px;
    font-weight: 700;
}

.sf-capability-link svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.sf-capability-card:hover .sf-capability-link svg {
    transform: translateX(3px);
}

.dark .sf-capability-rail {
    border-color: #30344a;
    background:
        radial-gradient(circle at 92% 8%, rgb(112 131 245 / .2), transparent 27%),
        linear-gradient(135deg, #1b1f31 0%, #171a2b 100%);
}

.dark .sf-capability-head h2,
.dark .sf-capability-card {
    color: #f6f7ff;
}

.dark .sf-capability-control,
.dark .sf-capability-card {
    border-color: #34394f;
    background: rgb(31 35 55 / .94);
}

.dark .sf-capability-control {
    color: #e8eaff;
}

.dark .sf-capability-control:hover,
.dark .sf-capability-control:focus-visible {
    border-color: #7083f5;
    color: #fff;
    background: #5262df;
}

.dark .sf-capability-card p {
    color: #aeb5ca;
}

.dark .sf-capability-icon {
    background: rgb(112 131 245 / .15);
}

@media (max-width: 991px) {
    .sf-capability-card {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 640px) {
    .sf-capability-rail {
        margin-top: 28px;
        padding: 22px 16px 16px;
        border-radius: 18px;
    }

    .sf-capability-head {
        align-items: center;
        margin-bottom: 17px;
    }

    .sf-capability-kicker {
        font-size: 11px;
    }

    .sf-capability-head h2 {
        font-size: 23px;
    }

    .sf-capability-control {
        width: 44px;
        height: 44px;
    }

    .sf-capability-card {
        flex-basis: 88%;
        min-height: 250px;
        padding: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-capability-track {
        scroll-behavior: auto;
    }

    .sf-capability-card,
    .sf-capability-control,
    .sf-capability-link svg {
        transition: none;
    }
}

/*
 |=============================================================================
 | BASLIKTAKI VURGULU IFADE - ANIMASYON YOK, BILEREK
 |=============================================================================
 |
 | `welcome.blade.php`'deki H1'in vurgulu ifadesi (`.sf-type`) yalnizca
 | gradyanli bir metin; HICBIR animasyonu yok ve OLMAMALI.
 |
 | GECMIS - ayni belirti iki kez, iki farkli uygulamayla:
 |
 |   1) Ilk surum JS ile `host.textContent`'i bosaltip harf harf geri
 |      yaziyordu. PageSpeed Insights tutarli sekilde "Largest Contentful
 |      Paint: Error! NO_LCP" veriyordu. Cozum diye efekt saf CSS'e
 |      tasindi (`clip-path` acilimi + `::after` imleci).
 |
 |   2) CSS surumu de AYNI belirtiyi surdurdu. 2026-08-21'de olculdu: PSI
 |      ana sayfada 3 kosunun 3'unde de (mobil + masaustu) NO_LCP verirken
 |      AYNI ANDA, ayni sunucu ve ayni CSS/JS ile `/temalar` sorunsuz LCP
 |      veriyordu. PSI'nin ham LHR'sinde `observedLargestContentfulPaint`
 |      alani hic yoktu - yani sorun Lantern SIMULASYONUNDA degil,
 |      trace'in kendisinde hic aday olmamasindaydi.
 |
 | Ortak nokta uygulama degil, YER: efekt LCP adayi olan H1'in ICINDE
 | duruyordu ve boyanan alani ilk kareden sonra degistiriyordu - 1,1 sn'lik
 | `clip-path` acilimi, `infinite` bir imlec animasyonu ve 1,4 sn'de
 | `visibility: hidden` ile biten ikinci bir animasyon. Yerel trace'te
 | 1606 ms'de gorulen LCP invalidate olayi tam o 1,4 sn'lik imlec
 | gizlemesine denk geliyordu.
 |
 | KURAL: bu H1 ilk kareden itibaren TAM ve STATIK boyanmali. Buraya
 | animasyon (clip-path, opacity, visibility, transform, daktilo) EKLEME.
 | Vurgu isteniyorsa metnin boyanan geometrisini degistirmeyen bir yol
 | secilmeli. Kanit zinciri `docs/DECISIONS.md`'de.
 */

/*
 | Fayda bolumunun tanitim gorselleri.
 |
 | Ikisi de saydam PNG ve arkalarinda artik gradyanli kutu yok. Olcu
 | siniri koyuluyor cunku kaynak 760 piksel: kendi haline birakildiginda
 | metnin yanindaki sutunu tasiyordu.
 */
.sf-about-shot {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
    margin-inline: auto;
}

/*
 |=============================================================================
 | OZELLIK KARTI IKONLARI
 |=============================================================================
 |
 | Bu olcu iki kez degisti ve ikisinin de sebebi gecerliydi.
 |
 | Sablonda ikon 90x90 gri bir KUTUNUN icinde 44 piksellik bir SVG idi;
 | kutu ikonu kucultuyordu. Zemin tamamen kaldirilip ikon 64 piksele
 | cikarildi - ama bu sefer kucuk bir cizim bombeyaz alanda ASILI kaldi
 | ve kart icindeki yeri belirsizlesti.
 |
 | Son hali ikisinin ortasi: yumusak yuvarlak bir zemin VAR ama zemin
 | ikondan cok daha buyuk degil (112'ye 80). Ikon nefes aliyor, kartta
 | bir yeri oluyor ve dekor gibi durmuyor.
 */
.sf-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: rgb(79 97 214 / .08);
    transition: background-color .25s ease;
}

/* Kart uzerine gelindiginde zemin koyulasiyor - sablonun kendi
   davranisi buydu, ikon rengi degismedigi icin yalnizca zemin. */
.group:hover .sf-icon-badge {
    background: rgb(79 97 214 / .16);
}

.sf-feature-icon {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.dark .sf-icon-badge {
    background: rgb(255 255 255 / .06);
}

@media (max-width: 640px) {
    .sf-icon-badge {
        width: 96px;
        height: 96px;
        border-radius: 24px;
    }

    .sf-feature-icon {
        width: 68px;
        height: 68px;
    }
}

/*
 |=============================================================================
 | "UC ADIMDA YAYINDA" CIZIMLERI
 |=============================================================================
 |
 | Adim kartlarinda da 90x90 gri kutu icinde 44 piksellik SVG vardi.
 | Paketin kendi cizimleri bunlarin yerini aldi: dikey oranli ve
 | detayli olduklari icin zemin YOK - zemin koymak cizimi kirpardi.
 */
.sf-step-icon {
    display: block;
    width: 132px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .sf-step-icon {
        width: 112px;
    }
}

/* Icerik sayfasi (content-page.blade.php) icin eklendi.

   Bu dosya elle yazilan yardimci katman; Tailwind ciktisi degil. Kullanilan
   her sinif burada tanimli olmak zorunda ve ApplineUtilityClassesTest bunu
   dogruluyor - tanimsiz bir sinif sayfada sessizce hicbir sey yapmaz. */
.mb-16 { margin-bottom: 64px; }
.gap-2 { gap: 8px; }
.gap-x-6 { column-gap: 24px; }

/*
 |=============================================================================
 | TEMA ONIZLEME PENCERESI
 |=============================================================================
 |
 | Onizleme once TAM EKRAN bir sayfaydi: tema kendi belgesini bastan sona
 | basiyor, ustunde site basligi olmadigi icin geri donecek bir yer de
 | bulunmuyordu. Ziyaretci temaya bakip galeriye donemiyordu.
 |
 | Artik tema bir <iframe> icinde, telefon maketinin ustunde aciliyor;
 | kapatinca galeri oldugu yerde duruyor - kaydirma konumu ve secilen tur
 | dahil hicbir sey kaybolmuyor.
 |
 | Native <dialog>: odak tuzagi, Esc ile kapanma ve arka planin inert olmasi
 | tarayicidan geliyor. Isaretleme ve davranis
 | `resources/views/themes/_preview-modal.blade.php` icinde.
 */
/*
 | `fit-content` sart: <dialog> `position: fixed` ve orada `width: auto`
 | shrink-to-fit degil, KULLANILABILIR GENISLIK demek - pencere 1888
 | piksele yayilip maketi bombos beyaz bir alanin ortasinda birakiyordu.
 */
.tp {
    width: fit-content;
    max-width: calc(100vw - 32px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    color: #1c1a1b;
    box-shadow: 0 30px 80px rgb(11 12 14 / 28%);
}

.tp::backdrop { background: rgb(11 12 14 / 78%); }

.dark .tp {
    background: #16181f;
    color: #ffffff;
}

.tp__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.tp__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.tp__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.tp__close:hover { background: rgb(11 12 14 / 8%); }
.dark .tp__close:hover { background: rgb(255 255 255 / 12%); }

.tp__close:focus-visible {
    outline: 2px solid #c13a60;
    outline-offset: 2px;
}

.tp__body {
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

/*
 | TELEFON MAKETI.
 |
 | Oran 390/844 - davetiyenin gercekten acildigi olcu; temalar 560 pikselik
 | tek sutuna gore cizildi ve bu cerceve misafirin gorecegi genisligin ta
 | kendisi.
 |
 | Once YUKSEKLIK ekrana gore sinirlaniyor, genislik orandan turuyor;
 | boylece alcak bir pencerede maket kirpilmak yerine kuculuyor. `dvh`
 | kullaniliyor cunku mobil tarayicida adres cubugu kayarken `vh` sabit
 | kaliyor ve maketin alti ekranin disinda kaliyordu.
 */
.tp__phone {
    position: relative;
    aspect-ratio: 390 / 844;
    height: min(844px, calc(100dvh - 210px));
    max-width: 100%;
    padding: 14px 12px;
    border-radius: 44px;
    background: #121316;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}

/* Hoparlor cizgisi - ust cercevenin ICINDE, ekrani ortmuyor. */
.tp__phone::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 58px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgb(255 255 255 / 18%);
}

.tp__screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
}

.tp__screen iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tp__note {
    margin: 0;
    padding: 12px 16px 16px;
    font-size: 13px;
    text-align: center;
}

.tp__note a {
    color: inherit;
    opacity: .72;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tp__note a:hover {
    opacity: 1;
    color: #c13a60;
}

/*
 | TELEFONDA MAKET YOK.
 |
 | Telefonun icinde telefon cercevesi gostermek hem gulunc hem israf: 390
 | pikselik bir ekranda cerceve ve payi, davetiyeye kalan yeri yiyor. Orada
 | pencere ekrani kapliyor, davetiye dogrudan iceriye oturuyor.
 */
@media (max-width: 640px) {
    .tp {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .tp[open] {
        display: flex;
        flex-direction: column;
    }

    .tp__body {
        flex: 1;
        min-height: 0;
        padding: 0;
    }

    .tp__phone {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .tp__phone::before { display: none; }
    .tp__screen { border-radius: 0; }
}

/*
 |=============================================================================
 | PUBLIC CONTENT PAGES: EDITORIAL PRODUCT STORY
 |=============================================================================
 |
 | Content, feature and event landing pages used to be a narrow text column.
 | The copy was useful but visitors could not see what the product did. The
 | following shell adds visual proof and hierarchy without allowing database
 | content to inject markup.
 */
.content-page {
    --cp-ink: #10172f;
    --cp-muted: #65708a;
    --cp-blue: #5262df;
    --cp-blue-dark: #3446ce;
    --cp-line: #e6e9f4;
    --cp-soft: #f5f6ff;
    padding-top: 24px;
}

.content-page__breadcrumb { margin-bottom: 32px; }

.content-page__hero {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
    min-height: 560px;
    padding: clamp(40px, 6vw, 78px) clamp(28px, 5vw, 72px);
    border: 1px solid var(--cp-line);
    border-radius: 32px;
    background:
        radial-gradient(circle at 82% 16%, rgba(82, 98, 223, .12), transparent 29%),
        linear-gradient(135deg, #fff 0%, #fbfbff 68%, #f1f3ff 100%);
    overflow: hidden;
}

.content-page__hero-copy { position: relative; z-index: 2; }
.content-page__kicker,
.content-page__section-heading > span,
.content-page__cta > div > span {
    display: block;
    margin-bottom: 18px;
    color: var(--cp-blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.content-page__hero h1 {
    max-width: 680px;
    margin: 0 0 24px;
    color: var(--cp-ink);
    font-size: clamp(40px, 5.1vw, 70px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 750;
}

.content-page__hero-copy > p:not(.content-page__promise) {
    max-width: 660px;
    margin: 0;
    color: var(--cp-muted);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.72;
}

.content-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.content-page__button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.content-page__button:hover { transform: translateY(-2px); }
.content-page__button--primary { color: #fff; background: var(--cp-blue); box-shadow: 0 12px 28px rgba(82, 98, 223, .22); }
.content-page__button--primary:hover { color: #fff; background: var(--cp-blue-dark); }
.content-page__button--secondary { color: var(--cp-ink); border-color: var(--cp-line); background: rgba(255, 255, 255, .78); }
.content-page__button--secondary:hover { color: var(--cp-blue); border-color: #cbd1f7; }
.content-page__button--light { flex: 0 0 auto; color: var(--cp-blue); background: #fff; }

.content-page__promise { display: flex; align-items: center; gap: 9px; margin: 19px 0 0; color: var(--cp-muted); font-size: 13px; }
.content-page__promise svg { width: 18px; height: 18px; fill: none; stroke: #16b56a; stroke-width: 2.4; }

.content-page__visual { position: relative; display: flex; min-height: 390px; align-items: center; justify-content: center; }
.content-page__visual > img { position: relative; z-index: 1; width: 115%; max-width: 720px; height: auto; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(31, 45, 102, .08)); }
.content-page__visual::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: rgba(82, 98, 223, .07); }

.content-page__theme-stack { position: relative; width: min(100%, 540px); height: 430px; }
.content-page__theme-stack a { position: absolute; top: 8%; left: 28%; display: block; width: 44%; overflow: hidden; border: 7px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 22px 54px rgba(17, 28, 72, .18); transform: rotate(1deg); }
.content-page__theme-stack a:first-child { top: 13%; left: 3%; z-index: 1; transform: rotate(-8deg); }
.content-page__theme-stack a:nth-child(2) { z-index: 3; }
.content-page__theme-stack a:nth-child(3) { top: 13%; left: 54%; z-index: 2; transform: rotate(8deg); }
.content-page__theme-stack img { display: block; width: 100%; height: auto; }

.content-page__quote-card { position: relative; z-index: 1; width: min(100%, 500px); padding: 56px 48px 44px; border: 1px solid #dfe3ff; border-radius: 22px; background: #fff; box-shadow: 0 24px 54px rgba(31, 45, 102, .12); transform: rotate(2deg); }
.content-page__quote-card > span { position: absolute; top: 22px; left: 30px; color: #d9ddff; font-family: Georgia, serif; font-size: 72px; line-height: 1; }
.content-page__quote-card p { position: relative; margin: 0 0 24px; color: var(--cp-ink); font-family: Georgia, serif; font-size: 20px; line-height: 1.65; }
.content-page__quote-card small { color: var(--cp-blue); font-weight: 700; }

.content-page__steps-visual { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.content-page__steps-visual > div { position: relative; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 18px 38px rgba(31,45,102,.11); }
.content-page__steps-visual img { display: block; width: 100%; height: 150px; object-fit: contain; }
.content-page__steps-visual strong { position: absolute; top: 10px; left: 10px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #fff; background: var(--cp-blue); font-size: 12px; }

.content-page__outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 clamp(80px, 10vw, 130px); }
.content-page__outcomes article { padding: 28px; border: 1px solid var(--cp-line); border-radius: 18px; background: #fff; }
.content-page__outcomes article > span { display: grid; width: 42px; height: 42px; margin-bottom: 22px; place-items: center; border-radius: 50%; color: var(--cp-blue); background: var(--cp-soft); font-size: 13px; font-weight: 800; }
.content-page__outcomes h3 { margin: 0 0 9px; color: var(--cp-ink); font-size: 19px; line-height: 1.35; }
.content-page__outcomes p { margin: 0; color: var(--cp-muted); font-size: 14px; line-height: 1.65; }

.content-page__body { display: grid; grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr); gap: clamp(50px, 8vw, 112px); max-width: 1060px; margin: 0 auto clamp(90px, 11vw, 140px); scroll-margin-top: 110px; }
.content-page__sections { min-width: 0; }
.content-page__toc { align-self: start; position: sticky; top: 110px; padding-left: 20px; border-left: 2px solid var(--cp-line); }
.content-page__toc > span { display: block; margin-bottom: 16px; color: var(--cp-ink); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.content-page__toc ol { margin: 0; padding: 0; list-style: none; }
.content-page__toc li + li { margin-top: 12px; }
.content-page__toc a { color: var(--cp-muted); font-size: 14px; line-height: 1.45; }
.content-page__toc a:hover { color: var(--cp-blue); }
.content-page__section { position: relative; padding: 0 0 46px 74px; scroll-margin-top: 120px; }
.content-page__section + .content-page__section { padding-top: 46px; border-top: 1px solid var(--cp-line); }
.content-page__section-number { position: absolute; top: 2px; left: 0; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--cp-line); border-radius: 50%; color: var(--cp-blue); font-size: 13px; font-weight: 800; }
.content-page__section + .content-page__section .content-page__section-number { top: 48px; }
.content-page__section h2 { margin: 0 0 18px; color: var(--cp-ink); font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
.content-page__section p { margin: 0 0 16px; color: var(--cp-muted); font-size: 17px; line-height: 1.82; }

.content-page__themes,
.content-page__faq { margin: 0 auto clamp(90px, 11vw, 140px); }
.content-page__section-heading { max-width: 670px; margin-bottom: 38px; }
.content-page__section-heading > span { margin-bottom: 12px; }
.content-page__section-heading h2 { margin: 0; color: var(--cp-ink); font-size: clamp(31px, 4vw, 48px); line-height: 1.14; letter-spacing: -.035em; }
.content-page__theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.content-page__theme-grid article { overflow: hidden; border: 1px solid var(--cp-line); border-radius: 18px; background: #fff; box-shadow: 0 15px 40px rgba(28, 39, 84, .07); }
.content-page__theme-grid article > div { padding: 24px; }
.content-page__theme-grid h3 { margin: 0 0 8px; color: var(--cp-ink); font-size: 18px; }
.content-page__theme-grid p { margin: 0; color: var(--cp-muted); font-size: 14px; line-height: 1.6; }
.content-page__text-link { display: inline-flex; margin-top: 28px; color: var(--cp-blue); font-weight: 700; }

.content-page__faq { max-width: 900px; }
.content-page__faq details { border-top: 1px solid var(--cp-line); }
.content-page__faq details:last-child { border-bottom: 1px solid var(--cp-line); }
.content-page__faq summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; color: var(--cp-ink); font-size: 18px; font-weight: 700; list-style: none; }
.content-page__faq summary::-webkit-details-marker { display: none; }
.content-page__faq summary span { color: var(--cp-blue); font-size: 28px; font-weight: 400; transition: transform .2s ease; }
.content-page__faq details[open] summary span { transform: rotate(45deg); }
.content-page__faq details p { max-width: 760px; margin: -6px 0 25px; color: var(--cp-muted); font-size: 16px; line-height: 1.75; }

.content-page__cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: clamp(80px, 10vw, 130px); padding: clamp(36px, 6vw, 66px); border-radius: 26px; color: #fff; background: linear-gradient(125deg, #3446ce 0%, #6472eb 100%); box-shadow: 0 25px 60px rgba(52, 70, 206, .2); }
.content-page__cta > div > span { margin-bottom: 10px; color: #dfe2ff; }
.content-page__cta h2 { margin: 0 0 12px; color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.content-page__cta p { max-width: 670px; margin: 0; color: #eef0ff; font-size: 16px; line-height: 1.7; }

.content-page__related { padding-top: 44px; border-top: 1px solid var(--cp-line); }
.content-page__related + .content-page__related { margin-top: 55px; }
.content-page__related h2 { margin: 0 0 22px; color: var(--cp-ink); font-size: 22px; }
.content-page__related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.content-page__related a { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; border: 1px solid var(--cp-line); border-radius: 12px; color: var(--cp-ink); background: #fff; font-size: 14px; font-weight: 650; }
.content-page__related a:hover { color: var(--cp-blue); border-color: #cbd1f7; transform: translateY(-2px); }
.content-page__related b { color: var(--cp-blue); font-size: 19px; }

.dark .content-page {
    --cp-ink: #f5f6ff;
    --cp-muted: #aeb5ca;
    --cp-line: #34374a;
    --cp-soft: #262a45;
}
.dark .content-page__hero { background: radial-gradient(circle at 82% 16%, rgba(100,114,235,.22), transparent 31%), linear-gradient(135deg, #1d2134, #171a2b); }
.dark .content-page__outcomes article,
.dark .content-page__theme-grid article,
.dark .content-page__related a,
.dark .content-page__quote-card,
.dark .content-page__steps-visual > div { background: #1d2134; }
.dark .content-page__button--secondary { background: rgba(29,33,52,.86); }

@media (max-width: 991px) {
    .content-page__hero { grid-template-columns: 1fr; min-height: 0; }
    .content-page__hero-copy { max-width: 720px; }
    .content-page__visual { min-height: 330px; }
    .content-page__visual > img { width: min(100%, 660px); }
    .content-page__outcomes { grid-template-columns: 1fr; }
    .content-page__body { grid-template-columns: 1fr; }
    .content-page__toc { position: static; }
    .content-page__theme-grid { grid-template-columns: repeat(2, 1fr); }
    .content-page__related > div { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .content-page { padding-top: 8px; }
    .content-page__breadcrumb { margin-bottom: 22px; }
    .content-page__hero { gap: 26px; padding: 32px 20px 24px; border-radius: 20px; }
    .content-page__hero h1 { font-size: 37px; }
    .content-page__actions { flex-direction: column; }
    .content-page__button { width: 100%; }
    .content-page__visual { min-height: 250px; }
    .content-page__visual > img { width: 116%; max-width: none; }
    .content-page__theme-stack { height: 310px; }
    .content-page__theme-stack a { border-width: 4px; border-radius: 12px; }
    .content-page__quote-card { padding: 48px 26px 32px; }
    .content-page__steps-visual { grid-template-columns: 1fr; }
    .content-page__steps-visual > div:not(:first-child) { display: none; }
    .content-page__outcomes { margin-bottom: 78px; }
    .content-page__outcomes article { padding: 23px; }
    .content-page__toc { padding: 18px; border: 1px solid var(--cp-line); border-radius: 14px; }
    .content-page__section { padding-left: 0; }
    .content-page__section-number { position: static; margin-bottom: 18px; }
    .content-page__section + .content-page__section .content-page__section-number { margin-top: 0; }
    .content-page__section p { font-size: 16px; }
    .content-page__theme-grid,
    .content-page__related > div { grid-template-columns: 1fr; }
    .content-page__cta { align-items: stretch; flex-direction: column; padding: 34px 24px; }
}

/* Shared visual opener for pricing, guides, help and contact. */
.public-split-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    align-items: center;
    gap: clamp(36px, 7vw, 92px);
    min-height: 410px;
    padding: clamp(36px, 5vw, 64px);
    border: 1px solid #e6e9f4;
    border-radius: 28px;
    background:
        radial-gradient(circle at 86% 14%, rgba(82,98,223,.12), transparent 32%),
        linear-gradient(135deg, #fff, #f7f8ff);
    overflow: hidden;
}
.public-split-hero__copy { position: relative; z-index: 2; }
.public-split-hero__copy h1 { letter-spacing: -.035em; }
.public-split-hero__copy > p { max-width: 640px; line-height: 1.75; }
.public-split-hero__visual { position: relative; display: flex; min-height: 280px; align-items: center; justify-content: center; }
.public-split-hero__visual::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: rgba(82,98,223,.07); }
.public-split-hero__visual > img { position: relative; z-index: 1; width: 112%; max-width: 590px; height: auto; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(31,45,102,.08)); }
.public-split-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.public-split-hero__chips span { padding: 8px 12px; border: 1px solid #dfe3f3; border-radius: 999px; color: #3e4964; background: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; }
.public-split-hero__note { margin-top: 20px; padding-left: 17px; border-left: 3px solid #5262df; color: #58647e !important; font-size: 14px !important; }
.public-split-hero__visual--steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: center; }
.public-split-hero__visual--steps::before { grid-column: 1 / -1; grid-row: 1; place-self: center; }
.public-split-hero__visual--steps > img { grid-row: 1; width: 100%; padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 15px 30px rgba(31,45,102,.1); }
.public-split-hero__visual--steps > img:nth-child(2) { transform: translateY(-20px); }
.dark .public-split-hero { border-color: #34374a; background: radial-gradient(circle at 86% 14%, rgba(100,114,235,.2), transparent 32%), linear-gradient(135deg,#1d2134,#171a2b); }
.dark .public-split-hero__chips span,
.dark .public-split-hero__visual--steps > img { color: #dce0f2; border-color: #34374a; background: #20243a; }

@media (max-width: 991px) {
    .public-split-hero { grid-template-columns: 1fr; }
    .public-split-hero__visual { min-height: 250px; }
}

@media (max-width: 640px) {
    .public-split-hero { gap: 24px; min-height: 0; padding: 30px 20px 22px; border-radius: 20px; }
    .public-split-hero__visual { min-height: 210px; }
    .public-split-hero__visual > img { width: 118%; }
    .public-split-hero__visual--steps > img:nth-child(2) { transform: translateY(-10px); }
}

/* The desktop menu becomes dense just before the mobile breakpoint. Keep the
   logo and first item from touching on common 1280px laptop screens. */
@media (min-width: 1024px) and (max-width: 1399px) {
    .navbar .container { padding-right: 16px; padding-left: 16px; }
    .navbar .container > .flex > .block a { max-width: 148px; margin-right: 18px; }
    .navbar .menu-wrapper nav > ul > li:not(:first-child) { margin-left: 18px !important; }
}

/*
 |=============================================================================
 | COOKIE CONSENT BANNER
 |=============================================================================
 |
 | GA4 fires only after this is accepted (see consent-banner.blade.php).
 | `[hidden]` keeps it out of layout until the script decides whether to
 | show it - no flash of the banner while localStorage is being read.
 */
.consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 720px;
    margin-inline: auto;
    padding: 18px 22px;
    border: 1px solid #e6e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16, 23, 47, .14);
}

.consent-banner[hidden] { display: none; }

.consent-banner__text { flex: 1 1 260px; margin: 0; color: #10172f; font-size: 14px; line-height: 1.55; }
.consent-banner__text a { color: #5262df; text-decoration: underline; }

.consent-banner__actions { display: flex; flex: 0 0 auto; gap: 10px; }

.consent-banner__accept,
.consent-banner__decline {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.consent-banner__accept { border: none; color: #fff; background: #5262df; }
.consent-banner__accept:hover { background: #3446ce; }

.consent-banner__decline { border: 1px solid #e6e9f4; color: #10172f; background: transparent; }
.consent-banner__decline:hover { border-color: #cbd1f7; }

.dark .consent-banner { border-color: #34374a; background: #15182a; }
.dark .consent-banner__text { color: #e7e9f7; }
.dark .consent-banner__decline { border-color: #34374a; color: #e7e9f7; }

@media (max-width: 640px) {
    .consent-banner { flex-direction: column; align-items: stretch; }
    .consent-banner__actions { justify-content: flex-end; }
}