/* digitech_blackberry — shared/fonts kullanıyor (kullanıcı kararı), diğer proje bağımlılığı yok */

/* Digiturk marka renk sistemi — kullanıcının verdiği "Detaylı Renk Sistemi" görselinden birebir çıkarıldı. */
:root {
    /* main.css'in kendi --theme/--theme2 (kırmızı) değişkenlerini burada override ediyoruz — style.css main.css'ten
       sonra yüklendiği için :root'taki bu yeniden tanım kazanır, main.css'teki --theme kullanan onlarca kural
       (buton, hover, active state) tek satırla mora döner, tek tek değiştirmeye gerek kalmadı */
    --theme: #602483;
    --theme2: #711391;

    /* Marka renkleri */
    --dg-brand-dark-title: #29145f; /* Koyu Başlık / Güçlü Metin */
    --dg-brand-primary: #602483; /* Primary / Ana Marka */
    --dg-brand-primary-hover: #711391; /* Primary Hover / CTA */
    --dg-brand-transition: #734ea4; /* Geçiş Ara Tonu */
    --dg-brand-light-purple: #8a46a2; /* Açık Mor */
    --dg-brand-accent: #c655f6; /* Parlak Vurgu */
    --dg-brand-indigo: #463da0; /* Indigo / Gradient */
    --dg-brand-red: #dc1838; /* Logo / Kırmızı Vurgu */

    /* Yüzeyler ve nötrler */
    --dg-surface-bg: #f7f7f7; /* Genel Arka Plan */
    --dg-section-bg: #f5f5f8; /* Bölüm zemini — beyaz/açık zeminli tüm section'lar bunu kullanır */
    --dg-surface-card: #ffffff; /* Kart / Surface */
    --dg-surface-soft-purple: #f5eef9; /* Soft Purple Surface */
    --dg-surface-border-light: #eee8f1; /* Border / Ayırıcı */
    --dg-surface-border: #d9d1e2; /* Hafif Border */
    --dg-surface-disabled-border: #b7afc2; /* Disabled Border */
    --dg-surface-secondary-text: #675f6b; /* İkincil Metin */
    --dg-surface-muted-text: #9b95a6; /* Muted Text */
    --dg-surface-disabled-text: #c9c5d1; /* Disabled Text */
    --dg-surface-footer: #271038; /* Footer Ana */
    --dg-surface-footer-dark: #1d0c2a; /* Footer Koyu */

    /* Semantic durum renkleri */
    --dg-error: #d92d20;
    --dg-error-surface: #fef3f2;
    --dg-error-border: #fecaca;
    --dg-error-text: #b42318;

    --dg-warning: #f59e0b;
    --dg-warning-surface: #fffbeb;
    --dg-warning-border: #fde68a;
    --dg-warning-text: #b45309;

    --dg-success: #16a34a;
    --dg-success-surface: #f0fdf4;
    --dg-success-border: #bbf7d0;
    --dg-success-text: #166534;

    --dg-info: #2563eb;
    --dg-info-surface: #eff6ff;
    --dg-info-border: #bfdbfe;
    --dg-info-text: #1d4ed8;

    /* Disabled kullanım */
    --dg-disabled-bg: #f1eef5;
    --dg-disabled-surface: #e9e5ee;
    --dg-disabled-border: #cfc8d8;
    --dg-disabled-text: #b4adbf;
    --dg-disabled-icon: #a49caf;
    --dg-disabled-button: #cfc6db;

    /* Metin hiyerarşisi */
    --dg-text-primary: #29145f;
    --dg-text-secondary: #675f6b;
    --dg-text-muted: #9b95a6;
    --dg-text-inverse: #ffffff;
    --dg-text-disabled: #c9c5d1;
    --dg-text-link: #602483;

    /* Primary Button state'leri */
    --dg-btn-primary-default: #602483;
    --dg-btn-primary-hover: #711391;
    --dg-btn-primary-pressed: #4f1d6e;
    --dg-btn-primary-focus-ring: #c655f6;
    --dg-btn-primary-disabled: #cfc6db;

    /* Secondary Button state'leri */
    --dg-btn-secondary-border: #602483;
    --dg-btn-secondary-hover-bg: #f5eef9;
    --dg-btn-secondary-hover-border: #711391;
    --dg-btn-secondary-pressed-bg: #eee8f1;
    --dg-btn-secondary-pressed-border: #4f1d6e;
    --dg-btn-secondary-disabled-bg: #f1eef5;
    --dg-btn-secondary-disabled-border: #b4adbf;

    /* Input / Form state'leri */
    --dg-input-border: #d9d1e2;
    --dg-input-text: #29145f;
    --dg-input-hover-border: #b7afc2;
    --dg-input-focus-border: #602483;
    --dg-input-focus-ring: #e9d5ff;
    --dg-input-error-bg: #fef3f2;
    --dg-input-error-border: #d92d20;
    --dg-input-error-text: #b42318;
    --dg-input-success-bg: #f0fdf4;
    --dg-input-success-border: #16a34a;
    --dg-input-success-text: #166534;
    --dg-input-disabled-bg: #f1eef5;
    --dg-input-disabled-border: #cfc8d8;

    /* Gradientler */
    --dg-gradient-header: linear-gradient(90deg, #2e0541, #44095e, #2e0541);
    --dg-gradient-cta: linear-gradient(90deg, #602483, #711391);
    --dg-gradient-footer: linear-gradient(90deg, #1d0c2a, #271038, #1d0c2a);

    /* Navbar (header-section-3) koyu zemin — kullanıcı talebiyle eklendi, önceden tanımlı değildi */
    --dg-header-bg: #200b3b;

    /* koyu zemin — tasarımın SLIDER_BG_COLOR swatch'ından pipetle alındı, slider ve istatistik şeridi kullanır */
    --dg-surface-dark: #0f1126;

    /* FAQ cevap metni — başlık renginin (#29145f) aynı ton ailesinden açık varyantı */
    --dg-faq-answer: #6e50b9;
    --dg-hero-bg: var(--dg-surface-dark);

    /* paket bulucu barının slider'ın üstüne bindiği miktar — bar slider'ın bitiş çizgisine ortalanır,
       yani değer barın yüksekliğinin yarısıdır. Gerçek değeri app.js ölçüp buraya yazar; buradaki
       clamp yalnızca JS çalışana kadar geçerli olan yaklaşık başlangıç değeri */
    --dg-finder-overlap: clamp(32px, 3.4vw, 46px);
}

.social-icon-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--dg-text-inverse);
    opacity: 0.5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: start;
}
.social-icon-text i {
    margin-left: 10px;
    font-size: 6px;
}

/* main.css'in referans aldığı Inter yerine proje geneli self-host Eudoxus Sans — style.css main.css'ten sonra
   yüklendiği için cascade'de kazanır, main.css'teki 4 ayrı font-family tanımına elle dokunmaya gerek kalmadı */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.theme-btn,
.link-btn {
    font-family: "Eudoxus Sans", sans-serif;
}
.theme-btn {
    border-radius: 999px;
}

.hero-content .subtitle {
    line-height: 12px;
    padding: 0;
    font-weight: 300 !important;
}
.hero-content .subtitle span {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    opacity: 0.5;
    letter-spacing: 0.08rem !important;
}

/* yukarı çık butonu: ekranın sağında sabit durur, aşağı inince görünür olur.
   Görünümü (daire/renk/boyut) main.css'te `.footer-bottom .scroll-icon` selector'ına bağlıydı; yeni footer'da
   o sarmalayıcı olmadığı için stil düşüyordu — buton artık kendi görünümünü burada taşıyor */
#scrollUp {
    position: fixed;
    right: 30px;
    bottom: 30px;
    left: auto;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
    font-size: 16px;
    box-shadow: 0 10px 26px rgba(15, 17, 38, 0.28);
    transform: translateY(15px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background-color 0.25s ease;
}
#scrollUp.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#scrollUp:hover {
    background-color: var(--dg-btn-primary-hover);
}

/* efekt aç/kapat: theme.blade.php body'sine config/website.php -> effects'e göre fx-off-* class'ı basılır */

/* preloader: NETBAND yükleme ekranı tamamen gizlenir, sayfa direkt görünür açılır */
body.fx-off-preloader #preloader {
    display: none !important;
}

/* mouse-cursor: özel imleç izleyicisi gizlenir, native tarayıcı imleci kalır */
body.fx-off-mouse-cursor .mouse-cursor {
    display: none !important;
}

/* hover-effects: buton/link curtain-reveal geçişleri kapatılır (dropdown/menü gibi işlevsel geçişlere dokunmaz) */
body.fx-off-hover-effects .theme-btn::before,
body.fx-off-hover-effects .theme-btn::after,
body.fx-off-hover-effects .link-btn::before,
body.fx-off-hover-effects .link-btn::after {
    transition: none !important;
    height: 0 !important;
}
body.fx-off-hover-effects .theme-btn:hover i,
body.fx-off-hover-effects .link-btn:hover i {
    transform: none !important;
}

/* page-animations: WOW.js scroll-reveal efekti kapatılır, elementler direkt görünür (JS'in verdiği inline stili ezer) */
body.fx-off-page-animations .wow {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
}

/* header-main'in main.css'ten gelen dikey padding'i kaldırıldı, navbar-wrapper zaten kendi yüksekliğini kuruyor */
.header-main {
    padding: 0;
}

/* navbar aktif sayfa vurgusu: request()->routeIs() ile eklenen .active class'ı, hover'la aynı renk (--dg-brand-accent) kullanır.
   border-bottom yerine ::after kullanıldı — border tüm link genişliğinde oluyordu ve sırıtıyordu, ::after ile
   çizgi linkin yarısı genişliğinde ve yatayda ortalı */
.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    ul
    li.active
    > a {
    position: relative;
    color: var(--dg-brand-accent);
}
.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    ul
    li.active
    > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 4px;
    background: var(--dg-brand-accent);
}

/* navbar yazıları main.css'te 600 ağırlıkla geliyordu, Eudoxus Sans'ta kalın hissediliyordu — 500'e yumuşatıldı */
.header-main .main-menu ul li a {
    font-weight: 500;
}

/* Giriş Yap linki: header-right'ta CTA butonundan ayrışsın diye sade metin link, aktifken vurgulanır */
.header-login-link {
    font-weight: 500;
    color: inherit;
    margin-right: 20px;
}
.header-login-link:hover,
.header-login-link.active {
    color: var(--theme2);
}

