/* =========================================================
   İÇ SAYFALAR — kategori, ürün detayı, şans çarkı
   Tamamen farklı bir görsel dil; yerleşim ve içerik aynı.
   Ürün açıklama metnine (.rich-content) dokunulmaz.
   Geri almak için includes/header.php içindeki ic-sayfa.css
   satırını silmek yeterli.
   ========================================================= */

:root {
    --is-dots: radial-gradient(color-mix(in srgb, var(--text-color) 7%, transparent) 1px, transparent 1px);
}

/* =========================================================
   A. KATEGORİ SAYFASI
   ========================================================= */

/* Üst bölüm: tam genişlik bant yerine noktalı dokulu sakin alan */
html[data-theme] body .cat-hero {
    background-color: var(--bg-color) !important;
    background-image: var(--is-dots) !important;
    background-size: 18px 18px !important;
    border-bottom: 1px solid var(--yt-line) !important;
}
html[data-theme] body .cat-hero-inner { padding-top: 28px !important; padding-bottom: 22px !important; }
html[data-theme] body .cat-hero-ikon {
    width: 72px !important; height: 72px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 20px !important; padding: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}
html[data-theme] body .cat-hero-ikon img { border-radius: 12px !important; }
html[data-theme] body .cat-hero-title {
    font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.025em !important;
}
html[data-theme] body .cat-hero-desc {
    color: var(--yt-muted) !important; font-size: 14px !important; max-width: 680px;
}
html[data-theme] body .cat-hero-more,
html[data-theme] body .cat-hero-back {
    color: var(--primary-blue) !important; font-weight: 600 !important; font-size: 13px !important;
}

/* Breadcrumb: tek hap içinde */
html[data-theme] body .cat-hero-crumbs {
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important; padding: 6px 14px !important;
    font-size: 12.5px !important;
}
html[data-theme] body .cat-hero-crumbs a { color: var(--yt-muted) !important; }
html[data-theme] body .cat-hero-crumbs a:hover { color: var(--text-color) !important; }
html[data-theme] body .cat-hero-current { color: var(--text-color) !important; font-weight: 600 !important; }
html[data-theme] body .cat-hero-sep { color: var(--yt-line-2) !important; }

/* Alt kategori şeridi: kutu yerine ince "çip" sıra */
html[data-theme] body .cat-serit { gap: 8px !important; margin-top: 8px !important; }
html[data-theme] body .cat-serit-item {
    min-height: 0 !important; height: 48px !important; padding: 0 14px 0 8px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
html[data-theme] body .cat-serit-item:hover { border-color: var(--yt-line-2) !important; }
html[data-theme] body .cat-serit-item.is-active {
    background: var(--card-bg) !important;
    border-color: var(--primary-blue) !important;
    box-shadow: inset 0 0 0 1px var(--primary-blue) !important;
}
html[data-theme] body .cat-serit-item.is-active .cat-serit-ad { color: var(--text-color) !important; }
html[data-theme] body .cat-serit-ikon {
    width: 32px !important; height: 32px !important; min-width: 32px;
    border-radius: 50% !important; overflow: hidden !important;
    background: var(--yt-ghost) !important;
}
html[data-theme] body .cat-serit-ikon img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html[data-theme] body .cat-serit-ad {
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important;
    color: var(--yt-soft) !important;
}
html[data-theme] body .cat-serit-adet {
    background: transparent !important; border: 0 !important;
    color: var(--yt-muted) !important; font-weight: 700 !important; font-size: 12px !important;
    padding: 0 !important; min-width: 0 !important;
}
html[data-theme] body .cat-serit-item.is-active .cat-serit-adet { color: var(--primary-blue) !important; }

/* Filtre çubuğu: kutusuz araç satırı */
html[data-theme] body .listing-filter-bar {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important;
    padding: 6px 0 18px !important; margin-bottom: 20px !important;
    border-bottom: 1px solid var(--yt-line) !important;
}
html[data-theme] body .filter-category-logo {
    background: var(--card-bg) !important; border: 1px solid var(--yt-line) !important;
    border-radius: 12px !important;
}
html[data-theme] body .filter-category-name {
    font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
}
html[data-theme] body .filter-search-wrap input,
html[data-theme] body .custom-select-trigger {
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important; box-shadow: none !important;
    color: var(--text-color) !important;
}
html[data-theme] body .filter-search-wrap input:focus {
    border-color: rgba(var(--primary-blue-rgb), .5) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-blue-rgb), .1) !important;
}
html[data-theme] body .filter-search-wrap i,
html[data-theme] body .custom-select-trigger i { color: var(--yt-muted) !important; }

