/* ============================================================
   Roxi Tema — Dark Mode  |  body.dark
   ============================================================ */

/* ── 1. CSS Variables ─────────────────────────────────────── */
html {
    scrollbar-gutter: stable;
}

body.dark {
    /* Canonical dark design tokens */
    --color-bg: #12141f;
    --color-bg-elevated: #1a1d2e;
    --color-bg-soft: #1e2135;
    --color-bg-header: #1e2235;
    --color-bg-footer: #1e2029;
    --color-bg-footer-deep: #191b24;
    --color-bg-accent: #251520;
    /* Tipografi: 3 kademeli standart — başlık / gövde / soluk.
       Soluk kademe bile koyu zeminlerde AA kontrastı koruyacak düzeyde. */
    --color-text: #dde4f5;
    --color-text-muted: #b8c3de;
    --color-text-soft: #8e98b4;
    --color-border: #252a42;
    --color-border-strong: #303558;
    --color-white: #fff;
    --color-success: #4ade80;
    --shadow-surface: none;
    --shadow-surface-strong: 0 22px 48px rgba(0, 0, 0, 0.45);

    /* Legacy aliases: keep old components working during refactor. */
    --bg: var(--color-bg);
    --white: var(--color-bg-elevated);
    --soft-text: var(--color-text-soft);
    --main-text: var(--color-text-muted);
    --dark-text: var(--color-text);
    --surface-1: var(--color-bg-elevated);
    --surface-2: var(--color-bg-soft);
    --surface-3: var(--color-bg);
    --surface-accent: var(--color-bg-accent);
    --border-soft: var(--color-border);
    --border-strong: var(--color-border-strong);
    --text-1: var(--color-text);
    --text-2: var(--color-text-muted);
    --text-3: var(--color-text-soft);
    --success-soft: var(--color-success);
    --surface-shadow: var(--shadow-surface);
    --surface-shadow-strong: var(--shadow-surface-strong);
    color-scheme: dark;
}

/* ── 1b. Toggle Transition ────────────────────────────────── */
/* The actual switch animation is a View Transitions circle-reveal wired up
   in main.js (search "startViewTransition"), not a CSS transition — a
   real per-element `transition: background-color ...` on every node was
   tried first and caused visible jank (thousands of nodes restyling at
   once) since it forces style recalc/paint on the live DOM instead of
   animating a cheap GPU snapshot. This block only resets the browser's
   *default* view-transition cross-fade so our custom clip-path circle is
   the only thing that plays. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* ── 2. Scrollbar ─────────────────────────────────────────── */
body.dark {
    scrollbar-color: var(--color-border) var(--color-bg);
}

body.dark ::-webkit-scrollbar {
    background: var(--color-bg);
}

body.dark ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: #2e3450;
}

/* ── 3. Top Head Bar ──────────────────────────────────────── */
/* top--head-area is transparent in both modes — floats over the hero */
body.dark .top--head .item {
    border-color: rgba(255, 255, 255, 0.09);
    color: #c0cce6;
}

body.dark .top--head .item.item-action {
    color: var(--main-color);
}

