/* Canlı kur kartı. resources/views/site/partials/rates-card.blade.php ile birlikte kullanılır. */
.mkt {
    --mkt-bg: #F7F6F3;
    --mkt-surface: #FFFFFF;
    --mkt-surface-alt: #FCFBF8;
    --mkt-border: #E7E3DA;
    --mkt-border-soft: #EFEBE2;
    --mkt-row-line: #F4F1EA;
    --mkt-row-hover: #FCFBF6;
    --mkt-chip: #F2EFE8;
    --mkt-ink: #1C1A17;
    --mkt-muted: #6B655C;
    --mkt-faint: #948E83;
    --mkt-dim: #A39C90;
    --mkt-gold: #C8A34A;
    --mkt-gold-solid: #B39828;        /* marka altini (site geneliyle ayni) */
    --mkt-gold-solid-dark: #9C8423;
    --mkt-gold-ink: #8A6A1F;
    --mkt-gold-bg: #FBF3DF;
    --mkt-up: #24704A;
    --mkt-up-bg: #E8F3EC;
    --mkt-down: #A33B2C;
    --mkt-down-bg: #FBEBE7;

    --mkt-radius: 16px;
    --mkt-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --mkt-table-font: "Urbanist", system-ui, -apple-system, sans-serif;

    background: var(--mkt-bg);
    color: var(--mkt-ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 56px 0 80px;
}

/* Hero gibi baska bir bolumun icine gomuldugunde kendi zeminini
   ve dikey bosluklarini birakir. */
.mkt--embedded { background: transparent; padding: 0; }
.mkt--embedded .mkt__wrap { padding: 0; }

.mkt__wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---- Sayfa başlığı ---- */
.mkt__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.mkt__title {
    margin: 0;
    font-size: clamp(28px, 2rem + 1.4vw, 40px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--mkt-ink);
}
.mkt__lede {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mkt-muted);
    max-width: 52ch;
    text-wrap: pretty;
}
/* "Son güncelleme" bloğu (etiket + saat + tarih) sitenin yazı tipini
   kullanır; monospace görünüm sayfanın geri kalanından kopuyordu. */
.mkt__stamp { text-align: right; flex-shrink: 0; font-family: var(--mkt-table-font); }
.mkt__stamp-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mkt-faint);
    margin-bottom: 6px;
}
/* Rakamlar her saniye değiştiği için tabular-nums kalıyor;
   aksi halde saat genişliği oynar. */
.mkt__clock {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.mkt__date { font-size: 13px; color: var(--mkt-faint); margin-top: 4px; }

.mkt__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mkt-faint);
    flex-shrink: 0;
}
.mkt[data-status="live"] .mkt__dot { background: var(--mkt-up); animation: mkt-livepulse 2s ease-in-out infinite; }
.mkt[data-status="down"] .mkt__dot { background: var(--mkt-down); }
@keyframes mkt-livepulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}

/* ---- Kart ---- */
.mkt__card {
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border);
    border-radius: var(--mkt-radius);
    box-shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 12px 32px -18px rgba(28, 26, 23, .18);
    overflow: hidden;
}

