/* ═══ Pusula iOS tasarım katmanı ═══
   Yalnız YENİ (.i-*) sınıflar — Tailwind ile çakışma yok.
   Fonksiyon değişmez; Alpine binding'leri markup'ta aynen durur. */

:root{
  --i-bg:#f2f2f7; --i-cell:#ffffff; --i-txt:#1c1c1e;
  --i-lbl:#8e8e93; --i-lbl2:#aeaeb2; --i-sep:rgba(60,60,67,.12);
  --i-tint:#007aff; --i-green:#248a3d; --i-green-bg:rgba(52,199,89,.15);
  --i-amber:#c77700; --i-amber-bg:rgba(255,159,10,.16);
  --i-rose:#d70015;  --i-rose-bg:rgba(255,59,48,.11);
  --i-violet:#8e44cc; --i-violet-bg:rgba(175,82,222,.13);
  --i-tint-bg:rgba(0,122,255,.12);
  --i-frost:rgba(249,249,251,.9);
}

.i-body{ background:var(--i-bg); color:var(--i-txt); }

/* ── Büyük başlık ── */
.i-date{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--i-lbl); }
.i-bigtitle{ font-size:32px; font-weight:800; letter-spacing:-.4px; line-height:1.08; color:var(--i-txt); }
.i-subtitle{ font-size:14px; color:var(--i-lbl); margin-top:2px; }
.i-vip{ background:var(--i-cell); border-radius:999px; padding:8px 14px; font-size:13px;
  font-weight:600; color:var(--i-lbl); box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* ── Bölüm başlığı ── */
.i-sect{ display:flex; align-items:center; gap:6px; padding:16px 8px 7px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--i-lbl); background:transparent; }
.i-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.i-dot.g{ background:#34c759; } .i-dot.a{ background:#ff9f0a; }
.i-n{ color:var(--i-lbl2); font-variant-numeric:tabular-nums; }
.i-alt{ text-transform:none; letter-spacing:0; color:var(--i-lbl2); font-weight:500; }
.i-fold{ color:#c7c7cc; font-size:12px; }

/* ── Gruplanmış liste ── */
.i-group{ background:var(--i-cell); border-radius:16px; overflow:hidden; }
.i-group > .i-cell + .i-cell{ border-top:1px solid var(--i-sep); }
.i-cell{ background:var(--i-cell); padding:11px 14px; display:block; width:100%; }
.i-row{ display:flex; align-items:center; gap:12px; cursor:pointer; min-width:0; }
.i-who{ width:40px; height:40px; border-radius:50%; background:#c8d3e0; color:#5a6b80;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.i-mid{ flex:1; min-width:0; }
.i-nm{ font-size:16px; font-weight:600; letter-spacing:-.2px; display:flex; align-items:baseline; gap:8px; min-width:0; }
.i-time{ margin-left:auto; font-size:12px; font-weight:500; color:var(--i-lbl);
  font-variant-numeric:tabular-nums; flex-shrink:0; }
.i-meta{ font-size:13px; color:var(--i-lbl); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Dairesel aksiyonlar ── */
.i-acts{ display:flex; gap:8px; flex-shrink:0; }
.i-cbtn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; }
.i-cbtn.g{ background:var(--i-green-bg); color:var(--i-green); }
.i-cbtn.b{ background:var(--i-tint-bg); color:var(--i-tint); }
.i-cbtn.v{ background:var(--i-violet-bg); color:var(--i-violet); }

/* ── Sonuç pilleri ── */
.i-outrow{ display:flex; gap:6px; margin-top:10px; }
.i-pill{ flex:1; padding:7px 0; text-align:center; font-size:12px; font-weight:600;
  border-radius:9px; background:#eef0f4; color:#636366; }
.i-pill.ok{ background:var(--i-green-bg); color:var(--i-green); }
.i-pill.x{ flex:0 0 38px; color:var(--i-rose); }

/* ── Sessiz özet ── */
.i-quiet{ text-align:center; font-size:12.5px; color:var(--i-lbl2);
  padding:14px 0 2px; font-variant-numeric:tabular-nums; }
.i-quietlink{ color:var(--i-lbl); font-weight:600; }

/* ── Çipler (Pano) ── */
.i-chip{ flex-shrink:0; border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600;
  background:var(--i-cell); color:var(--i-lbl); border:1px solid rgba(0,0,0,.06); transition:background .15s,color .15s; }
.i-chip.on{ background:#1c1c1e; color:#fff; border-color:#1c1c1e; }
.i-chip.warn{ background:var(--i-rose-bg); color:var(--i-rose); border-color:transparent; }
.i-chip span{ opacity:.55; margin-left:2px; font-variant-numeric:tabular-nums; }

/* ── Buzlu sekme çubuğu ── */
.i-tabbar{ background:var(--i-frost);
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);
  border-top:1px solid rgba(60,60,67,.16); }
.i-tab{ display:flex; flex-direction:column; align-items:center; gap:2px; width:4rem;
  font-size:10.5px; font-weight:500; color:#8e8e93; position:relative; }
.i-tab.on{ color:var(--i-tint); }
.i-tab svg{ display:block; }
.i-badge{ position:absolute; top:-4px; right:10px; background:#ff3b30; color:#fff;
  font-size:10px; font-weight:700; border-radius:999px; padding:0 5px; line-height:15px; }
.i-badge.o{ background:#ff9500; }

/* ── Arama sonrası sheet ── */
.i-scrim{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); }
.i-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:50; max-width:520px; margin:0 auto;
  background:var(--i-bg); border-radius:22px 22px 0 0;
  padding:6px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(0,0,0,.18); }
.i-grab{ width:36px; height:5px; border-radius:3px; background:var(--i-lbl2); opacity:.5; margin:6px auto 12px; }
.i-sh-t{ text-align:center; font-size:17px; font-weight:700; letter-spacing:-.2px; }
.i-sh-s{ text-align:center; font-size:13px; color:var(--i-lbl); margin:2px 0 14px; }
.i-shopt{ display:flex; align-items:center; gap:12px; text-align:left; }
.i-shic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.i-shic.gray{ background:rgba(142,142,147,.16); color:#6d6d72; }
.i-shic.blue{ background:var(--i-tint-bg); color:var(--i-tint); }
.i-shic.green{ background:var(--i-green-bg); color:var(--i-green); }
.i-shic.rose{ background:var(--i-rose-bg); color:var(--i-rose); }
.i-shtx{ display:flex; flex-direction:column; min-width:0; }
.i-shtx b{ font-size:16px; font-weight:600; letter-spacing:-.2px; color:var(--i-txt); }
.i-shtx i{ font-style:normal; font-size:12.5px; color:var(--i-lbl); margin-top:1px; }
.i-cancel{ display:block; width:100%; background:var(--i-cell); border-radius:14px;
  padding:13px 0; text-align:center; font-size:16px; font-weight:600; color:var(--i-tint); margin-top:10px; }

/* ── Erişilebilirlik ── */
.i-cbtn:focus-visible, .i-pill:focus-visible, .i-tab:focus-visible,
.i-chip:focus-visible, .i-shopt:focus-visible, .i-cancel:focus-visible{
  outline:2px solid var(--i-tint); outline-offset:2px; }

/* ═══ Faz 2 ═══ */

/* Gradyan yerine düz iOS yüzey */
.i-hero{ color:#fff; }
.i-hero.blue{ background:#0a6cff; }
.i-hero.green{ background:#149c5c; }
.i-hero.dark{ background:#2c2c2e; }

/* Sekme içi bölüm başlığı */
.i-sect2{ display:flex; align-items:center; gap:7px; padding:2px 2px 9px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--i-lbl); }
.i-sect2 svg{ flex-shrink:0; opacity:.75; }

/* Kart modalı hızlı aksiyonlar */
.i-actbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:14px; padding:13px 0 11px; font-size:12.5px; font-weight:600; text-align:center; }
.i-actbtn.g{ background:var(--i-green-bg); color:var(--i-green); }
.i-actbtn.b{ background:var(--i-tint-bg); color:var(--i-tint); }
.i-actbtn.v{ background:var(--i-violet-bg); color:var(--i-violet); }
.i-actbtn:focus-visible{ outline:2px solid var(--i-tint); outline-offset:2px; }

/* Takip bandı düğmeleri */
.i-fubtn{ flex:1; background:rgba(255,255,255,.72); border-radius:10px; padding:9px 0;
  font-size:12px; font-weight:700; text-align:center; color:inherit;
  display:flex; align-items:center; justify-content:center; }
.i-fubtn:active{ transform:scale(.96); }
.i-fubtn:focus-visible{ outline:2px solid var(--i-tint); outline-offset:2px; }