/* Unit Converter Specific Styles */
/* TR: Birim Dönüştürücü'ye özel stiller. EN: Styles specific to the Unit Converter. */

/* Import main styles — TR: Ortak tasarım sistemi. EN: Shared design system. */
@import url('../../../assets/css/main.css');

/* TR: Sadece genişlik override'ı — başlık, kart ve kenar boşlukları ortak main.css'ten gelsin
   (marka mavisi #308fc0, 16px radius, 2.5rem padding). Bu, image converter ile birebir hizalar. */
/* EN: Width override only — header, card, and spacing inherit the shared main.css (brand blue
   #308fc0, 16px radius, 2.5rem padding), matching the image converter exactly. */
.container {
    max-width: 600px; /* TR: odaklı okuma kolonu. EN: focused reading column. */
}

.conversion-section {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* TR: form alanları sıkı; çıktı kartları ayrıca nefes alır (aşağıda). EN: tight for form fields; output cards breathe separately (below). */
}

/* TR: Çıktı kartları form alanlarından biraz daha ayrık dursun (gap 1rem + 0.5rem ≈ 1.5rem). */
/* EN: Output cards sit a little further apart than the form fields (gap 1rem + 0.5rem ≈ 1.5rem). */
.conversion-section > .result,
.conversion-section > .derivation,
.conversion-section > .unit-info {
    margin-top: 0.5rem;
}

/* TR: Flex çocukların min-width:0 olması şart — yoksa geniş KaTeX türetmesi kartı (ve tüm sayfayı)
   viewport'tan geniş yapar; bununla #derivation/#constants içindeki overflow-x:auto devreye girer. */
/* EN: Flex children need min-width:0 so the wide KaTeX derivation can't force the card (and the
   whole page) wider than the viewport; this lets the inner overflow-x:auto actually scroll. */
.conversion-section > * {
    min-width: 0;
}

/* TR: Giriş grubu (etiket + input/select). EN: Input group (label + input/select). */
.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    margin-bottom: 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.input-group input,
#categorySelect {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #f8fafc;
    font-size: 1rem;
    color: #1e293b;
    transition: border-color 0.2s ease;
    width: 100%;
}

.input-group input:focus,
#categorySelect:focus {
    border-color: #2563eb;
    outline: none;
}

/* TR: Kaynak/hedef birim seçenekleri. EN: From/to unit options. */
.conversion-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.select-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.select-group label {
    margin-bottom: 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.select-group select {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #f8fafc;
    font-size: 1rem;
    color: #1e293b;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.select-group select:focus {
    border-color: #2563eb;
    outline: none;
}

/* TR: Açılır ok — native select oku kutunun sağ kenarına yapışıyordu; görüntü dönüştürücüdeki
   özel SVG chevron'un birebir aynısı kullanılır (image-converter.css), böylece iki dönüştürücü
   geniş ekranda aynı görünür. Dolgu rengi değişmez, yalnızca ok. */
/* EN: Dropdown arrow — the native select arrow sat flush against the right edge; use exactly the
   same custom SVG chevron as the image converter (image-converter.css) so both converters look
   identical on wide screens. Only the arrow changes, not the fill. */
#categorySelect,
.select-group select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-right: 2.75rem;
}

/* TR: Değiştir (swap) düğmesi. EN: Swap button. */
.swap-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    font-weight: 500;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.3s ease;
    font-size: 1.25rem;
    margin-top: 1.7rem; /* align with selects, below their labels (vertically centered) */
    /* TR: İkonu dairenin tam ortasına al. EN: Center the icon within the circle. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.swap-btn:hover {
    background: #1d4ed8;
}

/* TR: Döndürme animasyonu — JS tarafından kısaca eklenir/kaldırılır. */
/* EN: Rotation animation — briefly added/removed by JS. */
.swap-btn.rotating {
    transform: rotate(180deg);
}

/* TR: Sonuç bölümü. EN: Result section. */
.result {
    position: relative; /* TR: ondalık seçici mutlak konumlansın diye. EN: anchor for the absolute decimals selector. */
    text-align: center;
    padding: 2.5rem 1.5rem 1.75rem; /* TR: üstte köşe seçiciye yeterli yer. EN: enough top room for the corner selector. */
    background: #f0f7ff;
    border-radius: 12px;
    border: 1px solid #e0e7ff;
}

.result-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.result-hint {
    font-size: 0.95rem;
    color: #64748b;
}

.result-error {
    font-size: 1rem;
    color: #b91c1c;
}

/* TR: Türetme paneli — açık renkli kart, geniş formüller için yatay kaydırma. */
/* EN: Derivation panel — light card, horizontal scroll for wide formulas. */
.derivation {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
}

.derivation h3 {
    font-size: 1rem;
    color: #334155;
    margin-bottom: 1rem;
    text-align: center;
}

#derivation {
    overflow-x: auto;
    padding: 0.5rem 0;
}

/* TR: Sabitler bloğu — türetmeden önce, kullanılan tanımlar. EN: Constants block — definitions used, shown before the derivation. */
.constants-block {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.constants-label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    margin-bottom: 0.5rem;
}

#constants {
    overflow-x: auto;
    padding: 0.25rem 0;
    font-size: 0.95rem;
}

