/* Responsive sistem — fluid clamp + container queries + aspect ratio data attribute */

:root {
    /* Ölçek pencerenin KISA kenarından türer (--win-side). Salt `vw` yükseklikten
       habersizdi: 1280×720 ile 1280×1024 aynı puntoyu alıyordu, oysa asıl darlık
       dikeyde. min(100vw,100dvh) her iki ekseni de hesaba katar. */
    --win-side: min(100vw, 100dvh);

    --font-base: clamp(0.82rem, calc(var(--win-side) * 0.0105 + 0.48rem), 1.05rem);
    --font-mini: clamp(0.65rem, calc(var(--win-side) * 0.0075 + 0.50rem), 0.82rem);
    --font-mid:  clamp(0.95rem, calc(var(--win-side) * 0.0150 + 0.50rem), 1.4rem);
    --font-big:  clamp(1.6rem,  calc(var(--win-side) * 0.0400 + 0.50rem), 3.4rem);
    --font-hero: clamp(2.4rem,  calc(var(--win-side) * 0.0720 + 0.50rem), 6rem);

    --gap-xs: clamp(2px, 0.25vw, 4px);
    --gap-sm: clamp(4px, 0.5vw, 8px);
    --gap-md: clamp(8px, 1vw, 14px);
    --gap-lg: clamp(14px, 1.6vw, 24px);

    --radius-sm: clamp(6px, 0.6vw, 10px);
    --radius-md: clamp(10px, 1vw, 16px);
    --radius-lg: clamp(14px, 1.4vw, 22px);

    --icon-sm: clamp(14px, 1.2vw, 18px);
    --icon-md: clamp(18px, 1.8vw, 28px);
    --icon-lg: clamp(28px, 3vw, 48px);
}

html, body { font-size: var(--font-base); }

/* ── Aspect ratio özellikleri ───────────────────────────────────────────
   NOT: Dolgu doğrudan `padding` ile değil --dash-pad-* ile ayarlanır; hücre
   adımı (ve dolayısıyla boşluk) bu değişkenlerden hesaplandığı için doğrudan
   `padding` yazmak boşluk hesabını kaydırırdı. */
html[data-ar="ultrawide"] #dashboard {
    --dash-pad-x: clamp(20px, 4vw, 80px);
}
html[data-ar="standard"] {
    --font-big: clamp(1.4rem, 2vw + 0.4rem, 2.8rem);
}
html[data-ar="square"] #dashboard {
    /* Kare/dar oranda daha sıkı boşluk (eski `--grid-gap` artık kullanılmıyor) */
    --grid-gap-x: clamp(2px, calc(var(--cell-pitch-x) * .13), 10px);
    --grid-gap-y: clamp(2px, calc(var(--cell-pitch-y) * .13), 10px);
}
html[data-ar="portrait"] #dashboard {
    --dash-pad-x: 8px;
    --dash-pad-y: 8px;
}
html[data-ar="portrait"] .widget {
    font-size: 0.95em;
}

/* ── Yoğunluk özellikleri ───────────────────────────────────────────── */
html[data-density="4k"] body {
    max-width: 3440px; margin: 0 auto;
}
html[data-density="4k"] .widget .wm-title {
    font-size: clamp(0.85rem, 0.7vw, 1.1rem);
}
/* Genişlik ekseni: yalnızca gerçekten dar pencerelerde küçült.
   ("hd" kovası 1280–1919'u kapsıyordu ve 1080p'yi de gereksiz yere kısıyordu;
    dikey darlık artık aşağıdaki data-vh ekseninde ele alınıyor.) */
html[data-density="md"] .widget { font-size: 0.9em; }
html[data-density="sm"] .widget { font-size: 0.85em; }
html[data-density="sm"] .widget .wm-header {
    padding-bottom: 6px; margin-bottom: 6px;
}

/* ── Yükseklik ekseni — 720p desteği ─────────────────────────────────
   Bu panoda 28 satır dikeye sığmak zorunda; kısıt genişlikte değil boydadır.
   Bu yüzden dikey nefes payları burada geri kazanılır. */