/* ── 4. Header ────────────────────────────────────────────── */
body.dark .header {
    background: var(--color-bg-header);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.dark .navbar--action .item .icon {
    border-color: var(--color-border);
}

body.dark .navbar--action .item:hover {
    background: var(--color-bg);
}

body.dark .navbar--action .item .icon.show {
    border-color: var(--main-color) !important;
}

/* ── 5. Desktop Navbar Dropdown ───────────────────────────── */
body.dark .navbar ul li .nav-sub-content {
    background: var(--color-bg-elevated);
    box-shadow: 0 12px 30px #00000060;
}

body.dark .navbar ul li .nav-sub-content::before {
    border-bottom-color: var(--color-bg-elevated);
}

body.dark .nav-sub-content ul li .nav-sub-link {
    border-bottom-color: var(--color-border);
}

body.dark .nav-sub-content ul li .nav-sub-link .text span {
    color: var(--main-text);
}

/* base/mobile state: icon color follows the per-platform brand color (--c)
   directly; lift near-black brand colors (Tiktok/Threads) to a legible
   lightness while leaving already-bright brand colors untouched */
body.dark .nav-sub-content ul li .nav-sub-link .icon {
    color: oklch(from var(--c, var(--main-color)) max(l, 0.55) c h);
}

@media (min-width: 1024px) {
    /* desktop state: the badge becomes a solid brand-color fill and the
       icon is meant to be plain white (style.css uses color:var(--white)),
       but --white is repurposed above as the dark surface color, so it
       must be restored to real white here or every icon in the dropdown
       (Sosyal Medya Hizmetleri) becomes near-invisible dark-on-color */
    body.dark .nav-sub-content ul li .nav-sub-link .icon {
        color: #fff;
    }
}

/* ── 6. Mobile Menu ───────────────────────────────────────── */
body.dark nav.content--navbar ul li.nav-item .nav-link {
    border-bottom-color: var(--color-border);
}

body.dark nav.content--navbar ul li.nav-item .nav-link.show {
    background: var(--color-bg-elevated);
}

body.dark .menu--control .nav-sub-content ul {
    background: var(--color-bg);
}

body.dark .menu--control .nav-sub-content .nav-sub-heading {
    background: var(--color-bg);
}

body.dark .menu--control .control--area .top-side .close:hover {
    background: var(--color-border);
}

/* ── 7. Header Cart Link ──────────────────────────────────── */
body.dark .header-cart-link {
    background: var(--surface-2);
    color: var(--text-2);
}

body.dark .header-cart-link:hover {
    background: var(--main-color);
    color: #fff;
}

body.dark .breadcrumb-bar li {
    color: var(--color-text-muted);
}

body.dark .breadcrumb-bar li:not(:last-child)::after {
    color: var(--color-text-soft);
}

body.dark .breadcrumb-bar a {
    color: var(--color-text-muted);
}

body.dark .breadcrumb-bar a:hover {
    color: var(--main-color);
}

body.dark .breadcrumb-bar span[aria-current="page"] {
    color: var(--color-text);
}

/* ── 8. Intro Hero Section ────────────────────────────────── */
body.dark .main--intro .intro--well {
    background-color: var(--color-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    box-shadow: 0 26px 60px #00000060 !important;
}

body.dark .main--intro .intro--well::before,
body.dark .main--intro .intro--well::after {
    display: none;
}

body.dark .intro--well h2 {
    color: var(--dark-text) !important;
}

body.dark .intro--well p.intro-desc {
    color: var(--soft-text) !important;
}

body.dark .intro--well .site-title {
    background: var(--color-bg-soft) !important;
    border-color: rgba(37, 42, 66, 0.38) !important;
}

/* ── 9. Category Chips ────────────────────────────────────── */
body.dark .catpi--list .catpi-item {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

body.dark .catpi--list .catpi-item .icon {
    /* brand colors like Tiktok/Threads (#000) are invisible on the dark
       card background; lift very dark brand colors to a legible lightness
       while leaving already-bright brand colors untouched */
    color: oklch(from var(--c) max(l, 0.55) c h);
}

body.dark .catpi--list.catpi--hor .catpi-item .icon::before {
    opacity: 0.22;
}

body.dark .catpi--list.catpi--hor .catpi-item .text {
    color: var(--soft-text);
}

@media (hover: hover) {
    body.dark .catpi--list .catpi-item:hover {
        background-color: var(--c) !important;
    }

    /* the idle-state ".text { color: var(--soft-text) }" rule above ties in
       specificity with style.css's hover-white rule, so it must be beaten
       explicitly here or "Hizmetleri" stays low-contrast on the colored hover bg */
    body.dark .catpi--list.catpi--hor .catpi-item:hover .text {
        color: #fff;
    }
}

body.dark .catpi--list.catpi--hor .catpi-item:hover .icon::before {
    background: #fff;
}

@media (hover: none) and (pointer: coarse) {
    body.dark .catpi--list .catpi-item:hover {
        background: var(--color-bg-elevated);
    }
}

/* ── 10. Popular Packs ────────────────────────────────────── */
body.dark .popular-pack-item {
    background: var(--color-bg-elevated);
}

body.dark .popular-pack-item .detail span.price::before {
    background: linear-gradient(to right, rgba(37, 42, 66, 0.4), transparent);
}

/* ── 11. Reviews ──────────────────────────────────────────── */
body.dark .review--card .recard--box {
    background: var(--color-bg-elevated);
}

body.dark .review--card .recard--box .text {
    color: var(--main-text);
}

/* ── 12. Service / Category Pages ────────────────────────── */
body.dark .service--content {
    background: var(--color-bg-elevated);
}

body.dark .service--content .pack--list .pack {
    background: transparent;
    border-color: var(--color-border);
}

body.dark .service--content .service--bottom {
    background: var(--color-bg);
}

body.dark .service--pack_content .pack {
    background: var(--color-bg-elevated);
}

body.dark .service--pack_content .pack .head {
    border-bottom-color: var(--color-border);
}

body.dark .service--pack_content .pack .pack--bottom {
    border-top-color: var(--color-border);
}

/* category page header icon (e.g. the pink Instagram badge above "Instagram
   Hizmetleri"): color:var(--white) is meant to be plain white on the
   var(--main-color) badge, but --white is repurposed above as the dark
   surface color, turning the icon glyph near-invisible */
body.dark .intro--page .intro--head > .icon {
    color: #fff;
}

/* ── 13. Platform Page ────────────────────────────────────── */
body.dark .platform--area .platform--item {
    background: var(--color-bg-elevated);
    border-color: transparent;
}

/* ── 14. Free Tools ───────────────────────────────────────── */
body.dark .free-tools-list .tool .tool-content {
    background: var(--surface-1);
}

body.dark .free-tools-list .tool-content .tool-item {
    background: transparent;
    border-color: var(--border-soft);
}

body.dark .free-tools-list .tool-content .tool-item:hover {
    background: var(--surface-3);
}

/* ── 15. Freearea Box ─────────────────────────────────────── */
body.dark .freearea--box {
    background: var(--surface-1);
}

body.dark .freearea--features {
    background: var(--surface-3);
}

body.dark .free-account-alert {
    background: #251e0a;
    border-color: #463410;
    color: #c99040;
}

body.dark .free-account-alert i {
    color: #c99040;
}

/* ── 16. Order Step ───────────────────────────────────────── */
body.dark .order--payment_method .item {
    background: var(--surface-1);
    border-color: var(--border-soft);
}

body.dark .checkout-cart-item,
body.dark .child-order-card {
    background: linear-gradient(145deg, var(--surface-1) 0%, var(--surface-2) 100%);
    border-color: var(--border-soft);
    box-shadow: none;
}

body.dark .checkout-cart-item:hover {
    border-color: var(--border-strong);
}

body.dark .checkout-cart-info strong,
body.dark .checkout-cart-price,
body.dark .child-order-card .text .product--name,
body.dark .child-order-card .child-order-status {
    color: var(--text-1);
}

body.dark .checkout-cart-remove,
body.dark .checkout-pagination-btn,
body.dark .checkout-pagination-page,
body.dark .child-order-card .child-order-code-badge,
body.dark .child-order-card .child-order-status {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text-2);
}

body.dark .checkout-address-note,
body.dark .child-order-card .icon,
body.dark .child-order-card .child-order-price-badge {
    background: var(--surface-accent);
    border-color: var(--border-soft);
}

body.dark .checkout-address-note,
body.dark .checkout-address-note span,
body.dark .child-order-card .text .order--value {
    color: var(--text-3);
}

body.dark .checkout-sidebar-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

body.dark .cart-checkout-item {
    background: var(--color-bg);
    border-color: var(--color-border);
}

body.dark .cart-remove-button {
    background: #2a1520;
    color: var(--main-color);
}

body.dark .form-floating .fc-action-butto {
    background: var(--color-border);
    color: var(--soft-text);
}

body.dark .order--step_area .baco-step {
    background: var(--color-bg-elevated);
}

body.dark .order--step_area .baco-step .head {
    border-bottom-color: var(--color-border);
}

/* ── 17. Cart Address Modal ───────────────────────────────── */
body.dark .modal[data-modal="cartAddress"] .modal-content,
body.dark .cart-address-modal-area,
body.dark .cart-address-modal-content {
    background: var(--color-bg-elevated);
}

body.dark .cart-address-modal-close {
    background: var(--color-border);
    border-color: var(--color-border-strong);
    color: var(--soft-text);
}

body.dark .cart-address-package {
    background: var(--color-bg);
    border-color: var(--color-border);
}

body.dark .cart-address-package i {
    background: var(--color-bg-soft);
}

body.dark .cart-address-modal-body .form-control {
    background: #0f1119 !important;
    border-color: var(--color-border) !important;
}

/* ── 18. Article / TOC ────────────────────────────────────── */
body.dark .article-toc,
body.dark .article--area {
    background: var(--surface-1);
    border-color: var(--border-soft);
    box-shadow: none;
}

body.dark .article--area p,
body.dark .article--area li,
body.dark .article--area .text,
body.dark .article-toc .toc-title,
body.dark .article-toc a.toc-level-3,
body.dark .article-toc a.toc-level-4 {
    color: var(--text-3);
}

body.dark .article--area :is(h1, h2, h3, h4, h5) {
    color: var(--text-1);
}

body.dark .article--area a {
    color: var(--main-color);
}

body.dark .article-toc::-webkit-scrollbar-thumb {
    background: #2e3350;
}

body.dark .article--area table th {
    background: var(--surface-2);
    color: var(--text-2);
}

body.dark .article--area table th,
body.dark .article--area table td {
    border-color: var(--border-soft);
}

/* ── 19. Blog / Post List ─────────────────────────────────── */
body.dark .blog--list .blog-item_detail .user .icon {
    background: var(--color-border);
}

body.dark .pagination li a {
    background: var(--color-border);
    color: var(--soft-text);
}

body.dark .pagination li a:hover {
    background: var(--color-border-strong);
}

body.dark .pagination li a.home {
    background: var(--dark-text) !important;
    color: var(--color-bg) !important;
}

/* ── 20. Comment Area ─────────────────────────────────────── */
body.dark .post-comment-area .comment-list .comment-item {
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark .post-comment-area .comment-item .head > .icon {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark .post-comment-area .comment-item .head span.date {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
    color: var(--soft-text);
}

body.dark .post-comment-area .comment-empty {
    border-color: var(--color-border);
}

/* ── 21. Related Services ─────────────────────────────────── */
body.dark section#related-services .related-service-card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark section#related-services .related-service-arrow {
    background: var(--color-border);
    color: var(--soft-text);
}

body.dark section#related-services .related-service-text,
body.dark section#related-services .related-service-card:hover .related-service-text,
body.dark section#related-services .related-service-card:focus-visible .related-service-text {
    color: var(--soft-text);
}

body.dark section#related-services .related-service-card:hover,
body.dark section#related-services .related-service-card:focus-visible {
    border-color: var(--color-border-strong);
    box-shadow: 0 16px 36px #00000030;
}

body.dark section#related-services .related-service-card:hover .related-service-arrow,
body.dark section#related-services .related-service-card:focus-visible .related-service-arrow {
    background: var(--color-border-strong);
    color: var(--main-color);
}

