/* =====================================================================
   Platform360 Satış Haritası — macOS estetiği
   Renkler macOS sistem renklerinden; açık tema varsayılan, koyu tema sistemden ya da elle.
   ===================================================================== */
:root {
    --zemin: #f5f5f7;
    --pencere: #ffffff;
    --pencere-2: #fbfbfd;
    --malzeme: rgba(246, 246, 248, .78);          /* yarı saydam araç çubuğu / ipucu */
    --malzeme-guclu: rgba(255, 255, 255, .86);
    --metin: #1d1d1f;
    --soluk: #6e6e73;
    --cok-soluk: #8e8e93;
    --cizgi: rgba(0, 0, 0, .09);
    --cizgi-guclu: rgba(0, 0, 0, .16);
    --dolgu: rgba(118, 118, 128, .12);             /* segment / girdi zemini */
    --dolgu-uzeri: rgba(118, 118, 128, .2);
    --ana: #007aff;
    --ana-metin: #0066d6;
    --ana-acik: rgba(0, 122, 255, .12);
    --kirmizi: #ff3b30;
    --kirmizi-metin: #d70015;
    --kirmizi-acik: rgba(255, 59, 48, .12);
    --turuncu: #ff9500;
    --turuncu-metin: #c05a00;
    --turuncu-acik: rgba(255, 149, 0, .15);
    --yesil-metin: #1f8a3b;
    --yesil-acik: rgba(52, 199, 89, .15);
    --mor: #af52de;
    --il-bos: #e5e5ea;
    --il-bos-uzeri: #d8d8de;
    --il-1: #cfe3ff;
    --il-2: #8dbcff;
    --il-3: #4a97ff;
    --harita-sinir: #ffffff;
    --harita-yazi: #1d1d1f;
    --harita-hale: rgba(255, 255, 255, .8);
    --golge-kucuk: 0 .5px 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
    --golge: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .05);
    --golge-buyuk: 0 0 0 .5px rgba(0, 0, 0, .12), 0 10px 30px rgba(0, 0, 0, .14), 0 30px 80px rgba(0, 0, 0, .18);
    --odak: 0 0 0 3.5px rgba(0, 122, 255, .35);
    --yaricap: 12px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --zemin: #161618; --pencere: #232325; --pencere-2: #2a2a2d;
        --malzeme: rgba(40, 40, 43, .76); --malzeme-guclu: rgba(44, 44, 47, .88);
        --metin: #f5f5f7; --soluk: #a1a1a6; --cok-soluk: #8e8e93;
        --cizgi: rgba(255, 255, 255, .09); --cizgi-guclu: rgba(255, 255, 255, .16);
        --dolgu: rgba(118, 118, 128, .24); --dolgu-uzeri: rgba(118, 118, 128, .34);
        --ana: #0a84ff; --ana-metin: #409cff; --ana-acik: rgba(10, 132, 255, .2);
        --kirmizi: #ff453a; --kirmizi-metin: #ff6961; --kirmizi-acik: rgba(255, 69, 58, .18);
        --turuncu: #ff9f0a; --turuncu-metin: #ffb340; --turuncu-acik: rgba(255, 159, 10, .18);
        --yesil-metin: #30d158; --yesil-acik: rgba(48, 209, 88, .16); --mor: #bf5af2;
        --il-bos: #3a3a3d; --il-bos-uzeri: #48484c; --il-1: #1b3a5e; --il-2: #1f5ca3; --il-3: #0a84ff;
        --harita-sinir: #232325; --harita-yazi: #f5f5f7; --harita-hale: rgba(20, 20, 22, .75);
        --golge-kucuk: 0 .5px 1px rgba(0, 0, 0, .4);
        --golge: 0 0 0 .5px rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .25);
        --golge-buyuk: 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .5);
        --odak: 0 0 0 3.5px rgba(10, 132, 255, .45);
        color-scheme: dark;
    }
}

