/* app.css
   Gorsel kurallar. Bu dosyada SABIT renk degeri (hex/rgb) bulunmaz.
   Her renk theme.css / <sirket>.css icinden var() ile okunur.
   Sayfaya ozel kural yazilmaz. */

/* ---------- webfont: Montserrat (kendi sunucumuzdan) ----------
   Yalnizca 500 ve 600 agirliklari; latin, latin-ext ve cyrillic alt kumeleri.
   Kiril, Rusca sayfa icin gerekli. Disaridan (Google CDN vb.) yukleme yok.
   Lisans: SIL Open Font License 1.1 -- bkz. /fonts/montserrat/OFL.txt */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-500.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-cyrillic-500.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-600.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-cyrillic-600.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* ---------- taban ---------- */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    background-color: var(--page-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- basliklar ---------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
}

/* Montserrat yalnizca sayfa basliginda; h2-h6 ve govde --font-sans kalir. */
h1 {
    font-size: 26px;
    font-family: var(--font-brand);
}

h2 { font-size: 22px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

p {
    color: var(--text);
}

small,
.text-muted {
    color: var(--text-muted);
}

.text-faint {
    color: var(--text-faint);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-4) 0;
}

/* ---------- baglantilar ---------- */

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* ---------- form elemanlari ---------- */

label {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
}

/* :where() ozgullugu sifirlar. Aksi halde ucd :not() yuzunden bu kural
   (0,3,1) input:focus kuralindan (0,1,1) daha guclu oluyor ve odaklanmis
   input'un kenarligi marka rengine donmuyordu. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
button,
.btn) {
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    display: block;
}

textarea {
    min-height: 96px;
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
    line-height: 1.5;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    width: auto;
    font-weight: 500;
    cursor: pointer;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.btn:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Dugme gorunumundeki baglantilar (<a class="btn">): genel a:hover kuralinin
   alt cizgisi dugmede istenmez. */
a.btn:hover {
    text-decoration: none;
}

/* ---------- birincil dugme ---------- */

.btn-primary {
    height: 44px;
    font-weight: 500;
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}

.btn-primary:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--brand-contrast);
}

.btn-primary:focus-visible {
    border-color: var(--brand-hover);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- kart ---------- */

.card {
    background-color: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

/* ---------- layout kabugu ---------- */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-brand {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    color: var(--text);
}

/* Dikey marka cizgisi: iki satiri birden kapsar (align-items: stretch). */
.app-brand-bar {
    flex: 0 0 auto;
    align-self: stretch;
    width: 3px;
    min-height: 28px;
    border-radius: 2px;
    background-color: var(--brand);
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.app-brand-name {
    font-family: var(--font-brand);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--text);
}

.app-brand-sub {
    font-family: var(--font-brand);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.3;
    color: var(--text-faint);
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: var(--space-6) var(--space-5);
}

/* dil secici (view component) */

.language-selector ul {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-selector li {
    display: flex;
}

.language-selector img {
    width: 22px;
    height: auto;
    border-radius: 2px;
}

.language-selector .selected img {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.language-selector a:hover img {
    opacity: 0.75;
}

/* ---------- kullanici menusu (view component) ----------
   details/summary uzerine kurulu: acilip kapanmasi icin JavaScript gerekmez.
   Yalnizca giris yapmis kullanicida basilir. */

.user-menu {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

/* Varsayilan ucgen isareti kaldiriliyor; yerine kendi okumuz var. */
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

    .user-menu-trigger::-webkit-details-marker {
        display: none;
    }

    .user-menu-trigger:hover {
        background-color: var(--page-bg);
    }

.user-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Uzun adlar seridi tasirmaz: tek satirda kalir, sonu uc noktaya doner. */
.user-menu-name {
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--text);
}

.user-menu-caret {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-faint);
}

.user-menu[open] .user-menu-caret {
    transform: rotate(180deg);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 20;
    min-width: 200px;
    max-width: 260px;
    padding: var(--space-2);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Tam ad panelde her zaman durur; dar ekranda tetikleyicide gorunmuyor. */
.user-menu-fullname {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    overflow-wrap: anywhere;
}

.user-menu-form {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .user-menu-item:hover {
        background-color: var(--page-bg);
    }

.user-menu-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-muted);
}

/* Dar ekranda yalnizca bas harf dairesi kalir. */
@media (max-width: 599px) {
    .user-menu-name,
    .user-menu-caret {
        display: none;
    }
}

/* ---------- hata sayfasi (404 ve genel hata) ---------- */

.error-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    min-width: 0;
}

.error-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

/* Ikonun halkasi: olcu ve bicim burada, ton uyari renginden. */
.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--warning-border);
    border-radius: 50%;
    background-color: var(--warning-soft);
    color: var(--warning);
}