/* ── 22. Package Recommend ────────────────────────────────── */
body.dark .package-recommend-box {
    background-color: var(--color-bg-elevated);
    background-image: none;
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark .package-recommend-box::before {
    display: none;
}

body.dark .recommend-form input,
body.dark .recommend-form select {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

body.dark .recommend-result {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
}

body.dark .recommended-package .icon {
    background: var(--color-bg-soft);
}

/* ── 23. Why Choose ───────────────────────────────────────── */
body.dark .why-feature-card,
body.dark .why-compare-card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark .why-feature-card .icon {
    background: var(--color-bg-soft);
}

body.dark .compare-table {
    border-color: var(--color-border);
}

body.dark .compare-row > div {
    border-bottom-color: var(--color-border);
    border-right-color: var(--color-border);
}

body.dark .compare-row-head > div {
    background: var(--color-bg-soft);
    color: var(--dark-text);
}

/* ── 24. Freetool How-to ──────────────────────────────────── */
body.dark .freetool-howto {
    border-color: var(--color-border);
    box-shadow: none;
}

body.dark .freetool-howto-card {
    border-color: var(--color-border);
}

body.dark .freetool-howto-head h2 {
    color: var(--main-text);
}

body.dark .freetool-howto-head p,
body.dark .freetool-howto-card .step-text h3 {
    color: var(--main-text);
}

body.dark .freetool-howto-card .step-text p {
    color: var(--soft-text);
}

/* ── 25. Blog Dark Section ────────────────────────────────── */

/* ── 26. Cart Preview ─────────────────────────────────────── */
body.dark .cart-preview {
    background: linear-gradient(180deg, var(--surface-1) 0%, #14172a 100%);
    border-color: var(--border-soft);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    color: var(--text-2);
}

body.dark .cart-preview-actions button {
    background: var(--surface-2);
    color: var(--main-color);
}

body.dark .cart-preview-icon,
body.dark .cart-product-platform-icon,
body.dark .empty-cart-icon {
    background: var(--surface-2);
    border-color: var(--border-soft);
}

body.dark .cart-preview-body span,
body.dark .cart-preview-body small,
body.dark .basket-secure-info,
body.dark .contact--sidebar .item .text,
body.dark .cart-empty-card p,
body.dark .cart-intro-card .text p {
    color: var(--text-3);
}

body.dark .cart-pagination-btn,
body.dark .cart-pagination-page,
body.dark .basket-total-row,
body.dark .cart-address-package {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text-3);
}

body.dark .basket-detail-list li,
body.dark .contact--sidebar .item,
body.dark .cart-products-panel .order-payment_title {
    border-color: var(--border-soft);
}

/* style.css has a leftover standalone ".contact--sidebar{background:#fff}"
   rule (line ~5920) that post-dates the shared --surface-1 card refactor
   and always wins (same specificity, later in source) regardless of theme,
   leaving this card a white island on the dark page */
body.dark .contact--sidebar {
    background: var(--surface-1);
}

body.dark .cart-intro-card {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}

/* cart.php ships its own inline <style> for .cart-intro-card with a
   hardcoded light "glassmorphism" ::before/::after overlay (frosted-white
   gradient + white shine), never adapted for dark mode. It paints over the
   dark background above at high opacity, washing the card out to light
   gray and making the white heading text unreadable. Same fix already
   used for .main--intro .intro--well::before/::after (section 8): hide it. */
body.dark .cart-intro-card::before,
body.dark .cart-intro-card::after {
    display: none;
}

body.dark .cart-intro-card .text h1,
body.dark .basket-total-label,
body.dark .cart-empty-card h2,
body.dark .article--area :is(h1, h2, h3, h4, h5) {
    color: var(--text-1);
}

body.dark .basket-secure-info i {
    color: var(--success-soft);
}

/* remove-from-cart button hover: same var(--white) collision as above */
body.dark .cart-remove-button:hover {
    color: #fff;
}

/* ── 27. EGLib — Form Controls ────────────────────────────── */
body.dark .form-control {
    background: #0f1119;
    border-color: var(--color-border);
    color: var(--main-text);
}

body.dark .form-control:focus {
    border-color: var(--main-color) !important;
    background: #0f1119;
}

body.dark .form-control::placeholder {
    color: var(--soft-text);
}

/* eglib.css hides the placeholder (color:transparent) on floating-label
   fields so only the <label> shows at rest; the rule above has higher
   specificity (body + ::placeholder = 2 type-selectors) and wins over it,
   making the placeholder visible again and overlapping the label text
   (e.g. "Adınız Soyadınız" doubled in the İletişim form) */
body.dark .form-floating > .form-control::placeholder {
    color: transparent;
}

body.dark .form-control:disabled {
    background: var(--color-bg-elevated) !important;
    color: var(--soft-text) !important;
}

/* ── 28. EGLib — Tabs ─────────────────────────────────────── */
body.dark .tabsArea .tabHead {
    background: var(--color-bg);
}

body.dark .tabsArea .tabHead.soft {
    background: var(--color-bg-elevated);
}

body.dark .tabsArea .tabHead .item {
    color: var(--soft-text);
}

body.dark .tabsArea .tabHead .item.active {
    background: var(--color-bg-elevated) !important;
    box-shadow: 0 3px 6px #00000030;
    color: var(--main-text);
}

body.dark .tabsArea .tabHead .item:hover {
    background: var(--color-bg-soft);
}

/* ── 29. EGLib — Card ─────────────────────────────────────── */
body.dark .card {
    background: var(--color-bg-elevated);
}

body.dark .card .card-header {
    border-bottom-color: var(--color-border);
}

body.dark .card .card-footer {
    border-top-color: var(--color-border);
}

body.dark .card .card-header .butto-light {
    background: var(--surface-2);
    color: var(--text-2);
}

/* ── 30. EGLib — Dropdown ─────────────────────────────────── */
body.dark .dropListTable {
    background: var(--color-bg-elevated);
    box-shadow: 0 10px 22px #00000060;
}

body.dark .dropListTable .item {
    border-bottom-color: var(--color-border);
    color: var(--soft-text);
}

body.dark .dropListTable .item .text span {
    color: var(--main-text);
}

body.dark .dropListTable .item:hover {
    background: var(--color-bg);
}

body.dark .dropListTable .item.active {
    background: var(--color-bg-soft);
}

body.dark .dropListTable .search {
    border-bottom-color: var(--color-border);
}

body.dark .dropListTable::-webkit-scrollbar-track,
body.dark .dropListTable::-webkit-scrollbar {
    background-color: var(--color-bg);
}

body.dark .dropListTitle {
    border-color: var(--color-border);
    color: var(--soft-text);
}

body.dark .dropList.light .dropListTitle,
body.dark .dropList.selected .dropListTitle {
    background-color: var(--color-bg);
}

body.dark .dropList.show .dropListTitle {
    background: var(--color-bg);
}

/* ── 31. EGLib — Checkbox & Radio ────────────────────────── */
body.dark [type="checkbox"],
body.dark [type="radio"] {
    background: #0f1119;
    border-color: var(--color-border);
}

/* ── 32. EGLib — Alerts ───────────────────────────────────── */
body.dark .alert-primary {
    background: #182060;
    color: #99aaff;
}

body.dark .alert-danger {
    background: #3a1020;
    color: #ff9999;
}

body.dark .alert-warning {
    background: #3a2a10;
    color: #ffcc80;
}

body.dark .alert-success {
    background: #0d3020;
    color: #80ffaa;
}

body.dark .alert-light {
    background: var(--color-bg-soft);
    color: var(--soft-text);
}

/* ── 33. Dark Mode Toggle (switch) ────────────────────────── */
/* A plain icon button here read as almost invisible against the top bar's
   pale background (thin near-white border + muted gray icon on a near-
   white surface). A track+thumb switch carries its own state visually
   (position AND color), so it doesn't depend on being able to render a
   faint icon glyph at high enough contrast — the whole track is a solid,
   unambiguous shape either way. */
.darkmode-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.dm-toggle-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 25px;
    padding: 2px;
    border-radius: 999px;
    background: #d7dce6;
    border: 1px solid #c7cede;
    transition: 0.2s ease background-color, 0.2s ease border-color;
}

.dm-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    color: var(--soft-text);
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(20, 25, 45, 0.35);
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.darkmode-toggle.active .dm-toggle-thumb {
    transform: translateX(21px);
}

body.dark .dm-toggle-track {
    background: var(--main-color);
    border-color: var(--main-color);
}

/* instant swap on purpose: the switch itself is animated by the
   View Transitions circle-reveal (main.js), which snapshots whatever the
   icon's resolved state is right after the click handler runs. A CSS
   transition here would just get captured mid-flight as a frozen,
   half-rotated frame inside that snapshot instead of actually playing. */
.darkmode-toggle .dm-icon-sun { display: none; }
.darkmode-toggle .dm-icon-moon { display: flex; }

body.dark .darkmode-toggle .dm-icon-sun { display: flex; }
body.dark .darkmode-toggle .dm-icon-moon { display: none; }

/* ── 34. Misc Hardcoded Colors ────────────────────────────── */
body.dark .intro--well p.intro-desc {
    color: var(--soft-text) !important;
}

body.dark .article-toc a.toc-level-3::before,
body.dark .article-toc a.toc-level-4::before {
    color: #3e4560;
}

body.dark .blog--list .post .detail a h3 {
    color: var(--main-text);
}

body.dark .sidebar--services .card {
    background: var(--color-bg-elevated);
}

/* footer { background:#1e2029 } stays dark in both themes, but
   .footer-nav-heading uses color:var(--white) for literal white text on
   that permanently-dark bar. --white is repurposed above (section 1) as
   the dark "surface" color, so it must be restored to real white here or
   the column titles (Hizmetlerimiz / Ücretsiz Araçlar / Kurumsal) become
   near-invisible dark-on-dark. */
body.dark .footer-nav-heading {
    color: #fff;
}

/* ── 35. Pattern gizleme ──────────────────────────────────── */
/* path-1.webp light modda beyaz üzerine ince doku; dark modda yüksek kontrast oluşturur */
body.dark .review--card::before,
body.dark .intro--page::before,
body.dark .intro--service::before,
body.dark .intro--free::before,
body.dark .cart-empty-card::before {
    opacity: 0 !important;
}

body.dark .cart-intro-card {
    background-color: var(--color-bg-header) !important;
    background-image: none !important;
}

body.dark .cart-intro-card::after {
    display: none;
}

/* ── 36. Wave gizleme ─────────────────────────────────────── */
/* wave.webp beyaz dalga şeridi; dark modda section geçişlerinde yanlış görünür */
body.dark .path-wave::after {
    display: none !important;
}

/* ── 37. Toggle responsive ────────────────────────────────── */
@media (max-width: 480px) {
    .dm-toggle-track {
        width: 40px;
        height: 22px;
    }
    .dm-toggle-thumb {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
    .darkmode-toggle.active .dm-toggle-thumb {
        transform: translateX(20px);
    }
}

/* ── 38. Contact Sidebar ──────────────────────────────────── */
/* ── 39. Comment Rating Field ─────────────────────────────── */
body.dark .comment-rating-field {
    background: #0f1119 !important;
    border-color: var(--color-border) !important;
}

/* ── 40. Cart Empty State ─────────────────────────────────── */
body.dark .cart-empty-card {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

body.dark .empty-cart-icon {
    background: var(--color-border) !important;
    border-color: var(--color-border-strong) !important;
}

/* ── 41. Cart Product Card Border ────────────────────────── */
body.dark .cart-product-card {
    border-color: var(--color-border);
}

/* ── 42. Comment Item Hover ───────────────────────────────── */
body.dark .post-comment-area .comment-list .comment-item:hover {
    border-color: var(--color-border-strong);
}

/* ── 43. No-flash on initial load ─────────────────────────── */
body.no-dm-transition,
body.no-dm-transition * {
    transition: none !important;
}