:root[data-tema="koyu"] {
    --zemin: #161618; --pencere: #232325; --pencere-2: #2a2a2d;
    --malzeme: rgba(40, 40, 43, .76); --malzeme-guclu: rgba(44, 44, 47, .88);
    --metin: #f5f5f7; --soluk: #a1a1a6; --cok-soluk: #8e8e93;
    --cizgi: rgba(255, 255, 255, .09); --cizgi-guclu: rgba(255, 255, 255, .16);
    --dolgu: rgba(118, 118, 128, .24); --dolgu-uzeri: rgba(118, 118, 128, .34);
    --ana: #0a84ff; --ana-metin: #409cff; --ana-acik: rgba(10, 132, 255, .2);
    --kirmizi: #ff453a; --kirmizi-metin: #ff6961; --kirmizi-acik: rgba(255, 69, 58, .18);
    --turuncu: #ff9f0a; --turuncu-metin: #ffb340; --turuncu-acik: rgba(255, 159, 10, .18);
    --yesil-metin: #30d158; --yesil-acik: rgba(48, 209, 88, .16); --mor: #bf5af2;
    --il-bos: #3a3a3d; --il-bos-uzeri: #48484c; --il-1: #1b3a5e; --il-2: #1f5ca3; --il-3: #0a84ff;
    --harita-sinir: #232325; --harita-yazi: #f5f5f7; --harita-hale: rgba(20, 20, 22, .75);
    --golge-kucuk: 0 .5px 1px rgba(0, 0, 0, .4);
    --golge: 0 0 0 .5px rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .25);
    --golge-buyuk: 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .5);
    --odak: 0 0 0 3.5px rgba(10, 132, 255, .45);
    color-scheme: dark;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ana-metin); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.02em; }
h1 { font-size: 1.55rem; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: .8rem; font-weight: 600; color: var(--soluk); letter-spacing: 0; }
p { margin: 0 0 .8rem; }
code { font: 12.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--dolgu); padding: .1rem .35rem; border-radius: 5px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: .85rem; }
.kirmizi { color: var(--kirmizi-metin); }
:focus-visible { outline: none; box-shadow: var(--odak); border-radius: 7px; }

/* ---------- Araç çubuğu (üst) ---------- */
.ust {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
    height: 52px; padding: 0 1rem;
    background: var(--malzeme);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid var(--cizgi-guclu);
}
.logo { display: flex; align-items: center; gap: .55rem; color: var(--metin); white-space: nowrap; min-width: 0; }
.logo:hover { text-decoration: none; }
.logo-metin { font-weight: 650; }
.logo-metin span { color: var(--soluk); font-weight: 500; }
.uygulama-simge {
    width: 26px; height: 26px; flex: none; border-radius: 7px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 16 10.5a2.5 2.5 0 0 1 0 5z' fill='white'/%3E%3C/svg%3E") center / 100% no-repeat,
        linear-gradient(#4aa3ff, #006be6);
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .15);
}
.uygulama-simge.buyuk { width: 64px; height: 64px; border-radius: 15px; }

