/* Eveline paneli — cam (Glassy Dashboard V2) dili, ozgurai-panel ile aynı belirteçler.
   Zemin fotoğrafı NET, bulanıklık yalnız camlarda. Seri renkleri doğrulandı
   (validate_palette, yüzey #efe9e2): kimlik hiçbir yerde yalnız renkle verilmez. */
:root {
  --yazi: #1c1c1c; --yazi-soluk: #6b6560; --yazi-silik: #8f8982;
  --cam-kap: rgba(255, 255, 255, .13); --cam-kart: rgba(255, 255, 255, .46); --cam-ic: rgba(255, 255, 255, .72);
  --cam-kenar: rgba(255, 255, 255, .42); --cam-parlak: inset 0 1px 0 rgba(255, 255, 255, .5);
  --cam-golge: 0 22px 60px -26px rgba(52, 36, 22, .42), 0 2px 8px -2px rgba(52, 36, 22, .08);
  --cam-golge-yuksek: 0 30px 70px -24px rgba(52, 36, 22, .5), 0 4px 14px -2px rgba(52, 36, 22, .12);
  --teal: #1f9d7f; --turuncu: #f0572d;
  --s-ty: #e8701a; --s-site: #1f9d7f; --s-meta: #3b6ef5; --s-tyr: #b8327a;
  --iyi: #16a34a; --iyi-z: #dcfce7; --kotu: #dc2626; --kotu-z: #fee2e2; --uyari: #b45309; --uyari-z: #fef3c7;
  --r: 20px;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--yazi); background: #c9bdae; min-height: 100vh;
  font: 14px/1.45 Inter, system-ui, -apple-system, sans-serif; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 96px);
}
/* iOS `fixed` arka planı yok sayar → sabit sözde öğe */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: #c9bdae url("/zemin.webp") center / cover no-repeat; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(58, 36, 22, .16), rgba(58, 36, 22, .04) 40%, rgba(58, 36, 22, .16)),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(40, 26, 14, .16));
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
.say, td.s, th.s { font-variant-numeric: tabular-nums; }
#ekran, #ust { max-width: 1180px; margin: 0 auto; }
[hidden] { display: none !important; }

