/* ═══ 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. */

/* Renkler Trek marka paletine baglandi (13 Agu 2026). Apple tonlari kaldirildi.
   Degerler trekbikes.com canli CSS'inden: #ce1a2b marka, #007ab8 bilgi,
   #45b931 tamam, #f07323 bekliyor. Sinif adlari ve olculer degismedi. */
:root{
  --i-bg:#f4f4f4; --i-cell:#ffffff; --i-txt:#1a1a1a;
  --i-lbl:#6e6e6e; --i-lbl2:#8d8d8d; --i-sep:#e8e8e8;

  /* Marka — kimlik tasiyan yerler: aktif sekme, birincil eylem, odak halkasi.
     Trek kirmiziyi az kullanir; bu degisken de az yerde gecer. */
  --i-brand:#ce1a2b; --i-brand-bg:rgba(206,26,43,.10);

  /* Tint — ikincil/bilgi eylemi (ara, WhatsApp, sayfa ici ikon). Trek mavisi. */
  --i-tint:#007ab8; --i-tint-bg:rgba(0,122,184,.12);

  /* Metin tonlari Trek merdiveninin koyu ucundan secildi: gri zemin uzerinde
     de WCAG AA (4.5:1) gecsin. Zemin tonlari markanin canli renginde kalir. */
  --i-green:#2a6e1e; --i-green-bg:rgba(69,185,49,.15);
  --i-amber:#904515; --i-amber-bg:rgba(240,115,35,.14);
  --i-rose:#ce1a2b;  --i-rose-bg:rgba(206,26,43,.10);

  /* Trek paletinde mor yok — 5. ayirt edici renk olarak koyu Trek mavisi. */
  --i-violet:#00496e; --i-violet-bg:rgba(0,73,110,.12);

  --i-frost:rgba(250,250,250,.9);
  /* Atolye: golge yerine cizgi. Sheet/panel ayrimini bu tasir. */
  --i-ink-rule:#1a1a1a;
}

.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:2px; padding:8px 14px; font-size:13px;
  font-weight:600; color:var(--i-lbl); box-shadow:none; border:1px solid var(--i-sep); }

/* ── Bölüm başlığı ── */
/* Atolye bolum basligi: koyu metin + altinda kisa kirmizi cizgi.
   ::after flex-basis:100% ile alt satira duser, max-width ile 22px'e iner. */
.i-sect{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:16px 8px 7px;
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--i-txt); background:transparent; }
.i-sect::after{ content:""; flex:0 0 100%; max-width:22px; height:2px;
  background:var(--i-brand); margin-top:6px; }
.i-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.i-dot.g{ background:#45b931; } .i-dot.a{ background:#f07323; }
.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:#d1d1d1; font-size:12px; }

/* ── Gruplanmış liste ── */
.i-group{ background:var(--i-cell); border-radius:0; overflow:hidden;
  border:1px solid var(--i-sep); }
.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:#e8e8e8; color:#767676;
  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:2px; background:#f4f4f4; color:#6e6e6e; }
.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:2px; 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:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.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:#767676; position:relative; }
.i-tab.on{ color:var(--i-brand); }
.i-tab svg{ display:block; }
.i-badge{ position:absolute; top:-4px; right:10px; background:#ce1a2b; color:#fff;
  font-size:10px; font-weight:700; border-radius:999px; padding:0 5px; line-height:15px; }
.i-badge.o{ background:#f07323; }

/* ── 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:0; border-top:2px solid var(--i-ink-rule);
  padding:6px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow:none; }
.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:2px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.i-shic.gray{ background:rgba(118,118,118,.14); color:#6e6e6e; }
.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:2px;
  padding:13px 0; text-align:center; font-size:16px; font-weight:600; color:var(--i-brand); 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-brand); outline-offset:2px; }

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

/* Gradyan yerine düz iOS yüzey */
.i-hero{ color:#fff; }
.i-hero.blue{ background:#007ab8; }
.i-hero.green{ background:#379328; }
.i-hero.dark{ background:#313131; }

/* Sekme içi bölüm başlığı */
.i-sect2{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:2px 2px 9px;
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--i-txt); }
.i-sect2::after{ content:""; flex:0 0 100%; max-width:22px; height:2px;
  background:var(--i-brand); margin-top:6px; }
.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:2px; 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-brand); outline-offset:2px; }

/* Takip bandı düğmeleri */
.i-fubtn{ flex:1; background:rgba(255,255,255,.72); border-radius:2px; 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-brand); outline-offset:2px; }

/* Kartta müşterinin cevabı — "Cevap Verdi" şeridinin asıl anlamı */
.i-reply{ display:flex; align-items:center; gap:6px; margin-top:2px;
  font-size:14.5px; letter-spacing:-.1px; color:var(--i-txt); min-width:0; }
.i-reply svg{ flex-shrink:0; color:var(--i-green); }