/* Segmentli denetim (macOS NSSegmentedControl) */
.segment {
    display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px;
    background: var(--dolgu);
}
.segment > a, .segment > button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 26px; padding: 0 .8rem; border: 0; border-radius: 7px;
    background: transparent; color: var(--metin); font: inherit; font-size: 13px; font-weight: 500;
    white-space: nowrap; cursor: pointer; text-decoration: none;
}
.segment > a:hover, .segment > button:hover { background: var(--dolgu); text-decoration: none; }
.segment > a.aktif {
    background: var(--pencere); box-shadow: 0 .5px 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .1);
    font-weight: 600;
}
:root[data-tema="koyu"] .segment > a.aktif { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .segment > a.aktif { background: #636366; } }

.ust-sag { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.ust-sag form { margin: 0; }
.kullanici { color: var(--soluk); font-size: 13px; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.simge-dugme {
    width: 30px; height: 30px; border-radius: 7px; border: 0; padding: 0;
    background: transparent; color: var(--soluk); cursor: pointer; font-size: 15px; line-height: 1;
}
.simge-dugme:hover { background: var(--dolgu); color: var(--metin); }
.tema-dugme::before { content: "◐"; }
.tema-dugme[data-simge="koyu"]::before { content: "☀︎"; }
.tema-dugme.yuzen { position: fixed; top: 1rem; right: 1rem; z-index: 5; }

/* ---------- Sayfa ve pencereler ---------- */
.sayfa { max-width: 1520px; margin: 0 auto; padding: 1.25rem; }
.kart, .pencere {
    background: var(--pencere); border-radius: var(--yaricap);
    box-shadow: var(--golge); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.kart.dar { max-width: 580px; margin-left: auto; margin-right: auto; }
.baslik-satiri { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.baslik-satiri h1 { margin: 0; }
.bildirim {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .65rem .9rem; border-radius: 10px; margin-bottom: 1rem; font-size: 13.5px;
}
.bildirim::before { font-weight: 700; }
.bildirim.basari { background: var(--yesil-acik); color: var(--yesil-metin); }
.bildirim.basari::before { content: "✓"; }
.bildirim.hata { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.bildirim.hata::before { content: "!"; }

/* ---------- Düğmeler ---------- */
.dugme, button.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: 30px; padding: 0 .9rem; border-radius: 7px; border: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ana) 88%, white), var(--ana));
    color: #fff; font: inherit; font-size: 13px; font-weight: 550;
    box-shadow: 0 .5px 1px rgba(0, 0, 0, .2), inset 0 .5px 0 rgba(255, 255, 255, .25);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: filter .12s, transform .06s;
}
.dugme:hover { filter: brightness(1.06); text-decoration: none; }
.dugme:active { filter: brightness(.94); transform: scale(.98); }
.dugme:disabled { opacity: .5; cursor: default; }
.dugme.ikincil {
    background: var(--pencere); color: var(--metin); font-weight: 500;
    box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 .5px 1.5px rgba(0, 0, 0, .1);
}
:root[data-tema="koyu"] .dugme.ikincil { background: #3a3a3c; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .dugme.ikincil { background: #3a3a3c; } }
.dugme.tehlike { background: var(--pencere); color: var(--kirmizi-metin); font-weight: 500; box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 .5px 1.5px rgba(0, 0, 0, .1); }
.dugme.tehlike:hover { background: var(--kirmizi-acik); filter: none; }
.dugme.kucuk { height: 24px; padding: 0 .6rem; font-size: 12px; border-radius: 6px; }
.bag, .bag-dugme { background: none; border: 0; padding: 0; color: var(--ana-metin); font: inherit; cursor: pointer; }
.bag:hover { text-decoration: underline; }
form.satir-ici { display: inline; margin: 0; }

/* ---------- Form alanları ---------- */
.alan { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.alan label { font-weight: 550; font-size: 13px; }
input[type=text], input[type=password], input[type=date], input[type=search], select, textarea {
    font: inherit; font-size: 13.5px; color: var(--metin);
    background: var(--pencere); border: 0; border-radius: 7px;
    box-shadow: 0 0 0 .5px var(--cizgi-guclu), inset 0 .5px 1px rgba(0, 0, 0, .06);
    padding: 0 .6rem; height: 30px; width: 100%; min-width: 0;
    transition: box-shadow .15s;
}
:root[data-tema="koyu"] :is(input[type=text], input[type=password], input[type=date], input[type=search], select, textarea) { background: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) :is(input[type=text], input[type=password], input[type=date], input[type=search], select, textarea) { background: rgba(255, 255, 255, .06); } }
select { padding-right: 1.6rem; }
select option { background: var(--pencere); color: var(--metin); }
textarea { height: auto; min-height: 5rem; padding: .45rem .6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ana), var(--odak); }
.alan-hata, .field-validation-error { color: var(--kirmizi-metin); font-size: 12.5px; }
.validation-summary-errors ul { margin: 0 0 1rem; padding: .6rem 1rem .6rem 2rem; background: var(--kirmizi-acik); color: var(--kirmizi-metin); border-radius: 10px; }
.validation-summary-valid { display: none; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.form-dugmeler { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.yatay-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.yatay-form .alan { margin-bottom: 0; flex: 1 1 180px; }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 1rem; align-items: start; }

/* ---------- Tablolar ---------- */
.tablo-kap { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; }
.tablo th, .tablo td { text-align: left; padding: .6rem .6rem; border-bottom: .5px solid var(--cizgi); vertical-align: middle; }
.tablo th { font-size: 12px; color: var(--soluk); font-weight: 550; }
.tablo tbody tr:hover { background: var(--pencere-2); }
.tablo tr:last-child td { border-bottom: 0; }
.tablo td.islemler { text-align: right; white-space: nowrap; }
.tablo td.islemler > * + * { margin-left: .3rem; }
.tablo a { color: var(--metin); }
.tablo a:hover { color: var(--ana-metin); text-decoration: none; }
.bos { text-align: center; color: var(--soluk); padding: 2rem 1rem; }

.rozet {
    display: inline-flex; align-items: center; height: 19px; padding: 0 .5rem; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: var(--dolgu); color: var(--soluk);
}
.rozet.ana { background: var(--ana-acik); color: var(--ana-metin); }
.rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.rozet.sari { background: var(--turuncu-acik); color: var(--turuncu-metin); }

/* ---------- Giriş ---------- */
.giris-kap { min-height: calc(100vh - 2.5rem); display: grid; place-items: center; }
.giris { width: 100%; max-width: 360px; padding: 2rem 1.75rem 1.5rem; box-shadow: var(--golge-buyuk); border-radius: 14px; }
.giris-baslik { text-align: center; margin-bottom: 1.25rem; }
.giris-baslik .uygulama-simge { display: block; margin: 0 auto .8rem; }
.giris-baslik h1 { margin: 0 0 .2rem; font-size: 1.3rem; }
.giris-baslik p { margin: 0; font-size: 13px; }
.giris .dugme { width: 100%; height: 32px; margin-top: .3rem; }
.kurulum-not { margin: 1rem 0 0; text-align: center; }

/* ---------- Ana sayfa ---------- */
.ana-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 1rem; align-items: start; }
.pencere.harita-kart { padding: 0; overflow: hidden; position: relative; }
.arac-cubugu {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    min-height: 50px; padding: .5rem .9rem;
    background: var(--malzeme); border-bottom: .5px solid var(--cizgi);
}
.arac-cubugu h1, .arac-cubugu h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--metin); }
.baslik-grup { display: flex; align-items: baseline; gap: .6rem; min-width: 0; flex: 1; }
.baslik-grup .soluk { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geri span { font-size: 17px; line-height: 1; margin-top: -2px; }
.arac-grup > button { padding: 0; width: 30px; color: var(--soluk); }
.arac-grup > button:hover { color: var(--metin); }

.il-seridi {
    display: inline-flex; align-items: center; gap: .45rem; height: 26px; padding: 0 .7rem;
    border: 0; border-radius: 999px; background: color-mix(in srgb, var(--mor) 14%, transparent);
    color: var(--metin); font: inherit; font-size: 12.5px; cursor: pointer; max-width: 100%;
}
.il-seridi i { width: 8px; height: 8px; border-radius: 50%; background: var(--mor); flex: none; }
.il-seridi .il-seridi-ad { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-seridi:hover { background: color-mix(in srgb, var(--mor) 22%, transparent); }

.harita-kap { position: relative; height: clamp(380px, 64vh, 760px); background: var(--pencere); }
.harita-kaydir { height: 100%; }
.harita-kap svg { display: block; width: 100%; height: 100%; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.harita-kap.yakin svg { cursor: grab; touch-action: none; }
.harita-kap.yakin svg:active { cursor: grabbing; }
.yukleniyor { position: absolute; inset: 0; display: grid; place-items: center; color: var(--soluk); }

/* Harita şekilleri */
.alan-sekil {
    fill: var(--il-bos); stroke: var(--harita-sinir); stroke-width: 1; stroke-linejoin: round;
    cursor: pointer; transition: fill .2s, opacity .35s;
}
.alan-sekil:focus, .alan-sekil:focus-visible { outline: none; box-shadow: none; }
.alan-sekil[data-ton="1"] { fill: var(--il-1); }
.alan-sekil[data-ton="2"] { fill: var(--il-2); }
.alan-sekil[data-ton="3"] { fill: var(--il-3); }
.alan-sekil:hover { fill: var(--il-bos-uzeri); }
.alan-sekil[data-ton]:hover { filter: brightness(1.05) saturate(1.1); }
.hale path { fill: none; stroke: var(--mor); stroke-width: 7; stroke-linejoin: round; opacity: .8; }
.cerceveler path { fill: none; stroke: var(--mor); stroke-width: 2.4; stroke-linejoin: round; pointer-events: none; }
.vurgu path { fill: none; stroke: var(--metin); stroke-width: 1.8; stroke-linejoin: round; pointer-events: none; }
.secim path { fill: color-mix(in srgb, var(--ana) 14%, transparent); stroke: var(--ana); stroke-width: 2.6; stroke-linejoin: round; pointer-events: none; }
.alan-yazi {
    fill: var(--harita-yazi); font-weight: 600; text-anchor: middle; dominant-baseline: central; letter-spacing: -.01em;
    pointer-events: none; paint-order: stroke; stroke: var(--harita-hale); stroke-linejoin: round;
}
.gecikme-nokta { fill: var(--kirmizi); stroke: var(--harita-sinir); pointer-events: none; }
.belde-rozet { pointer-events: none; }
.belde-rozet circle { fill: var(--pencere); stroke: var(--ana); }
.belde-rozet text { fill: var(--ana-metin); font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* Geçiş animasyonu */
svg .yazilar, svg .cerceveler, svg .hale { transition: opacity .2s; }
svg .sekiller { transition: opacity .35s ease; }
svg.gecis .yazilar, svg.gecis .cerceveler, svg.gecis .vurgu, svg.gecis-geri .yazilar { opacity: 0; }
svg.gecis .alan-sekil:not(.hedef) { opacity: .12; }
svg.beliriyor .sekiller, svg.beliriyor .yazilar, svg.beliriyor .hale { opacity: 0; transition: none; }

/* İpucu (macOS popover malzemesi) */
.ipucu {
    position: absolute; left: 0; top: 0; z-index: 15; width: 270px; pointer-events: none;
    padding: .7rem .8rem; border-radius: 12px; font-size: 12.5px;
    background: var(--malzeme-guclu);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    box-shadow: var(--golge-buyuk);
    opacity: 0; visibility: hidden; transform-origin: top left;
    transition: opacity .14s ease, visibility 0s linear .14s, scale .14s ease; scale: .97;
}
.ipucu.gorunur { opacity: 1; visibility: visible; scale: 1; transition: opacity .12s ease, visibility 0s, scale .12s ease; }
.ipucu-baslik { font-size: 14px; font-weight: 700; margin-bottom: .35rem; }
.ipucu-bolum { padding: .4rem 0; border-top: .5px solid var(--cizgi); }
.ipucu-alt { font-weight: 600; margin-bottom: .2rem; }
.ipucu ul { list-style: none; margin: 0; padding: 0; }
.ipucu li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .12rem 0; }
.ipucu-sayilar { display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: var(--soluk); }
.ipucu-sayilar b { color: var(--metin); }
.ipucu-sayilar .kirmizi b { color: inherit; }
.ipucu-not { color: var(--cok-soluk); font-size: 11.5px; padding-top: .35rem; border-top: .5px solid var(--cizgi); }

/* Harita altı */
.harita-alt { padding: .6rem .9rem .75rem; border-top: .5px solid var(--cizgi); display: flex; flex-direction: column; gap: .55rem; }
.lejant { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: 12px; color: var(--soluk); }
.lejant > span { display: inline-flex; align-items: center; gap: .35rem; }
.lejant i { width: 12px; height: 12px; border-radius: 3.5px; display: inline-block; box-shadow: inset 0 0 0 .5px var(--cizgi-guclu); }
.lejant i.nokta { border-radius: 50%; width: 9px; height: 9px; background: var(--kirmizi); box-shadow: none; }
.lejant i.belde { border-radius: 50%; background: var(--pencere); box-shadow: inset 0 0 0 2px var(--ana); }
.lejant i.cerceve { background: transparent; box-shadow: inset 0 0 0 2px var(--mor); }
.eylemler { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ozet-satir { color: var(--soluk); font-size: 13px; margin-right: auto; }
.ozet-satir b { color: var(--metin); font-weight: 650; }
.ozet-satir b.kirmizi { color: var(--kirmizi-metin); }

/* Tam ekran */
.harita-kart.tam-ekran { display: flex; flex-direction: column; border-radius: 0; margin: 0; }
.harita-kart.tam-ekran .harita-kap { flex: 1; height: auto; min-height: 0; }
.harita-kart.tam-ekran:not(:fullscreen) { position: fixed; inset: 0; z-index: 50; }
body.harita-tam { overflow: hidden; }

/* Bakım listesi (kaynak listesi görünümü) */
.bakim-kart { position: sticky; top: calc(52px + 1rem); max-height: calc(100vh - 52px - 2rem); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bakim-kart .aciklama { padding: .6rem 1rem 0; margin: 0; }
#bakimListesi { overflow-y: auto; padding: 0 .5rem .5rem; }
.bakim-liste { list-style: none; margin: 0; padding: 0; }
.bakim-grup {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 700; color: var(--cok-soluk); padding: .8rem .6rem .3rem;
}
.bakim-grup span { font-weight: 600; background: var(--dolgu); color: var(--soluk); border-radius: 999px; padding: 0 .45rem; }
.bakim-grup.kirmizi { color: var(--kirmizi-metin); }
.bakim-grup.kirmizi span { background: var(--kirmizi-acik); color: var(--kirmizi-metin); }
.bakim-satir a {
    display: grid; grid-template-columns: 10px 1fr auto; gap: .05rem .55rem; align-items: center;
    padding: .5rem .6rem; border-radius: 8px; color: var(--metin);
}
.bakim-satir a:hover { background: var(--dolgu); text-decoration: none; }
.durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--turuncu); grid-row: 1 / span 2; }
.bakim-satir.gecikti .durum-nokta { background: var(--kirmizi); }
.bakim-satir .bel { font-weight: 600; font-size: 13.5px; }
.bakim-satir .mod { color: var(--soluk); font-size: 12.5px; grid-column: 2; }
.bakim-satir .tarih { text-align: right; font-size: 12.5px; white-space: nowrap; color: var(--soluk); grid-row: 1; grid-column: 3; }
.bakim-satir .gun { text-align: right; font-size: 12px; font-weight: 600; white-space: nowrap; grid-column: 3; color: var(--turuncu-metin); }
.bakim-satir.gecikti .gun, .bakim-satir.gecikti .tarih { color: var(--kirmizi-metin); }

/* ---------- Modal (macOS sheet) ---------- */
.modal {
    width: min(620px, calc(100vw - 2rem)); max-height: min(86vh, 900px);
    padding: 0; border: 0; border-radius: 14px;
    background: var(--pencere); color: var(--metin); box-shadow: var(--golge-buyuk);
    flex-direction: column; overflow: hidden;
}
.modal[open] { display: flex; animation: modal-ac .22s cubic-bezier(.2, .9, .3, 1.1); }
.modal::backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes modal-ac { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.modal-ust {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: 1rem 1.1rem .8rem; border-bottom: .5px solid var(--cizgi); background: var(--malzeme);
}
.modal-ust h2 { margin: 0 0 .15rem; font-size: 1.25rem; }
.kapat {
    width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--dolgu); color: var(--soluk); font-size: 12px; line-height: 1;
}
.kapat:hover { background: var(--dolgu-uzeri); color: var(--metin); }
.modal-govde { padding: .9rem 1.1rem; overflow-y: auto; }
.modal-alt { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.1rem; border-top: .5px solid var(--cizgi); background: var(--pencere-2); }
.grup { margin-bottom: 1.1rem; }
.grup > h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem .15rem; }
.sayac { background: var(--dolgu); border-radius: 999px; padding: 0 .45rem; font-size: 11px; }

.bel-kart { background: var(--pencere-2); border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--cizgi-guclu); padding: .7rem .8rem; margin-bottom: .6rem; }
.bel-kart-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .45rem; }
.bel-ad { font-weight: 650; font-size: 14px; }
.modul-satirlar { list-style: none; margin: 0 0 .5rem; padding: 0; }
.modul-satirlar li {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem .75rem; flex-wrap: wrap;
    padding: .45rem 0; border-top: .5px solid var(--cizgi);
}
.m-ad { font-weight: 550; }
.m-sag { display: flex; align-items: center; gap: .45rem; }
.bos-satir { padding: .3rem 0; margin: 0 0 .4rem; }
.satir-form { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin: 0; }
.satir-form select, .satir-form input[type=text] { flex: 1 1 180px; width: auto; }
.satir-form input[type=date] { flex: 0 1 150px; width: auto; }
.bel-kart-ic {
    margin: .15rem 0 0 .35rem; padding: .1rem 0 .1rem .85rem;
    border-left: 2px solid color-mix(in srgb, var(--ana) 35%, transparent);
}
.bel-kart-etiket { display: flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 600; color: var(--cok-soluk); margin: .2rem 0 .1rem; }
.bel-kart-ic .modul-satirlar li:first-child { border-top: 0; }
.bel-kart .satir-form { padding-top: .55rem; border-top: .5px solid var(--cizgi); }

.liste { border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--cizgi-guclu); overflow: hidden; background: var(--pencere-2); }
.liste-satir {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .55rem .8rem; border: 0; border-top: .5px solid var(--cizgi); background: transparent;
    color: var(--metin); font: inherit; cursor: pointer;
}
.liste-satir:first-child { border-top: 0; }
.liste-satir:hover { background: var(--dolgu); }
.liste-ana { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.liste-ad { font-weight: 600; }
.liste-satir .ok { color: var(--cok-soluk); font-size: 18px; line-height: 1; }
details.acilir { margin-top: .2rem; }
details.acilir summary { cursor: pointer; color: var(--ana-metin); font-weight: 550; padding: .3rem .15rem; list-style: none; }
details.acilir summary::before { content: "＋ "; }
details.acilir[open] summary::before { content: "－ "; }
details.acilir summary::-webkit-details-marker { display: none; }
details.acilir .satir-form { margin-top: .35rem; }

/* Belediye detayı */
.bilgi-satir { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; align-items: center; color: var(--soluk); margin-top: .35rem; }
.bilgi-satir b { color: var(--metin); font-weight: 600; }
details.gecmis summary { cursor: pointer; color: var(--soluk); font-size: 12.5px; }
details.gecmis ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: 12.5px; color: var(--soluk); }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
    .ana-izgara, .iki-sutun { grid-template-columns: minmax(0, 1fr); }
    .bakim-kart { position: static; max-height: none; }
}
@media (max-width: 820px) {
    .ust { grid-template-columns: 1fr auto; height: auto; padding: .45rem .75rem; row-gap: .4rem; }
    .menu { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; justify-self: stretch; }
    .menu > a { flex: 1; }
    .kullanici { display: none; }
}
@media (max-width: 720px) {
    .sayfa { padding: .75rem; }
    .kart { padding: .9rem; }
    h1 { font-size: 1.3rem; }
    .harita-kap { height: 60vh; min-height: 340px; }
    .harita-kap:not(.ilce) .harita-kaydir { overflow-x: auto; }
    .harita-kap:not(.ilce) svg { min-width: 760px; }
    .harita-kart.tam-ekran .harita-kap:not(.ilce) svg { min-width: 0; }
    .arac-cubugu { padding: .5rem .6rem; gap: .5rem; }
    .baslik-grup .soluk { display: none; }
    .modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
    .m-sag { width: 100%; justify-content: space-between; }

    /* Tablolar kart görünümüne geçer */
    .tablo.duyarli thead { display: none; }
    .tablo.duyarli tr { display: block; border-bottom: .5px solid var(--cizgi); padding: .5rem 0; }
    .tablo.duyarli tr:last-child { border-bottom: 0; }
    .tablo.duyarli td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; text-align: right; }
    .tablo.duyarli td::before { content: attr(data-baslik); color: var(--soluk); font-size: 12.5px; text-align: left; }
    .tablo.duyarli td.islemler { justify-content: flex-end; padding-top: .4rem; }
    .tablo.duyarli td.islemler::before { content: none; }
}
/* =====================================================================
   Animasyonlar ve geri bildirim
   ===================================================================== */

