/* Postimia — panel görsel kimliği (web-tasarim skill'i; palet: postimia-marka/Renk_Paleti_2026-10-01).
   Mercan vurgu + mürekkep lacivert + sıcak kâğıt zemin; koyu kanat, açık içerik. Renk yalnız durum sinyali taşır,
   her durum ikon + yazıyla birlikte gösterilir. IBM Plex Sans (gövde) + IBM Plex Mono (sayı, tarih, adres). */

/* ---- Yazı tipleri (yerel, CDN yok) ------------------------------------------------------------ */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-latin-ext.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: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-latin.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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500-latin-ext.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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500-latin.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: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-latin-ext.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: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin-ext.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin-ext.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.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: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-700-latin-ext.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: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-700-latin.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; }

/* ---- Renk token'ları -------------------------------------------------------------------------- */
:root {
    --surface: #F5F3EE;
    --surface-raised: #FFFFFF;
    --surface-sunken: #ECE8E1;
    --ink: #0F1B2D;
    --ink-dim: #46536A;
    --ink-faint: #5B6B82;
    --line: #E4DED3;
    --accent: #D4412A;
    --accent-koyu: #A8321F;
    --accent-soft: #FDEDE8;
    --good: #12794F;  --good-soft: #E7F5EE;
    --warn: #9A6708;  --warn-soft: #FDF5E4;
    --crit: #B4123F;  --crit-soft: #FCEBEF;
    --nav-bg: #0F1B2D;
    --nav-secili: #1E2C44;
    --nav-ink: #C9D1DE;

    --golge: 0 1px 3px rgba(16, 22, 28, .06), 0 8px 24px rgba(16, 22, 28, .08);
    --golge-hafif: 0 1px 2px rgba(16, 22, 28, .05), 0 3px 10px rgba(16, 22, 28, .05);
    --kose: 8px;
    --govde: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --kanat-genislik: 248px;
    color-scheme: light;
}