/* üst bilgi şeridi (header-top-section-3): mor arkaplan, yazılar beyaz, sosyal ikon alanı şeffaf kalır */
.header-top-section-3 {
    background-color: var(--theme);
    border-bottom: 1px solid #7e17bb;
}
.header-top-wrapper .contact-list li,
.header-top-wrapper .contact-list li a,
.header-top-wrapper .contact-list li i,
.header-top-wrapper.style-3 .top-left .contact-list li {
    color: var(--dg-text-inverse);
}
/* "ARA" kutusu — mevcut mor zeminden ayrışsın diye bir tık daha açık ton (--dg-brand-transition) */
.header-top-wrapper.style-3 .top-left .contact-list li span {
    background-color: var(--dg-brand-transition);
    color: var(--dg-text-inverse);
}
.header-top-wrapper.style-3 .top-right .social-icon {
    background: transparent;
    padding: 0;
}

/* social-icon gizlenince kalan padding'ler boşluk bug'ı yaratıyordu — sıfırlanıp yükseklik .header-top-wrapper'a taşındı */
.header-top-wrapper.style-3 .top-right {
    padding: 0;
}
.header-top-wrapper {
    padding: 8px 0;
}

/* main.css'in @media(max-width:1199px) { display:none } kuralı üst şeridi mobilde tamamen gizliyordu —
   kullanıcı mobilde de görünsün istedi */
@media (max-width: 1199px) {
    .header-top-section-3 {
        display: block;
    }
}
.header-top-wrapper .top-right .social-icon .current,
.header-top-wrapper .top-right .social-icon a,
.header-top-wrapper.style-3 .top-right .social-icon a {
    color: var(--dg-text-inverse);
}
.header-top-wrapper .top-right .social-icon a:hover,
.header-top-wrapper.style-3 .top-right .social-icon a:hover {
    color: var(--dg-brand-accent) !important;
}

/* ana navbar (header-section-3): koyu mor zemin — menü yazıları/hamburger beyaza döner, hover'da marka moru (--theme2) */
.header-section-3 {
    background-color: var(--dg-header-bg);
}

/* ============================================================
   Sticky navbar — main.css `.sticky`'ye beyaz zemin veriyor ama sadece header-1/2/4 için renk
   düzeltmesi içeriyordu. header-3 (bu tema) koyu zemin için ayarlı olduğundan beyaza dönünce
   logo/menü/buton okunmaz hale geliyordu; aşağısı açık zemine göre yeniden renklendirir.
   ============================================================ */

/* iki logo varyantından yalnızca biri görünür (blade ikisini de basar) */
.dg-logo-sticky {
    display: none;
}
.sticky .dg-logo-default {
    display: none;
}
.sticky .dg-logo-sticky {
    display: inline-block;
}

/* üst-seviye menü linkleri: beyaz zeminde koyu metin, hover/aktifte marka moru */
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li
    > a {
    color: var(--dg-text-primary);
}
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li
    > a:hover,
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li:hover
    > a,
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    ul
    li.active
    > a {
    color: var(--dg-brand-primary) !important;
}
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    ul
    li.active
    > a::after {
    background: var(--dg-brand-primary);
}

/* CTA butonu: koyu zeminde beyazdı, burada dolu mor olur */
.sticky .dg-btn-navbar {
    background-color: var(--dg-btn-primary-default);
    border-color: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
}
.sticky .dg-btn-navbar:hover {
    background-color: var(--dg-btn-primary-hover);
    border-color: var(--dg-btn-primary-hover);
}

/* hamburger çizgileri ve giriş linki de koyu zemin varsayımından çıkarılır */
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span,
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:first-child,
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:nth-child(2),
.sticky.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:last-child {
    background: var(--dg-text-primary);
}
.sticky .header-login-link {
    color: var(--dg-text-primary);
}
/* ">" (doğrudan çocuk) ile SADECE üst-seviye menü linkleri hedefleniyor — önceki hali (iç boşluklu selector)
   submenu içindeki <a>'lara da sızıp beyaz zeminde beyaz yazı sorununa yol açmıştı */
.header-main .main-menu nav > ul > li > a,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li
    > a {
    color: var(--dg-text-inverse);
}
.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li
    > a:hover,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-left
    .main-menu
    nav
    > ul
    > li:hover
    > a {
    /* main.css'in satır 1821'deki ".main-menu ul li a:hover { color:var(--theme2) !important }" kuralı
       !important taşıdığı için normal özgünlük burada işe yaramıyordu, aynı silahla ezildi */
    color: var(--dg-brand-accent) !important;
}
/* submenu (dropdown panel) içi: main.css zaten koyu renk veriyor, garanti için burada da açıkça belirtildi */
.header-main .main-menu .submenu li a {
    color: var(--dg-brand-dark-title);
}
.header-main .main-menu ul li .submenu {
    min-width: 320px;
}

/* dropdown paneli varsayılan olarak sol-dayalı açılıyordu (li dar, submenu geniş olunca sağa taşıyordu) —
   bağlı olduğu menü öğesinin ortasında açılsın diye üst-seviye dropdown'lara özel konumlandırma */
.header-main .main-menu nav > ul > li.has-dropdown {
    position: relative;
}
.header-main .main-menu nav > ul > li.has-dropdown > .submenu {
    inset-inline-start: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
}
.header-main .main-menu nav > ul > li.has-dropdown:hover > .submenu {
    margin-top: -16px;
}

/* dropdown'ın tepesinde, bağlı olduğu linki gösteren küçük üçgen ok */
.header-main .main-menu nav > ul > li.has-dropdown > .submenu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--dg-surface-card);
}
/* hamburger (.sidebar__toggle): kapsayıcı div'in kendisi arkaplansız kalır (önceki hali yanlışlıkla beyaz
   kutu oluşturuyordu), 3 çizgi (span) her zaman beyaz, hover'da hepsi eşit genişliğe gelip mevcut hover
   rengimizi (--dg-brand-accent) alır — main.css'in :first-child/:nth-child(2)/:last-child özel genişlik/renk
   kuralları burada tek tek ezildi */
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle {
    background: transparent;
}
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:first-child,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:nth-child(2),
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle
    .header-bar
    span:last-child {
    background: var(--dg-text-inverse);
}
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle:hover
    .header-bar
    span,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle:hover
    .header-bar
    span:first-child,
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle:hover
    .header-bar
    span:nth-child(2),
.header-3
    .mega-menu-wrapper
    .header-main
    .header-right
    .header__hamburger
    .sidebar__toggle:hover
    .header-bar
    span:last-child {
    /* main.css'in :first-child/:last-child'a verdiği left:16px (satır 1954/1964) width:100%'le birlikte
       konteynerden taşırıyordu — left:0 ile de ezilip üçü tam üst üste hizalandı */
    left: 0;
    width: 100%;
}

/* offcanvas kapatma butonu (X): normal durumda arkaplansız + mor ikon, hover'da mor daire zemin + beyaz ikon */
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
    background-color: transparent;
    transition: background-color 0.25s ease;
    margin-top: -1.5rem;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
    color: var(--dg-btn-primary-default);
    transition: color 0.25s ease;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close:hover {
    background-color: var(--dg-btn-primary-default);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close:hover i {
    color: var(--dg-text-inverse);
}

.header-login-link {
    color: var(--dg-text-inverse);
}

/* Digiturk Buton State'leri — kullanıcının verdiği "Buton State'leri" görselinden çıkarıldı */
.dg-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 28px;
    border-radius: 999px;
    font-weight: 600;
    border: 1.5px solid var(--dg-btn-primary-default);
    background-color: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
    transition: all 0.25s ease;
}
.dg-btn-primary:hover {
    background-color: var(--dg-btn-primary-hover);
    border-color: var(--dg-btn-primary-hover);
    color: var(--dg-text-inverse);
}
.dg-btn-primary:active {
    background-color: var(--dg-btn-primary-pressed);
    border-color: var(--dg-btn-primary-pressed);
}
.dg-btn-primary:focus-visible {
    outline: 3px solid var(--dg-btn-primary-focus-ring);
    outline-offset: 2px;
}
.dg-btn-primary:disabled {
    background-color: var(--dg-btn-primary-disabled);
    border-color: var(--dg-btn-primary-disabled);
    cursor: not-allowed;
}

.dg-btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 600;
    border: 1.5px solid var(--dg-btn-secondary-border);
    background-color: var(--dg-surface-card);
    color: var(--dg-btn-secondary-border);
    transition: all 0.25s ease;
}
.dg-btn-secondary:hover {
    background-color: var(--dg-btn-secondary-hover-bg);
    border-color: var(--dg-btn-secondary-hover-border);
    color: var(--dg-btn-secondary-hover-border);
}
.dg-btn-secondary:active {
    background-color: var(--dg-btn-secondary-pressed-bg);
    border-color: var(--dg-btn-secondary-pressed-border);
    color: var(--dg-btn-secondary-pressed-border);
}
.dg-btn-secondary:focus-visible {
    outline: 3px solid var(--dg-btn-primary-focus-ring);
    outline-offset: 2px;
}
.dg-btn-secondary:disabled {
    background-color: var(--dg-btn-secondary-disabled-bg);
    border-color: var(--dg-btn-secondary-disabled-border);
    color: var(--dg-disabled-text);
    cursor: not-allowed;
}

/* navbar CTA (.dg-btn-navbar, "Hemen Başvur"): .dg-btn-primary'nin koyu-bg varyantı — beyaz zemin + koyu yazı,
   hover'da mor zemin + beyaz yazı (curtain-reveal efekti yok, düz renk geçişi) */
.dg-btn-navbar {
    background-color: var(--dg-surface-card);
    border-color: var(--dg-surface-card);
    color: var(--dg-header-bg);
}
.dg-btn-navbar:hover {
    background-color: var(--dg-btn-primary-hover);
    border-color: var(--dg-btn-primary-hover);
    color: var(--dg-text-inverse);
}

/* main.css bu breakpoint'te padding'i 0 yapıyordu, kenarlara yapışıyordu — 20px yan boşluk geri eklendi */
@media (max-width: 1399px) {
    .header-top-section-3 .container-fluid {
        padding: 0 20px;
    }
}

/* çok dar ekranlarda üst şeritteki sosyal medya ikonları yer kaplamasın diye gizlenir —
   Bootstrap'in .d-flex class'ı (bu elementte kullanılıyor) !important ile display:flex dayattığı için
   burada da !important gerekti */
@media (max-width: 620px) {
    .header-top-wrapper .top-right .social-icon {
        display: none !important;
    }
}

.header-top-wrapper.style-2 .top-right .social-icon {
    gap: 10px;
}

/* slider'daki CTA butonu (Paketleri İncele): main.css'in .theme-btn curtain-reveal efekti (köşeden dolan koyu
   kaplama) yerine düz renk geçişi — normalde mor zemin+beyaz yazı, hover'da beyaz zemin+mor (mevcut zemin) yazı,
   ok sağa kayar */