.mkt__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mkt-border-soft);
}
.mkt__tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkt__tab {
    appearance: none;
    border: 0;
    padding: 12px 26px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    background: var(--mkt-chip);
    color: var(--mkt-muted);
    transition: background-color 150ms ease, color 150ms ease;
}
.mkt__tab:hover { background: #E6E1D6; color: var(--mkt-ink); }
.mkt__tab:focus-visible { outline: 2px solid var(--mkt-gold-solid); outline-offset: 2px; }
.mkt__tab[aria-selected="true"] { background: var(--mkt-gold-solid); color: #FFFFFF; }
.mkt__tab[aria-selected="true"]:hover { background: var(--mkt-gold-solid-dark); color: #FFFFFF; }

/* ---- Tablo ---- */
.mkt__scroll { overflow-x: auto; }
.mkt__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    font-family: var(--mkt-table-font);
}
.mkt__table thead tr { background: var(--mkt-surface-alt); }
.mkt__table th {
    padding: 15px 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--mkt-muted);
    border-bottom: 1px solid var(--mkt-border-soft);
    text-align: right;
    white-space: nowrap;
}
.mkt__table th:first-child { text-align: left; padding-left: 22px; }

/* Kolon genislikleri (once th'lerde inline duruyordu) */
.mkt__table th:nth-child(1) { width: 34%; }
.mkt__table th:nth-child(2),
.mkt__table th:nth-child(3),
.mkt__table th:nth-child(4) { width: 22%; }
.mkt__table th:last-child { padding-right: 22px; }
.mkt__th--sort { cursor: pointer; user-select: none; }
.mkt__th--sort:hover, .mkt__th--sort:focus-visible { color: var(--mkt-ink); }
.mkt__arrow { font-family: var(--mkt-table-font); margin-left: 6px; }

.mkt__table tbody tr { border-bottom: 1px solid var(--mkt-row-line); }
.mkt__table tbody tr:hover { background: var(--mkt-row-hover); }
.mkt__table td { padding: 19px 18px; text-align: right; vertical-align: middle; }

.mkt__table td.mkt__sym {
    text-align: left;
    padding-left: 22px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sembol hucresi: ikon + kod. Kirpma ic sarmalayicida yapilir ki
   td'nin dikey hizasi ve satir yuksekligi bozulmasin. */
.mkt__sym-inner { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mkt__sym-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.mkt__sym-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: block;
}
/* Bayraklar kare (512x512) tam kanama; yuvarlak maske orani bozmaz. */
.mkt__sym-icon--flag {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px var(--mkt-border-soft), 0 1px 2px rgba(0, 0, 0, .12);
}
/* Kulce/sikke gorselleri saydam zeminli: kirpmadan sigdirilir. Gorsel
   cevresindeki bosluk yuzunden bayraklarla ayni optik agirlik icin
   kutu birkac piksel buyutulur. */
.mkt__sym-icon--gold { width: 34px; height: 34px; object-fit: contain; }

/* Parite: tek yuvarlakta iki bayrak. Ust-sol ucgen taban, alt-sag ucgen
   karsi para birimi; ayirici cizgi ::after'daki dar bantla verilir ki
   iki ucgen arasinda hizalama kaymasi olusmasin. */
.mkt__sym-icon--pair {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.mkt__sym-half {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mkt__sym-half--base { clip-path: polygon(0 0, 100% 0, 0 100%); }
.mkt__sym-half--quote { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Hem ayirici bandi hem de bayraklarin ustunde kalmasi gereken cerceve
   halkasini tasir. */
.mkt__sym-icon--pair::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--mkt-border-soft);
    background: linear-gradient(
        135deg,
        transparent calc(50% - .8px),
        var(--mkt-surface) calc(50% - .8px),
        var(--mkt-surface) calc(50% + .8px),
        transparent calc(50% + .8px)
    );
}
.mkt__sym-name { display: block; font-size: 13.5px; font-weight: 400; color: var(--mkt-muted); margin-top: 3px; }

.mkt__table td.mkt__num {
    font-family: var(--mkt-table-font);
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-ink);
}
.mkt__table td.mkt__time { padding-right: 22px; width: 22%; }
.mkt__time-val {
    font-family: var(--mkt-table-font);
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-muted);
}
.mkt__stale[hidden] { display: none; }
.mkt__stale {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--mkt-gold-ink);
    background: var(--mkt-gold-bg);
    border-radius: 5px;
    padding: 2px 6px;
}

/* Fiyat güncellemesinde sayıyı saran tek seferlik parlama — yalnızca opacity animasyonu */
/* isolation: kendi stacking context'ini kurar; olmazsa z-index:-1 katman
   kartin beyaz zemininin arkasina dusup hic gorunmez */
.mkt__val { position: relative; display: inline-block; isolation: isolate; }
.mkt__val::after {
    content: "";
    position: absolute;
    inset: -5px -8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}
.mkt__val--up::after { background: var(--mkt-up-bg); animation: mkt-flash 1800ms ease-out forwards; }
.mkt__val--down::after { background: var(--mkt-down-bg); animation: mkt-flash 1800ms ease-out forwards; }
@keyframes mkt-flash { from { opacity: .9; } to { opacity: 0; } }