/* Sayfa geçişi: bağlantıya tıklayınca içerik solar (site.js), yeni sayfada kartlar sırayla belirir.
   (Tarayıcının sayfalar arası View Transition özelliği Chromium'da kararsız olduğu için kullanılmadı.) */
body.sayfa-cikiyor .sayfa { opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; }
body.sayfa-cikiyor .menu > a.aktif:not(.hedef) { background: transparent; box-shadow: none; transition: background .14s, box-shadow .14s; }
.segment > a.hedef { background: var(--pencere); box-shadow: 0 .5px 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .1); transition: background .14s, box-shadow .14s; }
@keyframes solarak-cik { to { opacity: 0; } }
@keyframes yukselerek-gir { from { opacity: 0; transform: translateY(6px); } }

/* Sayfa açılışında kartlar sırayla belirir */
.sayfa > .kart, .sayfa > .pencere, .sayfa > .baslik-satiri, .sayfa > .ana-izgara > *, .sayfa > .iki-sutun > *, .giris {
    animation: yukselerek-gir .38s cubic-bezier(.2, .8, .2, 1) both;
}
.sayfa > :nth-child(2), .ana-izgara > :nth-child(2), .iki-sutun > :nth-child(2) { animation-delay: .05s; }
.sayfa > :nth-child(3) { animation-delay: .1s; }
.sayfa > :nth-child(4) { animation-delay: .15s; }
.tablo tbody tr { animation: solarak-gir .3s ease both; }
.tablo tbody tr:nth-child(2) { animation-delay: .03s; } .tablo tbody tr:nth-child(3) { animation-delay: .06s; }
.tablo tbody tr:nth-child(4) { animation-delay: .09s; } .tablo tbody tr:nth-child(5) { animation-delay: .12s; }
.tablo tbody tr:nth-child(n+6) { animation-delay: .15s; }
@keyframes solarak-gir { from { opacity: 0; } }