.dg-btn-slider {
    background-color: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
    padding: clamp(12px, 1.05vw, 20px) clamp(20px, 1.9vw, 36px);
    font-size: clamp(13px, 0.95vw, 18px);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}
.dg-btn-slider::before,
.dg-btn-slider::after {
    display: none;
}
.dg-btn-slider i {
    transition: transform 0.3s ease;
}
.dg-btn-slider:hover {
    background-color: var(--dg-surface-card);
    color: var(--dg-btn-primary-default);
}
.dg-btn-slider:hover i {
    transform: translateX(5px);
}

/* ============================================================
   Hero Slider (dg-hero) — main.js/Swiper'dan bağımsız, vanilla JS (app.js).
   İki tür: 'default' (sağda görsel kartı) ve 'match' (sağda maç board'u).
   Yükseklik viewport'a göre değişken, max-height 800px'te tavan yapar.
   ============================================================ */
/* yükseklik viewport genişliğine bağlı: geniş ekranda 800px tavanına oturur, ekran daraldıkça
   kademesiz (clamp) küçülür — 1920px'te 800px, 1200px'te ~625px, 768px'te ~400px, tabanı 420px */
.dg-hero {
    position: relative;
    width: 100%;
    height: clamp(420px, 41.7vw, 800px);
    overflow: hidden;
    background-color: var(--dg-hero-bg);
}

.dg-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* slaytlar üst üste, aktif olmayan görünmez — geçiş fade ile yapılır (JS is-active class'ını toggler) */
.dg-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}
.dg-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* arkaplan görseli sağa yaslı, yüksekliği slider'a fit (auto 100%) — genişlik oranla hesaplanır, böylece
   görsel hiç deforme olmaz; slider küçüldükçe görsel de orantılı küçülür, solda kalan alan zemin rengiyle dolar */
.dg-hero-bg {
    position: absolute;
    inset: 0;
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

/* sol taraf yazının okunması için koyu→şeffaf gradient, tasarımdaki hazır PNG kullanılır */
.dg-hero-gradient {
    position: absolute;
    inset: 0;
    background-image: url("../img/slider/slider-left-gradient.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

/* içerik giriş animasyonu: slide aktif olunca tüm elemanlar aynı anda tepeden aşağı belirir */
.dg-hero-slide [data-anim] {
    opacity: 0;
    transform: translateY(-24px);
}
.dg-hero-slide.is-active [data-anim] {
    animation: dg-hero-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes dg-hero-in {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* imleci gecikmeli takip eden futbol topu — native imleç yerinde kalır, top onun arkasından süzülür.
   Konumu app.js translate3d ile günceller (GPU katmanı, layout tetiklemez) */
.dg-hero-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    /* merkez yerine sağ-alta kaydırılır, imlecin ucunu kapatmaz */
    margin: 24px 0 0 8px;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s ease;
    will-change: transform;
}
.dg-hero-cursor.is-visible {
    opacity: 1;
}
.dg-hero-cursor img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
}
/* dokunmatik cihazlarda kapalı (imleç kavramı yok) */
@media (hover: none) {
    .dg-hero-cursor {
        display: none;
    }
}

/* sağ bloğun imleçle birlikte hafifçe kayması (parallax) — app.js --dg-parallax-x/y değişkenlerini yazar,
   hareket transform ile yapıldığı için sadece compositor çalışır, yeniden düzen/boyama olmaz.
   Ayrı sarmalayıcıda durur çünkü içteki eleman giriş animasyonu için transform'u kendisi kullanıyor */
.dg-hero-parallax {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    align-items: center;
    transform: translate3d(
        var(--dg-parallax-x, 0px),
        var(--dg-parallax-y, 0px),
        0
    );
    will-change: transform;
}
@media (hover: none) {
    .dg-hero-parallax {
        transform: none;
        will-change: auto;
    }
}

/* güvenli alan: container içindeki row tam yükseklik, sol/sağ kolonlar dikeyde ortalı (align-items-center) */
.dg-hero-container {
    position: relative;
    z-index: 2;
    height: 100%;
}
/* paket bulucu barı slider'ın altına bindiği için içerik o kadar yukarı itilir, bar metnin üstüne gelmez */
.dg-hero-row {
    height: 100%;
    padding-bottom: var(--dg-finder-overlap);
}
.dg-hero-col {
    display: flex;
    align-items: center;
    height: 100%;
}
/* sağ kolon içeriği (görsel / maç board'u) kolonun sağ kenarına yaslanır — tasarımdaki kompozisyon */
.dg-hero-col-right {
    justify-content: flex-end;
}

.dg-hero-content {
    width: 100%;
}

/* font ölçüleri tasarımdan (1920px artboard): eyebrow 20px, başlık 64px, subtitle 24px —
   clamp ile dar ekranlarda orantılı küçülür */
.dg-hero-eyebrow {
    display: block;
    color: var(--dg-text-inverse);
    opacity: 0.85;
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-bottom: clamp(10px, 1.35vw, 26px);
}

.dg-hero-title {
    margin: 0 0 clamp(16px, 2.1vw, 40px);
    line-height: 1.12;
}
.dg-hero-title span {
    display: block;
    font-size: clamp(30px, 3.35vw, 64px);
    color: var(--dg-text-inverse);
}
.dg-hero-title-light {
    font-weight: 800;
}
.dg-hero-title-bold {
    font-weight: 800;
}
.dg-hero-title-bold.is-accent {
    background: linear-gradient(
        90deg,
        var(--dg-brand-accent),
        var(--dg-brand-light-purple)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dg-hero-subtitle {
    color: var(--dg-text-inverse);
    opacity: 0.85;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 1.67;
    font-weight: 300;
    margin-bottom: clamp(20px, 2.35vw, 45px);
    max-width: 30em;
}

.dg-hero-actions {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.7vw, 32px);
    flex-wrap: wrap;
}

.dg-hero-link {
    color: var(--dg-text-inverse);
    font-weight: 400;
    font-size: clamp(12px, 0.79vw, 15px);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.dg-hero-link:hover {
    color: var(--dg-brand-accent);
}
.dg-hero-link i {
    font-size: 0.75em;
    margin-left: 6px;
    transition: transform 0.25s ease;
}
.dg-hero-link:hover i {
    transform: translateX(4px);
}

/* default tür — sağa yaslı görsel kartı, yükseklik slider'a indeksli, genişlik auto (oran bozulmaz) */
/* görsel hem yüksekliğe hem kolon genişliğine sığar: max-height/max-width ikisi birden sınır koyar,
   hangisi önce dolarsa o belirler — oran her durumda korunur (width/height auto) */
.dg-hero-visual {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
}
/* görsel 529x503 (tasarımda 800px slider içinde) — yüksekliğin %63'ü, böylece 1920px'te doğal boyutunda
   kalır (büyütülüp bulanıklaşmaz), slider küçüldükçe orantılı küçülür */
.dg-hero-visual img {
    width: auto;
    height: 63%;
    max-width: 100%;
    display: block;
}

/* match tür — maç board'u, zemin hazır PNG (slider-match-board.png), üstüne tarih/takım/countdown basılır.
   ölçüler tasarımdan (1920px artboard: genişlik ~400px, tarih 20px, saat 34px, countdown 32px) */
.dg-match-board {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    padding: clamp(18px, 1.7vw, 32px) clamp(14px, 1.45vw, 28px);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    border-radius: clamp(16px, 1.45vw, 28px);
    text-align: center;
}
.dg-match-datetime {
    margin-bottom: clamp(14px, 1.35vw, 26px);
}
.dg-match-datetime span {
    display: block;
    color: var(--dg-text-inverse);
    opacity: 0.85;
    font-size: clamp(13px, 1.05vw, 20px);
    font-weight: 400;
}
.dg-match-datetime strong {
    display: block;
    color: var(--dg-text-inverse);
    font-size: clamp(20px, 1.8vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}
.dg-match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.85vw, 16px);
    margin-bottom: clamp(16px, 1.6vw, 30px);
}
.dg-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.6vw, 12px);
    flex: 1;
    min-width: 0;
}
.dg-match-team img {
    width: clamp(38px, 3.65vw, 70px);
    height: clamp(38px, 3.65vw, 70px);
    object-fit: contain;
}
.dg-match-team span {
    color: var(--dg-text-inverse);
    font-size: clamp(11px, 0.78vw, 15px);
    font-weight: 600;
    line-height: 1.3;
}
.dg-match-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.1vw, 40px);
    height: clamp(28px, 2.1vw, 40px);
    border-radius: 50%;
    background: var(--dg-brand-light-purple);
    color: var(--dg-text-inverse);
    font-size: clamp(10px, 0.73vw, 14px);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: clamp(10px, 1.05vw, 20px);
}
.dg-match-countdown {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 0.63vw, 12px);
}
.dg-match-countdown-unit {
    flex: 1;
    min-width: 0;
    padding: clamp(8px, 0.85vw, 16px) 0;
    border-radius: clamp(10px, 0.94vw, 18px);
    background: rgba(255, 255, 255, 0.12);
}
.dg-match-countdown-unit span {
    display: block;
    font-size: clamp(18px, 1.7vw, 32px);
    font-weight: 400;
    color: var(--dg-text-inverse);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.dg-match-countdown-unit small {
    display: block;
    font-size: clamp(9px, 0.73vw, 14px);
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

/* alt sağ: ilerleme çubuğu + sayaç + prev/next — Bootstrap .container ile güvenli alana hizalı
   (genişliği container breakpoint'lerinden gelir), tek slaytta tamamen gizlenir */
.dg-hero-footer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(clamp(20px, 2.1vw, 40px) + var(--dg-finder-overlap));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 0.85vw, 16px);
    pointer-events: none;
}
.dg-hero-footer > * {
    pointer-events: auto;
}
.dg-hero-footer-hidden {
    display: none;
}
.dg-hero-progress {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 8px);
}
/* pasif segment kısa nokta, aktif segment uzun çubuğa genişler — rengi vurgu (--dg-brand-accent) */
.dg-hero-progress-bar {
    width: clamp(6px, 0.63vw, 12px);
    height: clamp(3px, 0.3vw, 4px);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: width 0.25s ease;
}
.dg-hero-progress-bar.is-active {
    width: clamp(20px, 1.7vw, 32px);
}
.dg-hero-progress-bar::before {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: var(--dg-brand-accent);
    transition: width 0.2s linear;
}
.dg-hero-progress-bar.is-active::before {
    width: 100%;
}
.dg-hero-nav {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.53vw, 10px);
}
.dg-hero-counter {
    color: var(--dg-text-inverse);
    opacity: 0.75;
    font-size: clamp(11px, 0.68vw, 13px);
    margin-right: clamp(2px, 0.2vw, 4px);
    white-space: nowrap;
}
.dg-hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 1.9vw, 36px);
    height: clamp(28px, 1.9vw, 36px);
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: var(--dg-text-inverse);
    font-size: clamp(10px, 0.63vw, 12px);
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.dg-hero-arrow:hover {
    background: var(--dg-btn-primary-default);
}

