/* site.caldiva.com — sakin sayfası. Palet ve ölçüler yonetimport sakin uygulamasından (lib/screens/dashboard/dashboard_colors.dart) */
:root {
  --bg: #eef2f6; --card: #fff; --line: #f1f5f9; --line2: #e2e8f0;
  --s400: #94a3b8; --s500: #64748b; --s600: #475569; --s700: #334155; --s800: #1e293b; --s900: #0f172a;
  --teal50: #f0fdfa; --teal100: #ccfbf1; --teal700: #0f766e; --teal900: #134e4a; --teal950: #042f2e;
  --emerald: #059669; --rose: #e11d48; --blue: #2563eb;
  --w: 560px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--s900); font: 400 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }

/* simge rozeti */
.disc { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--di); font-size: 24px;
  background: radial-gradient(circle at 30% 30%, var(--d1) 0 55%, var(--d2) 100%); box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(0,0,0,.2); }
.disc.lg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 100px; height: 100px; font-size: 50px; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(0,0,0,.25); }

/* ---- kesinti kartı (site_alert_card.dart) ---- */
.al-card { display: flex; gap: 12px; padding: 14px; border: 1px solid; border-radius: 16px; background: #fff; }
.al-ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.al-body { flex: 1; min-width: 0; }
.al-type { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.al-badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; text-transform: none; letter-spacing: 0; }
.al-title { margin-top: 3px; font-size: 14.5px; font-weight: 800; color: var(--s900); }
.al-msg { margin-top: 3px; font-size: 12.5px; color: var(--s700); white-space: pre-line; overflow-wrap: anywhere; }
.al-when { margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--s500); }
.al-when i { margin-right: 4px; }

/* ---- karşılama / hata ---- */
.landing { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(160deg, var(--teal900), var(--teal950)); }
.landing-card { max-width: 380px; width: 100%; background: #fff; border-radius: 24px; padding: 30px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.landing-mark { width: 44px; height: 58px; margin: 0 auto 14px; }
.landing-card h1 { margin: 0 0 8px; font-size: 19px; font-weight: 900; }
.landing-card p { margin: 0 0 16px; font-size: 13px; color: var(--s600); }
.landing-card small { color: var(--s400); font-size: 11px; font-weight: 600; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--teal900); color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 14px; }

