/* Döviz Kurları + Hava Durumu v7
   --dk-brand enjekte edilir: wp_add_inline_style ile admin'den seçilen renk */

:root { --dk-brand: #C0392B; }

/* ============================================================
   DÖVIZ ŞERİDİ
   ============================================================ */
.dk-strip { display:flex; align-items:center; flex-wrap:wrap; }

.dk-item {
    display:flex; align-items:center; gap:5px;
    padding:10px 18px;
    border-right:1px solid #e0e0e0;
    white-space:nowrap; line-height:1;
}
.dk-item:last-child { border-right:none; }

.dk-name  { font-size:11px; font-weight:700; color:#555; letter-spacing:.04em; }
.dk-arrow { font-size:9px; line-height:1; }
.dk-arrow.up, .dk-change.up { color:#1a9e63; }
.dk-arrow.dn, .dk-change.dn { color:#d63030; }
.dk-rate   { font-size:13px; font-weight:700; color:#111; }
.dk-change { font-size:11px; }

/* ============================================================
   KÜÇÜK HAVA WIDGET
   ============================================================ */
.dk-hava { display:flex; align-items:center; gap:10px; padding:8px 16px; line-height:1; white-space:nowrap; }
.dk-hava-left  { display:flex; flex-direction:column; gap:3px; }
.dk-hava-city  { font-size:10px; font-weight:700; color:#888; letter-spacing:.05em; }
.dk-hava-desc  { font-size:10px; color:#aaa; }
.dk-hava-right { display:flex; align-items:center; gap:5px; }
.dk-hava-temp  { font-size:16px; font-weight:700; color:var(--dk-brand); }

/* ============================================================
   HAVA DURUMU SAYFASI
   ============================================================ */
.dk-wp { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }

.dk-wp-top {
    display:grid; grid-template-columns:1fr 1fr;
    gap:16px; margin-bottom:16px;
}

.dk-wp-card {
    background:#fff;
    border:.5px solid #e0e0e0;
    border-radius:12px;
    padding:1.25rem;
}

.dk-wp-main { border-top:3px solid var(--dk-brand); }

.dk-wp-select-row { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.dk-wp-select-row label { font-size:13px; color:#666; font-weight:500; white-space:nowrap; }
.dk-wp-select-row select { flex:1; min-width:140px; padding:6px 10px; border:1px solid #ddd; border-radius:6px; font-size:13px; cursor:pointer; }

.dk-wp-city-name { font-size:13px; color:#888; margin-bottom:4px; }
.dk-wp-temp      { font-size:54px; font-weight:500; color:var(--dk-brand); line-height:1; margin:6px 0; }
.dk-wp-desc      { font-size:14px; color:#555; display:flex; align-items:center; gap:6px; }

.dk-wp-section-title {
    font-size:11px; font-weight:700; color:#888;
    letter-spacing:.07em; text-transform:uppercase;
    border-left:3px solid var(--dk-brand);
    padding-left:8px; margin-bottom:12px;
}

.dk-wp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.dk-wp-metric {
    background:#f7f7f5;
    border-radius:8px;
    padding:11px 13px;
}
.dk-wp-metric-label { font-size:11px; color:#999; margin-bottom:4px; }
.dk-wp-metric-val   { font-size:20px; font-weight:500; color:var(--dk-brand); }
.dk-wp-unit         { font-size:13px; font-weight:400; color:#999; }

/* Tahmin tablosu */
.dk-wp-days {
    display:flex; flex-direction:column; gap:1px;
    border:.5px solid #e0e0e0; border-radius:12px;
    overflow:hidden; background:#e0e0e0;
}

.dk-wp-day-head {
    display:grid; grid-template-columns:2fr .7fr 1.3fr .7fr 1fr;
    background:#f7f7f5; padding:8px 16px; gap:8px;
    font-size:11px; font-weight:700; color:#aaa; letter-spacing:.04em; align-items:center;
}

.dk-wp-day {
    display:grid; grid-template-columns:2fr .7fr 1.3fr .7fr 1fr;
    align-items:center; padding:12px 16px;
    background:#fff; font-size:13px; gap:8px;
    transition:background .1s;
}
.dk-wp-day:hover { background:#fafaf9; }

.dk-wp-day-name { font-weight:500; color:#111; font-size:13px; }
.dk-wp-day-date { font-size:11px; color:#aaa; margin-top:2px; }
.dk-wp-hi       { font-weight:500; color:var(--dk-brand); }
.dk-wp-lo       { color:#aaa; }
.dk-wp-sep      { color:#ddd; margin:0 2px; }
.dk-wp-wind     { color:#888; font-size:12px; }

.dk-rain-mid { color:#E67E22; }
.dk-rain-hi  { color:#2980B9; }

/* Koyu tema */
@media (prefers-color-scheme:dark) {
    .dk-item   { border-color:#333; }
    .dk-name   { color:#777; }
    .dk-rate   { color:#eee; }
    .dk-wp-card { background:#1a1a1a; border-color:#333; }
    .dk-wp-metric { background:#222; }
    .dk-wp-metric-label { color:#666; }
    .dk-wp-unit  { color:#555; }
    .dk-wp-city-name { color:#666; }
    .dk-wp-desc  { color:#888; }
    .dk-wp-days  { background:#333; border-color:#333; }
    .dk-wp-day   { background:#1a1a1a; }
    .dk-wp-day:hover { background:#222; }
    .dk-wp-day-head  { background:#222; }
    .dk-wp-day-name  { color:#eee; }
    .dk-wp-day-date, .dk-wp-sep { color:#555; }
    .dk-wp-lo    { color:#666; }
    .dk-wp-wind  { color:#666; }
    .dk-wp-section-title { color:#666; }
    .dk-wp-select-row label { color:#888; }
    .dk-wp-select-row select { background:#222; border-color:#444; color:#eee; }
}

/* ============================================================
   MOBİL CAROUSEL
   ============================================================ */
@media (max-width:640px) {

    /* Hava durumu sayfası */
    .dk-wp-top { grid-template-columns:1fr; }
    .dk-wp-day-head,
    .dk-wp-day  { grid-template-columns:1.5fr .5fr 1fr .6fr .8fr; padding:10px 12px; }
    .dk-wp-temp { font-size:40px; }

    /* Carousel kapsayıcı */
    .dk-strip.dk-carousel {
        position: relative;
        overflow: hidden;
        display: block;         /* flex yerine block — track içinde flex */
        border: none;
    }

    /* Kaydırılabilir iç şerit */
    .dk-carousel-track {
        display: flex;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        will-change: transform;
    }

    /* Her öğe tam genişlik */
    .dk-carousel .dk-item {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
        border-right: none;
        padding: 12px 20px;
        justify-content: center;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Dot navigasyon */
    .dk-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 6px 0 4px;
        background: #fff;
    }

    .dk-carousel-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #ddd;
        cursor: pointer;
        transition: background .2s, transform .2s;
        display: inline-block;
    }

    .dk-carousel-dot.active {
        background: var(--dk-brand);
        transform: scale(1.3);
    }
}

/* ============================================================
   MOBİL — YATAY KAYDIRMA ŞERİDİ (carousel'in üzerine yazar)
   ============================================================ */
@media (max-width:640px) {

    .dk-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Carousel sınıfını geçersiz kıl */
        position: static;
        border: none;
    }
    .dk-strip::-webkit-scrollbar { display: none; }

    /* Track artık sadece flex wrapper */
    .dk-carousel-track {
        display: flex !important;
        transform: none !important;
        transition: none !important;
        width: auto;
    }

    .dk-item {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 10px 14px !important;
        border-right: 1px solid #e0e0e0 !important;
        border-bottom: none !important;
        justify-content: flex-start !important;
    }
    .dk-item:last-child { border-right: none !important; }

    /* Dot'ları gizle — scroll varken gereksiz */
    .dk-carousel-dots { display: none !important; }
}