/* 991px altı — Bootstrap col-lg-6 kolonları tam genişliğe düşer, iki tür farklı davranır:
   default'ta sağdaki görsel kaybolur (yazı ortalı kalır), match'te sol yazı kaybolur (board ortalı kalır) */
@media (max-width: 991px) {
    .dg-hero-col {
        justify-content: center;
    }
    /* içerik ortalandığı için footer grubu (progress + sayaç + oklar) da bütün halinde ortaya gelir */
    .dg-hero-footer {
        justify-content: center;
    }
    .dg-hero-content {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }
    .dg-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .dg-hero-actions {
        justify-content: center;
    }

    /* default tür: sağdaki görsel kartı gizlenir, yazı tek başına ortalı */
    [data-slide-type="default"] .dg-hero-col-right {
        display: none;
    }

    /* match tür: sol yazı gizlenir, board tek başına ortalı */
    [data-slide-type="match"] .dg-hero-col-left {
        display: none;
    }
    .dg-match-board {
        margin: 0 auto;
    }

    /* clamp'in vw tabanı dar ekranda çok küçülüyor, bu aralıkta sabit okunur ölçülere geçilir */
    .dg-hero-title span {
        font-size: 44px;
    }
    .dg-hero-subtitle {
        font-size: 17px;
    }
    .dg-hero-eyebrow {
        font-size: 16px;
    }
    .dg-match-datetime span {
        font-size: 16px;
    }
    .dg-match-datetime strong {
        font-size: 28px;
    }
    .dg-match-team img {
        width: 58px;
        height: 58px;
    }
    .dg-match-team span {
        font-size: 14px;
    }
    .dg-match-vs {
        width: 34px;
        height: 34px;
        font-size: 12px;
        margin-top: 16px;
    }
    .dg-match-countdown-unit span {
        font-size: 26px;
    }
    .dg-match-countdown-unit small {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .dg-hero-title span {
        font-size: 32px;
    }
    .dg-hero-subtitle {
        font-size: 15px;
    }
    .dg-hero-eyebrow {
        font-size: 14px;
    }
    .dg-hero-actions {
        gap: 14px;
    }
    .dg-match-team img {
        width: 46px;
        height: 46px;
    }
    .dg-match-countdown-unit span {
        font-size: 22px;
    }
    .dg-match-countdown-unit small {
        font-size: 10px;
    }
}

/* ============================================================
   Paket Bulucu (dg-finder) — slider'ın altına binen beyaz filtre barı.
   Yukarı kayma miktarı --dg-finder-overlap değişkeninden gelir; aynı değer slider içeriğine
   padding-bottom olarak uygulandığı için (.dg-hero-row) iki katman çakışmaz.
   ============================================================ */
/* bar negatif margin ile slider'ın bitiş çizgisine ortalanır (yarısı slider içinde, yarısı dışında) */
.dg-finder {
    position: relative;
    z-index: 4;
    margin-top: calc(var(--dg-finder-overlap) * -1);
}

/* intro ve filtre barı ayrı iki kutu, aralarında boşluk bırakan tek satır */
.dg-finder-row {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 1.25vw, 24px);
}

.dg-finder-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.25vw, 24px);
    padding: clamp(18px, 1.45vw, 28px) clamp(14px, 1.15vw, 22px);
    border-radius: clamp(12px, 0.84vw, 16px);
    background: var(--dg-surface-card);
    box-shadow: 0 12px 34px rgba(15, 17, 38, 0.12);
    padding-left: 1.9rem;
    padding-right: 1.9rem;
}

/* mor tanıtım kutusu — beyaz bardan bağımsız, kendi zemini ve gölgesi var */
.dg-finder-intro {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.68vw, 13px);
    padding: clamp(18px, 1.45vw, 28px) clamp(18px, 1.5vw, 28px);
    border-radius: clamp(12px, 0.84vw, 16px);
    background-color: var(--dg-btn-primary-default);
    background-image: url("../img/find-intro-bg.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    box-shadow: 0 12px 34px rgba(15, 17, 38, 0.12);
    border: 1px solid var(--dg-btn-primary-default);
}

/* mor zeminde ikon ve yazılar beyaza döner */
.dg-finder-icon {
    padding: 0;
    margin: 0;
    color: var(--dg-text-inverse);
}
.dg-finder-intro h2 {
    margin: 0 0 2px;
    font-size: clamp(14px, 0.84vw, 16px);
    font-weight: 600;
    color: var(--dg-text-inverse);
}
.dg-finder-intro p {
    margin: 0;
    font-size: clamp(11px, 0.63vw, 12px);
    font-weight: 300;
    color: var(--dg-text-inverse);
}

/* filtre alanları arasında ayırıcı yok — çerçeve sadece select'in kendisinde */
.dg-finder-filters {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.05vw, 20px);
    flex: 1;
    min-width: 0;
}
.dg-finder-field {
    flex: 1;
    min-width: 0;
}
/* native ok gizlenip yerine kendi chevron'umuz konur; çerçeve select'in kendisinde durur */
.dg-finder-field select {
    width: 100%;
    outline: none;
    border: 1px solid var(--dg-surface-border);
    border-radius: 8px;
    background-color: transparent;
    padding: clamp(7px, 0.53vw, 10px) clamp(26px, 1.6vw, 30px)
        clamp(7px, 0.53vw, 10px) clamp(10px, 0.68vw, 13px);
    line-height: 1.4;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 400;
    color: var(--dg-input-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239b95a6' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right clamp(10px, 0.68vw, 13px) center;
    background-size: 11px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.dg-finder-field select:hover {
    border-color: var(--dg-surface-disabled-border);
}
.dg-finder-field select:focus,
.dg-finder-field select:hover {
    border-color: var(--dg-input-focus-border);
    box-shadow: 0 0 0 3px var(--dg-input-focus-ring);
}
/* hiçbir seçim yapılmamışken (placeholder seçili) yazı soluk ama bir tık kalın görünür */
.dg-finder-field select:has(option[value=""]:checked) {
    color: var(--dg-text-muted);
    font-weight: 400;
}
/* açılan liste: tarayıcı native menüsü, sadece renkleri tema ile uyumlu tutulur */
.dg-finder-field select option {
    background: var(--dg-surface-card);
    color: var(--dg-input-text);
}
.dg-finder-field select option[value=""] {
    color: var(--dg-text-muted);
}

/* yükseklik select'lerle birebir aynı: aynı dikey padding + line-height, select'in 1px border'ı
   burada şeffaf border ile telafi edilir */
.dg-finder-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(7px, 0.53vw, 10px) clamp(18px, 1.35vw, 26px);
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
    line-height: 1.4;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.dg-finder-submit:hover {
    background: var(--dg-btn-primary-hover);
}
.dg-finder-submit i {
    font-size: 0.8em;
    transition: transform 0.25s ease;
}
.dg-finder-submit:hover i {
    transform: translateX(4px);
}

/* 1199px altı: iki kutu alt alta geçer, intro üstte tam genişlik kalır */
@media (max-width: 1199px) {
    .dg-finder-row {
        flex-direction: column;
    }
    .dg-finder-bar {
        flex-wrap: wrap;
    }
    .dg-finder-intro {
        justify-content: flex-start;
    }
    .dg-finder-filters {
        flex: 1 1 100%;
    }
    .dg-finder-submit {
        width: 100%;
        justify-content: center;
    }
}

/* 767px altı: filtreler alt alta dizilir */
@media (max-width: 767px) {
    .dg-finder-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .dg-finder-field {
        width: 100%;
    }
}

/* ============================================================
   Kategori kartları (dg-categories) — paket bulucunun altında, 3'lü kart dizisi.
   Kartın tamamı tıklanabilir (<a>), içindeki "Detayları İncele" görsel bir işaret.
   ============================================================ */
/* bölüm, finder barının taştığı kadar yukarı çekilir — barın altında boşluk kalmaz,
   renkli zemin barın arkasından başlar */
.dg-categories {
    margin-top: calc(var(--dg-finder-overlap) * -1);
    padding: clamp(60px, 6.3vw, 120px) 0 clamp(40px, 4.2vw, 80px);
    background: var(--dg-section-bg);
}

.dg-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: clamp(24px, 2.1vw, 40px) clamp(20px, 1.7vw, 32px);
    border: 1px solid var(--dg-surface-border-light);
    border-radius: clamp(14px, 1.05vw, 20px);
    background: var(--dg-surface-card);
    box-shadow: 0 14px 34px rgba(15, 17, 38, 0.08);
    text-align: center;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}
/* hover: kart zemini marka morina döner, içindeki tüm metinler beyaza geçer */
.dg-category-card:hover {
    border-color: var(--dg-brand-primary);
    background: var(--dg-brand-primary);
    transform: scale(1.05);
}
.dg-category-card:hover h3,
.dg-category-card:hover p,
.dg-category-card:hover .dg-category-link {
    color: var(--dg-text-inverse);
}

.dg-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(88px, 6.7vw, 128px);
    height: clamp(88px, 6.7vw, 128px);
    margin-bottom: clamp(20px, 1.5vw, 28px);
    border-radius: 50%;
    background: var(--dg-surface-soft-purple);
    color: var(--dg-brand-primary);
    transition: background-color 0.25s ease;
}
/* kart zemini mora döndüğü için ikon tersine çevrilir: beyaz daire, mor sembol */
.dg-category-card:hover .dg-category-icon {
    background: var(--dg-surface-card);
    color: var(--dg-brand-primary);
}

.dg-category-card h3 {
    margin: 0 0 clamp(6px, 0.53vw, 10px);
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 700;
    color: var(--dg-text-primary);
}
.dg-category-card p {
    margin: 0 0 clamp(14px, 1.25vw, 24px);
    font-size: clamp(13px, 0.79vw, 15px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text);
    max-width: 24em;
}