/* Tema değişimi: düğmeden yayılan daire (View Transitions), yoksa renk geçişi */
.tema-gecisi, .tema-gecisi * { transition: background-color .3s, color .3s, border-color .3s, fill .3s, box-shadow .3s !important; }
.tema-gecisi-vt::view-transition-old(root) { animation: none; }
.tema-gecisi-vt::view-transition-new(root) { animation: tema-yayil .5s cubic-bezier(.4, 0, .2, 1); }
@keyframes tema-yayil { from { clip-path: circle(0 at var(--tema-x) var(--tema-y)); } to { clip-path: circle(150vmax at var(--tema-x) var(--tema-y)); } }

/* Sunucu mesajı betik çalışınca kayan bildirime dönüşür */
.js [data-bildirim] { display: none; }

/* Dialog açılış / kapanış (modal ve onay penceresi) */
dialog.kapaniyor { animation: dialog-kapan .17s ease-in both !important; }
dialog.kapaniyor::backdrop { animation: solarak-cik .17s ease-in both; }
.modal::backdrop, .uyari::backdrop { animation: solarak-gir .2s ease both; }
@keyframes dialog-kapan { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.modal .modal-govde, .modal .modal-ust > div, .modal .modal-alt { transition: opacity .14s ease, transform .14s ease; }
.modal.icerik-degisiyor .modal-govde, .modal.icerik-degisiyor .modal-ust > div, .modal.icerik-degisiyor .modal-alt { opacity: 0; transform: translateX(-8px); }

/* macOS uyarı penceresi (onay) */
.uyari {
    width: min(300px, calc(100vw - 2rem)); padding: 1.35rem 1.1rem 1rem; border: 0; border-radius: 14px;
    text-align: center; color: var(--metin);
    background: var(--malzeme-guclu);
    -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    box-shadow: var(--golge-buyuk);
}
.uyari[open] { animation: uyari-ac .28s cubic-bezier(.2, 1.2, .3, 1) both; }
.uyari::backdrop { background: rgba(0, 0, 0, .22); }
@keyframes uyari-ac { from { opacity: 0; transform: scale(.88); } }
.uyari .uygulama-simge { display: block; width: 52px; height: 52px; border-radius: 12px; margin: 0 auto .75rem; }
.uyari-baslik { font-size: 14px; font-weight: 700; margin: 0 0 .35rem; line-height: 1.3; }
.uyari-mesaj { font-size: 12.5px; color: var(--soluk); margin: 0 0 1rem; line-height: 1.4; }
.uyari-dugmeler { display: flex; gap: .5rem; }
.uyari-dugmeler .dugme { flex: 1; height: 30px; }
.dugme.tehlike-dolu { background: linear-gradient(180deg, color-mix(in srgb, var(--kirmizi) 88%, white), var(--kirmizi)); }

/* Kayan bildirimler */
#bildirimler {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem;
    width: min(380px, calc(100vw - 2rem)); pointer-events: none;
}
.tost {
    display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .75rem; border-radius: 12px;
    pointer-events: none;   /* altındaki düğmeleri kapatmasın; yalnız ✕ tıklanır */
    background: var(--malzeme-guclu); color: var(--metin); font-size: 13px; line-height: 1.4;
    -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
    box-shadow: var(--golge-buyuk);
    animation: tost-gir .38s cubic-bezier(.2, 1.1, .3, 1) both;
}
.tost.gidiyor { animation: tost-cik .22s ease-in both; }
.tost-simge {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 12px; font-weight: 800; background: #34c759;
}
.tost.hata .tost-simge { background: var(--kirmizi); }
.tost-metin { flex: 1; padding-top: 1px; }
.tost-kapat { pointer-events: auto; flex: none; border: 0; background: none; color: var(--cok-soluk); cursor: pointer; font-size: 11px; padding: .2rem; border-radius: 5px; }
.tost-kapat:hover { background: var(--dolgu); color: var(--metin); }
@keyframes tost-gir { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes tost-cik { to { opacity: 0; transform: translateY(12px) scale(.96); } }

/* Düğme yükleniyor durumu */
.dugme.yukleniyor { position: relative; color: transparent !important; pointer-events: none; }
.dugme.yukleniyor::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: don .7s linear infinite;
}
.dugme.ikincil.yukleniyor::after, .dugme.tehlike.yukleniyor::after { border-color: var(--cizgi-guclu); border-top-color: var(--metin); }
@keyframes don { to { transform: rotate(360deg); } }