/* ── üst bar: koyu-sıcak hap, beyaz metin ─────────────────────────────── */
#ust { position: sticky; top: calc(env(safe-area-inset-top) + 8px); z-index: 20; }
.ust {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(96, 74, 58, .42); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: var(--cam-parlak), var(--cam-golge-yuksek);
}
.ust .logo { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.ust .logo small { font-weight: 500; opacity: .7; font-size: 12px; margin-left: 6px; }
.ust .bos-alan { flex: 1; }
.canli { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.canli i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.canli.eski i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }
.yenile { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #1c1c1c; display: grid; place-items: center; }
.yenile svg { width: 16px; height: 16px; }
.yenile.don svg { animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ── sayfa başlığı + dönem segmenti ──────────────────────────────────── */
.bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 22px 4px 14px; color: #fff; text-shadow: 0 1px 12px rgba(40, 26, 14, .35); }
.bas h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.bas p { font-size: 13px; opacity: .9; margin-top: 4px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--cam-kart); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-parlak);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-shadow: none; }
.seg button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--yazi-soluk); min-height: 34px; }
.seg button[aria-pressed="true"] { background: #151515; color: #fff; }

/* ── ızgara + kart ─────────────────────────────────────────────────────── */
.izg { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.izg > * { grid-column: span 12; }
@media (min-width: 900px) { .y6 { grid-column: span 6 !important; } .y4 { grid-column: span 4 !important; } .y8 { grid-column: span 8 !important; } }
.kart {
  position: relative; background: var(--cam-kart); border: 1px solid var(--cam-kenar); border-radius: var(--r); padding: 16px;
  -webkit-backdrop-filter: blur(40px) saturate(140%); backdrop-filter: blur(40px) saturate(140%);
  box-shadow: var(--cam-parlak), 0 14px 34px -22px rgba(52, 36, 22, .4);
  animation: gir .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--sira, 0) * 55ms);
  transition: transform .25s, box-shadow .25s; min-width: 0;
}
@media (hover: hover) { .kart.oyna:hover { transform: translateY(-4px); box-shadow: var(--cam-parlak), 0 26px 44px -22px rgba(52, 36, 22, .55); } }
@keyframes gir { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.kb { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.kb h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.kb .alt { font-size: 12px; color: var(--yazi-soluk); }
.ic { background: var(--cam-ic); border-radius: 14px; padding: 12px; }

/* ── KPI karoları ──────────────────────────────────────────────────────── */
.kpi { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kp { background: var(--cam-ic); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.kp .e { font-size: 12px; color: var(--yazi-soluk); display: flex; align-items: center; gap: 6px; }
.kp .d { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kp .d small { font-size: 13px; font-weight: 600; color: var(--yazi-soluk); margin-left: 2px; }
.kp .n { font-size: 11.5px; color: var(--yazi-silik); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hero .d { font-size: 40px; }
.nok { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }

/* ── çipler ────────────────────────────────────────────────────────────── */
.cip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .06); color: var(--yazi-soluk); white-space: nowrap; }
.cip.iyi { background: var(--iyi-z); color: var(--iyi); }
.cip.kotu { background: var(--kotu-z); color: var(--kotu); }
.cip.uyari { background: var(--uyari-z); color: var(--uyari); }

/* ── grafik ────────────────────────────────────────────────────────────── */
.lej { display: flex; flex-wrap: wrap; gap: 6px; }
.lej button { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: 999px; background: var(--cam-ic); min-height: 30px; }
.lej button[aria-pressed="false"] { opacity: .45; }
.lej button[aria-pressed="false"] .nok { background: transparent !important; outline: 1.5px solid currentColor; }
.graf { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf .eks { font-size: 10.5px; fill: var(--yazi-silik); font-variant-numeric: tabular-nums; }
.graf .izgara { stroke: rgba(60, 40, 25, .1); }
.graf .taban { stroke: rgba(60, 40, 25, .25); }
.graf .imlec { stroke: rgba(28, 28, 28, .35); stroke-dasharray: 3 3; }
.graf .eti { font-size: 11px; font-weight: 600; fill: var(--yazi); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; }
.ipucu {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px; max-width: 240px; padding: 9px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-golge); font-size: 12px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transition: opacity .12s;
}
.ipucu.ac { opacity: 1; }
.ipucu b { display: block; font-size: 12px; margin-bottom: 4px; }
.ipucu .sat { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ipucu .sat span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--yazi-soluk); }
.ipucu .sat span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.ipucu hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .08); margin: 5px 0; }
.gor { display: flex; justify-content: flex-end; margin-top: 8px; }
.kucuk-dug { font-size: 12px; font-weight: 600; color: var(--yazi-soluk); padding: 6px 10px; border-radius: 999px; background: var(--cam-ic); min-height: 30px; }
.kucuk-dug:hover { color: var(--yazi); }

/* ── tablo ─────────────────────────────────────────────────────────────── */
.tk { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--yazi-soluk); padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid rgba(60, 40, 25, .12); }
th.s, td.s { text-align: right; }
th button { font-weight: 600; display: inline-flex; gap: 3px; align-items: center; }
th button::after { content: "↕"; opacity: .35; font-size: 10px; }
th button[data-yon="1"]::after { content: "↑"; opacity: 1; }
th button[data-yon="-1"]::after { content: "↓"; opacity: 1; }
td { padding: 8px; border-bottom: 1px solid rgba(60, 40, 25, .07); white-space: nowrap; vertical-align: middle; }
td.ad { white-space: normal; min-width: 130px; font-weight: 550; }
td small, .silik { color: var(--yazi-silik); font-size: 11.5px; font-weight: 400; }
tr.bugun td { background: rgba(255, 255, 255, .45); }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover td { background: rgba(255, 255, 255, .5); } }