/* "Detayları İncele" — karttaki tek tıklanabilir öğe */
.dg-category-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 600;
    color: var(--dg-text-link);
    transition: color 0.25s ease;
}
.dg-category-link:hover {
    color: var(--dg-brand-primary-hover);
}
/* kart mor zemindeyken linkin kendi hover rengi kaybolurdu — beyaz kalması sağlanır */
.dg-category-card:hover .dg-category-link:hover {
    color: var(--dg-text-inverse);
}
.dg-category-link i {
    font-size: 0.85em;
    transition: transform 0.25s ease;
}
.dg-category-link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   İstatistik şeridi (dg-stats) — kategori kartlarının altında, mor gradient bant.
   Genişliği paket bulucu barıyla aynı (.container), 4 sütun arasında ince dikey ayırıcı.
   ============================================================ */
.dg-stats {
    padding-top: clamp(40px, 4.2vw, 80px);
    padding-bottom: clamp(40px, 4.2vw, 80px);
    background: var(--dg-section-bg);
}

/* arkaplan görseli sağa yaslı, yüksekliği şeridin iki katı (auto 200%) — genişlik oranla hesaplanır,
   solda kalan alan zemin rengiyle dolar. İki katman: üstteki gradient, görselin sol kenarındaki
   sert kesimi zemin rengine doğru eritir */
.dg-stats-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: clamp(18px, 1.6vw, 30px) clamp(10px, 1.05vw, 20px);
    border-radius: clamp(12px, 0.84vw, 16px);
    background-color: var(--dg-surface-dark);
    background-image: url("../img/stats-bar.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.dg-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.32vw, 6px);
    padding: 0 clamp(8px, 0.84vw, 16px);
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.dg-stat:first-child {
    border-left: none;
}

.dg-stat-icon {
    color: var(--dg-brand-accent);
    margin-bottom: clamp(2px, 0.21vw, 4px);
}
.dg-stat strong {
    font-size: clamp(40px, 1.6vw, 30px);
    font-weight: 1000;
    color: var(--dg-text-inverse);
    line-height: 1.1;
}
.dg-stat span {
    font-size: clamp(11px, 0.73vw, 14px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
}

/* 575px altı: 4 sütun yan yana sığmaz, 2x2 ızgaraya döner */
@media (max-width: 575px) {
    /* şerit burada yükselip daraldığı için "auto 200%" görseli aşırı büyütüyordu (barın ~4 katı);
       cover ile şeride oranlı kalır */
    .dg-stats-bar {
        flex-wrap: wrap;
        row-gap: clamp(16px, 4vw, 24px);
        background-size:
            100% 100%,
            cover;
    }
    .dg-stat {
        flex: 0 0 50%;
    }
    /* ızgara düzeninde sol kenarlık sadece sağ sütunda kalır */
    .dg-stat:nth-child(odd) {
        border-left: none;
    }
}

/* ============================================================
   Footer (dg-footer) — üstte newsletter bandı, altında 5 sütunlu ana alan, alt bar ve yasal uyarı kutusu.
   ============================================================ */
.dg-footer {
    position: relative;
    background: var(--dg-surface-dark);
    color: var(--dg-text-inverse);
}

/* --- newsletter bandı: ana footer'dan bir tık açık mor zemin --- */
.dg-newsletter {
    background: linear-gradient(105deg, #2a0d4e 0%, #3d1470 55%, #57219c 100%);
    padding: clamp(28px, 2.6vw, 50px) 0;
}
.dg-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.1vw, 40px);
    flex-wrap: wrap;
}
.dg-newsletter-intro {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.25vw, 24px);
    flex: 1 1 380px;
}
.dg-newsletter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(48px, 3.7vw, 70px);
    height: clamp(48px, 3.7vw, 70px);
    border-radius: 50%;
    background: var(--dg-brand-primary-hover);
    color: var(--dg-text-inverse);
}
.dg-newsletter-intro h2 {
    margin: 0 0 4px;
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 700;
    color: var(--dg-text-inverse);
}
.dg-newsletter-intro p {
    margin: 0;
    font-size: clamp(13px, 0.79vw, 15px);
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: 34em;
}

/* input + buton tek bir pill içinde durur: dış kapsayıcı beyaz, buton sağ tarafa gömülü */
.dg-newsletter-form {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 560px;
    padding: 6px;
    border-radius: 999px;
    background: var(--dg-surface-card);
}
.dg-newsletter-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0 clamp(12px, 1.05vw, 20px);
}
.dg-newsletter-field-icon {
    flex-shrink: 0;
    color: var(--dg-text-muted);
}
.dg-newsletter-field input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: clamp(10px, 0.84vw, 15px) 0;
    font-size: clamp(13px, 0.84vw, 16px);
    color: var(--dg-input-text);
}
.dg-newsletter-field input::placeholder {
    color: var(--dg-text-muted);
    transition: opacity 0.2s ease;
}
/* alana tıklanınca placeholder kaybolur, yazmaya başlanınca kafa karıştırmaz */
.dg-newsletter-field input:focus::placeholder {
    opacity: 0;
}
.dg-newsletter-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: clamp(10px, 0.84vw, 15px) clamp(18px, 1.5vw, 28px);
    border: none;
    border-radius: 999px;
    background: var(--dg-brand-primary-hover);
    color: var(--dg-text-inverse);
    font-size: clamp(13px, 0.84vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.dg-newsletter-submit:hover {
    background: var(--dg-brand-primary);
}
.dg-newsletter-submit svg {
    transition: transform 0.25s ease;
}
.dg-newsletter-submit:hover svg {
    transform: translateX(4px);
}

/* --- ana footer: marka + 3 link sütunu + iletişim --- */
.dg-footer-main {
    padding: clamp(36px, 3.7vw, 70px) 0 clamp(24px, 2.1vw, 40px);
}
.dg-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: clamp(24px, 2.1vw, 40px);
    padding-bottom: clamp(24px, 2.1vw, 40px);
}
/* sütunlar arası ince dikey ayırıcı — ilk (marka) sütundan sonra başlar */
.dg-footer-col {
    padding-left: clamp(16px, 1.7vw, 32px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.dg-footer-logo {
    display: inline-block;
    margin-bottom: clamp(14px, 1.25vw, 24px);
}
.dg-footer-brand p {
    margin: 0 0 clamp(16px, 1.5vw, 28px);
    font-size: clamp(13px, 0.79vw, 15px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 26em;
}
.dg-footer-social {
    display: flex;
    gap: clamp(8px, 0.68vw, 13px);
}
.dg-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 2.6vw, 50px);
    height: clamp(38px, 2.6vw, 50px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--dg-text-inverse);
    font-size: clamp(14px, 0.94vw, 18px);
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}
.dg-footer-social a:hover {
    background: var(--dg-brand-primary-hover);
    transform: translateY(-3px);
}

/* başlık ve altındaki kısa vurgu çizgisi */
.dg-footer-col h3 {
    position: relative;
    margin: 0 0 clamp(18px, 1.6vw, 30px);
    padding-bottom: clamp(8px, 0.68vw, 13px);
    font-size: clamp(15px, 0.94vw, 18px);
    font-weight: 700;
    color: var(--dg-text-inverse);
}
.dg-footer-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--dg-brand-accent);
}

.dg-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.84vw, 16px);
}
.dg-footer-col ul a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, 0.79vw, 15px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    transition:
        color 0.25s ease,
        gap 0.25s ease;
}
.dg-footer-col ul a:hover {
    color: var(--dg-text-inverse);
    gap: 14px;
}
/* link sütunlarındaki chevron'lar accent renkte; iletişim sütunu hariç tutulur (orada ikonlar beyaz) */
.dg-footer-col:not(.dg-footer-contact) ul svg {
    flex-shrink: 0;
    color: var(--dg-brand-accent);
}

/* iletişim sütunu: ikonlar daire zeminde durur */
.dg-footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(32px, 2.2vw, 42px);
    height: clamp(32px, 2.2vw, 42px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--dg-text-inverse);
    transition: background-color 0.25s ease;
}
.dg-footer-contact ul svg {
    flex-shrink: 0;
}
.dg-footer-contact ul a {
    gap: 12px;
}
.dg-footer-contact ul a:hover {
    gap: 12px;
}
.dg-footer-contact ul a:hover .dg-footer-contact-icon {
    background: var(--dg-brand-primary-hover);
    color: var(--dg-text-inverse);
}

/* --- alt bar: copyright + yasal linkler --- */
.dg-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 1.25vw, 24px);
    flex-wrap: wrap;
    padding: clamp(16px, 1.5vw, 28px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dg-footer-bottom p {
    margin: 0;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
}
.dg-footer-bottom p span {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.3);
}
.dg-footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.dg-footer-legal li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.dg-footer-legal a {
    display: inline-block;
    padding: 0 clamp(12px, 1.25vw, 24px);
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.25s ease;
}
.dg-footer-legal a:hover {
    color: var(--dg-text-inverse);
}
.dg-footer-legal li:last-child a {
    padding-right: 0;
}

/* --- yasal uyarı kutusu --- */
.dg-footer-notice {
    padding: clamp(18px, 1.6vw, 30px) clamp(20px, 1.7vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: clamp(12px, 0.84vw, 16px);
    background: rgba(255, 255, 255, 0.03);
}
.dg-footer-notice-head {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.84vw, 16px);
    margin-bottom: clamp(10px, 0.84vw, 16px);
}
.dg-footer-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(34px, 2.3vw, 44px);
    height: clamp(34px, 2.3vw, 44px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--dg-brand-accent);
}
.dg-footer-notice-head h4 {
    position: relative;
    margin: 0;
    padding-bottom: 8px;
    font-size: clamp(14px, 0.89vw, 17px);
    font-weight: 700;
    color: var(--dg-text-inverse);
}
.dg-footer-notice-head h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--dg-brand-accent);
}
.dg-footer-notice p {
    margin: 0;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}
.dg-footer-notice p + p {
    margin-top: clamp(6px, 0.53vw, 10px);
}

/* 1199px altı: 5 sütun sığmaz, marka üstte tam genişlik + 4 sütun ikili ızgara */
@media (max-width: 1199px) {
    .dg-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dg-footer-brand {
        grid-column: 1 / -1;
    }
    .dg-footer-col:nth-child(2),
    .dg-footer-col:nth-child(4) {
        padding-left: 0;
        border-left: none;
    }
}

/* 767px altı: tek sütun, ayırıcı çizgiler kalkar */
@media (max-width: 767px) {
    .dg-footer-grid {
        grid-template-columns: 1fr;
    }
    .dg-footer-col {
        padding-left: 0;
        border-left: none;
    }
    .dg-newsletter-form {
        flex: 1 1 100%;
    }
    .dg-footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .dg-footer-legal {
        justify-content: center;
    }
}

