/* ================================================================
   css/configurator-modern.css — Configurator sol menü FACELIFT
   ----------------------------------------------------------------
   • YALNIZ görsel (CSS). Markup/JS/binding'lere DOKUNMAZ.
   • Tüm selektörler #sidebar / #module-... ile yüksek özgüllükte →
     mevcut inline + folder stillerini güvenle override eder, silmez.
   • İkonlar: background-image DEĞİL, mask-image (+ -webkit-) ile;
     renk background-color ile kontrol edilir (hover/active'de değişir).
   ================================================================ */

/* ── Tasarım belirteçleri (#sidebar'a scope'lu — sızmaz) ── */
#sidebar {
    --cfg-accent:      #d35400;
    --cfg-accent-d:    #b8480a;
    --cfg-accent-soft: rgba(211, 84, 0, 0.10);
    --cfg-ink:         #243244;
    --cfg-muted:       #8a94a6;
    --cfg-card-border: #e9ebf0;

    background: #f5f6f8;                 /* hafif gri zemin → beyaz kartlar öne çıkar */
    padding: 18px 16px 44px;
}

/* ── Modül = modern "widget" kart ── */
#sidebar .config-module {
    background: #ffffff;
    border: 1px solid var(--cfg-card-border);
    border-radius: 14px;
    padding: 16px 16px 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.04);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    animation: cfgCardIn .35s ease both;
}
#sidebar .config-module:hover {
    border-color: #e0e2e8;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.09);
    transform: translateY(-1px);
}
@keyframes cfgCardIn { from { opacity: 0; } to { opacity: 1; } }
#sidebar .config-module:nth-child(1) { animation-delay: .02s; }
#sidebar .config-module:nth-child(2) { animation-delay: .06s; }
#sidebar .config-module:nth-child(3) { animation-delay: .10s; }
#sidebar .config-module:nth-child(4) { animation-delay: .14s; }
#sidebar .config-module:nth-child(5) { animation-delay: .18s; }
#sidebar .config-module:nth-child(6) { animation-delay: .22s; }

/* ── Bölüm başlığı: ikon + modern tipografi ── */
#sidebar .config-module h3.tab-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid #eef0f3;
    color: var(--cfg-ink);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;        /* eski küçük-uppercase yerine sade modern */
}
#sidebar .config-module:first-child h3.tab-section-title { margin-top: 0; }

/* İkon: eski sayaç ::before'unu mask'lı ikona çevirir.
   RENK = background-color (mask alfası şekli keser). hover'da koyulaşır. */
#sidebar .config-module h3.tab-section-title::before {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--cfg-accent);            /* ← ikon rengi (background-color ile) */
    -webkit-mask-image: var(--cfg-ico);
            mask-image: var(--cfg-ico);
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: 22px 22px;    mask-size: 22px 22px;
    transition: background-color .2s ease, transform .2s ease;
}
#sidebar .config-module:hover h3.tab-section-title::before {
    background-color: var(--cfg-accent-d);          /* hover → daha koyu vurgu */
    transform: scale(1.08);
}
/* mask-image desteklenmeyen (çok eski) tarayıcıda dolu kare çıkmasın → ikonu gizle */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    #sidebar .config-module h3.tab-section-title::before { display: none; }
}

/* ── Bölüm ikonları (her modüle özel SVG — mask kaynağı) ──
   background-image değil; mask-image için custom property olarak verilir. */
#sidebar .config-module { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>"); }

/* 1) Profile — yüzük profili (eş merkezli halka) */
#sidebar #module-tab_1_profile { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3.4'/></svg>"); }

/* 2) Dimensions — cetvel */
#sidebar #module-tab_2_dimensions { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7.5' width='19' height='9' rx='1.6'/><path d='M7 7.5v3.4M11 7.5v3.4M15 7.5v3.4M19 7.5v3.4'/></svg>"); }

/* 3) Metals — külçe (iki yamuk) */
#sidebar #module-tab_3_metals { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16h16l-2.2-4.5H6.2z'/><path d='M7.2 11l1.6-4h6.4l1.6 4'/></svg>"); }

/* 4) Grooves — dalga çizgileri */
#sidebar #module-tab_4_grooves { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9c2.4-3 4.6 3 7 0s4.6-3 7 0'/><path d='M3 15c2.4-3 4.6 3 7 0s4.6-3 7 0'/></svg>"); }

/* 5) Stones — pırlanta */
#sidebar #module-tab_5_stones { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6-5 6 5-6 11z'/><path d='M6 9h12'/><path d='M9.5 9 12 20l2.5-11'/></svg>"); }

/* 6) Engraving — kalem */
#sidebar #module-tab_6_engraving { --cfg-ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l1.2-4.2L16 5l3 3L8.2 18.8z'/><path d='M13.5 7.5l3 3'/></svg>"); }

/* ── Seçenek butonları: hafif modern dokunuş (LAYOUT'a dokunmaz) ──
   Yalnız köşe/geçiş/hover-active görünümü; padding/min-height/flex
   gibi tab'lara özel layout özelliklerini set ETMEZ. */
#sidebar .btn-opt {
    border-radius: 10px;
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, color .18s ease, transform .12s ease;
}
#sidebar .btn-opt:hover { border-color: #cfd3da; background: #fafbfc; }
#sidebar .btn-opt:active { transform: scale(0.98); }
#sidebar .btn-opt.active {
    border-color: var(--cfg-accent);
    background: var(--cfg-accent-soft);
    color: var(--cfg-accent);
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.16);
}

/* ── İnce scrollbar (zemine uyumlu) ── */
#sidebar { scrollbar-color: #d6d9e0 #f5f6f8; }
#sidebar::-webkit-scrollbar-thumb { background: #d6d9e0; }
#sidebar::-webkit-scrollbar-thumb:hover { background: #c3c7d0; }

/* ── Erişilebilirlik: hareketi azalt tercihine saygı ── */
@media (prefers-reduced-motion: reduce) {
    #sidebar .config-module { animation: none; }
    #sidebar .config-module,
    #sidebar .config-module:hover,
    #sidebar .btn-opt,
    #sidebar .config-module h3.tab-section-title::before { transition: none; transform: none; }
}