/* Değişen kaydı vurgula, hata mesajını salla */
.vurgulu { animation: vurgula 2.2s ease-out; border-radius: 6px; }
tr.vurgulu > td { animation: vurgula 2.2s ease-out; }
@keyframes vurgula { 0%, 30% { background-color: color-mix(in srgb, var(--ana) 18%, transparent); } 100% { background-color: transparent; } }
.sallan, .validation-summary-errors { animation: sallan .4s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes sallan { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.bel-kart .bildirim.hata, .grup .bildirim.hata { margin: .5rem 0 0; }

/* Açılır bölümler ve yerinde düzenleme */
details[open] > :not(summary) { animation: acil .22s ease both; }
@keyframes acil { from { opacity: 0; transform: translateY(-4px); } }
details.yerinde summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; border-radius: 6px; padding: .1rem .3rem; margin-left: -.3rem; }
details.yerinde summary::-webkit-details-marker { display: none; }
details.yerinde summary:hover { background: var(--dolgu); }
.duzenle-bag { font-size: 12px; color: var(--ana-metin); opacity: 0; transition: opacity .15s; }
details.yerinde summary:hover .duzenle-bag, details.yerinde summary:focus-visible .duzenle-bag { opacity: 1; }
details.yerinde[open] summary { display: none; }
.modal:focus-visible, .uyari:focus-visible { box-shadow: var(--golge-buyuk); }
.yerinde-form { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; flex-wrap: wrap; }
.yerinde-form input[type=date] { width: auto; }

/* Harita altı, bakım listesi yenilenmesi */
#bakimListesi { transition: opacity .15s ease; }
#bakimListesi.yenileniyor { opacity: .35; }
.eylemler > * { animation: solarak-gir .25s ease both; }
#ilceAlani { animation: acil .22s ease both; }
.il-seridi:not([hidden]) { animation: yukselerek-gir .3s ease both; }
.geri:not([hidden]) { animation: soldan-gir .3s ease both; }
@keyframes soldan-gir { from { opacity: 0; transform: translateX(-8px); } }
.baslik-grup h1 { animation: solarak-gir .3s ease both; }
.liste-satir, .bakim-satir a, .segment > a, .segment > button, .simge-dugme, .kapat { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.liste-satir .ok { transition: transform .15s ease; }
.liste-satir:hover .ok { transform: translateX(3px); }

@media (max-width: 720px) {
    #bildirimler { right: 50%; translate: 50% 0; bottom: auto; top: 96px; }
    .tost { animation-name: tost-gir-ust; }
    @keyframes tost-gir-ust { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}