/* 480px altı: newsletter butonu alt satıra iner */
@media (max-width: 479px) {
    .dg-newsletter-form {
        flex-wrap: wrap;
        border-radius: clamp(12px, 3vw, 20px);
    }
    .dg-newsletter-field {
        flex: 1 1 100%;
    }
    .dg-newsletter-submit {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================
   FAQ akordiyonu — projedeki bootstrap.min.css ayıklanmış bir build ve Bootstrap'in `.collapsing`
   kuralları içinde yok, bu yüzden panel anlık açılıp kapanıyordu. Yükseklik geçişi burada tanımlanır.
   ============================================================ */

.faq-content .accordion-collapse {
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Bootstrap açılış/kapanış sırasında elemana .collapsing verir ve height'i JS ile 0 <-> scrollHeight
   arasında değiştirir; geçiş bu aralıkta çalışır */
.faq-content .accordion-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ikon (artı/eksi) dönüşü de yumuşasın */
.faq-content .accordion-item .accordion-header .accordion-button::after {
    transition:
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.25s ease !important;
}
.faq-content
    .accordion-item
    .accordion-header
    .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.faq-content .accordion-item {
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}
.faq-content .accordion-item:hover,
.faq-content .accordion-item:has(.accordion-collapse.collapse.show) {
    border-color: var(--dg-brand-primary);
}
/* ============================================================
   FAQ — referans temanın yapısı korunur, yalnızca tipografi ve renkler marka paletine çekilir.
   Kutular şeffaftı, beyaz zemine alındı; başlık slider başlığıyla aynı ölçeğe getirildi.
   ============================================================ */
/* main.css zemini #f5f5f8 olarak sabit yazmış; aynı değeri değişken üzerinden alıyoruz ki
   açık zeminli tüm bölümler tek yerden değişsin */
.faq-section {
    background-color: var(--dg-section-bg);
}

.faq-content .section-title h2 {
    font-size: clamp(30px, 3.35vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--dg-text-primary);
}

/* iptal formu indirme linki — ikon ve metin aynı satırda hizalı durur */
.faq-content .dg-faq-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dg-brand-primary);
    transition: color 0.25s ease;
}

.faq-content .dg-faq-download:hover {
    color: var(--dg-brand-primary-hover);
}

.faq-content .accordion-item {
    background: var(--dg-surface-card);
    border: 1px solid var(--dg-surface-border-light);
}

.faq-content .accordion-item .accordion-header .accordion-button {
    background: var(--dg-surface-card);
    color: var(--dg-brand-primary);
}
.faq-content
    .accordion-item
    .accordion-header
    .accordion-button:not(.collapsed) {
    background: var(--dg-surface-card);
    color: var(--dg-brand-primary);
}

.faq-content .accordion-item .accordion-collapse .accordion-body {
    background: var(--dg-surface-card);
    color: var(--text);
    font-weight: 500;
    font-size: 12px;
}
.faq-content .accordion-item .accordion-collapse .accordion-body a {
    color: var(--dg-text-link);
    text-decoration: underline;
}
.faq-content .accordion-item .accordion-collapse .accordion-body a:hover {
    color: var(--dg-brand-primary-hover);
}
.faq-content .accordion-item .accordion-collapse .accordion-body strong {
    color: var(--dg-brand-primary);
    font-weight: 700;
}

/* projedeki bootstrap.min.css ayıklanmış bir build, `.collapsing` kuralları içinde yok —
   panel anlık açılıp kapanmasın diye yükseklik geçişi burada tanımlanır */
.faq-content .accordion-collapse {
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-content .accordion-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-content .accordion-item .accordion-header .accordion-button::after {
    transition:
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.25s ease !important;
}

/* ============================================================
   Flaticon ikon seti — referans temada font-awesome.css içinde tanımlıydı, o dosya FA6 Free ile
   değiştirilince kuralları da gitmişti ve .flaticon-* ikonları boş çıkıyordu (23 kullanım).
   Font dosyaları fonts/ altında duruyordu, sadece tanımları eksikti.
   ============================================================ */
@font-face {
    font-family: "flaticon";
    src:
        url("../fonts/flaticon.woff2") format("woff2"),
        url("../fonts/flaticon.woff") format("woff"),
        url("../fonts/flaticon.eot") format("embedded-opentype");
    font-display: swap;
}

i[class^="flaticon-"]:before,
i[class*=" flaticon-"]:before,
span[class^="flaticon-"]:before,
span[class*=" flaticon-"]:before {
    font-family: flaticon !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flaticon-speaker:before {
    content: "\f101";
}
.flaticon-music:before {
    content: "\f102";
}
.flaticon-music-note:before {
    content: "\f103";
}
.flaticon-musical-note:before {
    content: "\f104";
}
.flaticon-rocket:before {
    content: "\f105";
}
.flaticon-speedometer:before {
    content: "\f106";
}
.flaticon-car:before {
    content: "\f107";
}
.flaticon-trophy-1:before {
    content: "\f108";
}
.flaticon-wreath:before {
    content: "\f109";
}
.flaticon-trophy:before {
    content: "\f10a";
}
.flaticon-award-symbol:before {
    content: "\f10b";
}
.flaticon-film-roll:before {
    content: "\f10c";
}
.flaticon-television-1:before {
    content: "\f10d";
}
.flaticon-ssd:before {
    content: "\f10e";
}
.flaticon-ram:before {
    content: "\f10f";
}
.flaticon-rom:before {
    content: "\f110";
}
.flaticon-digital:before {
    content: "\f111";
}
.flaticon-smartphone:before {
    content: "\f112";
}
.flaticon-app-store:before {
    content: "\f113";
}
.flaticon-apple-pay:before {
    content: "\f114";
}
.flaticon-apple-tv:before {
    content: "\f115";
}
.flaticon-play-button-arrowhead:before {
    content: "\f116";
}
.flaticon-play-1:before {
    content: "\f117";
}
.flaticon-play-button:before {
    content: "\f118";
}
.flaticon-play:before {
    content: "\f119";
}
.flaticon-clipboard:before {
    content: "\f11a";
}
.flaticon-online:before {
    content: "\f11b";
}
.flaticon-satellite:before {
    content: "\f11c";
}
.flaticon-radar:before {
    content: "\f11d";
}
.flaticon-monitor:before {
    content: "\f11e";
}
.flaticon-database:before {
    content: "\f11f";
}
.flaticon-server-1:before {
    content: "\f120";
}
.flaticon-servers:before {
    content: "\f121";
}
.flaticon-storage-device:before {
    content: "\f122";
}
.flaticon-cloud:before {
    content: "\f123";
}
.flaticon-devices:before {
    content: "\f124";
}
.flaticon-device:before {
    content: "\f125";
}
.flaticon-free-delivery:before {
    content: "\f126";
}
.flaticon-free-shipping:before {
    content: "\f127";
}
.flaticon-smart-tv-4:before {
    content: "\f128";
}
.flaticon-satellite-connection:before {
    content: "\f129";
}
.flaticon-smart-tv-3:before {
    content: "\f12a";
}
.flaticon-satellite-tv:before {
    content: "\f12b";
}
.flaticon-folder:before {
    content: "\f12c";
}
.flaticon-cloud-computing:before {
    content: "\f12d";
}
.flaticon-download:before {
    content: "\f12e";
}
.flaticon-price-tag:before {
    content: "\f12f";
}
.flaticon-money-banking:before {
    content: "\f130";
}
.flaticon-globe:before {
    content: "\f131";
}
.flaticon-customer-support:before {
    content: "\f132";
}
.flaticon-support:before {
    content: "\f133";
}
.flaticon-assistant:before {
    content: "\f134";
}
.flaticon-suport:before {
    content: "\f135";
}
.flaticon-people:before {
    content: "\f136";
}
.flaticon-group:before {
    content: "\f137";
}
.flaticon-tv-box-1:before {
    content: "\f138";
}
.flaticon-ticket:before {
    content: "\f139";
}
.flaticon-movie-tickets:before {
    content: "\f13a";
}
.flaticon-movie-ticket:before {
    content: "\f13b";
}
.flaticon-movie:before {
    content: "\f13c";
}
.flaticon-movie-reel:before {
    content: "\f13d";
}
.flaticon-clapperboard:before {
    content: "\f13e";
}
.flaticon-server:before {
    content: "\f13f";
}
.flaticon-smart-tv-2:before {
    content: "\f140";
}
.flaticon-remote-control:before {
    content: "\f141";
}
.flaticon-tv-box:before {
    content: "\f142";
}
.flaticon-smart-tv-1:before {
    content: "\f143";
}
.flaticon-smart-tv:before {
    content: "\f144";
}
.flaticon-tv:before {
    content: "\f145";
}
.flaticon-television:before {
    content: "\f146";
}
.flaticon-telecommunication:before {
    content: "\f147";
}
.flaticon-transmission-tower:before {
    content: "\f148";
}
.flaticon-signal:before {
    content: "\f149";
}
.flaticon-global:before {
    content: "\f14a";
}
.flaticon-computer-networks:before {
    content: "\f14b";
}
.flaticon-network:before {
    content: "\f14c";
}
.flaticon-pocket-wifi:before {
    content: "\f14d";
}
.flaticon-wifi-router-5:before {
    content: "\f14e";
}
.flaticon-router:before {
    content: "\f14f";
}
.flaticon-router-device:before {
    content: "\f150";
}
.flaticon-satellite-dish:before {
    content: "\f151";
}
.flaticon-wifi-server:before {
    content: "\f152";
}
.flaticon-connection:before {
    content: "\f153";
}
.flaticon-wi-fi:before {
    content: "\f154";
}
.flaticon-wifi-router-4:before {
    content: "\f155";
}
.flaticon-wifi-router-3:before {
    content: "\f156";
}
.flaticon-hub:before {
    content: "\f157";
}
.flaticon-wifi-router-2:before {
    content: "\f158";
}
.flaticon-wifi-router-1:before {
    content: "\f159";
}
.flaticon-wifi-router:before {
    content: "\f15a";
}

/* ============================================================
   Movie bölümü — referans temanın yapısı korunur, yalnızca başlık tipografisi değişir.
   ============================================================ */
/* eyebrow: main.css'in alt çizgisi kaldırıldı, koyu zemindeki menü hover rengine çekildi */
.movie-section .section-title span {
    color: var(--dg-brand-accent);
    text-decoration-line: none;
}

/* ana başlık ince ağırlıkta */
.movie-section .section-title h2 {
    font-weight: 300;
}

/* başlık iki satır: <br> yerine blok span — üst satır ince, alt satır kalın */
.movie-section .section-title h2 span {
    display: block;
    color: inherit;
}

.movie-section .section-title h2 .dg-movie-title-light {
    font-weight: 300;
}

.movie-section .section-title h2 .dg-movie-title-bold {
    font-weight: 700;
}

/* main.css eyebrow'a uppercase + harf aralığı, h2'ye capitalize veriyordu — metin yazıldığı gibi görünsün */
.movie-section .section-title span,
.movie-section .section-title h2 {
    letter-spacing: 0;
    text-transform: none;
}

/* Keşfet butonu — paket cümlesinin altında, aktif kategoriye gider */
.dg-movie-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 50px;
    background: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
    font-weight: 600;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.dg-movie-cta-link:hover {
    background: var(--dg-btn-primary-hover);
    color: var(--dg-text-inverse);
}

.dg-movie-cta-link svg {
    transition: transform 0.25s ease;
}

.dg-movie-cta-link:hover svg {
    transform: translateX(4px);
}

/* slider altındaki paket cümlesi + tüm içerikler linki */
.dg-movie-package {
    margin-top: clamp(28px, 2.6vw, 50px);
    text-align: center;
}

.dg-movie-package-title {
    margin-bottom: 2.8em;
    color: var(--dg-text-inverse);
    font-weight: 600;
}

/* slider görselleri kart içinde ortalanır — farklı oranlı posterler birbirine göre kaymaz */
.movie-slider .movie-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.movie-slider .movie-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Swiper kurulmadan önce slaytlar genişlik almadığı için görseller tam genişlikte açılıp sonra
   küçülüyordu (ilk yüklemede sıçrama). Kurulmamış slider'da slaytlar baştan kart genişliğinde tutulur;
   .swiper-initialized geldiğinde Swiper'ın kendi inline genişliği devralır. */
.movie-slider:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 20px;
    overflow: hidden;
}

.movie-slider:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 40px) / 3);
}

