/* Codex tasarım dilinde İÇ SAYFA bileşenleri.
 *
 * Codex dört sayfa verdi (ana sayfa · şehir · profil · hesaplamalar); keşfet,
 * kütüphane, blog, klinik, giriş, panel, yasal sayfalar ve 404 çizilmedi.
 * Bu dosya onları Codex'in KENDİ tasarım dilinden türetir — yeni renk, yeni
 * font, yeni bileşen tarzı icat edilmez.
 *
 * ⚠️ KURAL: buradaki her değer Codex'in `:root` listesinden gelir.
 * Ölçülen token seti (sablon/codex/ana-sayfa.css kuyruğu):
 *   renk    --renk-lacivert #10233f · --renk-mavi #4d69e5 · --renk-yesil #2d7a5d
 *           --renk-zemin #fbfaf7 · --renk-beyaz #ffffff · --renk-cizgi #dce4ef
 *   boşluk  --bosluk-xs .5 · sm .75 · md 1 · lg 1.5 · xl 2 · 2xl 3 rem
 *   yarıçap --yaricap-sm .625 · md 1 · lg 1.5 · xl 2 rem
 *   gölge   --golge-hafif · --golge-guclu
 *   font    --font-sans (DM Sans) · --font-serif (Cormorant Garamond)
 * Token'da olmayan değerler: satır yükseklikleri ve geçiş süreleri (tasarım
 * kararı değil), bir de Codex'in kendi CSS'inde geçen ara tonlar (gövde
 * metni #526176, ikincil #56667b, açık zemin #f0f3f8 gibi).
 *
 * Codex'te HİÇ geçmeyen yalnızca iki renk var, ikisi de KONTRAST ölçümüyle
 * gerekçeli (`arac/token-denetle.py` bunları listeler):
 *   #3d55bd — Codex'in mavisi (#4d69e5) açık rozet zemininde 4,20 kalıyordu;
 *             aynı ton 5,52'ye çekildi (WCAG AA eşiği 4,5).
 *   #c9922e — Codex puan yıldızını satır içi SVG'de çiziyor, CSS'te renk
 *             olarak geçmiyor; bu ton onun eşiğe çekilmiş hâli.
 */

body.codex-ic {
  background: var(--renk-zemin);
  color: var(--renk-lacivert);
  font-family: var(--font-sans);
  margin: 0;
}

body.codex-ic *,
body.codex-ic *::before,
body.codex-ic *::after { box-sizing: border-box; }

body.codex-ic a { color: inherit; text-decoration: none; }
body.codex-ic h1,
body.codex-ic h2,
body.codex-ic h3,
body.codex-ic p { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--renk-lacivert);
  color: var(--renk-beyaz);
  padding: var(--bosluk-sm) var(--bosluk-md);
  border-radius: var(--yaricap-sm);
}
.skip-link:focus { left: var(--bosluk-md); top: var(--bosluk-md); z-index: 20; }