.error-title {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.error-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Referans numarasi: destek icin gerekli, kullanici icin ikincil. */
.error-ref {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-faint);
    overflow-wrap: anywhere;
}

    .error-ref code {
        font-size: 12px;
        color: inherit;
        overflow-wrap: anywhere;
    }

/* ---------- giris / kimlik sayfalari ---------- */

.auth-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.quick-title {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.quick-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    min-width: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--text);
    text-decoration: none;
}

.quick-card:hover {
    border-color: var(--brand);
    color: var(--text);
    text-decoration: none;
}

.quick-card:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.quick-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--brand);
}

.quick-card-icon svg {
    width: 22px;
    height: 22px;
}

.quick-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.quick-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.quick-card-desc {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
}

.auth-title {
    margin-bottom: var(--space-4);
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
    min-width: 0;
}

.form-actions {
    margin-top: var(--space-4);
}

.btn-block {
    width: 100%;
}

.validation-summary:empty {
    display: none;
}

.validation-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.validation-summary li {
    font-size: 13px;
    color: var(--danger);
}

.validation-summary.validation-summary-errors {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background-color: var(--danger-soft);
    border-radius: var(--radius);
}

/* Bilgi seridi: kart ile ayni kose yaricapi, yumusak zemin ve ince kenarlik.
   Uc ton var; yapi ayni, yalnizca renk uclusu degisir. */
.alert-success,
.alert-warning,
.alert-danger {
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-card);
    font-size: 13px;
    line-height: 1.5;
}

.alert-success {
    border-color: var(--success-border);
    background-color: var(--success-soft);
    color: var(--success);
}

.alert-warning {
    border-color: var(--warning-border);
    background-color: var(--warning-soft);
    color: var(--warning);
}

.alert-danger {
    border-color: var(--danger-border);
    background-color: var(--danger-soft);
    color: var(--danger);
}

.alert-success p,
.alert-warning p,
.alert-danger p {
    margin: 0;
    color: inherit;
}

.alert-success p + p,
.alert-warning p + p,
.alert-danger p + p {
    margin-top: var(--space-1);
}