@media (max-width: 575px) {
    .movie-slider:not(.swiper-initialized) .swiper-slide {
        flex-basis: 100%;
    }
}

/* Kartlar eşit yükseklikte olsun: farklı oranlı posterler üstten/alttan hizasız duruyordu.
   Slaytlar aynı yüksekliğe çekilir, görsel o kutuyu doldurur (object-fit: cover zaten ortalıyor). */
.movie-slider .swiper-wrapper {
    align-items: center;
}

/* slaytlar aynı yükseklikte; kart slaytın dikey merkezine oturur — üstten hizalı kalırsa
   scale ile büyürken aşağı doğru daha çok taşıyor ve alttaki yazının üstüne biniyordu */
.movie-slider .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
}

.movie-slider .movie-image {
    height: 100%;
}

/* kart boyutu slayt genişliğinden bağımsız sabit tutulur — slidesPerView değişince posterler
   büyüyüp küçülmesin diye; kart slaytın ortasına yerleşir */
.movie-slider .movie-card-items {
    width: min(300px, 100%);
    margin: auto;
}

/* kutu afişin kendi oranını alır (360x471) — sabit bir orana zorlanınca cover afişin
   üstünü/altını kırpıyordu; contain ile de boşluk kalırdı. Oran eşit olunca afiş tam sığar */
.movie-slider .movie-image {
    aspect-ratio: 360 / 471;
}

/* Büyüyen aktif kart slider kutusunun dışına taşıyor; Swiper'ın kendi overflow:hidden'ı onu kırpıyordu.
   Dikey taşmaya izin verilir, yatayda kırpma sürer (yandaki slaytlar görünmesin diye) ve kartın
   büyüdüğünde başlığa/paket cümlesine binmemesi için dikey boşluk bırakılır. */
.movie-slider {
    overflow-x: clip;
    overflow-y: visible;
    padding-block: 6rem;
}

/* aktif slayt öne çıkar: büyür ve tam parlaklıkta durur, pasif kartlar soluklaşıp geri çekilir.
   Büyüyen kart komşusunun üstüne bindiği için aktif slayt z-index ile öne alınır. */
.movie-slider .swiper-slide .movie-card-items {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
    transform-origin: center center;
    opacity: 0.45;
}

.movie-slider .swiper-slide-active {
    z-index: 2;
}

.movie-slider .swiper-slide-active .movie-card-items {
    transform: scale(1.2);
    opacity: 1;
}

/* bölüm yüksekliği kısılır: dış boşluk 1rem, slider ile yazılar arası 0.5rem.
   Slider'ın kendi padding-block'u aktif kartın scale ile büyüyen kısmına ayrılmış paydır
   (kart 540px, kutu 450px) — kaldırılırsa kart kırpılır, o yüzden yerinde bırakılıp
   komşu boşluklar negatif margin ile 0.5rem'e çekilir. */
.movie-section {
    padding-block: 4rem;
}

/* Slider'ın 60px padding'i aktif kartın taşmasına ayrılmış pay; kart her yandan 45px taşıyor,
   kalan 15px boşluk. Yazı ile kart arası 0.5rem olsun diye o 15px'ten fark düşülür. */
.movie-section .section-title {
    margin-bottom: calc(0.5rem - 15px);
}

.movie-section .dg-movie-package {
    margin-top: calc(0.5rem - 15px);
}

/* ============================================================
   Çerez onayı (dg-cookie) — alt banner + ayarlar penceresi.
   Metinler ve çerez listesi config/website.php'den gelir.
   ============================================================ */
/* alt banner: sol alt köşeye yaslı, kenarlardan boşluklu. Sayfa yüklendikten kısa süre sonra
   belirir (app.js is-visible sınıfını ekler) — ani açılış yerine yumuşak geçiş */
.dg-cookie-banner {
    position: fixed;
    z-index: 1000;
    inset-inline-start: clamp(12px, 2vw, 32px);
    bottom: clamp(12px, 2vw, 32px);
    width: min(680px, calc(100% - clamp(24px, 4vw, 64px)));
    padding: clamp(20px, 1.8vw, 30px);
    border-radius: 14px;
    background: var(--dg-surface-card);
    box-shadow: 0 18px 50px rgba(15, 17, 38, 0.22);
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.dg-cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* banner kapat butonu — sağ üst köşe, başlık hizasında */
.dg-cookie-banner-close {
    position: absolute;
    top: clamp(14px, 1.2vw, 20px);
    inset-inline-end: clamp(14px, 1.2vw, 20px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--dg-surface-border-light);
    border-radius: 8px;
    background: var(--dg-surface-card);
    color: var(--dg-text-secondary);
    cursor: pointer;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}

.dg-cookie-banner-close:hover {
    border-color: var(--dg-btn-primary-default);
    background: var(--dg-btn-secondary-hover-bg);
    color: var(--dg-btn-primary-default);
}

.dg-cookie-banner-title {
    margin: 0 0 12px;
    padding-inline-end: 40px;
    font-size: clamp(18px, 1.3vw, 22px);
    font-weight: 700;
    color: var(--dg-text-primary);
}

.dg-cookie-banner-text {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--dg-text-secondary);
}

.dg-cookie-banner-text a {
    color: var(--dg-text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dg-cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

/* buton: varsayılan çerçeveli, primary olan dolu mor */
.dg-cookie-btn {
    flex: 0 1 auto;
    min-width: 140px;
    padding: 11px 24px;
    border: 1px solid var(--dg-surface-border);
    border-radius: 999px;
    background: var(--dg-surface-card);
    color: var(--dg-text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.dg-cookie-btn:hover {
    border-color: var(--dg-btn-primary-default);
    color: var(--dg-btn-primary-default);
}

.dg-cookie-btn-primary {
    border-color: var(--dg-btn-primary-default);
    background: var(--dg-btn-primary-default);
    color: var(--dg-text-inverse);
}

.dg-cookie-btn-primary:hover {
    border-color: var(--dg-btn-primary-hover);
    background: var(--dg-btn-primary-hover);
    color: var(--dg-text-inverse);
}

/* ayarlar penceresi */
.dg-cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 28px);
    background: rgba(15, 17, 38, 0.55);
}

.dg-cookie-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 730px;
    max-height: 88vh;
    border-radius: 14px;
    background: var(--dg-surface-card);
    box-shadow: 0 24px 60px rgba(15, 17, 38, 0.3);
}

.dg-cookie-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(18px, 1.5vw, 26px) clamp(20px, 1.7vw, 30px);
    border-bottom: 1px solid var(--dg-surface-border-light);
}

.dg-cookie-modal-head h2 {
    margin: 0;
    font-size: clamp(20px, 1.5vw, 26px);
    font-weight: 700;
    color: var(--dg-text-primary);
}

.dg-cookie-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--dg-surface-border-light);
    border-radius: 8px;
    background: var(--dg-surface-card);
    color: var(--dg-text-primary);
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.dg-cookie-close:hover {
    border-color: var(--dg-btn-primary-default);
    background: var(--dg-btn-secondary-hover-bg);
}

/* gövde uzun olabilir — pencere değil sadece bu alan kayar */
.dg-cookie-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: clamp(18px, 1.5vw, 26px) clamp(20px, 1.7vw, 30px);
}

.dg-cookie-modal-intro {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 300;
    color: var(--dg-text-secondary);
}

.dg-cookie-category {
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--dg-section-bg);
}

.dg-cookie-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.dg-cookie-category-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--dg-brand-primary);
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.dg-cookie-category-toggle svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.dg-cookie-category-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.dg-cookie-category-panel {
    padding: 0 16px 16px;
}

.dg-cookie-category-desc {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--dg-text-secondary);
}

.dg-cookie-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dg-cookie-list-item {
    padding: 12px 0;
    border-top: 1px solid var(--dg-surface-border-light);
}

.dg-cookie-list-name {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dg-text-primary);
}

.dg-cookie-list-desc {
    display: block;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--dg-text-secondary);
}

/* aç/kapa anahtarı — native checkbox gizlenir, görünümü track+thumb verir */
.dg-cookie-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.dg-cookie-switch.is-locked {
    cursor: not-allowed;
}

.dg-cookie-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: inherit;
}

.dg-cookie-switch-track {
    position: relative;
    display: block;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--dg-surface-disabled-border);
    transition: background-color 0.25s ease;
}

.dg-cookie-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dg-surface-card);
    transition: transform 0.25s ease;
}

.dg-cookie-switch input:checked + .dg-cookie-switch-track {
    background: var(--dg-btn-primary-default);
}

.dg-cookie-switch input:checked + .dg-cookie-switch-track::after {
    transform: translateX(24px);
}

/* kilitli (zorunlu) kategori: açık ama soluk — kapatılamayacağı görünür */
.dg-cookie-switch input:disabled + .dg-cookie-switch-track {
    background: var(--dg-btn-primary-disabled);
}

.dg-cookie-switch input:focus-visible + .dg-cookie-switch-track {
    outline: 2px solid var(--dg-btn-primary-focus-ring);
    outline-offset: 2px;
}