/* ---- Sayfa kabı: ana sayfanın `.section-shell` ritmiyle aynı ------------ */
.ic-kap {
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

.ic-bolum { padding-block: var(--bosluk-2xl); }

/* ---- Sayfa başlığı: profil hero'sunun sade hâli ------------------------- */
.ic-hero {
  background: var(--renk-lacivert);
  color: var(--renk-beyaz);
  border-radius: var(--yaricap-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  margin-block: var(--bosluk-xl) var(--bosluk-2xl);
  box-shadow: var(--golge-guclu);
}
.ic-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;            /* token değil: başlık ölçeği, Codex h1 ile aynı */
}
.ic-hero h1 em { font-style: italic; color: #e8eeff; }
.ic-hero p {
  margin-top: var(--bosluk-md);
  max-width: 62ch;
  color: #dce3eb;
  line-height: 1.7;             /* token değil: gövde okunabilirliği */
}
.ic-kicker {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d5deea;
  margin-bottom: var(--bosluk-sm);
}

/* ---- Bölüm başlığı ------------------------------------------------------ */
.ic-baslik { margin-bottom: var(--bosluk-xl); }
.ic-baslik h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.ic-baslik > p {
  margin-top: var(--bosluk-sm);
  color: #56667b;
  max-width: 64ch;
  line-height: 1.7;
}
.ic-baslik .ic-kicker { color: var(--renk-mavi); }

/* ---- Kart ızgarası: ana sayfadaki `.city-card` kalıbı ------------------- */
.ic-izgara {
  display: grid;
  gap: var(--bosluk-lg);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ic-izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ic-kart {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yaricap-lg);
  padding: var(--bosluk-lg);
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-sm);
  transition: box-shadow .25s, transform .25s;
}
.ic-kart:hover { box-shadow: var(--golge-hafif); transform: translateY(-2px); }
.ic-kart h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.ic-kart p { color: #56667b; font-size: .95rem; line-height: 1.65; }
/* "Profili gör" gibi son satır her kartta aynı hizada dursun (yetim öğe
   ve havada kalan buton sorunu, proje kuralı). */
.ic-kart > :last-child { margin-top: auto; padding-top: var(--bosluk-sm); }

/* ---- Düğme: ana sayfadaki koyu/çizgili ikili --------------------------- */
.ic-dugme {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-xs);
  min-height: 44px;
  padding: 0 var(--bosluk-lg);
  border-radius: 999px;
  font-weight: 500;
  background: var(--renk-lacivert);
  color: var(--renk-beyaz);
  border: 1px solid var(--renk-lacivert);
  cursor: pointer;
}
.ic-dugme.cizgi { background: transparent; color: var(--renk-lacivert); border-color: var(--renk-cizgi); }
.ic-dugme:hover { opacity: .92; }

/* ---- Metin bloğu (yasal ve bilgi sayfaları) ---------------------------- */
.ic-metin {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yaricap-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 78ch;
}
.ic-metin h2 { font-size: 1.45rem; margin-top: var(--bosluk-xl); }
.ic-metin h2:first-child { margin-top: 0; }
.ic-metin h3 { font-size: 1.1rem; margin-top: var(--bosluk-lg); }
.ic-metin p,
.ic-metin li { color: #526176; line-height: 1.75; }
.ic-metin p + p,
.ic-metin ul,
.ic-metin ol { margin-top: var(--bosluk-md); }
.ic-metin a { color: var(--renk-mavi); text-decoration: underline; }
.ic-metin table { width: 100%; border-collapse: collapse; margin-top: var(--bosluk-md); }
.ic-metin th,
.ic-metin td {
  border-bottom: 1px solid var(--renk-cizgi);
  padding: var(--bosluk-sm) var(--bosluk-xs);
  text-align: left;
  font-size: .95rem;
}
.ic-metin th { color: var(--renk-lacivert); font-weight: 600; }
/* Geniş tablo sayfayı yatay kaydırmasın (proje kuralı). */
.tablo-kaydir { overflow-x: auto; }

/* ---- Sık sorulan sorular: ana sayfadaki akordeonla aynı --------------- */
.ic-sss { border-top: 1px solid var(--renk-cizgi); }
.ic-sss details { border-bottom: 1px solid var(--renk-cizgi); }
.ic-sss summary {
  cursor: pointer;
  list-style: none;
  padding: var(--bosluk-md) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-md);
  font-weight: 500;
}
.ic-sss summary::-webkit-details-marker { display: none; }
.ic-sss summary::after { content: "+"; color: var(--renk-mavi); font-size: 1.35rem; }
.ic-sss details[open] summary::after { content: "−"; }
.ic-sss .cevap { padding-bottom: var(--bosluk-md); color: #526176; line-height: 1.75; max-width: 72ch; }

/* ---- Kırıntı ----------------------------------------------------------- */
.ic-kirinti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-xs);
  align-items: center;
  padding-top: var(--bosluk-lg);
  font-size: .85rem;
  color: #56667b;
}
.ic-kirinti a { min-height: 24px; display: inline-flex; align-items: center; }
.ic-kirinti a:hover { color: var(--renk-mavi); }

