/* ═══════════════════════════════════════════════════════════════════════════
   Hesaplama Araçları
   Yalnız /araclar sayfalarında yüklenir (@section Styles).
   Mevcut tasarım dili KULLANILIR, yeni palet TANIMLANMAZ: --accent, --bh-krem,
   --bh-mint, 24px köşe, .hap-btn hapları. Yeni token icat edilmez.
   ═══════════════════════════════════════════════════════════════════════════ */

.arac-bolum { padding-top: 1rem; }

.arac-giris {
    max-width: 100%;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--muted, #86868b);
    margin-bottom: 2rem;
}

/* ─────────────────────────────── form ─────────────────────────────── */

.arac-form {
    background: var(--bh-krem, #fbfbfd);
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 24px;
    padding: 1.75rem;
}

.arac-alan { border: 0; padding: 0; margin: 0 0 1.25rem; }

.arac-alan-baslik {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding: 0;
    width: auto;
}

.arac-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.arac-kutu { flex: 1 1 260px; min-width: 0; }
.arac-kutu--genis { flex: 1 1 100%; }

.arac-etiket {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted, #86868b);
    margin-bottom: .4rem;
}

.arac-girdi {
    border-radius: 14px;
    min-height: 46px;
}

.arac-girdi--kapali { opacity: .45; }

.arac-uclu,
.arac-ikili { display: flex; gap: .5rem; }
.arac-uclu > *, .arac-ikili > * { flex: 1 1 0; min-width: 0; }

.arac-onay {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .92rem;
    cursor: pointer;
}

.arac-ipucu,
.arac-bilgi {
    font-size: .88rem;
    color: var(--muted, #86868b);
    margin: .45rem 0 0;
}

.arac-bilgi {
    background: #fff;
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 14px;
    padding: .7rem .9rem;
}

.arac-hata { display: block; color: #b3261e; font-size: .88rem; margin-top: .35rem; }
.arac-hata:empty { display: none; }

/* sabit rozetler: ev sistemi + zodyak (seçim DEĞİL) */
.arac-satir--rozet { gap: 1rem; }

.arac-rozet {
    flex: 1 1 240px;
    background: #fff;
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 18px;
    padding: .85rem 1rem;
    min-width: 0;
}

.arac-rozet-ad {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #86868b);
}

.arac-rozet strong { display: block; font-size: 1.05rem; margin: .1rem 0 .25rem; }
.arac-rozet-not { font-size: .85rem; color: var(--muted, #86868b); }

.arac-gonder { margin-top: .25rem; }

.arac-gizlilik {
    font-size: .85rem;
    color: var(--muted, #86868b);
    margin: 1rem 0 0;
}

/* ─────────────────────────── şehir otomatik tamamlama ─────────────────────────── */

.arac-sehir { position: relative; }

.arac-oneri {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    margin: .3rem 0 0;
    padding: .3rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    max-height: 300px;
    overflow-y: auto;
}

.arac-oneri-oge {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 12px;
    padding: .6rem .75rem;
    min-height: 44px;
    font-size: .95rem;
    cursor: pointer;
}

.arac-oneri-oge:hover,
.arac-oneri-oge:focus { background: var(--bh-mint, #e9fff4); }

/* ─────────────────────────────── sonuç ─────────────────────────────── */

.arac-sonuc { margin-top: 2.5rem; }

.arac-uyari { margin-bottom: 1.5rem; }
.arac-uyari p { margin: 0 0 .5rem; }
.arac-uyari p:last-child { margin-bottom: 0; }

.arac-kimlik { margin-bottom: 1rem; }
.arac-sonuc-baslik { font-size: 1.5rem; margin: 2rem 0 .5rem; }
.arac-sonuc-baslik:first-child { margin-top: 0; }
.arac-kimlik-satir { color: var(--muted, #86868b); margin: 0; }

/* Çark kendi kabında kayar — sayfa gövdesi ASLA yatay kaymaz. */
.arac-cark-kap {
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    text-align: center;
}

.arac-cark-kap svg { max-width: 100%; height: auto; }

.arac-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.arac-ozet-oge {
    flex: 1 1 180px;
    background: var(--bh-krem, #fbfbfd);
    border-radius: 18px;
    padding: .9rem 1.1rem;
    min-width: 0;
}

.arac-ozet-ad {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #86868b);
}

.arac-ozet-oge strong { display: block; font-size: 1.2rem; }
.arac-ozet-derece { font-size: .9rem; color: var(--muted, #86868b); }

.arac-tablo-baslik { font-size: 1.15rem; margin: 2rem 0 .35rem; }
.arac-tablo-not { font-size: .85rem; color: var(--muted, #86868b); margin: 0 0 .75rem; }

.arac-tablo-kap { overflow-x: auto; }

.arac-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.arac-tablo th,
.arac-tablo td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08));
    text-align: left;
    white-space: nowrap;
}

.arac-tablo thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #86868b);
    font-weight: 600;
}

.arac-glif { font-size: 1.05rem; }
.arac-hiz { color: var(--muted, #86868b); }

.arac-retro {
    display: inline-block;
    margin-left: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: #b3261e;
}

.arac-eksen {
    display: inline-block;
    margin-left: .35rem;
    font-size: .7rem;
    letter-spacing: .05em;
    color: var(--muted, #86868b);
}

.arac-dagilim { display: flex; flex-wrap: wrap; gap: 1rem; }

.arac-dagilim-grup {
    flex: 1 1 260px;
    background: var(--bh-krem, #fbfbfd);
    border-radius: 18px;
    padding: .9rem 1.1rem;
    min-width: 0;
}

.arac-dagilim-ad {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #86868b);
    margin-bottom: .4rem;
}

.arac-dagilim-oge {
    display: inline-block;
    margin-right: .9rem;
    font-size: .95rem;
}

/* ─────────────────────────────── dönüş konumu ─────────────────────────────── */

.arac-donus-uyari {
    font-size: .88rem;
    color: var(--muted, #86868b);
    background: #fff;
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 14px;
    padding: .75rem .9rem;
    margin: .5rem 0 0;
}

/* ─────────────────────────────── ay fazı ─────────────────────────────── */

.arac-ay-kart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    background: var(--bh-krem, #fbfbfd);
    border-radius: 24px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.arac-ay-disk { flex: 0 0 auto; }
.arac-ay-disk svg { display: block; }
.arac-ay-metin { flex: 1 1 280px; min-width: 0; }
.arac-ay-baslik { font-size: 1.6rem; margin: 0 0 .35rem; }
.arac-ay-kunye { color: var(--muted, #86868b); margin: 0 0 .75rem; }
.arac-ay-yorum { margin: 0; line-height: 1.7; }

.arac-klasik-not {
    font-size: .9rem;
    color: var(--muted, #86868b);
    line-height: 1.7;
    border-left: 3px solid var(--border, rgba(0, 0, 0, .08));
    padding-left: 1rem;
    margin: 1.5rem 0;
}

/* ─────────────────────────────── hub ─────────────────────────────── */

.arac-hub-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.arac-hub-kart {
    display: block;
    background: var(--bh-krem, #fbfbfd);
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    border-radius: 24px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.arac-hub-kart:hover { background: var(--bh-mint, #e9fff4); }
.arac-hub-glif { font-size: 2rem; display: block; margin-bottom: .5rem; }
.arac-hub-kart h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.arac-hub-kart p { font-size: .92rem; color: var(--muted, #86868b); margin: 0; }

.arac-atif {
    font-size: .8rem;
    color: var(--muted, #86868b);
    margin-top: 2.5rem;
}

/* ─────────────────────────────── CTA ─────────────────────────────── */

.arac-cta { margin-top: 2.5rem; }
.arac-cta-butonlar { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* ─────────────────────────────── duyarlılık ─────────────────────────────── */

@media (max-width: 575px) {
    .arac-form { padding: 1.25rem; border-radius: 20px; }
    .arac-satir { gap: 1rem; }
    .arac-tablo { font-size: .9rem; }
    .arac-ay-kart { padding: 1.25rem; gap: 1.25rem; }
}

/* Dokunmatik cihazda tüm hedefler 44px — masaüstü yoğunluğu değişmez.
   Denetim bulgusu (2026-09-05): atıf linkleri 17px, hap butonlar 40px çıkıyordu. */
@media (pointer: coarse) {
    .arac-girdi { min-height: 44px; }
    .arac-onay { min-height: 44px; }
    .arac-oneri-oge { min-height: 44px; }
    .arac-hub-kart { min-height: 44px; }
    .arac-bolum .hap-btn { min-height: 44px; }
    .arac-atif a { display: inline-block; padding: .75rem 0; }
}