/* =========================================================
   B. ÜRÜN DETAY SAYFASI
   ========================================================= */

/* Ana kutu: noktalı doku + yumuşak yüzey */
html[data-theme] body .product-main-view {
    background-color: var(--card-bg) !important;
    background-image: var(--is-dots) !important;
    background-size: 18px 18px !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 22px !important;
}

/* Görsel: çerçeveli "vitrin" */
html[data-theme] body .view-img-box {
    background: var(--bg-color) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 20px !important; padding: 10px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22) !important;
}
html[data-theme] body .view-img-box img { border-radius: 14px !important; }

/* Başlık */
html[data-theme] body .product-info-header h1 {
    font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
}
html[data-theme] body .urgent-insight-box {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: var(--bg-color) !important; border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important; padding: 5px 12px !important;
}
html[data-theme] body .urgent-insight-box,
html[data-theme] body .urgent-insight-box * { color: var(--yt-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; }

/* Özellikler: kutular yerine tek panelde bölmeli tablo */
html[data-theme] body .marketplace-service-grid {
    gap: 0 !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 16px !important; overflow: hidden !important;
}
html[data-theme] body .m-service-item {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 14px 16px !important;
}
html[data-theme] body .m-service-item:nth-child(odd) { border-right: 1px solid var(--yt-line) !important; }
html[data-theme] body .m-service-item:nth-child(-n+2) { border-bottom: 1px solid var(--yt-line) !important; }
html[data-theme] body .m-service-icon {
    width: 36px !important; height: 36px !important; min-width: 36px;
    background: rgba(var(--primary-blue-rgb), .10) !important;
    border: 0 !important; border-radius: 50% !important;
}
html[data-theme] body .m-service-icon i { color: var(--primary-blue) !important; opacity: 1 !important; }

/* Not alanı */
html[data-theme] body .feedback-field {
    background: var(--bg-color) !important;
    border: 1px solid var(--yt-line) !important; border-radius: 14px !important;
}

/* Fiyat + satın al: koyu "kasa" paneli, fiyatın üstünde etiket */
html[data-theme] body .horizontal-action-bar {
    background: var(--bg-color) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 16px !important; padding: 12px 12px 12px 18px !important;
}
html[data-theme] body .action-price-box {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    justify-content: center !important; gap: 2px;
    background: transparent !important; border: 0 !important;
}
html[data-theme] body .action-price-box::before {
    content: "Toplam Tutar";
    font-size: 11px; font-weight: 600; letter-spacing: .4px;
    color: var(--yt-muted);
}
html[data-theme] body .action-price-box i { display: none !important; }
html[data-theme] body .action-price-box,
html[data-theme] body .action-price-box * {
    font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
    color: var(--text-color) !important;
}
html[data-theme] body .action-price-box::before { font-size: 11px !important; font-weight: 600 !important; color: var(--yt-muted) !important; letter-spacing: .4px !important; }
html[data-theme] body .action-qty-selector {
    background: var(--card-bg) !important; border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important; overflow: hidden;
}
html[data-theme] body .action-buy-btn { border-radius: 999px !important; padding: 0 26px !important; }

/* Sekmeler: alt çizgi yerine segment kontrol */
html[data-theme] body .product-detail-tabs {
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 22px !important;
}
html[data-theme] body .tabs-header {
    display: inline-flex !important; width: auto !important; gap: 4px !important;
    margin: 18px 0 0 22px !important; padding: 4px !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 999px !important;
}
html[data-theme] body .tab-btn {
    padding: 8px 18px !important; border-radius: 999px !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 13.5px !important;
}
html[data-theme] body .tab-btn::after, html[data-theme] body .tab-btn::before { display: none !important; }
html[data-theme] body .tab-btn.active {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 1px var(--yt-line), 0 2px 6px rgba(0, 0, 0, .15) !important;
}

/* Benzer ürünler: numaralı liste */
html[data-theme] body .product-sidebar .sidebar-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 22px !important;
}
html[data-theme] body .similar-list { counter-reset: benzer; }
html[data-theme] body .similar-item {
    counter-increment: benzer;
    position: relative !important;
    padding-left: 34px !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    border-bottom: 1px dashed var(--yt-line) !important;
}
html[data-theme] body .similar-item:last-child { border-bottom: 0 !important; }
html[data-theme] body .similar-item::before {
    content: counter(benzer, decimal-leading-zero);
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    font-size: 12px; font-weight: 800; color: var(--yt-muted);
    font-variant-numeric: tabular-nums;
}
html[data-theme] body .similar-item:hover { background: transparent !important; }
html[data-theme] body .similar-item:hover::before { color: var(--primary-blue); }
html[data-theme] body .similar-img-wrap { border-radius: 12px !important; overflow: hidden !important; }