/* ---- Uyarı / bilgi kutusu --------------------------------------------- */
.ic-not {
  background: #eef2ff;
  border: 1px solid #e8eeff;
  border-radius: var(--yaricap-md);
  padding: var(--bosluk-lg);
  color: #10233f;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .ic-izgara.uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ic-kap { width: min(1280px, 100% - 32px); }
  .ic-izgara,
  .ic-izgara.iki,
  .ic-izgara.uc { grid-template-columns: 1fr; }
}

/* ============================ Keşfet ekranı ==============================
 * İşlev aynı kalıyor (harita + liste + filtre, `sablon/harita.js`); yalnızca
 * görünüm Codex diline geçiyor. Renk/boşluk/yarıçap değerleri yukarıdaki
 * token listesinden; `dyt-kart` bileşeni de burada Codex kartına uyarlanıyor
 * çünkü Codex sayfalarında eski `stil.css` yüklenmiyor.
 */
.kesfet {
  background: var(--renk-beyaz);
  border-block: 1px solid var(--renk-cizgi);
  border-radius: var(--yaricap-lg);
  overflow: hidden;
  box-shadow: var(--golge-hafif);
}
.kesfet-cubuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-sm);
  padding: var(--bosluk-md) var(--bosluk-xl);
  border-bottom: 1px solid var(--renk-cizgi);
}
.kesfet-cubuk select,
.kesfet-cubuk input {
  font: inherit;
  min-height: 44px;
  padding: 0 var(--bosluk-md);
  border: 1px solid var(--renk-cizgi);
  border-radius: 999px;
  background: var(--renk-zemin);
  color: var(--renk-lacivert);
}
.kesfet-cubuk input { flex: 1 1 240px; min-width: 180px; }
.kesfet-cubuk select:disabled { color: #8a9383; background: #f0f3f8; }
.kesfet-sayac { margin-left: auto; font-size: .9rem; color: #56667b; }
/* Aktif uzmanlık filtresi rozeti — şartname 2026-09-06-kesfet-uzmanlik-filtresi.md.
   Ana sayfadaki eşleşme panelinden ?uzmanlik= ile gelindiğinde görünür. */
.kesfet-uzmanlik-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--bosluk-md);
  border: 1px solid var(--renk-mavi);
  border-radius: 999px;
  background: var(--renk-mavi);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
.kesfet-uzmanlik-etiket:hover { filter: brightness(0.92); }
.kesfet-sekmeler {
  display: none;
  gap: 4px;
  padding: 4px;
  background: var(--renk-zemin);
  border: 1px solid var(--renk-cizgi);
  border-radius: 999px;
}
.kesfet-sekme {
  min-height: 40px;
  padding: 0 var(--bosluk-lg);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #526176;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kesfet-sekme[aria-pressed="true"] { background: var(--renk-lacivert); color: var(--renk-beyaz); }
.kesfet-govde {
  display: grid;
  grid-template-columns: 430px 1fr;
  height: calc(100dvh - 200px);
  min-height: 520px;
}
.kesfet-liste {
  overflow-y: auto;
  padding: var(--bosluk-lg);
  border-right: 1px solid var(--renk-cizgi);
  display: grid;
  gap: var(--bosluk-md);
  align-content: start;
}
.kesfet-harita { min-height: 320px; }
.kesfet-hata { margin: var(--bosluk-xl); }
.kesfet-daha { margin-top: var(--bosluk-xs); text-align: center; }

/* Keşfet ve liste kartı — Codex'in `.city-profile-card` kalıbının sade hâli. */
.kesfet .dyt-kart {
  display: grid;
  grid-template-rows: 1fr auto;      /* buton her zaman altta (proje kuralı) */
  gap: var(--bosluk-sm);
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yaricap-md);
  padding: var(--bosluk-md);
  margin: 0;
}
.kesfet .dyt-kart h3 { font-size: 1.02rem; font-weight: 600; margin: 0; }
.kesfet .dyt-kart p { color: #56667b; font-size: .9rem; margin: 0; line-height: 1.6; }
.kesfet .dyt-kart a { color: var(--renk-mavi); font-weight: 500; }
.kesfet .dyt-kart-secili { border-color: var(--renk-mavi); box-shadow: var(--golge-hafif); }
.kesfet .bos-durum { padding: var(--bosluk-2xl) var(--bosluk-lg); color: #56667b; }

@media (max-width: 900px) {
  .kesfet-cubuk { padding: var(--bosluk-md); }
  .kesfet-sekmeler { display: inline-flex; order: -1; width: 100%; justify-content: center; }
  .kesfet-sayac { margin-left: 0; width: 100%; }
  .kesfet-govde { grid-template-columns: 1fr; height: calc(100dvh - 250px); }
  .kesfet-liste { border-right: 0; }
  .kesfet[data-gorunum="liste"] .kesfet-harita { display: none; }
  .kesfet[data-gorunum="harita"] .kesfet-liste { display: none; }
}

/* Yalnızca ekran okuyucular için (eski stil.css'te vardı, burada da lazım) */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* `dyt_kart` bileşeni eski tasarım için yazılmıştı; Codex sayfalarında eski
 * stil.css yüklenmediği için kabuk stilsiz kalıyordu. İşlevi (veri
 * nitelikleri, filtre, harita eşleşmesi) değişmeden Codex kartına uyarlanıyor. */
.kesfet .dyt-kart {
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto;
  align-items: start;
  column-gap: var(--bosluk-md);
}
.kesfet .dyt-kart .monogram {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #3d55bd;              /* #4d69e5 açık zeminde 4,20 idi → 5,52 */
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.kesfet .dyt-kart .ad {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bosluk-xs);
  margin-bottom: 2px;
}
.kesfet .dyt-kart .ad h3 a { color: var(--renk-lacivert); }
.kesfet .dyt-kart .yer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: #56667b; font-size: .88rem;
}
.kesfet .dyt-kart .yer a { color: #56667b; text-decoration: underline; }
.kesfet .dyt-kart .puan { display: inline-flex; align-items: center; gap: 4px; color: var(--renk-lacivert); }
.kesfet .dyt-kart .puan svg { width: 14px; height: 14px; color: #c9922e; }
.kesfet .dyt-kart .odak { margin-top: 6px; }
.kesfet .dyt-kart .rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; min-height: 24px;
  border-radius: 999px;
  border: 1px solid var(--renk-cizgi);
  background: var(--renk-zemin);
  font-size: .72rem; color: #526176;
}
.kesfet .dyt-kart .rozet svg { width: 12px; height: 12px; }
.kesfet .dyt-kart .rozet-yesil { background: #f0f4e9; border-color: #d9e1cc; color: #176449; }
.kesfet .dyt-kart .uzm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--bosluk-sm); }
.kesfet .dyt-kart .uzm span {
  padding: 3px 10px; border-radius: 999px;
  background: var(--renk-zemin); border: 1px solid var(--renk-cizgi);
  font-size: .74rem; color: #526176;
}
.kesfet .dyt-kart .alt { grid-column: 1 / -1; padding-top: var(--bosluk-sm); }
.kesfet .dyt-kart .alt a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--bosluk-lg);
  border: 1px solid var(--renk-cizgi); border-radius: 999px;
  background: var(--renk-zemin); color: var(--renk-lacivert);
  font-size: .9rem; font-weight: 500;
}
.kesfet .dyt-kart .alt a:hover { border-color: var(--renk-mavi); color: var(--renk-mavi); }