/* ---- duyuru detayı (post_detail_screen.dart) ---- */
.pg-detail { background: #fff; }
.cbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1f5f9; color: var(--s700); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.cbtn.sm { width: 32px; height: 32px; font-size: 14px; box-shadow: none; background: #f1f5f9; }

.detail { max-width: var(--w); margin: 0 auto; padding-bottom: 90px; }
.hero { position: relative; height: 120px; overflow: hidden; border-radius: 0 0 28px 28px; background: linear-gradient(#ccfbf1, #f0fdfa); }
.hero > img { width: 100%; height: 100%; object-fit: cover; }
.hero.band { background-color: var(--t1); background-image: radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.7px), linear-gradient(110deg, var(--t1), var(--t2)); background-size: 15px 15px, 100% 100%; }
/* logo + ad, sağdaki simge rozetiyle aynı dikey merkezde (top: 50%) */
.band-id { position: absolute; left: 22px; right: 140px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; color: #fff; }
.band-logo { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.band-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.band-sep { width: 2px; height: 34px; background: rgba(255,255,255,.85); flex-shrink: 0; }
.band-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.band-tx b { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; }
.band-tx small { font-size: 12px; font-weight: 500; opacity: .85; }
.hero.band .disc.lg { top: 50%; }

.d-head { padding: 18px 20px 4px; }
.d-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--s500); }
.d-badge { padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; flex-shrink: 0; }
.d-by { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-views { color: var(--s500); flex-shrink: 0; }
.d-views i { color: var(--s400); margin-right: 2px; }
.d-title { margin: 12px 0 0; font-size: 22px; font-weight: 900; line-height: 1.25; color: var(--s900); }

.d-body { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.b-text { font-size: 14px; line-height: 1.7; color: var(--s700); overflow-wrap: anywhere; }
.b-text b { color: var(--s900); }
.b-list { background: #fff; border: 1px solid var(--line2); border-radius: 16px; padding: 14px; }
.b-list-t { font-size: 13px; font-weight: 800; color: var(--s900); margin-bottom: 8px; }
.b-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.b-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--s700); }
.b-list .mk { flex-shrink: 0; margin-top: 2px; }
.b-list .chk { width: 18px; height: 18px; border-radius: 50%; background: #d1fae5; color: var(--emerald); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.b-list .num { width: 20px; height: 20px; border-radius: 50%; background: var(--teal50); color: var(--teal700); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 0; }
.b-list .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s400); margin: 8px 6px 0; }
.b-callout { display: flex; gap: 10px; padding: 12px 14px; border-left: 3px solid; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.b-callout > i { margin-top: 3px; }
.b-callout b { display: block; }
.b-cap { font-size: 13px; font-weight: 800; color: var(--s900); margin-bottom: -8px; }
.b-cap i { color: var(--s500); margin-right: 4px; }
.b-table-wrap { overflow-x: auto; border: 1px solid var(--line2); border-radius: 14px; }
.b-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-table th { background: #f8fafc; text-align: left; padding: 9px 12px; font-weight: 800; color: var(--s800); white-space: nowrap; }
.b-table td { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--s700); }
.b-video { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #0f172a center/cover; color: #fff; }
.b-video .play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92); color: #dc2626; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.b-video .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.7)); font-size: 11.5px; }
.b-video .cap b { display: block; font-size: 13.5px; }
.b-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--teal100); background: var(--teal50); border-radius: 14px; color: var(--teal900); }
.b-link .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--teal900); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b-link .tx { flex: 1; min-width: 0; font-size: 13px; }
.b-link .tx b { display: block; }
.b-link .tx small { display: block; color: var(--s500); font-size: 11.5px; }
.b-img { margin: 0; }
.b-img img { width: 100%; border-radius: 14px; }
.b-img figcaption { margin-top: 6px; font-size: 11.5px; color: var(--s500); text-align: center; }
.b-sep { border: 0; border-top: 1px solid var(--line2); margin: 4px 0 0; }
.b-files { display: flex; flex-direction: column; gap: 8px; }
.b-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; }
.b-file .ext { width: 40px; height: 40px; border-radius: 10px; background: #fef2f2; color: #dc2626; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.b-file .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-file .nm small { display: block; font-size: 11px; color: var(--s400); font-weight: 500; }
.b-file > i { color: var(--s400); }
.d-body .al-card { margin: 0; }

/* ---- alt çubuk ---- */
.actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 8px; padding: 10px max(14px, calc((100vw - var(--w)) / 2 + 14px)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }

/* ---- yorumlar (alttan açılan pencere) ---- */
.sheet-ov { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.45); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sheet-ov.open { opacity: 1; pointer-events: auto; }
.sheet { width: 100%; max-width: var(--w); max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 24px 24px 0 0; transform: translateY(30px); transition: transform .2s; }
.sheet-ov.open .sheet { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line2); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; border-bottom: 1px solid var(--line); }
.sheet-head b { font-size: 15px; font-weight: 800; }
.cm-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.cm-empty { margin: auto; text-align: center; color: var(--s400); font-size: 12.5px; font-weight: 500; }
.cm-empty i { display: block; font-size: 22px; margin-bottom: 6px; }
.cm { display: flex; gap: 10px; }
.cm-av { width: 32px; height: 32px; border-radius: 50%; background: var(--teal50); color: var(--teal700); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cm-bub { flex: 1; min-width: 0; background: #f8fafc; border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.cm.mine .cm-bub { background: var(--teal50); }
.cm-top { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.cm-top b { color: var(--s900); font-weight: 800; }
.cm-top span { color: var(--s400); font-size: 10.5px; }
.cm-top button { margin-left: auto; border: 0; background: none; color: var(--s400); font-size: 11px; padding: 0 2px; }
.cm-text { font-size: 13px; color: var(--s700); white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.cm-form { border-top: 1px solid var(--line); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.cm-form input, .cm-form textarea { width: 100%; border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; font: 400 14px/1.4 Inter, sans-serif; color: var(--s900); background: #f8fafc; outline: none; resize: none; }
.cm-form input:focus, .cm-form textarea:focus { border-color: var(--teal700); background: #fff; }
.cm-row { display: flex; gap: 8px; align-items: flex-end; }
.cm-row button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--teal900); color: #fff; flex-shrink: 0; }
.cm-row button:disabled { opacity: .5; }
.cm-form small { font-size: 10.5px; color: var(--s400); }

.toast { position: fixed; left: 50%; bottom: 90px; z-index: 60; transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--s900); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #b91c1c; }

@media (max-width: 420px) {
  .hero { height: 120px; }
  .disc.lg { width: 92px; height: 92px; font-size: 46px; right: 16px; }
  .band-id { right: 122px; left: 18px; }
  .band-logo { width: 36px; height: 36px; }
  .band-sep { height: 30px; }
  .band-tx b { font-size: 11px; }
}

/* ---- Kesinti kartı zaman çizelgesi: Başlangıç ——(süre / ilerleme)——> Tahmini bitiş ---- */
.tl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, auto) minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 10px; }
.tl-pt { min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.tl-pt.start { border-color: color-mix(in srgb, var(--tc) 35%, #e2e8f0); }
.tl-pt.end { text-align: right; }
.tl-pt small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tc); }
.tl-pt.end small { color: #64748b; }
.tl-pt b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pt span { display: block; font-size: 11.5px; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pt.muted b { color: #94a3b8; }
.tl-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tl-dur { font-size: 11px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.tl-bar { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 10px); }
.tl-bar::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 6px solid #cbd5e1; border-right: 0; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.tl-rel { margin-top: 9px; font-size: 12px; font-weight: 700; }
.tl-rel i { margin-right: 4px; }
.tl-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; animation: tlPulse 1.6s ease-out infinite; }
@keyframes tlPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 100% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }
@media (max-width: 420px) { .tl { gap: 6px; } .tl-pt { padding: 7px 8px; } .tl-pt b { font-size: 14px; } .tl-pt span { font-size: 11px; } }
@media print { .tl-dot { animation: none; } }
.al-badge.live, .ab-banner .bs.live { display: inline-flex; align-items: center; }
.al-card, .ab-banner.pv-alert { flex-wrap: wrap; }
.al-card > .al-body, .ab-banner.pv-alert > div:nth-child(2) { flex: 1 1 200px; }
.tl-wrap { flex: 1 0 100%; min-width: 0; }
.tl-wrap .tl { margin-top: 0; }

/* ---- Kesinti kartı (sade): [simge] tür + rozet / açıklama — altında tarih kutuları ---- */
.ak { border: 1px solid; border-radius: 16px; padding: 12px 14px 14px; background: #fff; }
.ak-head { display: flex; align-items: center; gap: 12px; }
.ak-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }   /* 2 satır (tür + durum) boyunda */
.ak-tx { flex: 1; min-width: 0; }
.ak-type { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; line-height: 1.3; }
.ak-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: none; letter-spacing: 0; }
.ak-desc { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #475569; overflow-wrap: anywhere; }
.ak-desc b { font-weight: 700; color: #0f172a; }
.ak .tl { margin-top: 12px; }
/* alt çubuk: solda geri, sağda yorum · faydalı · faydasız · paylaş (yalnız simge, sayı rozette) */
.act-sp { flex: 1; }
.ib { position: relative; width: 46px; height: 46px; border: 1px solid var(--line2); border-radius: 14px; background: #fff; color: var(--s700); font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; }
.ib:active { transform: scale(.96); }
.ib-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--s800); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.ib-n:empty, .ib-n[data-zero] { display: none; }
/* Faydalı / Faydalı değil sayıları sakinlere gösterilmez (sayılar panelde görünür). Göstermek için bu satırı silin. */
.ib.like .ib-n, .ib.dislike .ib-n { display: none !important; }
.ib.like.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.ib.like.on .ib-n { background: #065f46; }
.ib.dislike.on { background: var(--rose); border-color: var(--rose); color: #fff; }
.ib.dislike.on .ib-n { background: #9f1239; }
.ib:disabled { opacity: .6; }

/* Kesinti kartı durum satırı (tür başlığının altında): Planlı · 2 gün sonra / Şu an · 3 saat kaldı / Sona erdi */
.ak-st { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.ak-st i { font-size: 11px; }
.ak-st .tl-dot { margin-right: 1px; }