.auth-alt {
    margin-top: var(--space-4);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Baglantinin ustundeki duz aciklama satiri: tiklanabilir degil. */
.auth-alt-note {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
}

/* Kayit/sifre baglantisi: marka kirmizisiyla basilinca hata mesaji gibi
   gorunuyordu. Yalnizca bu baglanti hedefleniyor; genel <a> kurali ve
   marka rengini kullanan diger ogeler (buton, ikonlar, odak halkasi)
   oldugu gibi kaliyor. */
.auth-alt a {
    color: var(--text-muted);
    text-decoration: none;
}

.auth-alt a:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Baslik + tek satir aciklama blogu. Aciklama varken baslik altindaki
   bosluk daralir, bosluk blogun kendisinden verilir. */
.auth-head {
    margin-bottom: var(--space-4);
}

.auth-head .auth-title {
    margin-bottom: var(--space-2);
}

.auth-intro {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Alan altindaki kucuk yardim metni. */
.help-text {
    margin-top: var(--space-2);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* .field display:flex oldugu icin hidden ozniteligi tek basina yetmez. */
.field[hidden],
.help-text[hidden] {
    display: none;
}

/* ---------- poliçe sorgulama / ödeme sayfalari ---------- */

/* Poliçe no ve plaka alanlari her zaman buyuk harf gorunur. */
.input-upper {
    text-transform: uppercase;
}

/* Kart icindeki bolum basligi. .auth-title sayfa basligi icin ayrildi. */
.card-title {
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.card + .card {
    margin-top: var(--space-4);
}

/* Kart icinde iki bolumu ayiran ince cizgi. */
.card-divider {
    margin: var(--space-4) 0;
}

.error-text {
    color: var(--danger);
}

/* Etiket solda, deger sagda duran bilgi satirlari. Dar ekranda deger alt
   satira kayar; boylece uzun sigortali adlari yatay kaydirma yaratmaz. */
.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}

.info-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
}

.info-value {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.info-value-strong {
    font-weight: 600;
}

/* Kalan borç: marka renginde ve diger satirlardan buyuk. */
.info-value-amount {
    color: var(--brand);
    font-size: 18px;
    font-weight: 600;
}

/* Tutar alani + sagda para birimi eki. Input ile ek tek bir kutu gibi
   gorunur; ortadaki kenarlik tekrarlanmaz. */
.input-affix {
    display: flex;
    min-width: 0;
}

.input-affix input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-affix-text {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background-color: var(--page-bg);
    color: var(--text-muted);
    font-size: 14px;
    white-space: nowrap;
}

/* ---------- bulunan poliçe listesi ---------- */

.policy-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Kartin tamami tek bir baglanti; ayri bir "öde" dugmesi yok. */
.policy-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--text);
    text-decoration: none;
}

.policy-card:hover {
    border-color: var(--brand);
    color: var(--text);
    text-decoration: none;
}

.policy-card:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.policy-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    overflow-wrap: anywhere;
}

.policy-card-type {
    font-size: 12px;
    color: var(--text-muted);
}

.policy-card-no {
    font-size: 15px;
    font-weight: 600;
}

.policy-card-period {
    font-size: 12px;
    color: var(--text-muted);
}

.policy-card-amount {
    flex: 0 0 auto;
    color: var(--brand);
    font-weight: 600;
    white-space: nowrap;
}

.policy-card-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-faint);
}

.policy-card-arrow svg {
    width: 18px;
    height: 18px;
}

/* ---------- musteri portali (poliçe listesi / poliçe detayi) ---------- */

/* Portal sayfalari .auth-wrap'ten genis; iki sutunlu bilgi satirlari ve
   sekmeler 460px'e sigmiyor. */
.portal-wrap {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/* Sayfa basligi. Musteri adi artik baslik seridindeki kullanici menusunde. */
.portal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
}

.portal-head h1 {
    font-size: 22px;
    letter-spacing: -0.015em;
}

/* Baslik altindaki tek satirlik ozet. */
.portal-summary {
    margin-top: calc(var(--space-3) * -1);
    font-size: 13px;
    color: var(--text-muted);
}

/* Geri baglantisi: ok + metin. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: 13px;
}

.back-link:hover {
    color: var(--text);
    text-decoration: none;
}

.back-link svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* ---------- sunucu tarafli sekme / filtre seridi ----------
   Ogeler <a> etiketidir; secim sunucuda query string ile yapilir.
   Yatay kaydirma dar ekranda seridin kendi icinde kalir. */
.tab-bar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
    display: none;
}

.tab-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.tab-link:hover {
    border-color: var(--brand);
    color: var(--text);
    text-decoration: none;
}

.tab-link:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.tab-link.is-active {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--brand-contrast);
}

.tab-link.is-active:hover {
    color: var(--brand-contrast);
}

/* ---------- branşa gore gruplu poliçe listesi ---------- */