/* ---- İskelet / boş durum ---- */
.mkt__skel {
    display: inline-block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--mkt-row-line), var(--mkt-chip), var(--mkt-row-line));
    background-size: 200% 100%;
    animation: mkt-shimmer 1.4s linear infinite;
    vertical-align: middle;
}
@keyframes mkt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.mkt__empty { padding: 56px 20px; text-align: center; }
.mkt__empty-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.mkt__empty-hint { font-size: 13.5px; color: var(--mkt-faint); }

/* ---- Kart altı ---- */
.mkt__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: var(--mkt-surface-alt);
    border-top: 1px solid var(--mkt-border-soft);
}
.mkt__note {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mkt-faint);
    text-wrap: pretty;
    margin: 0;
}
/* Uyarının ticari olarak en önemli cümlesi; soluk gri metnin içinde
   kaybolmasın diye koyu tonda ve kalın. */
.mkt__note-lead { font-weight: 700; color: var(--mkt-muted); }
/* Her sey yolundayken rozet gizli; yalnizca baglanti sorununda gorunur */
.mkt[data-status="live"] .mkt__status { display: none; }
.mkt__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--mkt-muted);
    white-space: nowrap;
}

@media (max-width: 820px) {
    .mkt { padding: 36px 0 56px; }
    .mkt__wrap { padding: 0 18px; }
    .mkt__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .mkt__stamp { text-align: left; }
    .mkt__stamp-label { justify-content: flex-start; }
    .mkt__bar { padding: 14px; }
    .mkt__tabs { overflow-x: auto; }
    .mkt__foot { flex-direction: column; align-items: flex-start; }

    /* Buyuyen satirlar dar ekranda biraz geri cekilir */
    .mkt__table th { padding: 13px 14px; }
    .mkt__table td { padding: 16px 14px; }
    .mkt__table th:first-child, .mkt__table td.mkt__sym { padding-left: 16px; }
    .mkt__table th:last-child, .mkt__table td.mkt__time { padding-right: 16px; }
    .mkt__table td.mkt__sym { font-size: 19px; }
    .mkt__table td.mkt__num { font-size: 19px; }
    .mkt__sym-inner { gap: 9px; }
    .mkt__sym-icon { width: 26px; height: 26px; }
    .mkt__sym-icon--gold { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .mkt__dot, .mkt__val::after, .mkt__skel { animation: none !important; }
    .mkt__val::after { opacity: 0 !important; }
}

/* Telefonda yalnizca Sembol ve Alis; Satis ve Saat gizlenir.
   Kolonlar dustugu icin min-width kalkar ve tablo yatay kaymadan sigar. */
@media (max-width: 575px) {
    .mkt__table { min-width: 0; }

    .mkt__table th:nth-child(3), .mkt__table td:nth-child(3),
    .mkt__table th:nth-child(4), .mkt__table td:nth-child(4) { display: none; }

    .mkt__table th:nth-child(1) { width: 54%; }
    .mkt__table th:nth-child(2) { width: 46%; }

    /* Tek fiyat kolonu kaldigi icin sayi yeniden buyuyebilir */
    .mkt__table td.mkt__num { font-size: 20.5px; }
}

/* ---- Çeviri paneli ---- */
/* Sekmeler tek bir kartin icinde iki farkli govdeyi degistirir; gizli panelin
   DOM'u durdugu icin geri donuldugunde tablo yeniden kurulmaz. */
.mkt__panel[hidden] { display: none; }

.mkt__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mkt__conv { padding: 28px 22px 24px; }
.mkt__conv-inner { max-width: 620px; margin: 0 auto; }

/* Canli ozet satiri: "1 USD = 48,140 TRY · alis kuru uzerinden" */
.mkt__conv-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 20px;
}
.mkt__conv-rate-val {
    font-family: var(--mkt-table-font);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.005em;
    color: var(--mkt-gold-ink);
}
.mkt__conv-rate-note {
    font-family: var(--mkt-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mkt-faint);
}