/* ── kampanya kartları (açılır) ───────────────────────────────────────── */
.kmp { background: var(--cam-ic); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }
.kmp summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.kmp summary::-webkit-details-marker { display: none; }
.kmp .ka { font-weight: 650; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.kmp .km { font-size: 12px; color: var(--yazi-soluk); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; grid-column: 1 / -1; }
.kmp .ok { transition: transform .2s; color: var(--yazi-silik); }
.kmp[open] .ok { transform: rotate(180deg); }
.kmp .gov { padding: 0 14px 14px; }
.ilerle { height: 6px; border-radius: 99px; background: rgba(60, 40, 25, .1); overflow: hidden; margin-top: 6px; grid-column: 1 / -1; }
.ilerle i { display: block; height: 100%; border-radius: 99px; background: var(--s-tyr); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
@media (min-width: 600px) { .mini { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mini div { font-size: 11px; color: var(--yazi-soluk); }
.mini b { display: block; font-size: 15px; color: var(--yazi); font-variant-numeric: tabular-nums; }

/* ── filtre satırı ─────────────────────────────────────────────────────── */
.filt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filt label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--yazi-soluk); padding: 5px 10px; border-radius: 999px; background: var(--cam-ic); cursor: pointer; min-height: 30px; }
.filt input[type="checkbox"] { accent-color: #151515; width: 15px; height: 15px; }

/* ── çubuk (satıcı payı vb.) ──────────────────────────────────────────── */
.pay { display: grid; grid-template-columns: 96px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.pay .c { height: 10px; border-radius: 99px; background: rgba(60, 40, 25, .08); overflow: hidden; }
.pay .c i { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }

/* ── olay zaman çizelgesi ─────────────────────────────────────────────── */
.ol { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(60, 40, 25, .08); }
.ol:last-child { border-bottom: 0; }
.ol .z { font-size: 12px; color: var(--yazi-silik); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ol .b { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ol .d { font-size: 13px; color: var(--yazi-soluk); margin-top: 2px; }

/* ── düğme, not, boş ──────────────────────────────────────────────────── */
.dug { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #151515; color: #fff; font-weight: 600; font-size: 14px; }
.dug:active { transform: scale(.98); }
.not { font-size: 12.5px; color: var(--yazi-soluk); line-height: 1.5; }
.not b { color: var(--yazi); }
.kart > .not { margin-top: 10px; }
.bos { text-align: center; color: var(--yazi-soluk); padding: 28px 10px; }
.uyar { background: var(--uyari-z); color: var(--uyari); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }

/* ── alt sekme hapı ───────────────────────────────────────────────────── */
.tab {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; gap: 2px; padding: 5px; border-radius: 999px; max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none;
  background: rgba(130, 106, 88, .4); border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(34px) saturate(150%); backdrop-filter: blur(34px) saturate(150%);
  box-shadow: var(--cam-parlak), var(--cam-golge-yuksek);
}
.tab::-webkit-scrollbar { display: none; }
.tab button { color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; min-height: 40px; transition: background .2s, color .2s; }
.tab button.on { background: #fff; color: #151515; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3); }

/* ── giriş ─────────────────────────────────────────────────────────────── */
.giris { max-width: 360px; margin: 18vh auto 0; text-align: center; padding: 28px 22px; }
.giris h1 { font-size: 28px; letter-spacing: -.03em; }
.giris p { color: var(--yazi-soluk); margin: 4px 0 20px; }
.giris input { width: 100%; font-size: 16px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--cam-kenar); background: var(--cam-ic); margin-bottom: 12px; outline: none; }
.giris input:focus { border-color: #151515; }
.giris .dug { width: 100%; }
.giris .h { color: var(--kotu); font-size: 13px; min-height: 20px; margin-top: 10px; }

@media (max-width: 520px) {
  .bas h1 { font-size: 22px; }
  .hero .d { font-size: 34px; }
  .kp .d { font-size: 21px; }
  .kart { padding: 14px; }
  .ust .logo small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
tr.soluk td { opacity: .55; }