.policy-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.policy-group-title {
    margin-bottom: var(--space-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Satirlar kart degil: tek bir yuzey uzerinde ince ayraclarla ayrilir. */
.policy-rows {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.policy-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--text);
    text-decoration: none;
}

.policy-row + .policy-row {
    border-top: 1px solid var(--border);
}

.policy-row:hover {
    background-color: var(--page-bg);
    color: var(--text);
    text-decoration: none;
}

.policy-row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brand);
}

/* Borçlu satirin sol kenarindaki ince marka serdi. Kenarlik yerine
   pseudo-element: satirin dolgusunu ve hizalamasini bozmaz. */
.policy-row-debt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--brand);
}

.policy-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.policy-row-no {
    font-size: 15px;
    font-weight: 600;
}

/* Plaka poliçe numarasinin yaninda, ondan silik. */
.policy-row-plate {
    margin-left: var(--space-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.policy-row-meta {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.policy-row-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-faint);
}

.policy-row-arrow svg {
    width: 18px;
    height: 18px;
}

/* ---------- durum rozeti ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.badge-danger {
    border-color: var(--danger-border);
    background-color: var(--danger-soft);
    color: var(--danger);
}

.badge-success {
    border-color: var(--success-border);
    background-color: var(--success-soft);
    color: var(--success);
}

/* ---------- sekme icerigi: veri satirlari ---------- */

/* Solda aciklama, sagda tutar. Aciklama uzun olabildigi icin .info-row'dan
   ayri: burada asil metin solda ve normal tonda. */
.detail-rows {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0;
}

.detail-row + .detail-row {
    border-top: 1px solid var(--border);
}

.detail-row:first-child {
    padding-top: 0;
}

.detail-row:last-child {
    padding-bottom: 0;
}

.detail-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    overflow-wrap: anywhere;
}

.detail-row-title {
    font-size: 14px;
}

.detail-row-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.detail-row-amount {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Tutari olmayan teminat: "dahil" bilgisi tutar sutununda, silik. */
.detail-row-note {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------- bos durum ---------- */

.empty-state {
    padding: var(--space-5) 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.empty-state p {
    margin: 0;
    color: inherit;
}

.empty-state p + p {
    margin-top: var(--space-1);
}

/* ---------- ikili secim (segmented control) ---------- */

/* fieldset varsayilan kenarlik/dolgusu sifirlanir; min-width fieldset'in
   icerigi tasirmamasi icin gerekli. */
.seg-field {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    min-width: 0;
}

.seg-field > legend {
    padding: 0;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

/* Radio gorsel olarak gizlenir ama odaklanabilir kalir; ekran okuyucu ve
   klavye ile secim calismaya devam eder. position:absolute oldugu icin
   grid hucresi kaplamaz, iki label iki sutunu doldurur. */
.segmented-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.segmented-option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.segmented-option:hover {
    border-color: var(--brand);
}

.segmented-input:checked + .segmented-option {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--brand-contrast);
}

.segmented-input:focus-visible + .segmented-option {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- select ---------- */

/* Ok isareti CSS ile ciziliyor: data-URI SVG kullanilsaydi renk sabit
   yazilmak zorunda kalirdi, boylece var() ile temadan okunuyor. */
.select-wrap {
    position: relative;
    display: block;
    min-width: 0;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-6);
}

.select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-4);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    /* Dikey ortalama transform ile yapiliyor; onceki -6px'lik sihirli
       margin-top kaldirildi. Ok, dondurulmus karenin gorsel merkezine gore
       biraz asagi kaydigi icin 1px yukari alinir. */
    transform: translateY(calc(-50% - 1px)) rotate(45deg);
    pointer-events: none;
}

/* ---------- kart odeme formu ---------- */

/* Kisa alanlarin yan yana durdugu satir (ay / yil / cvv). Sutunlar
   minmax(0,1fr) ile tanimli: icerik ne olursa olsun satir tasmaz, dar
   ekranda da yatay kaydirma olusmaz. */
.field-row {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.field-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Satir icindeki alanlarin kendi alt bosluklari satirin boslugunu
   ikiye katliyordu. */
.field-row > .field {
    margin-bottom: 0;
}

/* Butonun altindaki kilit + 3D Secure notu. justify-content yalnizca kisa
   metni ortalar; metin sarinca tek bir tam genislik oge olup sola yaslaniyordu,
   text-align onu da toparlar. */
.secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
}

.secure-note svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

@media (max-width: 520px) {
    .quick-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- ödeme onayi ---------- */

/* Makbuzun ustundeki onay blogu. Yazdirmada gizlenir. */
.pay-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0 var(--space-2);
    text-align: center;
}

/* Sonuc ikonunun halkasi. Renk her zaman bir varyanttan gelir: taban kural
   yalnizca olcuyu ve bicimi verir. */
.pay-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid;
    border-radius: 50%;
}