/* "Kısaca" özet kutusundaki liste — madde işareti ve iç boşluk. */
.ic-not ul,
.ic-not ol { margin: var(--bosluk-sm) 0 0; padding-left: 1.15rem; }
.ic-not li { margin-top: var(--bosluk-xs); }
/* Yalnızca liste öncesi etiket kullanımını (<strong>Kısaca</strong><ul>...) hedefler;
   akan bir cümle içindeki satır içi vurgu (örn. "Google puanı <strong>4,5 ve üzeri</strong>,")
   önceden bu kuralla yanlışlıkla bloğa dönüp cümleyi parçalara ayırıyordu. */
.ic-not strong:has(+ ul),
.ic-not strong:has(+ ol) { display: block; margin-bottom: var(--bosluk-xs); }
.ic-metin ul,
.ic-metin ol { padding-left: 1.15rem; }
.ic-metin li + li { margin-top: var(--bosluk-xs); }

/* ---- Kütüphane kartı ve kategori sekmeleri ---------------------------- */
.ic-kart-yazi { padding: 0; overflow: hidden; }
.ic-kart-gorsel { display: block; aspect-ratio: 16 / 9; background: #eef2ff; overflow: hidden; }
.ic-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic-kart-yazi .ic-etiket {
  display: block;
  padding: var(--bosluk-md) var(--bosluk-lg) 0;
  font-size: .7rem; letter-spacing: .12em;
  color: var(--renk-mavi);
}
.ic-kart-yazi h3 { padding: var(--bosluk-xs) var(--bosluk-lg) 0; font-size: 1.1rem; }
.ic-kart-yazi p { padding: var(--bosluk-xs) var(--bosluk-lg) 0; }
.ic-kart-yazi .ic-oku {
  display: block;
  margin-top: auto;
  padding: var(--bosluk-md) var(--bosluk-lg) var(--bosluk-lg);
  color: var(--renk-mavi); font-weight: 500; font-size: .9rem;
}

.ic-sekmeler {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-xs);
  margin-bottom: var(--bosluk-xl);
}
.ic-sekmeler a {
  min-height: 40px; padding: 0 var(--bosluk-lg);
  display: inline-flex; align-items: center;
  border: 1px solid var(--renk-cizgi); border-radius: 999px;
  background: var(--renk-beyaz); color: #526176;
  font-size: .9rem;
}
.ic-sekmeler a[aria-current="page"] {
  background: var(--renk-lacivert); color: var(--renk-beyaz); border-color: var(--renk-lacivert);
}