/* Birim + tutar tek bir cerceve icinde iki bolme; mobil uygulamadaki anatomi. */
.mkt__conv-row {
    display: grid;
    grid-template-columns: minmax(138px, 38%) 1fr;
    align-items: stretch;
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mkt__conv-row:focus-within {
    border-color: var(--mkt-gold-solid);
    box-shadow: 0 0 0 3px rgba(179, 152, 40, .16);
}

.mkt__conv-unit {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--mkt-border);
    border-radius: 0;
    padding: 20px 34px 20px 18px;
    background-color: var(--mkt-chip);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B655C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    font-family: var(--mkt-table-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--mkt-ink);
    cursor: pointer;
    text-overflow: ellipsis;
    transition: background-color 150ms ease;
}
.mkt__conv-unit:hover:not(:disabled) { background-color: #E6E1D6; }
.mkt__conv-unit:focus { outline: none; }
.mkt__conv-unit:focus-visible { outline: 2px solid var(--mkt-gold-solid); outline-offset: -2px; }

.mkt__conv-amt {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 20px 18px;
    text-align: right;
    font-family: var(--mkt-table-font);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-ink);
}
.mkt__conv-amt:focus { outline: none; }
.mkt__conv-amt::placeholder { color: var(--mkt-dim); font-weight: 600; }

.mkt__conv-unit:disabled,
.mkt__conv-amt:disabled { opacity: .45; cursor: default; }

/* Iki satirin uzerine binen daire — kartin duzlugunu kiran tek derinlik ogesi. */
.mkt__conv-swap {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    margin: -13px auto;
    padding: 0;
    border: 3px solid var(--mkt-surface);
    border-radius: 50%;
    background: var(--mkt-gold-solid);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(28, 26, 23, .45);
    transition: background-color 150ms ease, transform 150ms ease;
}
.mkt__conv-swap:hover:not(:disabled) { background: var(--mkt-gold-solid-dark); }
.mkt__conv-swap:active:not(:disabled) { transform: scale(.94); }
.mkt__conv-swap:focus-visible { outline: 2px solid var(--mkt-gold-solid); outline-offset: 3px; }
.mkt__conv-swap:disabled { opacity: .45; cursor: default; box-shadow: none; }

.mkt__conv-swap-icon { transition: transform 260ms cubic-bezier(.16, 1, .3, 1); }
.mkt__conv-swap[data-flipped="true"] .mkt__conv-swap-icon { transform: rotate(180deg); }

@media (max-width: 575px) {
    .mkt__conv { padding: 22px 16px 20px; }
    .mkt__conv-row { grid-template-columns: minmax(116px, 42%) 1fr; }
    .mkt__conv-unit { font-size: 14.5px; padding: 17px 30px 17px 14px; background-position: right 11px center; }
    .mkt__conv-amt { font-size: 19px; padding: 17px 14px; }
    .mkt__conv-swap { width: 48px; height: 48px; margin: -11px auto; }
    .mkt__conv-rate-val { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .mkt__conv-swap, .mkt__conv-swap-icon { transition: none !important; }
    .mkt__conv-swap:active:not(:disabled) { transform: none; }
}

/* Cevap-önce açıklama satırı: sayfanın hangi soruyu yanıtladığını söyler.
   Ana lede'den bir tık sönük, ama okunur. */
.mkt__lede--detail {
    margin-top: 6px;
    max-width: 62ch;
    opacity: .85;
}

/* Ana sayfadaki gömülü karttan adanmış Canlı Kurlar sayfasına geçiş. */
.mkt__more {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.mkt__more-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--mkt-gold-ink);
    border-color: var(--mkt-gold);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mkt__more-link::after {
    content: "→";
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mkt__more-link:hover,
.mkt__more-link:focus-visible {
    background: var(--mkt-gold-solid);
    border-color: var(--mkt-gold-solid);
    color: #FFFFFF;
}

.mkt__more-link:hover::after,
.mkt__more-link:focus-visible::after {
    transform: translateX(3px);
}

.mkt__more-link:focus-visible {
    outline: 2px solid var(--mkt-gold-solid);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mkt__more-link,
    .mkt__more-link::after {
        transition: none;
    }
}

/* Statik sayfa gövdesi (Hakkımızda / Mobil Uygulama) — içerik dil
   dosyalarından blok HTML olarak gelir. */
.page-content h2 {
    margin: 22px 0 10px;
    font-size: 1.25rem;
}

.page-content ul {
    margin: 0 0 12px 1.1rem;
    list-style: disc;
}

.page-content li {
    margin-bottom: 4px;
}