/* TR: "Good to know" bilgi paneli — göz-ucu blurb + genişleyen anlatım. */
/* EN: "Good to know" info panel — at-a-glance blurb + expandable story. */
.unit-info {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.unit-info h3 {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}

.unit-info .info-lead {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 0.75rem;
}

.unit-info .info-item {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.unit-info .info-item strong {
    color: #2563eb;
    font-weight: 600;
}

/* TR: Genişleyen "Learn more" — native <details>. EN: Expandable "Learn more" — native <details>. */
.unit-info .info-more {
    margin-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

/* TR: `> summary` (doğrudan çocuk) — iç içe katmanların birbirini etkilememesi için. */
/* EN: `> summary` (direct child) so nested tiers stay independent of each other. */
.unit-info .info-more > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}

.unit-info .info-more > summary::-webkit-details-marker {
    display: none;
}

/* TR: Küçük ok işareti — yalnızca kendi summary'si açılınca döner. EN: Small caret — rotates only for its own summary. */
.unit-info .info-more > summary::before {
    content: '▸';
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.unit-info .info-more[open] > summary::before {
    transform: rotate(90deg);
}

/* TR: Etiket takası — kapalıyken "more", açıkken "less". EN: Label swap — "more" when closed, "less" when open. */
.unit-info .info-more > summary .lbl-less { display: none; }
.unit-info .info-more[open] > summary .lbl-more { display: none; }
.unit-info .info-more[open] > summary .lbl-less { display: inline; }

.unit-info .info-more p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-top: 0.6rem;
}

/* TR: İkinci (daha derin) katman — hiyerarşiyi göstermek için hafif girinti. EN: Second (deeper) tier — slight indent to show hierarchy. */
.unit-info .info-more .info-more {
    margin-left: 0.9rem;
}

/* TR: Kaynaklar satırı — küçük, sessiz; linkler marka mavisi. EN: Sources line — small, muted; links in brand blue. */
.unit-info .info-sources {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.6;
}

.unit-info .info-sources-label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    color: #94a3b8;
}

.unit-info .info-sources a {
    color: #2563eb;
    text-decoration: none;
}

.unit-info .info-sources a:hover {
    text-decoration: underline;
}

/* TR: Güven notu — sonuç kolonunun en altında sessiz bir dipnot (kaynak satırıyla aynı sessiz ton). */
/* EN: Trust note — a muted footnote at the foot of the results column (same muted tone as the sources line). */
.unit-disclaimer {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* TR: Ondalık seçici — sonuç kutusunun sağ üst köşesinde (dikey yer kaplamaz). */
/* EN: Decimals selector — pinned to the result card's top-right corner (no vertical row). */
.precision-row {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.precision-row label {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* TR: Ondalık seçici de aynı chevron'u kullanır (küçük kutuya göre ölçekli) — tek bir select'in
   native okla kalması diğerlerinin yanında sırıtıyordu. min-width, değer + ok sığsın diye artırıldı. */
/* EN: The decimals selector uses the same chevron, scaled to its small box — leaving one lone select
   on the native arrow looked out of place next to the others. min-width raised so value + arrow fit. */
.precision-row select {
    width: auto;
    min-width: 4.25rem;
    padding: 0.25rem 1.25rem 0.25rem 0.4rem;
    font-size: 0.85rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 12px;
}

/* TR: Aynı birim notu — türetme yerine kısa açıklama. EN: Same-unit note — a short line instead of a derivation. */
.same-unit-note {
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 2rem;
}

footer a {
    color: #2563eb;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* TR: Mobilde From ⇄ To yatay kalır (birim kodları kısa); container/select boşlukları ortak
   main.css @media'sinden gelir, bu yüzden burada ayrı bir kural gerekmez. */
/* EN: On mobile From ⇄ To stays horizontal (unit codes are short); container/select spacing comes
   from the shared main.css @media, so no unit-specific rule is needed here. */

/* TR: Çok dar telefonlarda (sub-390px) uzun etiketler (fl oz (US), kgf·m/s) select'te kırpılıyordu;
   yatay yeri geri kazanmak için select padding'ini, gap'i ve swap düğmesini küçült. 768px mobil
   kurallarına ve masaüstüne dokunmaz. */
/* EN: On very narrow phones (sub-390px) long labels (fl oz (US), kgf·m/s) clipped inside the selects;
   reclaim horizontal room by trimming select padding, the gap and the swap button. Leaves the 768px
   mobile rules and desktop untouched. */
@media (max-width: 430px) {
    .conversion-options { gap: 0.5rem; }
    /* TR: Chevron dar ekranda da kalır, sadece küçülüp kenara yaklaşır (etikete yer açmak için). */
    /* EN: The chevron stays on narrow screens, just smaller and closer in (to leave room for the label). */
    .select-group select {
        padding: 0.8rem 1.8rem 0.8rem 0.55rem;
        font-size: 0.95rem;
        background-position: right 0.5rem center;
        background-size: 14px;
    }
    .swap-btn { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; margin-top: 1.6rem; }
}

/* TR: En dar telefonlar (~320px). Burada "fl oz (US)" gibi en uzun etiketler chevron'la birlikte
   sığmıyordu; yazıyı ve chevron'u bir tık daha küçültüp dolguyu kısarak yer açılır. */
/* EN: Smallest phones (~320px). The longest labels such as "fl oz (US)" no longer fitted alongside
   the chevron; shrink the text and chevron a notch and trim the padding to make room. */
@media (max-width: 360px) {
    .select-group select {
        padding: 0.75rem 1.3rem 0.75rem 0.35rem;
        font-size: 0.85rem;
        background-position: right 0.25rem center;
        background-size: 11px;
    }
}