.pay-confirm-icon-success {
    border-color: var(--success-border);
    background-color: var(--success-soft);
    color: var(--success);
}

.pay-confirm-icon-warning {
    border-color: var(--warning-border);
    background-color: var(--warning-soft);
    color: var(--warning);
}

.pay-confirm-icon-danger {
    border-color: var(--danger-border);
    background-color: var(--danger-soft);
    color: var(--danger);
}

.pay-confirm-title {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.pay-confirm-amount {
    margin: 0;
    color: var(--success);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Makbuz yuklenirken gosterilen bekleme satiri. */
.receipt-loading {
    text-align: center;
    color: var(--text-muted);
}

.receipt-loading p {
    margin: 0 0 var(--space-1);
}

/* Yan yana ikincil dugmeler. Dar ekranda alt alta gecer. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Biri <button> biri <a>; ikisi de ayni ikincil gorunumde olsun diye baglanti
   rengi ve alt cizgisi notrlenir. */
.btn-row > .btn,
.btn-row > button {
    flex: 1 1 140px;
    color: var(--text);
    text-decoration: none;
}

.btn-row > a.btn:hover {
    border-color: var(--border-strong);
    background-color: var(--page-bg);
    color: var(--text);
}

/* ---------- makbuz ---------- */

.receipt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.receipt-label {
    font-family: var(--font-brand);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Tutarin yaziyla karsiligi; dovizli poliçede cevrimi aciklar. */
.receipt-note {
    margin: var(--space-3) 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

.receipt-foot {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    text-align: center;
}

/* ---------- yazdirma ----------
   Ciktida yalnizca makbuz karti kalir: baslik seridi, dil secici, onay blogu,
   bekleme satiri, dugmeler ve iletisim notu gizlenir. Renkler siyah-beyaz
   baskida okunur olsun diye notrlenir; kart kenarliklarini ve duzenini korur. */

@media print {
    @page {
        margin: 14mm;
    }

    body {
        background-color: var(--print-paper);
        color: var(--print-ink);
    }

    .app-topbar,
    .pay-confirm,
    .receipt-loading,
    .btn-row,
    .secure-note {
        display: none !important;
    }

    /* Ekran duzeni ortalama ve dolgu icin flex kullaniyor; ciktida bunlar
       sayfanin ustunde bos alan birakiyordu. */
    .app-shell,
    .app-main,
    .auth-wrap {
        display: block;
        min-height: 0;
        padding: 0;
        margin: 0;
        max-width: none;
        gap: 0;
    }

    .receipt {
        border: 1px solid var(--print-ink);
        border-radius: 0;
        padding: var(--space-5);
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Marka rengi ve gri tonlar baskida silikleşiyor. */
    .receipt .app-brand-bar {
        background-color: var(--print-ink);
    }

    .receipt .app-brand-name,
    .receipt .app-brand-sub,
    .receipt .receipt-label,
    .receipt .info-label,
    .receipt .info-value,
    .receipt .info-value-amount,
    .receipt .receipt-note,
    .receipt .receipt-foot {
        color: var(--print-ink);
    }

    .receipt .card-divider,
    .receipt .receipt-head,
    .receipt .receipt-foot {
        border-color: var(--print-ink);
    }
}