.dg-cookie-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    padding: clamp(16px, 1.4vw, 24px) clamp(20px, 1.7vw, 30px);
    border-top: 1px solid var(--dg-surface-border-light);
}

@media (max-width: 575px) {
    .dg-cookie-banner-actions .dg-cookie-btn,
    .dg-cookie-modal-foot .dg-cookie-btn {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Takım logoları şeridi (p_teams) — referans temanın brand-* kuralları main.css'te,
   burada kendi teams-* karşılıkları tanımlanır (main.css'e dokunulmaz).
   ============================================================ */
/* logolar kendi renklerinde durur; üzerine gelince hafifçe büyür */
.teams-wrapper .teams-image {
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.teams-wrapper .teams-image:hover {
    transform: scale(1.1);
}

.teams-wrapper .teams-image img {
    display: block;
    width: auto;
    height: 64px;
    margin: 0 auto;
    object-fit: contain;
}

.teams-wrapper .slick-slide {
    margin: 0 15px;
}

/* Slick'in slick-list'i overflow:hidden — yatayda gerekli (sıradaki slaytlar gizlensin),
   ama hover'da büyüyen logo dikeyde kırpılıyordu. Dikey padding ile büyüme payı açılır,
   aynı miktar negatif margin ile geri alınır ki bölümün yüksekliği değişmesin. */


/* Slick kurulmadan önce logolar blok halinde alt alta diziliyordu (ilk yüklemede dikey sıçrama).
   Kurulmamış şeritte yatay satıra zorlanır ve taşan kısım gizlenir; .slick-initialized gelince
   Slick'in kendi yapısı devralır. */
.teams-carousel-active:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    overflow: hidden;
}

.teams-carousel-active:not(.slick-initialized) .teams-image {
    flex: 0 0 calc((100% - 150px) / 6);
}

@media (max-width: 1199px) {
    .teams-carousel-active:not(.slick-initialized) .teams-image {
        flex-basis: calc((100% - 120px) / 5);
    }
}

@media (max-width: 991px) {
    .teams-carousel-active:not(.slick-initialized) .teams-image {
        flex-basis: calc((100% - 90px) / 4);
    }
}

@media (max-width: 767px) {
    .teams-carousel-active:not(.slick-initialized) .teams-image {
        flex-basis: calc((100% - 60px) / 3);
    }
}

@media (max-width: 575px) {
    .teams-carousel-active:not(.slick-initialized) .teams-image {
        flex-basis: calc((100% - 30px) / 2);
    }
}

/* ============================================================
   Paket seçimi (dg-packages) — p_package-cards.blade.php
   Vibe: Ethereal Glass — koyu zemin, radial ışık, camsı kartlar, kıl payı kenarlar.
   Layout: Asimetrik bento — ilk kart geniş, kalanlar yanına.
   Teknik: çift bezel (Doppelrand). Kart doğrudan zemine oturmaz; dış kabuk makine
   gövdesi, iç çekirdek cam plaka. İç yarıçap = dış yarıçap - kabuk payı (eş merkezli eğri).
   Tüm geçişler cubic-bezier(0.32, 0.72, 0, 1) — kütle hissi veren yay eğrisi.
   ============================================================ */
.dg-packages {
    position: relative;
    overflow: hidden;
    padding-block: clamp(90px, 9vw, 160px);
    background: var(--dg-header-bg);
}

/* arka plandaki ışık — düz renk yerine derinlik. Sabit katman, kaydırma sırasında repaint yok */
.dg-packages-glow {
    position: absolute;
    inset-inline-start: 50%;
    top: -18%;
    width: 100%;
    height: 620px;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 30% 50%, rgba(198, 85, 246, 0.18), transparent 62%),
        radial-gradient(ellipse at 72% 40%, rgba(96, 36, 131, 0.28), transparent 58%);
    pointer-events: none;
}

.dg-packages > .container {
    position: relative;
    z-index: 1;
}

/* --- başlık --- */
.dg-packages-head {
    max-width: 660px;
    margin-bottom: clamp(38px, 3.8vw, 64px);
}

.dg-packages-badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.dg-packages-title {
    margin: 0 0 16px;
    font-size: clamp(34px, 3.6vw, 58px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--dg-text-inverse);
}

.dg-packages-lede {
    margin: 0;
    max-width: 54ch;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

/* --- filtre barı: çift bezel --- */
.dg-packages-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: clamp(26px, 2.6vw, 44px);
}

.dg-packages-bar-core {
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.dg-packages-types,
.dg-packages-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.dg-packages-type,
.dg-packages-pay-btn {
    padding: 9px 17px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.dg-packages-type:hover,
.dg-packages-pay-btn:hover {
    color: var(--dg-text-inverse);
}

.dg-packages-type.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dg-text-inverse);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dg-packages-pay-btn.is-active {
    background: var(--dg-text-inverse);
    color: var(--dg-brand-dark-title);
}

.dg-packages-type:focus-visible,
.dg-packages-pay-btn:focus-visible,
.dg-packages-cta:focus-visible {
    outline: 2px solid var(--dg-brand-accent);
    outline-offset: 3px;
}

/* --- bento ızgara --- */
.dg-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
}

/* dış kabuk: makine gövdesi */
.dg-packages-card {
    position: relative;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.dg-packages-panel .dg-packages-card:hover,
.dg-packages-panel.is-revealed .dg-packages-card:hover {
    transform: scale(1.05);
    border-color: rgba(198, 85, 246, 0.4);
    background: rgba(198, 85, 246, 0.07);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* iç çekirdek: cam plaka. Yarıçap = 26 - 6 = 20px, eş merkezli */
.dg-packages-core {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(12, 6, 24, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dg-packages-media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, 0.03);
}

.dg-packages-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-packages-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 20px;
}

.dg-packages-name {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--dg-text-inverse);
}

.dg-packages-feats {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.dg-packages-feats li {
    position: relative;
    padding: 0 0 9px 16px;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}

/* madde işareti ince halka — dolu nokta yerine, camsı dile uygun */
.dg-packages-feats li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(198, 85, 246, 0.7);
    border-radius: 50%;
}

.dg-packages-buy {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dg-packages-price {
    margin: 0;
    font-size: clamp(30px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--dg-text-inverse);
}

.dg-packages-note {
    margin: 7px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.38);
}

/* buton içinde buton: ok kendi dairesinde, butonun sağ iç kenarına dayalı */
.dg-packages-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 18px;
    padding: 5px 5px 5px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--dg-text-inverse);
    font-size: 13px;
    font-weight: 600;
    transition:
        background-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.dg-packages-cta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dg-packages-cta:hover {
    border-color: transparent;
    background: var(--dg-brand-accent);
}

/* basma anında hafif küçülme — fiziksel tepki */
.dg-packages-cta:active {
    transform: scale(0.98);
}

.dg-packages-cta-orb {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--dg-text-inverse);
    transition: background-color 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

/* iç daire çapraz kayıp büyür — kinetik gerilim */
.dg-packages-cta:hover .dg-packages-cta-orb {
    background: rgba(255, 255, 255, 0.24);
}

.dg-packages-empty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* --- giriş: bulanıktan netleşerek yükselir --- */
.dg-packages-card {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
}

.dg-packages-panel.is-revealed .dg-packages-card {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.85s cubic-bezier(0.32, 0.72, 0, 1),
        filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 0.7s cubic-bezier(0.32, 0.72, 0, 1),
        border-color 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}

.dg-packages-panel.is-revealed .dg-packages-card:nth-child(1) { transition-delay: 0ms; }
.dg-packages-panel.is-revealed .dg-packages-card:nth-child(2) { transition-delay: 90ms; }
.dg-packages-panel.is-revealed .dg-packages-card:nth-child(3) { transition-delay: 180ms; }
.dg-packages-panel.is-revealed .dg-packages-card:nth-child(4) { transition-delay: 270ms; }
.dg-packages-panel.is-revealed .dg-packages-card:nth-child(n+5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    .dg-packages-card {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .dg-packages-panel.is-revealed .dg-packages-card,
    .dg-packages-media img,
    .dg-packages-cta,
    .dg-packages-cta-orb {
        transition: none;
    }
}

/* --- responsive --- */
@media (max-width: 991px) {
}

@media (max-width: 767px) {
    .dg-packages-grid {
        grid-template-columns: 1fr;
    }

    .dg-packages-bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* sekmeler dar ekranda yatay kayar, sarmalamaz */
    .dg-packages-bar-core {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dg-packages-bar-core::-webkit-scrollbar {
        display: none;
    }

    .dg-packages-types {
        flex-wrap: nowrap;
    }

    .dg-packages-pay {
        justify-content: space-between;
    }

    .dg-packages-pay-btn {
        flex: 1;
        text-align: center;
    }
}

/* dekoratif ışık bölümü taşırmasın */
.dg-packages-glow {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* kaydırılabilir sekme barı kendi genişliğini aşmasın — taşma bölüme yayılıyordu */
    .dg-packages-bar-core {
        min-width: 0;
        max-width: 100%;
    }

    .dg-packages-bar {
        min-width: 0;
    }
}

/* tıklama sonrası yüklenme durumu: buton kendi içinde dönen halkaya döner,
   sayfa değişene kadar kullanıcı isteğin alındığını görür */
.dg-packages-cta.is-loading {
    pointer-events: none;
    border-color: transparent;
    background: var(--dg-brand-accent);
}

.dg-packages-cta.is-loading .dg-packages-cta-orb svg {
    display: none;
}

.dg-packages-cta.is-loading .dg-packages-cta-orb::after {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: var(--dg-text-inverse);
    border-radius: 50%;
    animation: dg-packages-spin 0.7s linear infinite;
}

@keyframes dg-packages-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-packages-cta.is-loading .dg-packages-cta-orb::after {
        animation-duration: 1.6s;
    }
}

/* sekme/filtre değişiminde yükleniyor durumu — içerik ani gelmesin diye
   ızgara kısa süre soluklaşır, üstünde dönen halka belirir */
.dg-packages-panel {
    position: relative;
}

.dg-packages-panel .dg-packages-grid {
    transition: opacity 0.25s ease;
}

.dg-packages-panel.is-switching .dg-packages-grid {
    opacity: 0.25;
    pointer-events: none;
}

.dg-packages-panel.is-switching::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    top: 90px;
    width: 30px;
    height: 30px;
    margin-inline-start: -15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--dg-brand-accent);
    border-radius: 50%;
    animation: dg-packages-spin 0.7s linear infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .dg-packages-panel.is-switching::after {
        animation-duration: 1.6s;
    }
}