html[data-vh="short"]  .widget { font-size: 0.95em; }
html[data-vh="xshort"] .widget { font-size: 0.9em; }

html[data-vh="short"]  .widget-module.with-header .wm-header,
html[data-vh="xshort"] .widget-module.with-header .wm-header {
    padding-bottom: 6px; margin-bottom: 6px;
}
html[data-vh="xshort"] .widget-module .wm-body { gap: clamp(2px, 1.5cqi, 6px); }
html[data-vh="xshort"] .news-item   { padding-block: clamp(3px, 1.5cqi, 6px); }
html[data-vh="xshort"] .news-list   { gap: 5px; }
html[data-vh="xshort"] .todo-item   { padding-block: 3px; }
html[data-vh="xshort"] .cry-row     { padding-block: 4px; }
html[data-vh="xshort"] .wt-fc-col   { padding-block: clamp(3px, 1.2cqi, 6px); }

/* ── Container queries — widget içi reflow ──────────────────────────── */

/* Çok küçük widget (dar) */
@container (max-width: 160px) {
    .wt-row    { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cd-grid   { grid-template-columns: repeat(2, 1fr); }
    .pmd-actions { flex-direction: column; gap: 4px; }
    .cry-spark { display: none; }
    .cry-change { min-width: unset; }
    .wm-stat-row { flex-direction: column; gap: 4px; }
    .sc-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* Küçük widget */
@container (max-width: 260px) {
    .wt-row    { flex-direction: column; align-items: flex-start; }
    .cd-grid   { grid-template-columns: repeat(2, 1fr); }
    .pmd-actions { flex-direction: column; }
    .stats-grid { grid-template-columns: 1fr; }
    .qte-actions { gap: 4px; }
}

/* Orta küçük widget */
@container (max-width: 320px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* Çok kısa widget */
@container (max-height: 100px) {
    .widget-module .wm-header { display: none; }
    .widget-module .wm-body   { padding: 4px; }
}

/* Kısa widget — bazı seksiyon başlıklarını gizle */
@container (max-height: 140px) {
    .pom-ring { width: min(100%, 100px); }
    .wm-mini  { display: none; }
}

/* Büyük widget — fazladan boşluk ve büyük elemanlar */
@container (min-width: 500px) {
    .sc-grid { gap: 16px; }
    .wm-card { padding: 12px 14px; }
}

/* ── Touch hedefleri ─────────────────────────────────────────────────── */
@media (pointer: coarse) {
    .wm-btn      { min-width: 44px; min-height: 44px; }
    .grid-resize { width: 30px; height: 30px; }
    .nav-item    { padding: 14px 18px; }
    .switch      { transform: scale(1.1); }
}

/* ── 4K / 2K kalitesi ────────────────────────────────────────────────── */
html[data-density="4k"], html[data-density="2k"] {
    image-rendering: -webkit-optimize-contrast;
}

/* ── Settings modal responsive ───────────────────────────────────────── */
.settings-modal {
    width: clamp(320px, 90vw, 1100px);
    max-width: 100vw;
    height: clamp(400px, 85dvh, 900px);
    max-height: 100dvh;
}
html[data-ar="portrait"] .settings-modal,
html[data-density="sm"] .settings-modal {
    width: 100vw; height: 100dvh; border-radius: 0;
}
html[data-ar="portrait"] .modal-body,
html[data-density="sm"] .modal-body {
    flex-direction: column;
}
html[data-ar="portrait"] .sidebar,
html[data-density="sm"] .sidebar {
    flex-direction: row;
    width: 100%;
    overflow-x: auto; overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    padding: 8px;
}
html[data-ar="portrait"] .nav-item { white-space: nowrap; }

/* ── Erişilebilirlik ─────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
    .widget   { outline: 1px solid rgba(255, 255, 255, 0.25); }
    .wm-input { border-color: rgba(255, 255, 255, 0.4); }
}

/* ── Kullanıcı seçimli özel font ─────────────────────────────────────── */
:root { --font-family: ; }
html, body { font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif); }