:root {
    --zemin: #f4f3ef;
    --yuzey: #ffffff;
    --yuzey-2: #f9f8f5;
    --cizgi: #e3e0d8;
    --yazi: #1f2421;
    --soluk: #6b716d;
    --vurgu: #2f5f51;
    --vurgu-koyu: #244a3f;
    --vurgu-yazi: #ffffff;
    --vurgu-zemin: #e6efeb;
    --tehlike: #b3261e;
    --golge: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .04);
    --kose: 10px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --zemin: #151816;
        --yuzey: #1d211f;
        --yuzey-2: #222724;
        --cizgi: #2f3532;
        --yazi: #e7e9e6;
        --soluk: #949b96;
        --vurgu: #6fb39c;
        --vurgu-koyu: #84c4ae;
        --vurgu-yazi: #0f1a16;
        --vurgu-zemin: #22322c;
        --tehlike: #f08b84;
        --golge: none;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ form öğeleri */

label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: 1rem;
}

label .durum {
    font-weight: 400;
    color: var(--soluk);
    font-size: .8rem;
    margin-left: .25rem;
}

input, select {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .6rem .75rem;
    font: inherit;
    font-weight: 400;
    color: var(--yazi);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus {
    border-color: var(--vurgu);
    box-shadow: 0 0 0 3px var(--vurgu-zemin);
}

input.kod {
    font-size: 1.5rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

button, .dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--yazi);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .05s;
}

button:hover, .dugme:hover { background: var(--yuzey-2); }
button:active, .dugme:active { transform: translateY(1px); }
button:focus-visible, .dugme:focus-visible, a:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

button.ana, .dugme.ana {
    color: var(--vurgu-yazi);
    background: var(--vurgu);
    border-color: var(--vurgu);
}
button.ana:hover, .dugme.ana:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }

button.tehlike { color: var(--tehlike); }

button.baglanti {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vurgu);
    font-weight: 400;
    text-decoration: underline;
}

button.ikon {
    padding: .3rem;
    border-color: transparent;
    background: none;
    color: var(--soluk);
}
button.ikon:hover { color: var(--vurgu); background: var(--vurgu-zemin); }
.dugme svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.ikon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------ kart sayfaları */

.kart {
    max-width: 400px;
    margin: 12vh auto 2rem;
    padding: 2rem;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    box-shadow: var(--golge);
}

.kasa .kart { max-width: 480px; margin-top: 6vh; }
.kart > p { color: var(--soluk); }
.kart form > button.ana { width: 100%; margin-top: .25rem; }
.kart .alt { margin: 1.25rem 0 0; text-align: center; font-size: .875rem; }
.kart .dugmeler { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* ------------------------------------------------------------ mesaj ve bildirim */

.mesaj, .bildirim {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: calc(100% - 2rem);
    padding: .65rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: 8px;
    color: var(--vurgu-yazi);
    background: var(--vurgu);
    box-shadow: 0 6px 24px rgb(0 0 0 / .15);
}

.mesaj-hata, .bildirim.hata { background: var(--tehlike); color: #fff; }
.mesaj-bilgi { animation: kaybol .4s 4s forwards; }

@keyframes kaybol {
    to { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------ kasa düzeni */

.ust {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.5rem;
    background: var(--yuzey);
    border-bottom: 1px solid var(--cizgi);
}

.marka {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--yazi);
    text-decoration: none;
    width: 216px;
    flex-shrink: 0;
}

.ust input[type=search] { margin: 0; max-width: 480px; flex: 1; }
.ust button { margin-left: auto; }

.duzen {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    padding: 1.5rem;
}

.listeler { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1rem; }

.listeler a {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 7px;
    color: var(--yazi);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.listeler a:hover { background: var(--yuzey); }
.listeler a.secili { background: var(--vurgu-zemin); color: var(--vurgu-koyu); font-weight: 600; }
.listeler a span { color: var(--soluk); font-size: .8rem; font-variant-numeric: tabular-nums; }

.yeni-liste { display: flex; gap: .4rem; padding: 0 .25rem; }
.yeni-liste input { margin: 0; padding: .45rem .65rem; font-size: .875rem; }

.baslik-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.baslik-satiri h1 { margin: 0; overflow-wrap: anywhere; }

.liste-ayar { margin-bottom: 1rem; font-size: .875rem; }
.liste-ayar summary { cursor: pointer; color: var(--soluk); width: max-content; }
.liste-ayar[open] summary { margin-bottom: .6rem; }
.liste-ayar form { display: inline-flex; gap: .4rem; margin: 0 .5rem .5rem 0; vertical-align: top; }
.liste-ayar input { margin: 0; padding: .45rem .65rem; width: 240px; }

/* ------------------------------------------------------------ kayıt listesi */

.kayitlar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    box-shadow: var(--golge);
    overflow: hidden;
}

.kayitlar:not(:has(li:not([hidden]))) { display: none; }

.kayitlar li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    background: var(--yuzey);
}

.kayitlar li:hover { background: var(--yuzey-2); }

.kayit-bilgi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .6rem;
    min-width: 0;
}

.kayit-bilgi strong { overflow-wrap: anywhere; }

.kayit-bilgi .etiket {
    display: none;
    font-size: .75rem;
    color: var(--soluk);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: 0 .5rem;
}
.karisik .kayit-bilgi .etiket { display: inline-block; }

.kayit-bilgi .kullanici {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: .15rem;
    color: var(--soluk);
    font-size: .875rem;
    min-width: 0;
}
.kayit-bilgi .kullanici > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kayit-dugmeler { display: flex; gap: .4rem; flex-shrink: 0; }

.bos {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--soluk);
    background: var(--yuzey);
    border: 1px dashed var(--cizgi);
    border-radius: var(--kose);
}

/* ------------------------------------------------------------ dar ekran */

@media (max-width: 760px) {
    .ust { padding: .6rem 1rem; gap: .6rem; }
    .marka { width: auto; }
    .duzen { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
    .listeler { flex-direction: row; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
    .listeler a { background: var(--yuzey); border: 1px solid var(--cizgi); padding: .3rem .7rem; }
    .kayitlar li { flex-wrap: wrap; }
    .kayit-dugmeler { width: 100%; }
    .kayit-dugmeler .ana { flex: 1; }
    .liste-ayar input { width: 100%; }
    .liste-ayar form { display: flex; margin-right: 0; }
    .kart { margin: 1.5rem 1rem; padding: 1.5rem; }
}