/* ---- Temel ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--govde);
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-koyu); text-decoration: underline; text-underline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* FocusOnNavigate başlığa programla odaklanır; ekran okuyucu için yeter, görünür çerçeve gereksiz. */
h1[tabindex="-1"]:focus { outline: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95em; }
.soluk { color: var(--ink-dim); }
.gorunmez { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ikon { flex: none; vertical-align: -3px; }
.logo { flex: none; display: block; }
.eyebrow {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 4px;
}
.eyebrow-koyu { color: #8B97AB; }

/* ---- Açılış ekranı (WASM yüklenirken) ----------------------------------------------------------- */
.acilis { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.acilis-cubuk { width: 160px; height: 3px; background: var(--surface-sunken); border-radius: 3px; overflow: hidden; }
.acilis-cubuk span { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 3px; animation: kaydir 1.1s ease-in-out infinite; }
.acilis-metin { color: var(--ink-dim); font-size: 13px; }
@keyframes kaydir { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 12px 48px 12px 16px; background: var(--crit-soft); color: var(--crit);
    border-top: 2px solid var(--crit); font-weight: 500;
}
#blazor-error-ui .reload { margin-left: 8px; color: var(--crit); text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 8px; cursor: pointer; font-size: 20px; color: var(--crit); }

/* ---- Panel düzeni: koyu kanat + açık içerik ----------------------------------------------------- */
.panel { min-height: 100vh; }
.kanat {
    position: fixed; inset: 0 auto 0 0; width: var(--kanat-genislik); z-index: 30;
    display: flex; flex-direction: column; background: var(--nav-bg); color: var(--nav-ink);
    padding: 18px 12px 14px;
}
/* Kanat zemini (MisArdsiV2 ile aynı dil): tepede hafif turkuaz ışıma, dikey derinlik, tüm yüzeyde çok soluk eğik doku. */
.kanat {
    background:
        radial-gradient(130% 55% at 50% -5%, rgba(255, 122, 94, .13), transparent 62%),
        linear-gradient(180deg, #16233A 0%, #132229 55%, #0D181E 100%);
}
.kanat::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 16px, transparent 16px 34px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .15) 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .15) 100%);
}
.kanat-ust, .kanat-menu, .kanat-alt { position: relative; z-index: 1; }
/* İmleci takip eden ışık (js/kanat-isik.js --mx/--my verir; yoksa ortadan çıkar). ::before aktif işarette. */
.kanat-bag { isolation: isolate; transition: background-color .18s ease, color .18s ease; }
.kanat-bag::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(7rem 7rem at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 94, .30), transparent 68%);
    opacity: 0; transition: opacity .32s ease;
}
@media (hover: hover) { .kanat-bag:hover::after { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kanat-bag::after { transition: none; } }
/* Seçili öğe üç sinyalle (MisArdsiV2): dolu turkuaz zemin + ince çerçeve, turkuaza dönen ikon, kenardaki dikey işaret. */
.kanat .kanat-bag.active {
    background: linear-gradient(180deg, rgba(255, 122, 94, .30), rgba(255, 122, 94, .18));
    box-shadow: inset 0 0 0 1px rgba(255, 122, 94, .34);
    color: #EAFBFB; font-weight: 600;
}
.kanat .kanat-bag.active svg { color: #5FD4D6; }
.kanat-ust { display: flex; align-items: center; gap: 6px; padding-bottom: 18px; }
.kanat-marka {
    display: flex; align-items: center; gap: 10px; padding: 4px 10px; flex: 1; min-width: 0;
    color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap;
}
.kanat-daralt {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px;
    background: none; border: 1px solid transparent; color: #8B97AB; cursor: pointer;
}
.kanat-daralt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.kanat-marka:hover { color: #fff; text-decoration: none; }
.kanat-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.kanat-menu { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.kanat-menu::-webkit-scrollbar { width: 6px; }
.kanat-menu::-webkit-scrollbar-track { background: transparent; }
.kanat-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.kanat-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }
.kanat-etiket {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: #6F8A96; padding: 16px 12px 6px;
}
.kanat-etiket-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.kanat-bag {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 6px;
    color: var(--nav-ink); font-weight: 500; position: relative; white-space: nowrap;
}
.kanat-bag:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.kanat-bag.active { background: var(--nav-secili); color: #fff; }
.kanat-bag.active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #FF7A5E;
}
.kanat-alt { border-top: 1px solid rgba(255, 255, 255, .08); padding: 14px 6px 0; display: flex; flex-direction: column; gap: 10px; }
.kanat-kullanici { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kanat-avatar {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--nav-secili); color: #fff; font-weight: 700; font-size: 13px;
}
.kanat-kimlik { display: flex; flex-direction: column; min-width: 0; }
.kanat-ad { color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanat-eposta { font-family: var(--mono); font-size: 11px; color: #8B97AB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanat-cikis {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    background: none; border: 1px solid rgba(255, 255, 255, .14); color: var(--nav-ink);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.kanat-cikis:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.kanat-perde { display: none; }

.panel-govde { margin-left: var(--kanat-genislik); min-width: 0; }

/* Daraltılmış kanat (yalnız masaüstü): ikonlar kalır, metin görsel olarak gizlenir ama ekran okuyucuya okunur. */
@media (min-width: 901px) {
    .kanat { transition: width .2s ease; overflow-x: hidden; }
    .panel-govde { transition: margin-left .2s ease; }
    /* İçerik panelinin sol üst köşesi kanada doğru içe kavisli: köşeye kanat renginde çeyrek maske. */
    .panel-govde::before {
        content: ""; position: fixed; top: 0; left: var(--kanat-genislik); width: 18px; height: 18px; z-index: 29;
        pointer-events: none; transition: left .2s ease;
        background: radial-gradient(circle at 100% 100%, transparent 17.5px, #16233A 18px);
    }
    .panel.kanat-dar { --kanat-genislik: 68px; }
    .kanat-dar .kanat-metin {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    /* Daraltılınca logo gizlenir, düğme aynı satırda (aynı yükseklikte) kalır; 38px = logo satırı yüksekliği. */
    .kanat-dar .kanat-ust { justify-content: center; }
    .kanat-dar .kanat-marka { display: none; }
    .kanat-dar .kanat-daralt { height: 38px; }
    .kanat-dar .kanat-bag { justify-content: center; padding: 9px 0; }
    /* Kaydırma çubuğu dar kanatta yer kaplayıp ikonları sola kaydırmasın: gizli, tekerlekle kayar. */
    .kanat-dar .kanat-menu { scrollbar-width: none; }
    .kanat-dar .kanat-menu::-webkit-scrollbar { display: none; }
    .kanat-dar .kanat-etiket { font-size: 0; padding: 0; margin: 12px 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
    .kanat-dar .kanat-alt { padding: 14px 0 0; align-items: center; }
    .kanat-dar .kanat-cikis { align-self: center; padding: 7px; }
}
.ust-bar { display: none; }
.icerik { max-width: 1240px; margin: 0 auto; padding: 32px 36px 64px; }

/* Gezinme yolu: beyaz hap şerit; halkalar hover'da yumuşak zemin alır, bulunulan sayfa vurgu renginde hap. */
.gezinme-yolu { display: flex; margin: -12px 0 18px; min-width: 0; }
.gezinme-yolu ol {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 4px; list-style: none; max-width: 100%;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--golge-hafif);
}
.gezinme-yolu li { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.gezinme-yolu li + li::before {
    content: ""; flex: none; width: 14px; height: 14px; margin: 0 2px; background: var(--ink-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gezinme-halka {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; min-width: 0; max-width: 32ch;
    font-size: 13px; font-weight: 500; color: var(--ink-dim); transition: background-color .12s, color .12s;
}
.gezinme-halka > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gezinme-halka .ikon { flex: none; color: var(--accent); }
a.gezinme-halka:hover { background: var(--surface); color: var(--accent-koyu); text-decoration: none; }
.gezinme-grup { color: var(--ink-faint); }
.gezinme-yolu [aria-current="page"] { background: var(--accent-soft); color: var(--accent-koyu); font-weight: 600; }

/* ---- Sayfa başlığı ---------------------------------------------------------------------------- */
.sayfa-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sayfa-ust > * { min-width: 0; }
.sayfa-ust-kimlik { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sayfa-baslik { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.sayfa-alt { margin-top: 4px; color: var(--ink-dim); overflow-wrap: anywhere; }
.sayfa-alt a { color: var(--ink-dim); }
.sayfa-alt a:hover { color: var(--accent); }

/* ---- Kart --------------------------------------------------------------------------------------- */
.kart {
    position: relative;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--kose);
    box-shadow: var(--golge); padding: 20px 22px; min-width: 0;
}
.kart + .kart, .sutun > .kart + .kart { margin-top: 16px; }
.kart-baslik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; font-weight: 700; margin-bottom: 14px; }
.kart-baslik .ikon { color: var(--ink-dim); }
.kart-baslik-buyuk { font-size: 17px; margin-bottom: 16px; }
.kart-aciklama { color: var(--ink-dim); margin: -8px 0 16px; }
.kart-aciklama-ic { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kart-uyari { border: 1px solid var(--warn); background: var(--warn-soft); box-shadow: none; margin-top: 14px; }
.kart-uyari .kart-baslik { color: var(--warn); }
.kart-uyari .kart-baslik .ikon { color: var(--warn); }
.kart-uyari p { margin-bottom: 12px; }
.kart-tablo { padding: 0; overflow: hidden; }
/* Tehlikeli bölge: kalıcı, geri alınamaz işlem. Kenar rengi süs değil sinyal (web-tasarim). */
.kart-tehlike { border-color: #F0C2CF; margin-top: 16px; }
.kart-tehlike .kart-baslik, .kart-tehlike .kart-baslik .ikon { color: var(--crit); }
.tehlike-satir { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tehlike-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.tehlike-metin p { font-size: 12.5px; max-width: 640px; }
.bosluk { flex: 1; }

.bos-durum { text-align: center; padding: 48px 24px; max-width: 560px; margin: 24px auto; }
.bos-durum p { color: var(--ink-dim); margin: 8px auto 20px; max-width: 420px; }
.bos-durum-simge {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
}
.bos-durum-baslik { font-size: 19px; font-weight: 700; }

/* ---- KPI ---------------------------------------------------------------------------------------- */
.kpi-sirasi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-sirasi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--kose); box-shadow: var(--golge);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi-etiket { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.kpi-deger { font-family: var(--mono); font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; letter-spacing: -.02em; }
.kpi-deger-kucuk { font-size: 19px; line-height: 1.6; }
.kpi-alt { color: var(--ink-dim); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }

/* ---- Rozet (durum) ------------------------------------------------------------------------------ */
.rozet {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px;
    font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; border: 1px solid transparent;
}
.rozet .ikon { vertical-align: 0; }
.rozet-iyi { background: var(--good-soft); color: var(--good); }
.rozet-uyari { background: var(--warn-soft); color: var(--warn); }
.rozet-hata { background: var(--crit-soft); color: var(--crit); }
.rozet-vurgu { background: var(--accent-soft); color: var(--accent-koyu); }
.rozet-notr { background: var(--surface); color: var(--ink-dim); border-color: var(--line); }

/* ---- Bant (satır içi bilgi/hata) ve operasyonel uyarı bandı ------------------------------------ */
.bant {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 6px;
    margin: 0 0 16px; border: 1px solid; font-size: 13px;
}
.bant .ikon { margin-top: 1px; }
.bant-bilgi { background: var(--accent-soft); border-color: #F6C9BE; color: var(--accent-koyu); }
.bant-hata { background: var(--crit-soft); border-color: #F1C4C7; color: var(--crit); }
.bant-uyari { background: var(--warn-soft); border-color: #EBD7A8; color: var(--warn); }
.bant-iyi { background: var(--good-soft); border-color: #BFE3D0; color: var(--good); }
.bant a { color: inherit; text-decoration: underline; font-weight: 500; }

.uyari-bandi {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; margin: 0 0 18px;
    background: var(--crit-soft); border: 2px solid var(--crit); border-radius: var(--kose); color: var(--crit);
}
.panel-govde > .uyari-bandi { border-radius: 0; border-width: 0 0 2px; margin: 0; padding: 12px 36px; }
.uyari-bandi-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uyari-bandi-govde span { color: var(--ink); }
.uyari-bandi details summary { cursor: pointer; font-size: 12px; margin-top: 4px; }
.uyari-bandi pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: rgba(255, 255, 255, .6); padding: 8px; border-radius: 4px; margin: 6px 0 0; }

/* ---- Düğmeler ------------------------------------------------------------------------------------ */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent;
    font-weight: 500; font-size: 13.5px; line-height: 1.2; cursor: pointer; white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s;
    text-decoration: none;
}
.dugme:hover { text-decoration: none; }
.dugme:disabled { opacity: .55; cursor: not-allowed; }
.dugme-ana { background: var(--accent); color: #fff; }
.dugme-ana:hover:not(:disabled) { background: var(--accent-koyu); color: #fff; }
.dugme-ikincil { background: var(--surface-raised); color: var(--accent-koyu); border-color: #EDC2B7; }
.dugme-ikincil:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-koyu); }
.dugme-metin { background: none; color: var(--accent-koyu); padding-left: 10px; padding-right: 10px; }
.dugme-metin:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-koyu); }
.dugme-tehlike { background: var(--surface-raised); color: var(--crit); border-color: #F0C2CF; }
.dugme-tehlike:hover:not(:disabled) { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }
.dugme-sil { background: var(--crit); color: #fff; }
.dugme-sil:hover:not(:disabled) { background: #8E1920; color: #fff; }
.dugme-tam { width: 100%; }
.dugme-kucuk { min-height: 30px; padding: 5px 10px; font-size: 12.5px; }
.dugme-buyuk { min-height: 44px; padding: 10px 22px; font-size: 14.5px; }
.dugme-sirasi { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dugme-sirasi-yayik { justify-content: space-between; }
.sayfa-ust > .dugme-sirasi { margin-top: 0; }
.dugme-sirasi-tam > .dugme { flex: 1 1 140px; }

.ikon-dugme {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px;
    background: none; border: 1px solid transparent; color: var(--ink-dim); cursor: pointer;
}
.ikon-dugme:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.ikon-dugme-tehlike:hover { background: var(--crit-soft); color: var(--crit); }

.donen {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
    animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ---- Onay diyaloğu ---------------------------------------------------------------------------- */
.diyalog-perde { position: fixed; inset: 0; z-index: 60; background: rgba(15, 27, 45, .45); }
.diyalog {
    position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--surface-raised); border: 1px solid var(--line); border-top: 3px solid var(--crit);
    border-radius: var(--kose); box-shadow: 0 12px 40px rgba(16, 22, 28, .22); padding: 22px 24px;
}
.diyalog-baslik { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--crit); margin-bottom: 10px; }
.diyalog p { margin-bottom: 16px; overflow-wrap: anywhere; }
.diyalog .form-alan label { overflow-wrap: anywhere; }
.diyalog .dugme-sirasi { margin-top: 4px; }

/* ---- Form ---------------------------------------------------------------------------------------- */
.form-alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.form-alan label { font-weight: 500; font-size: 13px; }
.form-etiket-sira { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.form-yan-bag { font-size: 12.5px; }
.form-yardim { color: var(--ink-faint); font-size: 12px; }
.form-alan input, .form-alan textarea {
    width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid #D8D1C4; border-radius: 6px;
    background: var(--surface-raised); font-size: 14px; line-height: 1.45;
    transition: border-color .12s, box-shadow .12s;
}
.form-alan textarea { resize: vertical; min-height: 96px; }
.form-alan input:hover, .form-alan textarea:hover { border-color: #AEBCC5; }
.form-alan input:focus, .form-alan textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 65, 42, .15); }
.form-alan input.invalid, .form-alan input.modified.invalid { border-color: var(--crit); }
.validation-message { color: var(--crit); font-size: 12px; }
/* Tek alanlı satır içi form (yönetim: davet). Dar ekranda alt alta. */
.satir-form { display: flex; align-items: flex-start; gap: 10px; }
.satir-form .form-alan { flex: 1; margin-bottom: 0; }
.satir-form > .dugme { margin-top: 25px; }
.davet-listesi { list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 12.5px; }
.davet-listesi li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.davet-listesi .mono { overflow-wrap: anywhere; }
.davet-mesaj { flex-basis: 100%; font-size: 12px; }

/* ---- Yükleniyor ---------------------------------------------------------------------------------- */
.yukleniyor { padding: 18px 0; }
.yukleniyor-cizgi { display: block; height: 3px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; position: relative; }
.yukleniyor-cizgi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); border-radius: 3px; animation: kaydir 1.1s ease-in-out infinite; }

/* ---- Bildirimler ---------------------------------------------------------------------------------- */
.bildirim-alani { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.bildirim {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 14px; border-radius: var(--kose);
    background: var(--surface-raised); border: 1px solid var(--line); border-left-width: 4px; box-shadow: var(--golge);
    animation: belir .18s ease-out;
}
.bildirim .ikon { margin-top: 2px; }
.bildirim-metin { flex: 1; padding-top: 1px; overflow-wrap: anywhere; }
.bildirim .ikon-dugme { width: 26px; height: 26px; }
.bildirim-iyi { border-left-color: var(--good); } .bildirim-iyi > .ikon { color: var(--good); }
.bildirim-uyari { border-left-color: var(--warn); } .bildirim-uyari > .ikon { color: var(--warn); }
.bildirim-hata { border-left-color: var(--crit); } .bildirim-hata > .ikon { color: var(--crit); }
.bildirim-bilgi { border-left-color: var(--accent); } .bildirim-bilgi > .ikon { color: var(--accent); }
@keyframes belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Hesap ekranları ------------------------------------------------------------------------------ */
.hesap-zemin { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) 1fr; }
.hesap-tanitim {
    background: var(--nav-bg); color: var(--nav-ink); padding: 40px 48px; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.hesap-tanitim::after {
    content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
    border: 56px solid rgba(255, 122, 94, .07); pointer-events: none;
}
.hesap-tanitim-marka { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 19px; }
.hesap-tanitim-marka:hover { color: #fff; text-decoration: none; }
.hesap-tanitim-govde { margin: auto 0; max-width: 420px; position: relative; z-index: 1; }
.hesap-tanitim-baslik { color: #fff; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; margin: 6px 0 24px; }
.hesap-tanitim-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hesap-tanitim-liste li { display: flex; align-items: center; gap: 10px; }
.hesap-tanitim-liste .ikon { color: #FF7A5E; }
.hesap-alan { display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-width: 0; }
.hesap-kart { width: 100%; max-width: 400px; }
.hesap-marka { display: none; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; margin-bottom: 28px; }
.hesap-marka:hover { color: var(--ink); text-decoration: none; }
.hesap-baslik { font-size: 24px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin-bottom: 8px; }
.hesap-metin { color: var(--ink-dim); margin-bottom: 22px; font-size: 14px; overflow-wrap: anywhere; }
.hesap-metin strong { color: var(--ink); font-weight: 500; }
.hesap-alt { margin-top: 20px; text-align: center; font-size: 13px; }
.sosyal-giris { display: grid; gap: 8px; margin: 4px 0 16px; }
.sosyal-giris .dugme { justify-content: center; }
.sosyal-simge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-sunken); font-weight: 700; font-size: 12px; }
.sosyal-ayrac { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: var(--ink-dim); font-size: 12.5px; }
.sosyal-ayrac::before, .sosyal-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Kayıt: koşulları kabul kutusu (form-alan'ın metin kutusu biçimini almaz). */
.form-alan .form-onay { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; color: var(--ink-dim); cursor: pointer; line-height: 1.5; }
.form-alan .form-onay input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
.form-onay a { font-weight: 500; }
.deneme-bandi { margin-bottom: 20px; }
.hesap-kart .uyari-bandi { margin-bottom: 20px; }
.sonuc-simge {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
    background: var(--surface-sunken); color: var(--ink-dim);
}
.sonuc-simge-iyi { background: var(--good-soft); color: var(--good); }
.adim-listesi { margin: 0 0 22px; padding-left: 20px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 4px; }

/* ---- Site kartları ---------------------------------------------------------------------------------- */
.site-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.site-izgara + .kart { margin-top: 22px; }
.site-izgara > .kart + .kart, .kpi-sirasi > .kart + .kart { margin-top: 0; }
.site-kart { display: flex; flex-direction: column; gap: 12px; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.site-kart:hover { color: var(--ink); text-decoration: none; border-color: #E9C3B8; box-shadow: 0 1px 2px rgba(16, 22, 28, .05), 0 10px 28px rgba(16, 22, 28, .09); }
.site-kart-ust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-simge {
    flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-koyu); font-weight: 700; font-size: 16px;
}
.site-simge-buyuk { width: 52px; height: 52px; border-radius: 12px; font-size: 21px; }
.site-kimlik { display: flex; flex-direction: column; min-width: 0; }
.site-ad { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-adres { color: var(--ink-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-amac {
    color: var(--ink-dim); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.site-kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.site-kart-bilgi { color: var(--ink-dim); font-size: 12px; }
/* Kart + sağ üst köşede "Siteyi sil" (arşive taşır, supabase/034). Düğme bağlantının dışında: kap göreli, düğme mutlak konumlu. */
.site-kart-kap { position: relative; display: flex; min-width: 0; }
.site-kart-kap > .site-kart { flex: 1; min-width: 0; }
.site-kart-kap.silinebilir .site-kart-ust { padding-right: 34px; }
.site-sil-simge { position: absolute; top: 12px; right: 12px; color: var(--ink-faint); }

/* ---- Satır listesi ---------------------------------------------------------------------------------- */
.satir-listesi { list-style: none; margin: 0; padding: 0; }
.satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.satir:first-child { border-top: 0; padding-top: 0; }
.satir:last-child { padding-bottom: 0; }
.satir-ana { display: flex; flex-direction: column; min-width: 0; }
.satir-ana > * { overflow-wrap: anywhere; }
.satir-ana .mono { font-size: 12px; }
.satir-yan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etiket-yazi { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- Sihirbaz ------------------------------------------------------------------------------------- */
.sihirbaz { max-width: 820px; margin: 0 auto; }
.adimlar { margin-bottom: 18px; }
.adimlar-ozet { display: none; color: var(--ink-dim); font-size: 13px; margin-bottom: 8px; }
.adimlar ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.adim { flex: 1; position: relative; min-width: 0; }
.adim + .adim::before {
    content: ""; position: absolute; top: 14px; right: calc(50% + 18px); left: calc(-50% + 18px); height: 2px; background: var(--line);
}
.adim-bitti + .adim::before, .adim-bitti + .adim-aktif::before { background: var(--accent); }
.adim-dugme {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
    background: none; border: 0; padding: 0; cursor: default; color: var(--ink-faint);
}
button.adim-dugme { cursor: pointer; }
button.adim-dugme:hover .adim-ad { color: var(--accent); }
.adim-no {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
    font-family: var(--mono); font-size: 12.5px; font-weight: 500; background: var(--surface-raised); border: 2px solid var(--line);
}
.adim-ad { font-size: 12.5px; font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.adim-bitti .adim-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.adim-bitti .adim-ad { color: var(--ink-dim); }
.adim-aktif .adim-no { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.adim-aktif .adim-ad { color: var(--ink); font-weight: 700; }
.sihirbaz-govde { padding: 26px 28px; }

/* ---- Tarama göstergesi ------------------------------------------------------------------------------ */
.tarama-asamalar { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tarama-asama { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 12.5px; background: var(--surface); color: var(--ink-faint); border: 1px solid var(--line); }
.tarama-asama-nokta { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; color: inherit; }
.tarama-asama-bitti { color: var(--good); background: var(--good-soft); border-color: transparent; }
.tarama-asama-bitti .tarama-asama-nokta { background: var(--good); border-color: var(--good); color: #fff; }
.tarama-asama-suruyor { color: var(--accent-koyu); background: var(--accent-soft); border-color: transparent; font-weight: 500; }
.tarama-asama-suruyor .tarama-asama-nokta { border-color: var(--accent); border-right-color: transparent; animation: don .9s linear infinite; }
.tarama-sira { border: 1px solid var(--line); border-radius: var(--kose); padding: 16px; background: var(--surface); }
.tarama-sira-ust { display: flex; gap: 12px; align-items: flex-start; }
.tarama-sira-ust > .ikon { color: var(--ink-dim); margin-top: 2px; }
.tarama-sira-baslik { font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.tarama-sira-bilgi { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0 32px; }
.tarama-sira-bilgi dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tarama-sira-bilgi dd { margin: 0; font-size: 15px; }
.tarama-not { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.tarama-not .ikon { margin-top: 2px; }
.tarama-not-uyari { color: var(--warn); }
.tarama-ilerleme { display: flex; flex-direction: column; gap: 10px; }
.tarama-sayi { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tarama-sayi-deger { font-size: 25px; font-weight: 500; }
.tarama-dipnot { margin-top: 14px; color: var(--ink-faint); font-size: 12px; }
.cubuk { height: 6px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden; position: relative; }
.cubuk > span { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.cubuk-belirsiz > span { width: 35% !important; position: absolute; animation: kaydir 1.3s ease-in-out infinite; }

/* ---- Amaç ------------------------------------------------------------------------------------------ */
.kaynak-notu { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent-koyu); margin-bottom: 10px; }
.amac-metni {
    margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface);
    border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere;
}
.alanlar { margin: 0 0 4px; display: flex; flex-direction: column; gap: 12px; }
.alanlar-kutu { border: 1px solid var(--line); border-radius: var(--kose); padding: 12px 14px; margin-bottom: 20px; gap: 8px; }
.alanlar-kutu .alan { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alan dt, .alan-etiket { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.alan dd { margin: 0; overflow-wrap: anywhere; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; }

/* ---- Ürün düzenleyici ---------------------------------------------------------------------------------- */
.gruplar { display: flex; flex-direction: column; gap: 12px; }
.grup { border: 1px solid var(--line); border-radius: var(--kose); padding: 10px 12px 8px; background: var(--surface-raised); box-shadow: var(--golge-hafif); }
.grup-ad, .urun-ad {
    flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px; padding: 6px 8px; background: transparent;
}
.grup-ad { font-weight: 700; font-size: 14px; }
.grup-ad:hover, .urun-ad:hover { border-color: var(--line); background: var(--surface); }
.grup-ad:focus, .urun-ad:focus { outline: none; border-color: var(--accent); background: var(--surface-raised); box-shadow: 0 0 0 3px rgba(212, 65, 42, .12); }
.urunler { list-style: none; margin: 0; padding: 0 0 0 28px; }
.urun { display: flex; align-items: center; gap: 4px; }
.grup > .dugme { margin-left: 22px; }

/* ---- Çıktı seçici ---------------------------------------------------------------------------------------- */
.secim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.secim-kart {
    display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 14px; border-radius: var(--kose);
    background: var(--surface-raised); border: 1px solid #D8D1C4; cursor: pointer; transition: border-color .12s, box-shadow .12s, background-color .12s;
    box-shadow: var(--golge-hafif);
}
.secim-kart:hover:not(:disabled) { border-color: var(--accent); }
.secim-kart:disabled { cursor: not-allowed; opacity: .7; }
.secim-kart.secili { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), var(--golge-hafif); }
.secim-kart-ust { display: flex; align-items: center; gap: 10px; }
.secim-simge { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--accent-koyu); }
.secili .secim-simge { background: var(--surface-raised); }
.secim-baslik { font-weight: 700; flex: 1; }
.secim-isaret { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #D8D1C4; display: grid; place-items: center; color: #fff; }
.secili .secim-isaret { background: var(--accent); border-color: var(--accent); }
.secim-aciklama { color: var(--ink-dim); font-size: 12.5px; }

/* ---- Site özeti ------------------------------------------------------------------------------------------ */
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sutun { min-width: 0; }
.dagilim { margin: 16px 0 18px; }
.dagilim-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.web-okuma-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.web-okuma-liste p { margin: 2px 0 0; }
.dagilim-liste li { display: grid; grid-template-columns: 96px 1fr 36px; align-items: center; gap: 10px; font-size: 12.5px; }
.dagilim-cubuk { height: 6px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden; }
.dagilim-cubuk span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.dagilim-sayi { text-align: right; }

/* Alt çizgi kenarlık değil iç gölge: overflow-x:auto dikeyi de kaydırılabilir yapar; eskiden sekmenin -1px
   taşması (kenarlığın üstüne binmek için) şeritte dikey kaydırma çubuğu açıyor, tekerleği yutuyordu (POSTIMIA-31). */
.sekmeler {
    display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 16px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.sekme {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0;
    border-bottom: 2px solid transparent; color: var(--ink-dim); font-weight: 500; cursor: pointer; white-space: nowrap; flex: none;
}
.sekme:hover { color: var(--ink); }
.sekme.secili { color: var(--accent-koyu); border-bottom-color: var(--accent); }
.sayac { font-family: var(--mono); font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); border: 1px solid #EBD7A8; }
.tablo-kap { overflow-x: auto; position: relative; } /* .gorunmez (mutlak konumlu) kaydırma kutusundan kaçmasın */
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th {
    text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); padding: 10px 16px; border-bottom: 1px solid var(--line); background: #FCFBF8; white-space: nowrap;
}
.tablo td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: #FCFBF8; }
.tablo td.mono { font-size: 12.5px; white-space: nowrap; }
.tablo .sayi { text-align: right; }
.tablo .islem { text-align: right; white-space: nowrap; }
.hucre-ana { font-weight: 500; margin-right: 6px; }
.bos-satir { padding: 22px; color: var(--ink-dim); }

.dar-sutun { max-width: 620px; }

/* ---- İçerik kapsamı / sosyal hesaplar / araştırma ------------------------------------------------ */
.secim-kutusu {
    padding: 7px 30px 7px 10px; border: 1px solid #D8D1C4; border-radius: 6px; background: var(--surface-raised);
    appearance: none; -webkit-appearance: none; font-size: 13px; min-width: 0; max-width: 100%;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.secim-kutusu:hover { border-color: #AEBCC5; }
.secim-kutusu:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 65, 42, .15); }
.form-alan .secim-kutusu { width: 100%; }
.ikon-dugme.secili { background: var(--accent-soft); color: var(--accent-koyu); }
.ikon-dugme .sayac { margin-left: 2px; }
fieldset.kutusuz { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.kutusuz > legend { font-weight: 500; font-size: 13px; padding: 0; margin-bottom: 4px; }
.hesap-satiri { display: grid; grid-template-columns: minmax(130px, 180px) 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.hesap-satiri input { padding: 8px 10px; border: 1px solid #D8D1C4; border-radius: 6px; background: var(--surface-raised); min-width: 0; }
.hesap-satiri input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 65, 42, .15); }
.hesap-belirtec { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); padding: 0 0 6px; }
.hesap-belirtec input { flex: 1 1 200px; }
.satir-girdi { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.satir-girdi input { flex: 1 1 auto; min-width: 0; }
.oneri { border: 1px solid var(--line); border-radius: var(--kose); padding: 10px 12px; }
.oneri p { color: var(--ink-dim); margin-top: 4px; }

/* Başlık şeridi: gövdeden belirgin ayrışan zemin + koyu kalın ad + dönen ok + mono sayaç. Renk durum değil, yön bulma. */
.gruplar > .katlanir { margin: 0; }
.katlanir { border: 1px solid #DDD6CA; border-radius: var(--kose); background: var(--surface-raised); overflow: hidden; box-shadow: var(--golge-hafif); }
.katlanir-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #EDF1F4; padding: 4px 10px 4px 4px; min-height: 48px; }
.katlanir.acik > .katlanir-ust { border-bottom: 1px solid #DDD6CA; background: #E6EDF1; }
.katlanir-dugme {
    flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
    background: none; border: 0; border-radius: 6px; padding: 8px 8px; cursor: pointer; color: var(--ink);
}
.katlanir-dugme:hover { background: rgba(212, 65, 42, .07); }
.katlanir-dugme:focus-visible { outline-offset: 0; }
.katlanir-ok {
    flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
    background: var(--surface-raised); border: 1px solid #D8D1C4; color: var(--accent-koyu); transition: transform .18s ease;
}
.katlanir.acik .katlanir-ok { transform: rotate(90deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.katlanir-simge { flex: none; color: var(--accent); display: grid; place-items: center; }
.katlanir-baslik { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.katlanir-sayac {
    flex: none; margin-left: auto; font-size: 11.5px; color: var(--ink-dim); background: var(--surface-raised);
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.katlanir-sag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.katlanir-govde { padding: 6px 12px 10px; }
.grup-paylasim { width: auto; min-height: 32px; padding: 4px 30px 4px 10px; font-size: .85rem; }
.dugme-tehlike-metin { color: var(--crit); }
.dugme-tehlike-metin:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit); }
.katlanir-govde > .dugme { margin-left: 22px; }

/* ---- Araştırma durumu, teknoloji bilgisi --------------------------------------------------------- */
.teknoloji-bant { margin-bottom: 6px; align-items: center; }
.teknoloji-bant .dugme { margin-left: 4px; vertical-align: baseline; min-height: 24px; padding: 2px 8px; }
.teknoloji-iz { margin: 0 0 4px 30px; overflow-wrap: anywhere; }
.teknoloji-form { margin-top: 10px; align-items: flex-end; }
.teknoloji-form .form-alan { max-width: 320px; }
.teknoloji-form > .dugme { margin-top: 0; }

/* ---- Başa dön ------------------------------------------------------------------------------------ */
.basa-don {
    position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--nav-bg); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 6px 20px rgba(16, 22, 28, .22), 0 1px 3px rgba(16, 22, 28, .18);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s, background-color .15s;
}
.basa-don.gorunur { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s, background-color .15s; }
.basa-don:hover { background: var(--accent); }
.basa-don:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50%; }

/* İş ekranlarında kullanılmaz. Şekiller içeriğin arkasında (z-index 0), tıklamayı geçirir; yalnız transform/opacity. */
.hesap-alan, .karsilama { position: relative; overflow: hidden; isolation: isolate; }
.hesap-alan > :not(.dekor), .karsilama > :not(.dekor) { position: relative; z-index: 1; }
.dekor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dekor-izgara {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(212, 65, 42, .28) 1px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
}
.dekor-sekil { position: absolute; border-radius: 50%; filter: blur(36px); opacity: .9; will-change: transform; }
.dekor-sekil-1 { width: 620px; height: 620px; top: -200px; right: -160px; background: radial-gradient(circle at 40% 40%, rgba(212, 65, 42, .62), rgba(212, 65, 42, .12) 55%, rgba(212, 65, 42, 0) 72%); animation: suzul-1 26s ease-in-out infinite alternate; }
.dekor-sekil-2 { width: 540px; height: 540px; bottom: -200px; left: -160px; background: radial-gradient(circle at 50% 50%, rgba(255, 122, 94, .6), rgba(255, 122, 94, .12) 55%, rgba(255, 122, 94, 0) 72%); animation: suzul-2 30s ease-in-out infinite alternate; }
.dekor-sekil-3 { width: 380px; height: 380px; top: 45%; left: 60%; background: radial-gradient(circle at 50% 50%, rgba(232, 220, 200, .9), rgba(232, 220, 200, 0) 70%); opacity: .75; animation: suzul-3 22s ease-in-out infinite alternate; }
.kart.karsilama .dekor-sekil { opacity: .6; }
/* Panel içerik alanının arka planı: aynı dekor, kaydırmada sabit ve çok daha soluk (okunabilirlik önce). */
.panel-dekor { position: fixed; top: 0; bottom: 0; right: 0; left: var(--kanat-genislik); z-index: 0; pointer-events: none; }
.panel-dekor .dekor-sekil { opacity: .16; }
.panel-dekor .dekor-izgara { opacity: .4; }
.panel-govde > :not(.panel-dekor, .ust-bar) { position: relative; z-index: 1; }
/* Açık diyalog (sabit konumlu, içerik yığın bağlamında) kanadın ve üst çubuğun üstüne çıksın. */
.panel-govde > .icerik:has(.diyalog) { z-index: 40; }
@keyframes suzul-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-70px, 60px, 0) scale(1.12); } }
@keyframes suzul-2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(80px, -50px, 0) scale(.95); } }
@keyframes suzul-3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, -40px, 0) scale(1.15); } }

/* ---- Yayın takvimi (supabase/020) ---------------------------------------------------------------- */
.takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
/* Takvim ayrıntısı: ızgaranın üstünde diyalog (vurgu kenarlı; onay diyaloğunun kırmızısı değil). */
@media (max-width: 760px) {
    .takvim { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
    .kpi-sirasi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iki-sutun { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .kanat { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
    .menu-acik .kanat { transform: none; box-shadow: 8px 0 32px rgba(0, 0, 0, .25); }
    .kanat-daralt { display: none; }
    .menu-acik .kanat-perde { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15, 27, 45, .45); }
    .panel-govde { margin-left: 0; }
    .panel-dekor { left: 0; }
    .ust-bar {
        display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; height: 54px; padding: 0 10px;
        background: var(--nav-bg); color: #fff;
    }
    .ust-bar-menu { color: #fff; width: 40px; height: 40px; }
    .ust-bar-menu:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    .ust-bar-marka { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 16px; }
    .ust-bar-marka:hover { color: #fff; text-decoration: none; }
    .panel-govde > .uyari-bandi { padding: 12px 16px; }
    .icerik { padding: 22px 16px 56px; }
    .gezinme-yolu { margin-top: -8px; }
    .gezinme-halka { max-width: 22ch; padding: 5px 10px; }

    .hesap-zemin { grid-template-columns: minmax(0, 1fr); }
    .hesap-tanitim { display: none; }
    .hesap-marka { display: flex; }
    .hesap-alan { align-items: flex-start; padding: 32px 16px; }
}

@media (max-width: 640px) {
    .hesap-satiri { grid-template-columns: 1fr auto; }
    .hesap-satiri > .secim-kutusu { grid-column: 1 / -1; }
    .kpi-sirasi, .kpi-sirasi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }    .kpi { padding: 12px; }
    .kpi-deger { font-size: 21px; }
    .kpi-deger-kucuk { font-size: 16px; }
    .kart { padding: 16px; }
    .sihirbaz-govde { padding: 18px 16px; }
    .sayfa-ust { align-items: flex-start; }
    .sayfa-ust > .dugme { width: 100%; }
    .adimlar-ozet { display: block; }
    .adim-ad { display: none; }
    .adim-aktif .adim-ad { display: none; }
    .tarama-sira-bilgi { margin-left: 0; }
    .urunler { padding-left: 8px; }
    .grup > .dugme { margin-left: 2px; }
    .dagilim-liste li { grid-template-columns: 78px 1fr 30px; }
    .bildirim-alani { right: 16px; bottom: 16px; }
    .basa-don { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
    .katlanir-sag { margin-left: 34px; }
    .katlanir-govde { padding: 4px 8px 8px; }
    .katlanir-govde > .dugme { margin-left: 2px; }
    .dekor-sekil-1 { width: 400px; height: 400px; }
    .dekor-sekil-2 { width: 360px; height: 360px; }
    .dugme-sirasi > .dugme { flex: 1 1 auto; }
    .satir-form { flex-direction: column; align-items: stretch; }
    .satir-form > .dugme { margin-top: 0; }
    /* Tablolar dar ekranda satır kartlarına döner: yatay kaydırma yok. */
    .tablo thead { display: none; }
    .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
    .tablo tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .tablo tbody tr:last-child { border-bottom: 0; }
    .tablo td { border: 0; padding: 2px 16px; }
    .tablo td.mono { white-space: normal; overflow-wrap: anywhere; }
    .tablo .sayi, .tablo .islem { text-align: left; }
    .tablo tbody tr:hover td { background: none; }
    .tablo td[data-etiket]::before { content: attr(data-etiket) ": "; font-family: var(--govde); color: var(--ink-faint); font-size: 12px; }
}

@media (max-width: 330px) {
    .kpi-sirasi, .kpi-sirasi-4 { grid-template-columns: minmax(0, 1fr); }}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .dekor-sekil { animation: none !important; }
}

/* Araştırma: web yayın temposu, trend dayanağı, yeni platform alt başlığı (015) */
.trend-notu { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--accent-koyu); }
.oneri .trend-notu { color: var(--accent-koyu); }
.trend-notu .ikon { margin-top: 2px; flex: none; }

/* Elle eklenen sayfalar (015) */
.elle-sayfalar { margin-top: 14px; }
.elle-sayfa-not { font-size: 12.5px; color: var(--warn); }

/* İçerik: gönderi taslakları (016) */
.taslak { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* web yazısı */
.taslak > .dugme-sirasi { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
/* Görsel kaynağı: referans yükleme satırı, yapay zekâ görseli üretim durumu, onaylıda yayın düğmeleri (supabase/019). */
.gizli-dosya { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.dosya-dugme { cursor: pointer; }
.dosya-dugme.devre-disi { opacity: .55; pointer-events: none; }
 .dosya-dugme .donen { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
/* Gönderi önizlemesi: platform benzeri nötr çerçeve (logo/marka yok). Kompakt = liste kartı, tam = diyalog. */
.onizleme { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; }

/* ---- E-postayla oylama (supabase/021) ------------------------------------------------------------ */
.onayci-aciklama { font-size: 12.5px; margin-bottom: 10px; }
.onayci-liste { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.onayci-liste li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 0; }
.onayci-liste li .mono { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.onayci-liste li > .ikon { color: var(--ink-faint); flex: none; }
.onayci-ekle { display: flex; gap: 8px; align-items: center; }
.onayci-ekle input { flex: 1; min-width: 0; }

/* Oturumsuz oy sayfası (GenelDuzen + /oy/{belirteç}) */
.genel-zemin { min-height: 100vh; background: var(--surface); }
.genel-ust { background: var(--nav-bg); color: #fff; padding: 12px 20px; }
.genel-marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.genel-icerik { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; }
.oy-karar { display: flex; flex-direction: column; gap: 12px; }
.oy-karar .dugme-sirasi { margin-top: 0; }
.oy-karar textarea { width: 100%; }
.oy-kart { max-width: 560px; margin: 40px auto; }
/* Yapay zekâ kartı ve kullanım ekranı (supabase/024-025) */
.cubuk-uyari > span { background: var(--warn); }
.cubuk-hata > span { background: var(--crit); }
.yz-harcama { display: flex; flex-direction: column; gap: 8px; }
.yz-harcama-ust { display: flex; align-items: center; gap: 8px; }
.yz-harcama-deger { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yz-harcama-deger .mono { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.yz-tavan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.yz-tavan label { font-size: 12.5px; color: var(--ink-dim); }
.yz-tavan input, .yz-anahtar-gir input {
    border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--surface-raised); font-family: var(--mono); font-size: 13px;
}
.yz-tavan input { width: 120px; }
.yz-tavan input:focus, .yz-anahtar-gir input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 65, 42, .15); }
.yz-anahtar { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.yz-anahtar .etiket-yazi { display: flex; align-items: center; gap: 6px; margin: 0; }
.yz-anahtar p { margin: 0; }
.yz-anahtar-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yz-anahtar-gir { display: flex; gap: 8px; flex-wrap: wrap; }
.yz-anahtar-gir input { flex: 1 1 220px; min-width: 0; }
.yz-sil { color: var(--crit); }
.kullanim-tur { display: grid; grid-template-columns: 130px 1fr 110px 80px; align-items: center; gap: 12px; font-size: 13px; }
.kullanim-tur + .kullanim-tur { margin-top: 10px; }
.kullanim-tur .sayi { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .kullanim-tur { grid-template-columns: 1fr 80px; }
    .kullanim-tur .dagilim-cubuk, .kullanim-tur .kullanim-miktar { display: none; }
}
.kullanim-son { margin-top: 16px; }

/* ---- Platform sahibi paneli ---------------------------------------------------------------------------- */
.panel-tablo-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.panel-tablo-ust .kart-baslik { margin-bottom: 0; }
.panel-ara {
    width: min(240px, 100%); padding: 6px 10px; font: inherit; font-size: 13px; color: var(--ink);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: 6px;
}
.panel-ara:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 65, 42, .15); }
.panel-bos { padding: 18px 16px; }
.panel-tablo td { vertical-align: top; }
.panel-tablo th, .panel-tablo td { padding-left: 12px; padding-right: 12px; }
.panel-tablo td:first-child { min-width: 180px; }
.panel-satir { cursor: pointer; }
.panel-satir:focus-within td { background: #FCFBF8; }
.panel-alt { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
td.sayi .panel-alt { text-align: right; }
.panel-tablo .rozet { white-space: nowrap; }
.diyalog-ayar { width: min(620px, calc(100vw - 32px)); border-top-color: var(--accent); }
.diyalog-ayar .diyalog-baslik { color: var(--ink); margin-bottom: 2px; }
.diyalog-ayar-ust { display: flex; align-items: flex-start; gap: 8px; }
.diyalog-ayar-ust p { margin-bottom: 12px; }
.diyalog-ayar-bolum {
    display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; margin: 18px 0 10px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.diyalog-ayar-bolum .ikon { color: var(--ink-dim); }
/* Deneme hesapları (supabase/032) */
.deneme-hesaplari { margin-top: 20px; }
.deneme-hesaplari .panel-bos .bant { margin: 0; }
.deneme-uzat { justify-content: flex-start; margin-top: 8px; }
.deneme-sinirlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .deneme-sinirlar { grid-template-columns: minmax(0, 1fr); } }
/* Site arşivi (supabase/034) */
.site-simge-arsiv { background: var(--surface-sunken); color: var(--ink-dim); }
.panel-sekmeler { margin: 0 0 -1px; padding: 0 12px; }
.arsiv-tablo td { vertical-align: top; }
.arsiv-tablo td:first-child { min-width: 200px; }

/* Marka logosu (supabase/035) ---------------------------------------------------------------------- */
.logo-karti { display: flex; gap: 16px; align-items: flex-start; }
.logo-onizleme {
    flex: 0 0 112px; height: 76px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; padding: 8px;
    background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface-raised) 0 50%) 0 0 / 14px 14px;
}
.logo-onizleme img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-onizleme.bos { background: var(--surface-sunken); color: var(--ink-faint); }
.logo-bilgi { flex: 1; min-width: 0; display: grid; gap: 6px; }
.logo-bilgi p { margin: 0; }
.logo-kaynak a { overflow-wrap: anywhere; }
.sihirbaz-logo { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
@media (max-width: 520px) { .logo-karti { flex-direction: column; } .logo-onizleme { flex-basis: auto; width: 100%; } }

/* Ürün kütüphanesi (037) -------------------------------------------------------------------------------- */
.kutuphane { display: grid; gap: 18px; }
.birak-alani { position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 16px; text-align: center; border: 1.5px dashed var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-dim); cursor: pointer; }
.birak-alani:hover, .birak-alani:focus-within { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.birak-alani.devre-disi { pointer-events: none; opacity: .7; }
.birak-girdi { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kutuphane-gorseller { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kutuphane-gorsel { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); }
.kutuphane-gorsel-resim { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--surface-sunken); }
.kutuphane-gorsel-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kutuphane-aciklama { width: 100%; font-size: 12.5px; padding: 5px 7px; }
.kutuphane-gorsel-dugmeler { display: flex; gap: 2px; justify-content: flex-end; }

/* ---- Otomatik takip ve güncellemeler (supabase/039) ------------------------------------------------------- */
.guncelleme-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.guncelleme { padding: 14px 16px; }
.guncelleme-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guncelleme-baslik { font-size: 14.5px; font-weight: 600; margin: 8px 0 4px; overflow-wrap: anywhere; }
.guncelleme-degisim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 13px; }
.guncelleme-eski { color: var(--ink-dim); text-decoration: line-through; }
.guncelleme-kaynak { margin: 2px 0 8px; font-size: 12px; overflow-wrap: anywhere; }
.guncelleme-kaynak a { color: var(--ink-dim); }
a.rozet { text-decoration: none; }

/* ---- Postimia yazı logosu ---- */
.logo-yazi { flex: none; display: block; }

/* ---- Ürün modeli (048): sihirbazın yeni adımları --------------------------------------------- */
.sirket-analizleri, .urun-listesi, .oneri-kartlari { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.sirket-analizleri { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.oneri-kartlari { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sirket-analizleri > .kart + .kart, .oneri-kartlari > .kart + .kart, .urun-listesi > .kart + .kart, .sirket-amaclari > .kart + .kart { margin-top: 0; }
.sirket-amaclari { display: grid; gap: 12px; }
.sirket-analiz-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sirket-analiz-ust .kart-baslik { margin-bottom: 0; }
.sirket-analiz p + p, .oneri-karti p + p, .oneri-karti ul + p { margin-top: 6px; }
.sirket-sektor { font-weight: 600; color: var(--ink); margin: 8px 0 4px; }
.oneri-ozeti { list-style: none; margin: 10px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.urun-satiri { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.urun-kapak { width: 56px; height: 56px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-sunken); display: grid; place-items: center; color: var(--ink-faint); }
.urun-kapak img { width: 100%; height: 100%; object-fit: cover; }
.urun-bilgi { flex: 1 1 160px; display: flex; flex-direction: column; min-width: 0; }
.anahtar-satir { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.anahtar-satir + .anahtar-satir { margin-left: 16px; }
.anahtar-satir input { width: 16px; height: 16px; accent-color: var(--good); }
.kutuphane-gorsel.kapak { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.cekmece-arka { position: fixed; inset: 0; background: rgba(15, 27, 45, .35); z-index: 40; }
.cekmece {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 41; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-raised); box-shadow: var(--golge); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.cekmece-ust { display: flex; align-items: center; justify-content: space-between; }
.cekmece-ust .kart-baslik { margin-bottom: 0; }

/* ---- Takvim ve paylaşım grubu paneli (048) --------------------------------------------------- */
.secim-cipleri { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.secim-cipleri .cip { cursor: pointer; font-size: 13px; padding: 5px 12px; color: var(--ink-dim); }
.secim-cipleri .cip:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }
.secim-cipleri .cip.secili { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-koyu); font-weight: 600; }
.secim-cipleri .cip:disabled { opacity: .45; cursor: not-allowed; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-top: 8px; }
.form-izgara .form-alan { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kapsam-sirket { padding: 8px 0; border-top: 1px solid var(--line); }
.kapsam-sirket:first-of-type { border-top: 0; }
.tercihten { font-size: 10.5px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.paylasim-cekmecesi input[type="time"], .paylasim-cekmecesi input[type="date"] { margin-top: 6px; max-width: 180px; }
.mod-rozeti { text-decoration: none; }
.mod-rozeti:hover { text-decoration: none; filter: brightness(.97); }
.hafta-gezinme { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.hafta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.hafta-gun { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--kose); padding: 8px; min-height: 160px; display: flex; flex-direction: column; gap: 6px; }
.hafta-gun.bugun { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hafta-gun-ust { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 12.5px; color: var(--ink-dim); }
.takvim-ogesi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; cursor: pointer;
    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; line-height: 1.35;
}
.takvim-ogesi.grup { background: var(--accent-soft); border-color: #F2C5BB; }
.takvim-ogesi.oneri { background: transparent; border-style: dashed; color: var(--ink-dim); }
.takvim-ogesi.uretilmez { opacity: .55; }
.takvim-ogesi.uretilmez strong { text-decoration: line-through; }
.takvim-ogesi:hover { border-color: var(--accent); }
.takvim-ogesi-alt { color: var(--ink-faint); font-size: 11.5px; }
.takvim-durum { font-family: var(--mono); font-size: 10.5px; color: var(--good); }
@media (max-width: 900px) {
    .hafta { grid-template-columns: 1fr; }
    .hafta-gun { min-height: 0; }
}

/* ---- Paylaşım önizlemeleri (048): platformun çerçevesi ve en-boyu ------------------------------ */
.onizleme-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.onizleme { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; }
.onizleme-tip { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 27, 45, .72); color: #fff; }
.onizleme-bos { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-faint); background: var(--surface-sunken); }
.onizleme-akis-ust { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.onizleme-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.onizleme-akis.facebook .onizleme-avatar { background: #1877F2; }
.onizleme-akis.linkedin .onizleme-avatar { background: #0A66C2; border-radius: 4px; }
.onizleme-platform { margin-left: auto; margin-right: 70px; font-size: 11px; color: var(--ink-faint); }
.onizleme-akis-gorsel { aspect-ratio: 4 / 5; background: var(--surface-sunken); }
.onizleme-akis-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.onizleme-akis-metin { padding: 8px 12px; line-height: 1.45; white-space: pre-line; }
.onizleme-etiket { padding: 0 12px 10px; color: #00376B; font-size: 12.5px; word-break: break-word; }
.onizleme-dikey { background: transparent; border: 0; }
.onizleme-dikey-cerceve { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; }
.onizleme-dikey-cerceve img, .onizleme-dikey-cerceve video { width: 100%; height: 100%; object-fit: cover; display: block; }
.onizleme-guvenli { position: absolute; left: 0; right: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 6px, rgba(255,255,255,0) 6px 12px); }
.onizleme-guvenli.ust { top: 0; height: 14%; }
.onizleme-guvenli.alt { bottom: 0; height: 35%; }
.onizleme-dikey-yazi { position: absolute; left: 12px; right: 56px; bottom: 14px; color: #fff; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.onizleme-dikey-yazi .onizleme-etiket { padding: 0; color: #fff; opacity: .9; }
.onizleme-web { padding: 0 0 14px; }
.onizleme-web-ust { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--surface-sunken); font-size: 11px; color: var(--ink-faint); }
.onizleme-nokta { width: 8px; height: 8px; border-radius: 50%; background: #D7D2C8; }
.onizleme-web-kapak { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.onizleme-web h3 { font-size: 17px; line-height: 1.3; margin: 12px 14px 6px; font-family: Georgia, "Times New Roman", serif; }
.onizleme-web-govde { margin: 0 14px; max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.onizleme-web-govde p { margin: 0 0 8px; line-height: 1.6; }

/* ---- Teslim (048) ------------------------------------------------------------------------------ */
.bolum-baslik { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.teslim-olay { margin-bottom: 14px; }
.teslim-olay.vurgulu { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--golge); }
.teslim-olay-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.teslim-olay-ust .kart-baslik { margin-bottom: 4px; }
.teslim-oge { display: flex; flex-direction: column; gap: 6px; }
.paylasim-oy { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.oy-karar { margin-top: 20px; }
.site-sayaclar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); }
.site-sayaclar .dikkat { color: var(--accent-koyu); font-weight: 600; }

/* Paylaşım önerileri düzenleme (sihirbaz, supabase/050) */
.oneri-duzen { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.oneri-duzen > summary { cursor: pointer; font-weight: 600; color: var(--ink-dim); }
.oneri-satirlari { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.oneri-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oneri-satir select, .oneri-satir input[type=time] { min-height: 36px; }

/* Ek bilgi / belge (supabase/051) */
.ek-bilgi { margin-top: 16px; }
.belge-listesi { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.belge-satir { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.belge-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sihirbaz: sektör kartları, öneri gerekçesi, kurulum özeti (supabase/052) */
.sektor-kartlari, .kurulum-ozeti { display: grid; gap: 14px; }
.sektor-sirketleri { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.sektor-sirket { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sektor-sirket select, .sektor-sirket input { min-height: 34px; }
.oneri-gerekce { flex-basis: 100%; }

/* Metin içi bağlantı görünümlü düğme (ör. giriş hatasındaki "doğrulama e-postasını yeniden gönder"). */
.dugme-baglanti { background: none; border: 0; padding: 0; color: var(--accent-koyu); text-decoration: underline; font: inherit; cursor: pointer; }
.dugme-baglanti:disabled { opacity: .5; cursor: default; }

/* Abonelik (Sayfalar/Abonelik.razor, supabase/057). */
.secici-sira { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.paket-listesi { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paket-kart { display: flex; flex-direction: column; gap: 6px; }
.paket-kart.secili { box-shadow: 0 0 0 2px var(--accent); }
.paket-kart .dugme { margin-top: auto; }
.paket-fiyat { margin: 0; font-size: 1.35rem; font-weight: 600; }
.odeme-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odeme-cerceve { width: 100%; min-height: 640px; border: 0; }
.sade-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.odeme-onay { margin-bottom: 16px; }