/* =========================================================
   C. ŞANS ÇARKI
   ========================================================= */
html[data-theme] body .wheel-hero h1 {
    font-size: clamp(28px, 4vw, 42px) !important;
}
html[data-theme] body .wheel-info-banner {
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-left: 3px solid var(--primary-blue) !important;
    border-radius: 12px !important;
}

/* Çark alanı: noktalı panel içinde */
html[data-theme] body .wheel-arena.wheel-arena {
    background-color: var(--card-bg) !important;
    background-image: var(--is-dots) !important;
    background-size: 18px 18px !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 24px !important;
    padding: 32px 20px !important;
}

/* Ödüller: dikey kart yerine yatay satır kartı, renk solda */
html[data-theme] body .prizes-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
}
html[data-theme] body .prize-card {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important; row-gap: 2px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 12px 14px 12px 16px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--yt-line) !important;
    border-radius: 14px !important;
    min-height: 0 !important;
}
html[data-theme] body .prize-card::before {
    top: 10px !important; bottom: 10px !important; left: 0 !important; right: auto !important;
    width: 3px !important; height: auto !important;
    border-radius: 0 3px 3px 0 !important;
}
html[data-theme] body .prize-card-img,
html[data-theme] body .prize-card-icon {
    grid-row: 1 / span 2; grid-column: 1;
    width: 44px !important; height: 44px !important; margin: 0 !important;
    font-size: 24px !important; line-height: 44px !important; text-align: center !important;
    border-radius: 12px !important;
    background: var(--bg-color) !important;
    object-fit: cover;
}
html[data-theme] body .prize-card-name {
    grid-column: 2; margin: 0 !important; font-size: 13.5px !important; line-height: 1.3 !important;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
html[data-theme] body .prize-card-sub { grid-column: 2; font-size: 11.5px !important; }

/* Geçmiş: zaman çizelgesi görünümü */
html[data-theme] body .history-list { gap: 0 !important; border-left: 1px solid var(--yt-line); margin-left: 6px; }
html[data-theme] body .hist-item {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    padding: 10px 0 10px 18px !important; position: relative;
}
html[data-theme] body .hist-dot { position: absolute; left: -6px; width: 11px !important; height: 11px !important; border: 2px solid var(--bg-color); }

/* =========================================================
   D. Mobil uyum
   ========================================================= */
@media (max-width: 768px) {
    html[data-theme] body .cat-hero-title,
    html[data-theme] body .product-info-header h1 { font-size: 22px !important; }
    html[data-theme] body .cat-hero-ikon { width: 56px !important; height: 56px !important; border-radius: 16px !important; }
    html[data-theme] body .cat-serit-item { height: 44px !important; }
    html[data-theme] body .tabs-header { margin: 14px 0 0 14px !important; }
    html[data-theme] body .prizes-grid { grid-template-columns: 1fr 1fr !important; }
    html[data-theme] body .action-price-box,
    html[data-theme] body .action-price-box * { font-size: 21px !important; }
}