/* ============================================
   Dark Mode CSS - DestanGraphic
   Mevcut tema değişkenlerini kullanarak dark mode
   ============================================ */

/* Renk değişkenleri destangraphic-style.css içindeki :root bloğundadır */


/* Dark Mode için özel stiller */

/* Body ve genel elementler */
[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--base-text);
}

/* Kartlar ve containerlar */
[data-theme="dark"] .well-box,
[data-theme="dark"] .wbox,
[data-theme="dark"] .card {
    background: var(--card-bg);
    border-color: var(--line-color);
    color: var(--base-text);
}

/* Sidebar ve navigasyon */
[data-theme="dark"] .wrap-side {
    background-color: var(--card-bg);
    border-color: var(--line-color);
}

[data-theme="dark"] .wrap-response-head {
    background-color: var(--c-gray-21);
}

/* Border renkleri */
[data-theme="dark"] .well-box .item,
[data-theme="dark"] .well-box .head,
[data-theme="dark"] .well-box .foot,
[data-theme="dark"] .wbox .wbox-head,
[data-theme="dark"] .wbox .wbox-foot {
    border-color: var(--line-color);
}

/* Input ve form elementleri */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--c-gray-20);
    color: var(--base-text);
    border-color: var(--line-color);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--c-gray-11);
}

/* Modal */
[data-theme="dark"] .modal-content .modalArea,
[data-theme="dark"] .modal .modal-content .modalArea {
    background: var(--card-bg);
}

[data-theme="dark"] .modalHead,
[data-theme="dark"] .modalFoot {
    border-color: var(--line-color);
}

/* Dropdown ve listeler */
[data-theme="dark"] .nav-action ul.list {
    background: var(--card-bg);
    box-shadow: 0 5px 20px var(--c-black-a13);
}

[data-theme="dark"] .nav-action ul.list li {
    border-color: var(--line-color);
}

/* Tablo */
[data-theme="dark"] table,
[data-theme="dark"] thead th,
[data-theme="dark"] tbody td {
    border-color: var(--line-color);
}

[data-theme="dark"] thead th {
    background-color: var(--card-bg);
}

/* Alert */
[data-theme="dark"] .alert-light {
    background: var(--c-gray-20);
    color: var(--soft-text);
}

/* Tabs */
[data-theme="dark"] .tabsArea .tabHead {
    background: var(--card-bg);
}

[data-theme="dark"] .tabsArea .tabHead.soft {
    background: var(--c-gray-20);
}

[data-theme="dark"] .tabsArea .tabHead .item.active {
    background: var(--bg) !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--card-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--line-color);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--c-gray-16);
}

/* Logo ve görseller için opacity ayarı */
[data-theme="dark"] img {
    opacity: 1;
}

[data-theme="dark"] .logo img,
[data-theme="dark"] .response-nav-logo img {
    opacity: 1;
}

/* Checkbox ve radio */
[data-theme="dark"] [type="checkbox"],
[data-theme="dark"] [type="radio"] {
    background: var(--c-gray-20);
    border-color: var(--line-color);
}

/* Smooth transitions for theme change */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude transitions for images and specific elements */
img, video, iframe,
.no-transition {
    transition: none !important;
}

/* Additional dark mode improvements */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--light-text) !important;
}

[data-theme="dark"] a.text-muted:hover,
[data-theme="dark"] .text-muted a:hover {
    color: var(--main-color) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

/* Service Box */
.service-box {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Work Box */
.work-box {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Team Box */
.team-box {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Blog Box */
.blog-box {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Testimonial */
.testimonial-slide,
.testimonial-slide2 {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Pricing Box */
.pricing-box,
.pricing-box2 {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Team Section Dark Mode */
[data-theme="dark"] .team-item-inner {
    background: var(--base-color, var(--card-bg));
    border-color: var(--line-color);
}
[data-theme="dark"] .team-item-inner:hover {
    border-color: var(--main-color);
    box-shadow: 0 4px 16px var(--c-black-a9);
}
[data-theme="dark"] .team-name {
    color: var(--main-color);
}
[data-theme="dark"] .team-role,
[data-theme="dark"] .team-content {
    color: var(--soft-text);
}
[data-theme="dark"] .team-social-divider {
    background: var(--c-white-a8);
}
[data-theme="dark"] .team-social-btn:hover {
    background: var(--c-gray-18);
    border-color: var(--main-color);
}
[data-theme="dark"] .team-social-btn i,
[data-theme="dark"] .team-social-btn span {
    color: var(--main-color);
}
[data-theme="dark"] .team-social-btn:hover i,
[data-theme="dark"] .team-social-btn:hover span {
    color: var(--c-white-1);
}

/* Contact Info */
.contact-info {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Widget */
.widget {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Code blocks */
pre, code {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* HR */
hr {
    border-color: var(--border-color);
    opacity: 0.3;
}

/* Dijital Ürünler sayfası - Dark tema uyumu */
[data-theme="dark"] .shopier-product-card {
    background: var(--base-color);
    color: var(--soft-text);
    border-color: var(--line-color);
}

[data-theme="dark"] .shopier-product-card .shopier-product-name,
[data-theme="dark"] .shopier-product-card .shopier-product-desc {
    color: var(--soft-text);
}

[data-theme="dark"] .shopier-product-card .shopier-product-price-usd {
    color: var(--main-color);
}

[data-theme="dark"] .shopier-product-card .shopier-product-price-try {
    color: var(--main-color);
}

[data-theme="dark"] .shopier-product-card .shopier-product-image,
[data-theme="dark"] .shopier-product-card [class*="shopier-product-image"] {
    background: var(--ref-bg);
}

[data-theme="dark"] .shopier-products-page .currency-toggle a:not(.active) {
    background: var(--c-gray-20);
    color: var(--soft-text);
    border-color: color-mix(in srgb, var(--main-color) 50%, var(--line-color));
}

[data-theme="dark"] .shopier-products-page .currency-toggle a.active {
    background: var(--main-color);
    color: var(--on-main);
    border-color: var(--main-color);
}

[data-theme="dark"] .shopier-products-page .shopier-scroll-btn {
    background: var(--c-gray-20);
    border-color: color-mix(in srgb, var(--main-color) 50%, var(--line-color));
    color: var(--main-color);
}
[data-theme="dark"] .shopier-products-page .shopier-scroll-btn:hover:not(:disabled) {
    background: var(--main-color);
    color: var(--on-main);
}

[data-theme="dark"] .shopier-product-card .shopier-product-buy.disabled {
    background: var(--c-gray-16);
}

[data-theme="dark"] .shopier-product-view {
    color: var(--main-color);
    border-color: var(--main-color);
}
[data-theme="dark"] .shopier-product-view:hover {
    background: color-mix(in srgb, var(--main-color) 25%, transparent);
}

[data-theme="dark"] .shopier-product-page .shopier-product-page-card {
    background: var(--base-color);
    border-color: var(--line-color);
}