/* ---- Kütüphane yazısı ------------------------------------------------- */
.ic-yazi-meta { margin-top: var(--bosluk-lg); font-size: .85rem; color: #d5deea; }
.ic-yazi { max-width: 74ch; margin-inline: auto; }
.ic-yazi-gorsel { margin: 0 0 var(--bosluk-xl); }
.ic-yazi-gorsel img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--yaricap-md); display: block;
}
.ic-yazi-gorsel figcaption { margin-top: var(--bosluk-xs); font-size: .8rem; color: #606e82; }
.ic-toc {
  border: 1px solid var(--renk-cizgi); border-radius: var(--yaricap-md);
  padding: var(--bosluk-md) var(--bosluk-lg); margin: var(--bosluk-lg) 0;
  background: var(--renk-zemin);
}
.ic-toc summary { cursor: pointer; font-weight: 500; min-height: 32px; }
.ic-toc ul { margin-top: var(--bosluk-sm); }
.ic-toc a { color: var(--renk-mavi); }
.ic-yazi h2 { scroll-margin-top: 90px; }
.ic-yazi h3 { scroll-margin-top: 90px; }
.ic-yazi blockquote {
  margin: var(--bosluk-lg) 0; padding-left: var(--bosluk-lg);
  border-left: 3px solid var(--renk-mavi); color: #526176; font-style: italic;
}
.ic-kaynakca { font-size: .9rem; color: #526176; }
.ic-kaynakca a { word-break: break-word; }
.ic-cagri {
  background: var(--renk-lacivert); color: var(--renk-beyaz);
  border-radius: var(--yaricap-lg); padding: var(--bosluk-xl);
  margin: var(--bosluk-2xl) 0;
}
.ic-cagri h2 { margin: 0 0 var(--bosluk-xs); font-family: var(--font-serif); font-weight: 500; }
.ic-cagri p { color: #dce3eb; }
.ic-cagri-sehir { display: flex; flex-wrap: wrap; gap: var(--bosluk-xs); margin-top: var(--bosluk-lg); }
.ic-cagri-sehir a {
  min-height: 40px; padding: 0 var(--bosluk-lg);
  display: inline-flex; align-items: center;
  border: 1px solid #526176; border-radius: 999px;
  color: var(--renk-beyaz); font-size: .9rem;
}
.ic-cagri-sehir a:hover { background: #10233f; }

.ic-oku-satir { color: var(--renk-mavi); font-weight: 500; font-size: .9rem; }

/* İl kartı — ana sayfadaki `.city-card` kalıbı (plaka + ad + sayı). */
.ic-il { flex-direction: row; align-items: center; gap: var(--bosluk-md); }
.ic-plaka {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--yaricap-sm);
  background: #eef2ff;
  color: #3d55bd;              /* #4d69e5 açık zeminde 4,20 idi → 5,52 */
  font-family: var(--font-serif); font-size: 1.1rem;
}
.ic-il h3 { font-size: 1.05rem; }
.ic-il p { font-size: .88rem; }

/* Giriş düğmesi kabı (Google butonu buraya çiziliyor — panel.js). */
.ic-giris-dugme { display: flex; justify-content: center; margin: var(--bosluk-xl) 0; min-height: 44px; }

/* ---- Hesaplama formu (hesaplayici.js ile çalışır) --------------------- */
.ic-metin .hesap-blok { margin: var(--bosluk-lg) 0 var(--bosluk-xl); }
.ic-metin form.hesap { display: grid; gap: var(--bosluk-md); }
.ic-metin .alanlar {
  display: grid; gap: var(--bosluk-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ic-metin form.hesap label { display: grid; gap: 6px; font-size: .9rem; font-weight: 500; }
.ic-metin form.hesap input,
.ic-metin form.hesap select {
  font: inherit; min-height: 44px; padding: 0 var(--bosluk-md);
  border: 1px solid var(--renk-cizgi); border-radius: var(--yaricap-sm);
  background: var(--renk-zemin); color: var(--renk-lacivert);
}
.ic-metin form.hesap .dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-sm); }
.ic-metin form.hesap button {
  min-height: 44px; padding: 0 var(--bosluk-lg); border-radius: 999px;
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--renk-lacivert); color: var(--renk-beyaz); border: 1px solid var(--renk-lacivert);
}
.ic-metin form.hesap button[type="reset"] {
  background: transparent; color: var(--renk-lacivert); border-color: var(--renk-cizgi);
}
.ic-metin .sonuc {
  margin-top: var(--bosluk-md); padding: var(--bosluk-lg);
  background: #eef2ff; border: 1px solid #e8eeff; border-radius: var(--yaricap-md);
}
.ic-metin .sonuc strong { font-size: 1.6rem; font-family: var(--font-serif); }
.ic-metin .h-uyari { color: #b0614d; margin-top: var(--bosluk-sm); }
.ic-metin .hesap-uyari,
.ic-metin .hesap-blok > p:last-child { font-size: .85rem; color: #56667b; }

.ic-cip-liste { display: flex; flex-wrap: wrap; gap: var(--bosluk-sm); }
.ic-cip {
  min-height: 44px; padding: 0 var(--bosluk-lg);
  display: inline-flex; align-items: center;
  border: 1px solid var(--renk-cizgi); border-radius: 999px;
  background: var(--renk-beyaz); color: var(--renk-lacivert); font-size: .9rem;
}
.ic-cip:hover { border-color: var(--renk-mavi); color: var(--renk-mavi); }