/* =========================================================
   Yapı Yönetim Paneli — tasarım sistemi
   Telefon öncelikli: temel stiller telefona göre, min-width ile büyür.
   ========================================================= */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/inter-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; }

:root {
    --zemin: #F3F4F7;
    --yuzey: #FFFFFF;
    --yuzey-2: #F6F7FA;
    --cizgi: #E5E8EE;
    --cizgi-koyu: #CDD3DD;

    --yazi: #0F1A2A;
    --yazi-2: #475467;
    --yazi-3: #8A94A6;

    --ana: #1F3D6D;
    --ana-koyu: #162E54;
    --ana-acik: #EAF0F8;
    --altin: #C49A4C;
    --altin-koyu: #9C7428;
    --altin-acik: #F7EEDC;

    --ok: #067647;      --ok-acik: #E5F4EC;
    --warn: #B54708;    --warn-acik: #FDF0E3;
    --danger: #B42318;  --danger-acik: #FCEBE9;
    --violet: #6941C6;  --violet-acik: #F1ECFB;
    --gray: #475467;    --gray-acik: #EEF0F4;
    --brand: #1F3D6D;   --brand-acik: #EAF0F8;

    --gece: #0E1A2B;
    --gece-2: #16253B;
    --gece-yazi: #93A1B8;

    --r: 12px;
    --r-k: 8px;
    --golge: 0 1px 2px rgba(15, 26, 42, .05), 0 4px 14px -6px rgba(15, 26, 42, .10);
    --golge-b: 0 24px 60px -18px rgba(15, 26, 42, .35);
    --yan-gen: 268px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--zemin); }
body {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px; line-height: 1.5; color: var(--yazi); background: var(--zemin);
    -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
    -webkit-tap-highlight-color: transparent;
    font-variant-numeric: tabular-nums;
}
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--altin-acik); }

.ik { width: 20px; height: 20px; flex: none; }
.ik-k { width: 16px; height: 16px; }
.ik-b { width: 40px; height: 40px; }

/* ---------------- Yan menü ---------------- */
.yan {
    position: fixed; inset: 0 auto 0 0; width: var(--yan-gen); z-index: 60;
    background: linear-gradient(180deg, var(--gece) 0%, #0B1524 100%);
    color: var(--gece-yazi); display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 1px 0 0 rgba(255,255,255,.04);
}
.yan.acik { transform: none; }
.yan-perde { position: fixed; inset: 0; background: rgba(8, 14, 24, .5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .25s; }
.yan.acik + .yan-perde { opacity: 1; pointer-events: auto; }

.yan-marka { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; color: #fff; text-decoration: none !important; }
.marka-isaret {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, #D9B46A, var(--altin) 55%, var(--altin-koyu));
    color: #1B1406; box-shadow: 0 6px 16px -6px rgba(196, 154, 76, .7), inset 0 1px 0 rgba(255,255,255,.35);
}
.marka-isaret .ik { width: 22px; height: 22px; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.2; }
.marka-yazi strong { font-size: 16px; font-weight: 750; letter-spacing: .02em; }
.marka-yazi small { font-size: 11.5px; color: var(--gece-yazi); letter-spacing: .02em; margin-top: 2px; }

.yan-proje { padding: 0 16px 14px; }
.yan-proje label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5F6E86; margin: 0 4px 6px; }
.yan-proje select { width: 100%; height: 40px; border-radius: 10px; border: 1px solid #24344D; background: var(--gece-2); color: #E6ECF5; padding: 0 12px; }

.yan-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; }
.nav-grup { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #56657D; padding: 16px 10px 6px; }
.nav-oge {
    display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px;
    color: #A9B5C8; font-size: 14px; font-weight: 520; text-decoration: none !important; position: relative;
}
.nav-oge .ik { width: 19px; height: 19px; opacity: .85; }
.nav-oge:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-oge.on { background: linear-gradient(90deg, rgba(196,154,76,.18), rgba(196,154,76,.04)); color: #fff; }
.nav-oge.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--altin); }
.nav-oge.on .ik { color: var(--altin); opacity: 1; }

.yan-kul { display: flex; align-items: center; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.06); }
.kul-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #22334D; color: #fff; font-weight: 700; flex: none; }
.kul-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kul-yazi strong { color: #E6ECF5; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kul-yazi small { font-size: 11.5px; }
.kul-cikis { color: var(--gece-yazi); padding: 8px; border-radius: 8px; display: grid; }
.kul-cikis:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ---------------- Üst çubuk ve içerik ---------------- */
.ana { min-height: 100vh; display: flex; flex-direction: column; }
.ust {
    position: sticky; top: 0; z-index: 40; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--cizgi);
}
.ust-menu { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; color: var(--yazi); cursor: pointer; }
.ust-menu:hover { background: var(--yuzey-2); }
.ust-baslik { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ust-firma { font-weight: 750; font-size: 14.5px; letter-spacing: .02em; }
.ust-proje { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--yazi-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-sag { display: none; }
.ust-tarih { font-size: 13px; color: var(--yazi-3); }

.icerik { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
.sayfa-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sayfa-bas h1 { font-size: 22px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.sayfa-bas p { color: var(--yazi-2); font-size: 14px; margin-top: 4px; max-width: 720px; }
.sayfa-islem { display: flex; flex-wrap: wrap; gap: 8px; }
.alt-imza { display: none; text-align: center; font-size: 12px; color: var(--yazi-3); padding: 0 0 22px; }

/* Telefon alt çubuğu */
.alt-cubuk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--cizgi);
}
.alt-cubuk a, .alt-cubuk button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none;
    font-size: 11px; font-weight: 600; color: var(--yazi-3); text-decoration: none !important; cursor: pointer; border-radius: 10px;
}
.alt-cubuk .ik { width: 22px; height: 22px; }
.alt-cubuk .on { color: var(--ana); }
.alt-cubuk .on .ik { color: var(--altin-koyu); }

@media (min-width: 1024px) {
    .yan { transform: none; }
    .yan-perde, .ust-menu, .alt-cubuk { display: none; }
    .ana { margin-left: var(--yan-gen); }
    .ust { padding: 0 28px; height: 60px; }
    .ust-sag { display: block; }
    .icerik { padding: 26px 28px 30px; }
    .sayfa-bas h1 { font-size: 26px; }
    .alt-imza { display: block; }
}

/* ---------------- Kart ---------------- */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); }
.kart + .kart, .kart + .izgara, .izgara + .kart, .izgara + .izgara { margin-top: 16px; }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.kart-bas h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.kart-bas h2 .ik { color: var(--altin-koyu); }
.kart-bas .ek { font-size: 13px; color: var(--yazi-3); }
.kart-govde { padding: 18px; }
.kart-govde.sifir { padding: 0; }
.kart-alt { padding: 12px 18px; border-top: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 var(--r) var(--r); font-size: 13.5px; color: var(--yazi-2); }

.izgara { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.izgara > * { min-width: 0; }
@media (min-width: 900px) {
    .izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .izgara-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .izgara-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* İstatistik kutuları */
.ist-izgara { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 760px) { .ist-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ist-izgara.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .ist-izgara:not(.d4) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ist {
    display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; min-width: 0;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge);
    color: inherit; text-decoration: none !important; transition: border-color .15s, transform .15s;
}
a.ist:hover { border-color: var(--cizgi-koyu); transform: translateY(-1px); }
.ist-ik { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ist-ik .ik { width: 19px; height: 19px; }
.ist-brand { background: var(--brand-acik); color: var(--brand); }
.ist-ok { background: var(--ok-acik); color: var(--ok); }
.ist-warn { background: var(--warn-acik); color: var(--warn); }
.ist-danger { background: var(--danger-acik); color: var(--danger); }
.ist-violet { background: var(--violet-acik); color: var(--violet); }
.ist-altin { background: var(--altin-acik); color: var(--altin-koyu); }
.ist-yazi { min-width: 0; display: flex; flex-direction: column; }
.ist-deger { font-size: 19px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ist-etiket { font-size: 12.5px; color: var(--yazi-2); font-weight: 520; margin-top: 2px; }
.ist-alt { font-size: 11.5px; color: var(--yazi-3); margin-top: 2px; }
@media (min-width: 1500px) { .ist-deger { font-size: 21px; } }   /* altında 19 px: beş sütunda tutar kesilmesin */
/* Telefonda tutar kesilmesin: ikon üstte, tutar tam satır */
@media (max-width: 520px) {
    .ist { flex-direction: column; gap: 8px; padding: 13px 14px; }
    .ist-ik { width: 34px; height: 34px; }
    .ist-deger { font-size: 17px; white-space: normal; overflow: visible; }
}

/* ---------------- Düğmeler ---------------- */
.dg {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 16px;
    border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    text-decoration: none !important; transition: background .15s, border-color .15s, box-shadow .15s; user-select: none;
}
.dg .ik { width: 18px; height: 18px; }
.dg-ana { background: var(--ana); color: #fff; box-shadow: 0 1px 2px rgba(31,61,109,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.dg-ana:hover { background: var(--ana-koyu); }
.dg-altin { background: linear-gradient(180deg, #D3AC5E, var(--altin)); color: #1E1608; border-color: #B88B3B; }
.dg-altin:hover { background: var(--altin); }
.dg-ok { background: var(--ok); color: #fff; }
.dg-ok:hover { background: #05603A; }
.dg-tehlike { background: var(--yuzey); color: var(--danger); border-color: #EBC3BE; }
.dg-tehlike:hover { background: var(--danger-acik); }
.dg-hayalet { background: var(--yuzey); color: var(--yazi-2); border-color: var(--cizgi-koyu); }
.dg-hayalet:hover { background: var(--yuzey-2); }
.dg-k { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.dg-k .ik { width: 16px; height: 16px; }
.dg-ikon { width: 34px; padding: 0; }
.dg-tam { width: 100%; }
.dg.bekliyor { pointer-events: none; opacity: .7; }
.dg.bekliyor::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.dg-grup { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------- Rozet ---------------- */
.rozet { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.rozet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.rozet-ok { color: var(--ok); background: var(--ok-acik); }
.rozet-warn { color: var(--warn); background: var(--warn-acik); }
.rozet-danger { color: var(--danger); background: var(--danger-acik); }
.rozet-brand { color: var(--brand); background: var(--brand-acik); }
.rozet-violet { color: var(--violet); background: var(--violet-acik); }
.rozet-gray { color: var(--gray); background: var(--gray-acik); }
.rozet-altin { color: var(--altin-koyu); background: var(--altin-acik); }

/* ---------------- Tablo (telefonda kart) ---------------- */
.tablo-sar { width: 100%; }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--yazi-3); padding: 10px 14px; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 12px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: #FAFBFD; }
.tablo .sag, .tablo th.sag { text-align: right; }
.tablo .tutar { font-weight: 650; white-space: nowrap; text-align: right; }
.tablo tfoot td { font-weight: 750; background: var(--yuzey-2); border-top: 1px solid var(--cizgi); }
.tablo .soluk { color: var(--yazi-3); font-size: 12.5px; }
.tablo tr.arsivli td { opacity: .55; }
.tablo tr[data-git] { cursor: pointer; }
.k-ad { font-weight: 620; }
.k-alt { display: block; font-size: 12.5px; color: var(--yazi-3); }
.eksi { color: var(--danger); }
.arti { color: var(--ok); }

@media (max-width: 759px) {
    .tablo thead { display: none; }
    .tablo, .tablo tbody, .tablo tr, .tablo td, .tablo tfoot { display: block; width: 100%; }
    .tablo tr { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
    .tablo tbody tr:last-child { border-bottom: 0; }
    .tablo td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
    .tablo td::before { content: attr(data-e); font-size: 12.5px; color: var(--yazi-3); font-weight: 520; text-align: left; flex: none; }
    .tablo td[data-e=""]::before { display: none; }
    .tablo td.bas { display: block; text-align: left; padding-bottom: 6px; }
    .tablo td.bas::before { display: none; }
    .tablo td.islem { justify-content: flex-end; padding-top: 8px; }
    .tablo td.islem::before { display: none; }
    .tablo tbody tr:hover td { background: transparent; }
    .tablo tfoot tr { background: var(--yuzey-2); }
}
@media (min-width: 760px) { .tablo-sar { overflow-x: auto; } }

/* ---------------- Form ---------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-izgara { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-izgara { grid-template-columns: 1fr 1fr; } .form-izgara .tam { grid-column: 1 / -1; } .form-izgara.uc { grid-template-columns: repeat(3, 1fr); } }
.alan label { display: block; font-size: 13px; font-weight: 600; color: var(--yazi-2); margin-bottom: 6px; }
.alan label .zorunlu { color: var(--danger); }
.alan input[type=text], .alan input[type=date], .alan input[type=number], .alan input[type=tel], .alan input[type=email], .alan input[type=password], .alan select, .alan textarea,
.suzgec select, .suzgec input {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--cizgi-koyu); border-radius: 10px; background: var(--yuzey);
    font-size: 15px; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.alan select, .suzgec select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.alan textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; }
.alan input:focus, .alan select:focus, .alan textarea:focus, .suzgec select:focus, .suzgec input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(31,61,109,.12); }
.alan.hatali input, .alan.hatali select { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,24,.1); }
.ipucu { display: block; font-size: 12.5px; color: var(--yazi-3); margin-top: 5px; line-height: 1.4; }
.para-kutu { position: relative; }
.para-kutu input { padding-right: 32px !important; text-align: right; font-weight: 600; }
.para-kutu span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--yazi-3); font-weight: 600; pointer-events: none; }
.form-bolum { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--altin-koyu); padding-top: 6px; border-top: 1px dashed var(--cizgi); margin-top: 4px; }
.form-bolum:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-alt { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.form-alt .dg { min-width: 120px; }
.secim-dugme { display: flex; flex-wrap: wrap; gap: 6px; }
.secim-dugme label { margin: 0; }
.secim-dugme input { position: absolute; opacity: 0; pointer-events: none; }
.secim-dugme span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--cizgi-koyu); border-radius: 10px; font-size: 14px; font-weight: 560; color: var(--yazi-2); cursor: pointer; background: var(--yuzey); }
.secim-dugme input:checked + span { border-color: var(--ana); background: var(--ana-acik); color: var(--ana); box-shadow: inset 0 0 0 1px var(--ana); }
.foto-sec { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px dashed var(--cizgi-koyu); border-radius: 10px; color: var(--yazi-2); cursor: pointer; font-size: 14px; background: var(--yuzey-2); }
.foto-sec input { display: none; }
.foto-sec.dolu { border-style: solid; border-color: var(--ok); color: var(--ok); background: var(--ok-acik); }
.uyari-kutu { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: var(--warn-acik); color: #7A3306; border: 1px solid #F3D3B5; }
.uyari-kutu .ik { flex: none; margin-top: 1px; }
.uyari-kutu.bilgi { background: var(--brand-acik); color: var(--ana-koyu); border-color: #CFDBEC; }
.uyari-kutu.tehlike { background: var(--danger-acik); color: #7F1D14; border-color: #F1C4BE; }

/* Süzgeç çubuğu */
.suzgec { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); background: #FBFCFD; border-radius: var(--r) var(--r) 0 0; }
.suzgec > div { flex: 1 1 160px; min-width: 0; }
.suzgec label { display: block; font-size: 12px; font-weight: 600; color: var(--yazi-3); margin-bottom: 4px; }
.suzgec select, .suzgec input { height: 40px; font-size: 14px; }

/* Sekmeler */
.sekmeler { display: flex; gap: 4px; padding: 4px; background: var(--gray-acik); border-radius: 12px; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; }
.sekmeler a, .sekmeler button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 9px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--yazi-2); cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.sekmeler .on { background: var(--yuzey); color: var(--yazi); box-shadow: 0 1px 3px rgba(15,26,42,.1); }
.sekmeler .sayac { font-size: 11.5px; background: var(--cizgi); color: var(--yazi-2); border-radius: 999px; padding: 1px 7px; }

/* ---------------- Pencere (telefonda alttan açılır) ---------------- */
.pencere { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-end; justify-content: center; background: rgba(9, 15, 26, .52); }
.pencere.on { display: flex; animation: belir .18s ease; }
@keyframes belir { from { opacity: 0; } }
.pencere-kutu {
    width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--yuzey);
    border-radius: 18px 18px 0 0; box-shadow: var(--golge-b); animation: yuksel .22s ease;
    padding-bottom: env(safe-area-inset-bottom);
}
@keyframes yuksel { from { transform: translateY(30px); opacity: .6; } }
.pencere-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--cizgi); }
.pencere-bas h3 { font-size: 16.5px; font-weight: 720; letter-spacing: -.02em; }
.pencere-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--yuzey-2); display: grid; place-items: center; cursor: pointer; color: var(--yazi-2); }
.pencere-x:hover { background: var(--cizgi); }
.pencere-kutu > .form, .pencere-govde { padding: 16px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pencere-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--cizgi); }
.pencere-alt .dg { min-width: 120px; }
@media (min-width: 700px) {
    .pencere { align-items: center; padding: 24px; }
    .pencere-kutu { width: 560px; border-radius: 16px; max-height: 88vh; padding-bottom: 0; }
    .pencere-genis { width: 760px; }
    .pencere-dar { width: 440px; }
}
.onay-yazi { font-size: 14.5px; color: var(--yazi-2); }
.onay-yazi:empty { display: none; }
.onay-ozet { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 10px; padding: 12px 14px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 10px; font-size: 14px; }
.onay-ozet:empty { display: none; }
.onay-ozet dt { color: var(--yazi-3); }
.onay-ozet dd { font-weight: 600; text-align: right; word-break: break-word; }

/* Bildirim */
.bildirim-kutu { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 120; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.bildirim { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #0F1A2A; color: #fff; font-size: 14px; font-weight: 520; box-shadow: var(--golge-b); animation: yuksel .2s ease; pointer-events: auto; }
.bildirim.hata { background: var(--danger); }
.bildirim.ok .ik { color: #6FD3A3; }
@media (min-width: 1024px) { .bildirim-kutu { bottom: 24px; left: auto; right: 24px; transform: none; } }

/* ---------------- Küçük parçalar ---------------- */
.bos { padding: 36px 18px; text-align: center; color: var(--yazi-3); }
.bos .ik { margin: 0 auto 10px; color: var(--cizgi-koyu); }
.bos p { font-size: 14px; }
.cubuk { display: block; width: 100%; height: 7px; border-radius: 99px; background: var(--gray-acik); overflow: hidden; }
.cubuk-dolu { display: block; height: 100%; border-radius: 99px; }
.cubuk-ok { background: linear-gradient(90deg, #2BA36C, var(--ok)); }
.cubuk-warn { background: linear-gradient(90deg, #E08A3A, var(--warn)); }
.cubuk-danger { background: linear-gradient(90deg, #E05A4E, var(--danger)); }
.satir-liste { list-style: none; }
.satir-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--cizgi); }
.satir-liste li:last-child { border-bottom: 0; }
.satir-liste .sl-ik { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.satir-liste .sl-orta { flex: 1; min-width: 0; }
.satir-liste .sl-ust { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir-liste .sl-alt { display: block; font-size: 12.5px; color: var(--yazi-3); }
.satir-liste .sl-sag { text-align: right; font-weight: 650; white-space: nowrap; font-size: 14px; }
.bilgi-liste { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.bilgi-liste dt { color: var(--yazi-3); }
.bilgi-liste dd { font-weight: 560; text-align: right; }
.ozet-bant { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--cizgi); border-radius: var(--r); overflow: hidden; border: 1px solid var(--cizgi); }
.ozet-bant > div { background: var(--yuzey); padding: 14px 16px; }
.ozet-bant small { display: block; font-size: 12px; color: var(--yazi-3); font-weight: 560; }
.ozet-bant strong { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.etiket-k { font-size: 12px; color: var(--yazi-3); }
.yazi-sag { text-align: right; }
.bosluk-u { margin-top: 16px; }
.nowrap { white-space: nowrap; }

/* ---------------- Daire tablosu (bina) ---------------- */
.bina-sahne { padding: 22px 14px 0; background: linear-gradient(180deg, #EEF3FA 0%, #F7F9FC 60%, #FFFFFF 100%); border-radius: 0 0 var(--r) var(--r); overflow-x: auto; }
.bina { margin: 0 auto; width: 100%; max-width: var(--bina-gen, 640px); min-width: min-content; display: flex; flex-direction: column; align-items: center; }
.bina-cati { width: calc(100% - 20px); max-width: var(--bina-gen, 640px); height: 16px; background: linear-gradient(180deg, #5B6B82, #3E4C61); border-radius: 6px 6px 0 0; }
.bina-govde { width: 100%; max-width: var(--bina-gen, 640px); background: #DCE3EC; padding: 8px; border-radius: 0 0 4px 4px; box-shadow: 0 10px 30px -12px rgba(15,26,42,.35); display: flex; flex-direction: column; gap: 8px; }
.bina-kat { display: flex; align-items: stretch; gap: 8px; }
.kat-ad { width: 54px; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #51617A; background: #CBD4E0; border-radius: 6px; text-align: center; line-height: 1.2; padding: 4px; }
.kat-daireler { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--kat-adet, 2), minmax(104px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .kat-ad { width: 40px; font-size: 10.5px; } .bina-govde { padding: 6px; gap: 6px; } .kat-daireler { gap: 6px; } .daire { padding: 8px 8px 8px 12px; } }
.daire { min-width: 0;
    position: relative; text-align: left; border: 0; cursor: pointer; border-radius: 8px; padding: 10px 11px 10px 14px; min-height: 86px;
    background: var(--yuzey); box-shadow: 0 1px 2px rgba(15,26,42,.08); display: flex; flex-direction: column; gap: 2px; overflow: hidden;
    transition: transform .12s, box-shadow .12s;
}
.daire::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.daire:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(15,26,42,.3); }
.daire-no { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.daire-tip { font-size: 12px; color: var(--yazi-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daire-durum { font-size: 12px; font-weight: 700; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daire-kisi { font-size: 12px; color: var(--yazi-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daire.d-bos::before { background: #2BA36C; }      .daire.d-bos .daire-durum { color: var(--ok); }
.daire.d-rezerve { background: #FFF8EE; }          .daire.d-rezerve::before { background: #E08A3A; } .daire.d-rezerve .daire-durum { color: var(--warn); }
.daire.d-satildi { background: #F1F5FB; }          .daire.d-satildi::before { background: var(--ana); } .daire.d-satildi .daire-durum { color: var(--ana); }
.daire.d-teslim { background: #F5F2FC; }           .daire.d-teslim::before { background: var(--violet); } .daire.d-teslim .daire-durum { color: var(--violet); }
.bina-zemin { width: calc(100% + 40px); height: 14px; background: linear-gradient(180deg, #B8C2CF, #E7ECF2); border-radius: 50%; margin-top: -2px; filter: blur(1px); }
.renk-aciklama { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--yazi-2); }
.renk-aciklama span { display: inline-flex; align-items: center; gap: 6px; }
.renk-aciklama i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Ödeme planı satırları (satış formu) */
.plan-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey-2); position: relative; }
.plan-satir .tam { grid-column: 1 / -1; }
.plan-satir select, .plan-satir input { width: 100%; height: 40px; border: 1px solid var(--cizgi-koyu); border-radius: 9px; padding: 0 10px; background: var(--yuzey); font-size: 14px; }
.plan-satir .plan-sil { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cizgi-koyu); background: var(--yuzey); display: grid; place-items: center; cursor: pointer; color: var(--danger); }
@media (min-width: 640px) { .plan-satir { grid-template-columns: 140px 150px 1fr; } .plan-satir .tam { grid-column: auto; } .plan-satir .takas-ne { grid-column: 1 / -1; } }
.plan-toplam { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 650; background: var(--ok-acik); color: var(--ok); }
.plan-toplam.eksik { background: var(--warn-acik); color: var(--warn); }

/* Puantaj */
.ay-tablo { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.ay-tablo th, .ay-tablo td { border: 1px solid var(--cizgi); padding: 5px 4px; text-align: center; white-space: nowrap; }
.ay-tablo th { background: var(--yuzey-2); font-weight: 650; color: var(--yazi-2); }
.ay-tablo td.ad { text-align: left; font-weight: 600; padding: 5px 10px; position: sticky; left: 0; background: var(--yuzey); }
.ay-tablo .g1 { background: var(--ok-acik); color: var(--ok); font-weight: 700; }
.ay-tablo .g05 { background: var(--warn-acik); color: var(--warn); font-weight: 700; }
.ay-tablo .g0 { color: var(--danger); }
.ay-tablo .hs { background: #F7F8FA; }

/* Giriş ekranı: dosyanın sonunda (gece sahnesi kurallarından sonra gelmeli) */

/* =========================================================
   3B ARKA PLAN (Blender) + KUTUCUK DÜZENİ
   ========================================================= */
/* Arka plan sabit katmanda durur (iPhone'da background-attachment:fixed çalışmaz) */
html { background: #F3EEE5; }
body { background: transparent; }
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(247, 243, 236, .55) 0%, rgba(247, 243, 236, .22) 30%, rgba(247, 243, 236, 0) 42%),
        var(--arka-genis) right bottom / cover no-repeat;
}
@media (max-width: 759px) {
    body::before {
        background:
            linear-gradient(180deg, rgba(247, 243, 236, .82) 0%, rgba(247, 243, 236, .55) 45%, rgba(247, 243, 236, .15) 75%, rgba(247, 243, 236, 0) 100%),
            var(--arka-dik) center bottom / cover no-repeat;
    }
}
/* İç sayfalar: CTR panelindeki açık zemin. Ufka uzanan ızgara, ufuk ışığı ve yaldızlı firma adı içeriğin altında kalır. */
html:has(body.acik-zemin) {
    background: linear-gradient(180deg, #FAFBFD 0%, #F5F7FB 34%, #F2F3F7 52%, #F3F1EC 60%, #F2EDE3 66%, #EFEAE1 78%, #EDE9E2 100%) fixed;
}
html:has(body.acik-zemin)::before {
    content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(150, 132, 100, .17) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(90deg, rgba(150, 132, 100, .14) 0 1px, transparent 1px 62px);
    transform: perspective(640px) rotateX(69deg) scale(2.9);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .72) 18%, rgba(0, 0, 0, .3) 29%, transparent 36%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .72) 18%, rgba(0, 0, 0, .3) 29%, transparent 36%);
}
body.acik-zemin::before {
    background:
        radial-gradient(440px 84px at 50% 63.6%, rgba(255, 248, 228, .80), transparent 76%),
        radial-gradient(980px 200px at 50% 64.6%, rgba(233, 205, 148, .28), transparent 78%),
        radial-gradient(1600px 400px at 50% 66%, rgba(205, 175, 120, .12), transparent 80%),
        linear-gradient(180deg, transparent 64%, rgba(255, 252, 245, .40) 68%, transparent 82%),
        radial-gradient(820px 560px at 98% -8%, rgba(214, 178, 110, .16), transparent 66%),
        radial-gradient(720px 540px at -6% -4%, rgba(120, 145, 185, .09), transparent 68%),
        radial-gradient(700px 480px at 4% 106%, rgba(120, 145, 185, .07), transparent 68%);
}
body.acik-zemin > .ana::before {
    content: ''; position: fixed; z-index: -2; pointer-events: none; left: 0; right: 0; top: 63.8%; height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(200, 165, 100, .18) 14%, rgba(255, 250, 235, .85) 50%, rgba(200, 165, 100, .18) 86%, transparent);
    box-shadow: 0 0 26px 6px rgba(233, 205, 148, .26);
}
body.acik-zemin > .ana::after {
    content: ''; position: fixed; z-index: -2; pointer-events: none; left: 0; right: 0; bottom: 0; height: 26vh;
    background: linear-gradient(180deg, transparent, rgba(150, 132, 100, .12));
}
body.acik-zemin::after {
    content: attr(data-imza); position: fixed; z-index: -1; right: 26px; bottom: 44px;
    font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 8.4vw, 132px); font-weight: 700;
    letter-spacing: .05em; white-space: nowrap; line-height: 1; pointer-events: none; user-select: none; color: transparent;
    background: linear-gradient(100deg, rgba(169, 119, 28, .22) 0%, rgba(214, 163, 58, .30) 18%, rgba(255, 246, 216, .62) 32%, rgba(240, 212, 140, .40) 40%, rgba(200, 155, 74, .22) 56%, rgba(169, 119, 28, .16) 74%, rgba(214, 163, 58, .26) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)) drop-shadow(0 3px 6px rgba(120, 96, 48, .12));
}
@media (prefers-reduced-motion: no-preference) {
    body.acik-zemin::after { animation: acikImzaIsik 9s ease-in-out infinite alternate; }
    @keyframes acikImzaIsik { from { background-position: 0% center; } to { background-position: 100% center; } }
}
@media (max-width: 899px) {
    body.acik-zemin > .ana::before { top: 60%; }
    html:has(body.acik-zemin)::before {
        transform: perspective(560px) rotateX(66deg) scale(2.1);
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 20%, rgba(0, 0, 0, .28) 32%, transparent 40%);
                mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 20%, rgba(0, 0, 0, .28) 32%, transparent 40%);
    }
    body.acik-zemin::before {
        background:
            radial-gradient(280px 66px at 50% 59.6%, rgba(255, 248, 228, .80), transparent 76%),
            radial-gradient(620px 160px at 50% 60.6%, rgba(233, 205, 148, .26), transparent 78%),
            radial-gradient(1000px 320px at 50% 62%, rgba(205, 175, 120, .11), transparent 80%),
            linear-gradient(180deg, transparent 60%, rgba(255, 252, 245, .38) 64%, transparent 78%),
            radial-gradient(520px 400px at 100% -6%, rgba(214, 178, 110, .15), transparent 68%),
            radial-gradient(460px 380px at -6% -2%, rgba(120, 145, 185, .08), transparent 70%);
    }
    body.acik-zemin::after { font-size: clamp(36px, 11.5vw, 70px); right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); letter-spacing: .04em; }
}
/* Ana sayfa (geniş ekran): akşam sahnesi — LED'li bina, ışıklı çatı yazısı, ıslak zeminde yansımalar */
@media (min-width: 760px) {
    body.sahneli { --gece: 1; }   /* app.js okur: gece sahnesi var */
    html:has(body.sahneli) { background: #0D1630; }
    body.sahneli::before {
        background:
            linear-gradient(180deg, rgba(8, 14, 34, .30) 0%, rgba(8, 14, 34, 0) 38%),
            var(--arka-gece) right bottom / cover no-repeat;
    }
}
@media (min-width: 1024px) { body.sahneli .alt-imza { color: rgba(236, 226, 205, .55); } }
/* Arka plandaki 3B altın tabelanın harflerinde gidip gelen ışıltı + nefes alan parlama.
   Maske (…_maske.png) aynı kameradan yalnız harfler: arka planla aynı yere oturur (right bottom / cover). */
.tabela-isilti { display: none; }
@media (min-width: 760px) {
    body.sahneli .tabela-isilti {
        display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        -webkit-mask: var(--maske-gece) right bottom / cover no-repeat;
                mask: var(--maske-gece) right bottom / cover no-repeat;
        background: linear-gradient(105deg, transparent 34%, rgba(255, 252, 238, .82) 48%, rgba(255, 232, 170, .45) 54%, transparent 66%) 75% 0 / 34% 100% no-repeat;
        mix-blend-mode: normal;
        animation: tabelaIsilti 5.5s ease-in-out infinite alternate;
    }
    body.sahneli .tabela-isilti::before {
        content: ''; position: absolute; inset: 0; background: rgba(255, 190, 96, .26);
        animation: tabelaNefes 3.6s ease-in-out infinite alternate;
    }
}
@keyframes tabelaIsilti { from { background-position: 72% 0; } to { background-position: 145% 0; } }
@keyframes tabelaNefes { from { opacity: 0; } to { opacity: 1; } }
@keyframes tabelaIsiltiTel { from { background-position: -25% 0; } to { background-position: 135% 0; } }
.imza.resimde { display: none; }
/* Tabelanın altındaki LED çizgiler tek renk (sıcak altın) kalır; üstlerinde aynı renkte parlak bir ışık gidip gelir
   (maske: aynı kameradan yalnız LED çizgileri + yumuşak hâle). Çok renkli akış beğenilmedi (30.10). */
.tabela-led { display: none; }
.tabela-led, .tabela-led-tel {
    --led-isik: linear-gradient(90deg, rgba(255, 214, 140, 0) 0%, rgba(255, 222, 160, .55) 30%, rgba(255, 246, 214, .98) 50%, rgba(255, 222, 160, .55) 70%, rgba(255, 214, 140, 0) 100%);
    pointer-events: none;
}
@media (min-width: 760px) {
    body.sahneli .tabela-led {
        display: block; position: fixed; inset: 0; z-index: -1;
        -webkit-mask: var(--led-gece) right bottom / cover no-repeat;
                mask: var(--led-gece) right bottom / cover no-repeat;
        background: var(--led-isik) 67% 0 / 12% 100% no-repeat;
        animation: ledAkis 4.5s ease-in-out infinite alternate;
    }
    body.sahneli.sahne-dar .tabela-led { display: none; }
}
.tabela-led-tel {
    position: absolute; inset: 0;
    -webkit-mask: var(--led-sahne) center / cover no-repeat;
            mask: var(--led-sahne) center / cover no-repeat;
    background: var(--led-isik) -10% 0 / 30% 100% no-repeat;
    animation: ledAkisTel 4.5s ease-in-out infinite alternate;
}
@keyframes ledAkis { from { background-position: 67% 0; } to { background-position: 109% 0; } }
@keyframes ledAkisTel { from { background-position: -10% 0; } to { background-position: 114% 0; } }
.ust { background: rgba(255, 255, 255, .82); }
.kart, .ist { background: rgba(255, 255, 255, .95); }

/* Firma yazısı: kabartmalı yaldız (alt alta inen gölgeler derinlik verir), üstünde gidip gelen parıltı,
   çevresinde nefes alan ışık. İçeriğin altında, arka planın üstünde durur; yerini app.js hesaplar. */
.imza { position: fixed; z-index: -1; right: 36px; bottom: 44px; font-size: 72px; opacity: 0; transition: opacity .6s ease; }
.imza {
    font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
    letter-spacing: .06em; line-height: 1; white-space: nowrap;
    pointer-events: none; user-select: none;
    color: #C99A47;
    text-shadow:
        0 .010em 0 #C29243, 0 .020em 0 #B98A3C, 0 .030em 0 #AF8135, 0 .040em 0 #A5782F,
        0 .050em 0 #9A6F29, 0 .060em 0 #8F6623, 0 .070em 0 #845D1E, 0 .080em 0 #795419,
        0 .10em .03em rgba(60, 40, 10, .40), 0 .18em .12em rgba(60, 40, 10, .25), 0 .32em .30em rgba(60, 40, 10, .16);
    animation: imzaIsik 3.6s ease-in-out infinite alternate;
}
.imza.hazir { opacity: 1; }
.imza::after {
    content: attr(data-yazi);
    position: absolute; left: 0; top: 0;
    color: transparent; text-shadow: none;
    background:
        linear-gradient(105deg, transparent 30%, rgba(255, 253, 240, .95) 45%, rgba(255, 240, 200, .6) 50%, transparent 62%) 100% 0 / 280% 100% no-repeat,
        linear-gradient(180deg, #FFF6D8 0%, #F4D891 28%, #DBAC4A 56%, #EDCB7B 78%, #B98530 100%);
    -webkit-background-clip: text; background-clip: text;
    animation: imzaParilti 5.5s ease-in-out infinite alternate;
}
@keyframes imzaParilti { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes imzaIsik {
    from { filter: drop-shadow(0 0 4px rgba(255, 196, 92, .18)); }
    to   { filter: drop-shadow(0 0 16px rgba(255, 204, 110, .62)) drop-shadow(0 0 2px rgba(255, 240, 200, .5)); }
}
/* Ana sayfa: sahne sığıyorsa app.js kartları sola yaslar ve genişliğini tabelanın soluna kadar sınırlar
   (en az 1140 px — para kutularındaki tutarlar kesilmesin); sığmıyorsa düzen olduğu gibi ortalı kalır */
body.sahneli .icerik { position: relative; }
/* Sahnede yer yoksa (dar ekran, telefon) yazı sayfanın sonunda kartların altında durur: kaydırırken de hiçbir kart onu örtmez */
.imza.akis { position: absolute; z-index: 0; left: 50%; right: auto; top: auto; bottom: 34px; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .imza, .imza::after, .tabela-isilti, .tabela-isilti::before, .tabela-isilti-tel, .tabela-isilti-tel::before, .tabela-led, .tabela-led-tel { animation: none; } }


/* Karşılama kartı (CTR panelindeki gibi) */
.karsilama {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 24px 22px 28px; margin-bottom: 16px; border-radius: 14px;
    background: linear-gradient(120deg, rgba(255,255,255,.97) 0%, rgba(255,252,246,.95) 60%, rgba(250,243,228,.93) 100%);
    border: 1px solid #EADFCB; box-shadow: var(--golge);
}
.karsilama::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--ana), var(--altin)); }
.karsilama-tarih { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yazi-3); }
.karsilama h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ana); margin-top: 4px; line-height: 1.15; }
.karsilama-cizgi { width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--altin), #E8CB8A); margin: 10px 0 8px; }
.karsilama p { font-size: 14px; color: var(--yazi-2); font-weight: 520; }
.karsilama-sag { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--cizgi); font-size: 13px; font-weight: 650; color: var(--yazi-2); box-shadow: var(--golge); text-decoration: none !important; }
.cip .ik { width: 17px; height: 17px; color: var(--altin-koyu); }
@media (min-width: 1024px) { .karsilama h1 { font-size: 30px; } }

/* Telefon (ve sahnenin sığmadığı dar masaüstü): bina ve tabela en üstteki karşılama kartının resminde durur */
.karsilama-sahne { display: none; position: relative; background: #101B3A center / cover no-repeat; }
.tabela-isilti-tel {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: var(--maske-sahne) center / cover no-repeat;
            mask: var(--maske-sahne) center / cover no-repeat;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 252, 238, .82) 48%, rgba(255, 232, 170, .45) 54%, transparent 66%) -25% 0 / 34% 100% no-repeat;
    animation: tabelaIsiltiTel 5.5s ease-in-out infinite alternate;
}
.tabela-isilti-tel::before {
    content: ''; position: absolute; inset: 0; background: rgba(255, 190, 96, .26);
    animation: tabelaNefes 3.6s ease-in-out infinite alternate;
}
/* Dar masaüstü (sahnedeki tabela kartların arkasına düşerdi; app.js 'sahne-dar' ekler): arka plan sade gece,
   bina + tabela resmi karşılama kartının sağında; yazının hiçbir harfi örtülmez */
@media (min-width: 760px) {
    body.sahneli.sahne-dar::before {
        background:
            radial-gradient(ellipse at 78% 105%, rgba(255, 170, 80, .16), rgba(255, 170, 80, 0) 55%),
            linear-gradient(180deg, #0B1430 0%, #16224A 55%, #262C55 100%);
    }
    body.sahneli.sahne-dar .tabela-isilti { display: none; }
    body.sahne-dar .karsilama { display: grid; grid-template-columns: minmax(0, 1fr) min(44%, 400px); column-gap: 24px; row-gap: 14px; align-items: center; }
    body.sahne-dar .karsilama > div:nth-child(2) { grid-column: 1; grid-row: 1; align-self: end; }
    body.sahne-dar .karsilama-sag { grid-column: 1; grid-row: 2; align-self: start; }
    body.sahne-dar .karsilama-sahne { display: block; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1170 / 900; border-radius: 10px; box-shadow: 0 10px 24px -12px rgba(8, 14, 34, .6); }
}
@media (max-width: 759px) {
    .imza { display: none; }
    body.sahneli::before {
        background:
            linear-gradient(180deg, rgba(247, 243, 236, .95) 0%, rgba(247, 243, 236, .90) 55%, rgba(247, 243, 236, .78) 100%),
            var(--arka-dik) center bottom / cover no-repeat;
    }
    .karsilama { display: block; padding: 0 0 16px; }
    .karsilama::before { display: none; }
    .karsilama-sahne {
        display: block; aspect-ratio: 1170 / 900;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(90deg, var(--ana), var(--altin), #E8CB8A) 1;
    }
    .karsilama > div:not(.karsilama-sahne) { padding: 14px 18px 0; }
    .karsilama h1, .karsilama-cizgi { display: none; }
    .karsilama p { margin-top: 4px; }
    .karsilama-sag { padding: 12px 18px 0; gap: 6px; }
    .karsilama .cip { height: 34px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
    .karsilama .cip .ik { width: 15px; height: 15px; }
    .karsilama-sag > :nth-child(2) { order: 3; }   /* selam ile yoklama yan yana sığar, proje bilgisi alt satırda */
    .ist-izgara > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Büyük işlem kutucukları */
.kutucuklar { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 640px) { .kutucuklar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kutucuklar { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kutucuk {
    position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 118px; padding: 16px;
    border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid var(--cizgi); box-shadow: var(--golge);
    color: var(--yazi); text-decoration: none !important; cursor: pointer; text-align: left; font: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kutucuk:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15,26,42,.35); border-color: #E2D3B5; }
.kutucuk:active { transform: translateY(0); }
.kutucuk-ik { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -6px rgba(15,26,42,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.kutucuk-ik .ik { width: 24px; height: 24px; }
.kutucuk strong { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.kutucuk small { font-size: 12.5px; color: var(--yazi-3); line-height: 1.3; margin-top: -6px; }
.kutucuk .sayi-rozet { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--danger); }
.k-yesil { background: linear-gradient(135deg, #12925E, #067647); }
.k-lacivert { background: linear-gradient(135deg, #2D5592, #1F3D6D); }
.k-turuncu { background: linear-gradient(135deg, #E07B2E, #B54708); }
.k-mor { background: linear-gradient(135deg, #8463DB, #6941C6); }
.k-kirmizi { background: linear-gradient(135deg, #D9493C, #B42318); }
.k-altin { background: linear-gradient(135deg, #D6B067, #A9771C); }
.k-mavi { background: linear-gradient(135deg, #2A8FC4, #156A99); }
.k-gri { background: linear-gradient(135deg, #6B7891, #475467); }

/* Bölüm kartı: altın çerçeve, sıcak başlık (CTR "Dönüşü Yaklaşanlar" gibi) */
.bolum { border-radius: 14px; border: 1.5px solid #DFC48C; background: rgba(255,255,255,.96); box-shadow: 0 8px 22px -14px rgba(120, 90, 30, .45); overflow: hidden; }
.bolum + .bolum, .izgara .bolum + .bolum { margin-top: 16px; }
.bolum-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 13px 18px; background: linear-gradient(180deg, #FCF5E6, #F8EEDA); border-bottom: 1px solid #EBDDBF; }
.bolum-bas h2 { font-size: 16px; font-weight: 750; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.bolum-bas h2 .rozet { font-size: 11.5px; }
.bolum-bas a { font-size: 13.5px; font-weight: 650; color: var(--ana); }
.bolum-govde { padding: 14px; }

/* Öğe kartları: telefonda yana kayar, bilgisayarda dizilir */
.ogeler { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.ogeler > * { scroll-snap-align: start; }
@media (min-width: 760px) { .ogeler { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; } }
.ogeler.tek-sutun { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; }
.ogeler.dizili { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-columns: auto; overflow: visible; }
.oge {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 13px 13px 12px 16px; min-width: 0;
    border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(15,26,42,.05);
}
.oge::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--oge-renk, var(--cizgi-koyu)); }
.oge.o-ok { --oge-renk: #2BA36C; } .oge.o-warn { --oge-renk: #E08A3A; } .oge.o-danger { --oge-renk: #D9493C; background: #FFFAF9; }
.oge.o-brand { --oge-renk: var(--ana); } .oge.o-violet { --oge-renk: var(--violet); } .oge.o-altin { --oge-renk: var(--altin); }
.oge-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.oge-ad { font-weight: 720; font-size: 14.5px; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oge-alt { font-size: 12.5px; color: var(--yazi-3); line-height: 1.35; }
.oge-tutar { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.oge-tutar small { font-size: 12px; font-weight: 600; color: var(--yazi-3); letter-spacing: 0; margin-left: 4px; }
.oge-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.oge-dugmeler > * { flex: 1 1 52px; min-width: 0; }
.oge-dugmeler.uclu > * { flex: 0 0 calc((100% - 12px) / 3); }   /* çok düğmeli kutuda üçerli sıralar, yazı kırılmaz */
.ogeler.dizili.sik { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ogeler.dizili.genis { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* Satış ödeme planı: küçük taksit kutucukları */
.taksitler { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 759px) { .taksitler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.oge.taksit { padding: 11px 11px 10px 14px; gap: 4px; }
.oge.taksit .oge-ust { flex-direction: column; align-items: flex-start; gap: 4px; }
.oge.taksit .oge-ad { font-size: 13.5px; overflow: visible; }
.oge.taksit .oge-tutar { font-size: 16.5px; }
.oge.taksit .rozet { font-size: 10.5px; padding: 1px 7px; }
.toplam-satir { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--cizgi); font-size: 13.5px; color: var(--yazi-2); }
.toplam-satir strong { color: var(--yazi); font-weight: 800; margin-left: 4px; }
.oge.o-eksi { --oge-renk: #D9493C; }
.oge.o-gri { --oge-renk: #98A2B3; }
.oge-tutar.arti { color: var(--ok); } .oge-tutar.eksi { color: var(--danger); }
/* Kutucuk içi üçlü küçük özet (plan / harcanan / kalan gibi) */
.oge-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px dashed var(--cizgi); }
.oge-uclu > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oge-uclu span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--yazi-3); }
.oge-uclu strong { font-size: 13.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* CTR'deki gibi renkli işlem düğmeleri (ikon üstte, yazı altta) */
.idg {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 6px 4px;
    border: 0; border-radius: 9px; color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 5px -2px rgba(15,26,42,.35); transition: filter .15s, transform .1s;
}
.idg .ik { width: 18px; height: 18px; }
.idg:hover { filter: brightness(1.08); }
.idg:active { transform: scale(.97); }
.idg-yesil { background: linear-gradient(180deg, #13985F, #067647); }
.idg-lacivert { background: linear-gradient(180deg, #2B5291, #1F3D6D); }
.idg-turuncu { background: linear-gradient(180deg, #DA7425, #B54708); }
.idg-mor { background: linear-gradient(180deg, #7C59D6, #6941C6); }
.idg-mavi { background: linear-gradient(180deg, #2389BE, #156A99); }
.idg-kirmizi { background: linear-gradient(180deg, #D23F33, #B42318); }
.idg-gri { background: linear-gradient(180deg, #6B7891, #475467); }

/* Genel arama */
.arama { position: relative; flex: 0 1 380px; display: none; }
.arama input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--cizgi-koyu); background: rgba(255,255,255,.9); padding: 0 12px 0 38px; font-size: 14px; }
.arama input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(31,61,109,.12); background: #fff; }
.arama > .ik { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; color: var(--yazi-3); }
.arama-sonuc { position: absolute; top: 46px; left: 0; right: 0; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge-b); padding: 6px; z-index: 80; }
.arama-sonuc a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--yazi); text-decoration: none !important; }
.arama-sonuc a:hover, .arama-sonuc a.secili { background: var(--ana-acik); }
.arama-sonuc .as-grup { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--yazi-3); padding: 8px 10px 4px; }
.arama-sonuc .as-alt { display: block; font-size: 12px; color: var(--yazi-3); }
.arama-sonuc .bos-sonuc { padding: 14px; font-size: 13.5px; color: var(--yazi-3); }
.arama-dg { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; color: var(--yazi); cursor: pointer; }
@media (min-width: 760px) { .arama { display: block; } .arama-dg { display: none; } }
.arama.acik { display: block; position: absolute; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); flex: none; }

/* Aylık grafik */
.grafik { width: 100%; height: auto; display: block; }
.grafik text { font-family: inherit; font-size: 11px; fill: var(--yazi-3); }
.grafik-aciklama { display: flex; gap: 16px; font-size: 12.5px; color: var(--yazi-2); margin-top: 8px; flex-wrap: wrap; }
.grafik-aciklama i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Daire karosunda ödeme çubuğu */
.daire-odeme { display: block; height: 4px; border-radius: 4px; background: rgba(31,61,109,.12); overflow: hidden; margin-top: 4px; }
.daire-odeme span { display: block; height: 100%; background: linear-gradient(90deg, #2BA36C, var(--ok)); }

@media print {
    .yan, .ust, .alt-cubuk, .sayfa-islem, .dg, .suzgec, .bildirim-kutu { display: none !important; }
    .ana { margin: 0; }
    .icerik { padding: 0; max-width: none; }
    .kart { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}

/* Çok geniş ekranda iç sayfalar daha geniş açılır: bir satıra daha çok kutu sığar */
@media (min-width: 1900px) { body:not(.sayfa-ana) .icerik { max-width: 1640px; } }

/* Yapım aşamaları: her ana aşama açılır-kapanır bölüm; başlıkta ilerleme */
details.asama-grup > summary { list-style: none; cursor: pointer; user-select: none; }
details.asama-grup > summary::-webkit-details-marker { display: none; }
details.asama-grup:not([open]) > summary { border-bottom: 0; }
.asama-grup-sag { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13.5px; }
.asama-cubuk { display: block; width: clamp(80px, 18vw, 220px); }
.asama-ok { transition: transform .2s; color: var(--yazi-3); }
details.asama-grup[open] .asama-ok { transform: rotate(180deg); }
.liste-ac { font-weight: 650; color: var(--ana); }
.liste-ac::before { content: 'Aç'; }
details[open] .liste-ac::before { content: 'Kapat'; }
.butce-bas .etiket-k { margin-left: auto; }
.butce-bas .asama-grup-sag { margin-left: 0; }
@media (max-width: 719px) {
    .butce-bas .etiket-k { order: 3; flex: 1 0 100%; margin-left: 0; }
    .butce-bas .asama-grup-sag { margin-left: auto; }
}
.asama-yuzde { display: flex; align-items: center; gap: 8px; }
.asama-yuzde .cubuk { flex: 1; }
.asama-yuzde strong { font-size: 12.5px; }
.oge-alt .ik-k { width: 13px; height: 13px; vertical-align: -2px; color: var(--yazi-3); }

/* Hesap makinesi: sayfanın üstünde yüzen küçük pencere; telefonda alttan açılır */
.hm-dugme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--ana); cursor: pointer; flex: 0 0 auto; margin-left: 8px; }
.hm-dugme:hover { background: var(--gray-acik); }
.hm-dugme .ik { width: 21px; height: 21px; }
.hm { display: none; position: fixed; z-index: 130; right: 24px; bottom: 24px; width: 318px; max-height: calc(100vh - 40px); overflow-y: auto; background: #101B30; border-radius: 16px; box-shadow: 0 18px 46px -10px rgba(8, 14, 34, .7); padding: 12px; color: #fff; }
.hm.on { display: block; }
.hm-bas { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; font-size: 13.5px; }
.hm-kapat { width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.hm-ekran { background: #0A1222; border-radius: 12px; padding: 10px 12px; text-align: right; min-height: 76px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.hm-ifade { font-size: 22px; font-weight: 650; word-break: break-all; line-height: 1.2; }
.hm-sonuc { font-size: 17px; font-weight: 700; color: #E8C877; min-height: 21px; }
.hm-islem { display: flex; gap: 6px; margin: 8px 0; }
.hm-islem button { flex: 1; height: 36px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; background: rgba(255, 255, 255, .12); color: #fff; }
.hm-islem .hm-yaz { background: linear-gradient(180deg, #13985F, #067647); }
.hm-tuslar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hm-tuslar button { height: 52px; border: 0; border-radius: 11px; font-size: 20px; font-weight: 650; background: #24324E; color: #fff; cursor: pointer; }
.hm-tuslar button:hover { filter: brightness(1.15); }
.hm-tuslar button:active { transform: scale(.96); }
.hm-tuslar .hm-op { background: #3A4A6B; color: #F0D48F; }
.hm-tuslar .hm-sil { background: #5A2A2A; }
.hm-tuslar .hm-esit { background: linear-gradient(180deg, #D9B15C, #B98530); color: #1B1405; font-weight: 800; }
.hm-gecmis { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; max-height: 120px; overflow-y: auto; }
.hm-gecmis-satir { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .06); color: #C6D0E2; font-size: 12px; text-align: left; cursor: pointer; }
.hm-gecmis-satir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-gecmis-satir strong { color: #fff; white-space: nowrap; }
.hm-yazildi { outline: 2px solid #13985F; outline-offset: 1px; }
@media (max-width: 759px) {
    .hm-dugme { width: 36px; height: 36px; margin-left: 4px; }
    .hm { left: 8px; right: 8px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); max-height: calc(100vh - 80px - env(safe-area-inset-bottom)); }
    .hm-tuslar button { height: 50px; }
}
@media print { .hm, .hm-dugme { display: none !important; } }

/* Hesaplar sayfası */
.hesap-izgara { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.hesap-kutu { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 13px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--ana); border-radius: 10px; cursor: pointer; font: inherit; color: inherit; min-height: 64px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hesap-kutu strong { font-size: 14.5px; font-weight: 650; color: var(--yazi); }
.hesap-kutu span { font-size: 12.5px; color: var(--yazi-3); line-height: 1.35; }
.hesap-kutu:hover { box-shadow: 0 4px 14px rgba(20,30,50,.09); transform: translateY(-1px); }
.hesap-kutu:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.hesap-duzen { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hesap-duzen { grid-template-columns: 1.25fr 1fr; align-items: start; } .hesap-duzen > [data-hesap-cikti] { position: sticky; top: 0; } }
.hesap-sonuc { border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.hesap-sonuc > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 12px; font-size: 13.5px; border-bottom: 1px solid var(--cizgi); }
.hesap-sonuc > div:last-child { border-bottom: 0; }
.hesap-sonuc span { color: var(--yazi-2); }
.hesap-sonuc strong { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hesap-sonuc small { font-weight: 500; color: var(--yazi-3); font-size: 12px; }
.hesap-sonuc .vurgu { background: rgba(31,61,109,.06); }
.hesap-sonuc .vurgu strong { font-size: 16px; color: var(--ana); }
.hesap-toplam { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 10px; padding: 12px 14px; background: var(--ana); color: #fff; border-radius: 10px; }
.hesap-toplam span { font-size: 13px; opacity: .85; }
.hesap-toplam strong { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hesap-butce { margin-top: 12px; }
.hesap-butce .dg { width: 100%; justify-content: center; }
.secim-satir { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--yazi-2); cursor: pointer; }
.secim-satir input { margin-top: 2px; }
@media (max-width: 640px) { .hesap-izgara { grid-template-columns: 1fr 1fr; } .hesap-kutu { padding: 11px 12px; } .hesap-kutu strong { font-size: 13.5px; } .hesap-kutu span { font-size: 12px; } }
.hesap-sifirla { margin-top: 10px; text-align: center; }

/* Bu bina kaça çıkar */
.mly-ozet { position: sticky; top: 62px; z-index: 20; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; margin-bottom: 12px; background: var(--ana); color: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--golge); }
.mly-ozet > div { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; min-width: 0; }
.mly-ozet span { font-size: 12px; opacity: .8; white-space: nowrap; }
.mly-ozet strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mly-girdi small, .mly .alan label small { font-weight: 500; color: var(--yazi-3); }
@media (min-width: 1100px) { .mly-girdi { grid-template-columns: repeat(4, 1fr); } }
.mly-uyarilar { display: grid; gap: 6px; margin-top: 14px; }
.mly-uyari { padding: 9px 12px; font-size: 13.5px; border-radius: 9px; background: var(--gray-acik); }
.mly-uyari.mly-warn { background: rgba(217,142,4,.12); }
.mly-uyari.mly-danger { background: rgba(200,40,40,.1); }
.mly-met { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mly-met-oge { padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); }
.mly-met-oge label { display: block; font-size: 12.5px; font-weight: 600; color: var(--yazi-2); margin-bottom: 5px; }
.mly-met-oge.degisti { background: rgba(217,142,4,.08); border-color: rgba(217,142,4,.45); }
.mly-giris { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mly-giris input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--cizgi-koyu); border-radius: 8px; background: var(--yuzey); font: inherit; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--yazi); }
.mly-giris input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(31,61,109,.12); }
.mly-giris span { flex: none; min-width: 22px; font-size: 12px; color: var(--yazi-3); }
.mly-geri { display: none; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ana); cursor: pointer; }
.mly-met-oge.degisti .mly-geri { display: inline-block; }
.mly-arac { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mly-arac p { flex: 1 1 420px; }
.mly-kalem { padding: 10px 0 12px; border-bottom: 1px solid var(--cizgi); }
.mly-kalem:first-child { padding-top: 0; }
.mly-kalem:last-child { border-bottom: 0; padding-bottom: 0; }
.mly-kalem-bas { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14.5px; }
.mly-kalem-bas span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mly-kolon { display: grid; gap: 10px; grid-template-columns: 24px minmax(0, 1fr) 150px 140px 120px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--cizgi); font-size: 12px; font-weight: 600; color: var(--yazi-3); }
.mly-kolon span:nth-child(n+3) { text-align: right; padding-right: 26px; }
.mly-kolon span:last-child { padding-right: 0; }
.mly-satir { display: grid; align-items: center; gap: 6px 10px; padding: 5px 0; grid-template-columns: 24px minmax(0, 1fr) 150px 140px 120px; font-size: 13.5px; }
.mly-satir.kapali .mly-ad, .mly-satir.kapali .mly-tutar { color: var(--yazi-3); text-decoration: line-through; }
.mly-satir.kapali input[type=text] { opacity: .45; }
.mly-ac { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mly-ac input { width: 17px; height: 17px; cursor: pointer; }
.mly-ad small { display: block; font-size: 12px; color: var(--yazi-3); text-decoration: none; }
.mly-kaynak { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; }
.mly-kaynak:empty { display: none; }
.mly-k-biz { color: #0d7a4d; background: rgba(13,122,77,.1); }
.mly-k-tahmin { color: #a06a00; background: rgba(217,142,4,.14); }
.mly-k-elle { color: var(--ana); background: rgba(31,61,109,.09); }
.mly-tutar { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mly-satis { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mly-satis { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.hesap-sonuc .eksi strong { color: var(--danger); }
.mly-son { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mly-gezin { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.mly-gezin [data-ileri] { margin-left: auto; min-width: 140px; justify-content: center; }
.mly [hidden] { display: none !important; }
.mly-baski { display: none; }
@media (max-width: 760px) {
    .mly-ozet > div { padding: 8px 10px; }
    .mly-ozet span { font-size: 11px; }
    .mly-ozet strong { font-size: 13.5px; }
    .mly-satir { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); padding: 9px 0; border-top: 1px dashed var(--cizgi); }
    .mly-satir .mly-ad { grid-column: 2 / 4; }
    .mly-satir > .mly-giris:nth-child(3) { grid-column: 2; }
    .mly-satir > .mly-giris:nth-child(4) { grid-column: 3; }
    .mly-satir .mly-tutar { grid-column: 2 / 4; }
    .mly-met { grid-template-columns: 1fr 1fr; }
    .mly-kolon { display: none; }
}
@media print {
    #maliyetKok, .hm, .hm-dugme, body::before, body::after, html::before, .ana::before, .ana::after, .tabela-isilti, .tabela-led, .imza { display: none !important; }
    html { background: #fff !important; }
    .sayfa-bas, .alt-imza, .karsilama { display: none !important; }
    .mly-baski { display: block; font-size: 11px; color: #000; }
    .mly-baski h1 { font-size: 17px; margin: 0 0 4px; }
    .mly-baski p { margin: 0 0 6px; }
    .mly-b-top { font-size: 13px; }
    .mly-baski table { width: 100%; border-collapse: collapse; }
    .mly-baski th, .mly-baski td { padding: 2px 5px; border-bottom: 1px solid #ccc; text-align: left; }
    .mly-baski td:nth-child(n+2), .mly-baski th:nth-child(n+2) { text-align: right; white-space: nowrap; }
    .mly-baski tr.g td { background: #eee; font-weight: 700; font-size: 12px; }
    .mly-baski tr.k td { font-weight: 700; }
    .mly-b-not { margin-top: 8px; color: #555; }
}
.mly-satir.mly-bek { grid-template-columns: 24px minmax(0, 1fr) 120px; }
@media (max-width: 760px) { .mly-satir.mly-bek { grid-template-columns: 24px minmax(0, 1fr) auto; } .mly-satir.mly-bek .mly-ad { grid-column: 2; } .mly-satir.mly-bek .mly-tutar { grid-column: 3; } }
@media (max-width: 760px) {
    .mly .sekmeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
    .mly .sekmeler button { justify-content: center; padding: 0 2px; font-size: 13px; height: 36px; }
}
.hesap-canli { display: none; }
@media (max-width: 719px) {
    .hesap-canli { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: var(--ana); color: #fff; font-size: 13px; }
    .hesap-canli strong { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .hesap-canli > strong { font-size: 16px; }
    #hesapPencere .pencere-govde { flex: 1; min-height: 0; }
}

/* Etüt yükleme */
.mly-etud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px dashed var(--cizgi-koyu); border-radius: 10px; }
.mly-etud > .ipucu { flex: 1 1 320px; }
.mly-etud-dugme { cursor: pointer; }
.mly-etud-bilgi { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 12px; border-radius: 9px; background: rgba(13,122,77,.08); font-size: 13.5px; }
.mly-etud-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.mly-etud-liste > div { align-items: flex-start; }
.mly-etud-liste span { flex: none; min-width: 130px; }
.mly-etud-liste strong { white-space: normal; text-align: right; font-weight: 600; }
#mlyEtudOzet .mly-uyari { margin-top: 8px; }
#etudPencere [hidden] { display: none !important; }
.mly-etud-ayar { margin-bottom: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .mly-etud-ayar { grid-template-columns: repeat(4, 1fr); } }
.mly-etud-ayar .secim-satir { grid-column: 1 / -1; margin-top: 0; }

/* Yazılır seçim kutusu */
.yz { position: relative; }
.yz select { display: none !important; }
.yz .yz-kutu { width: 100%; padding-right: 34px; }
.yz-sil { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: var(--yuzey-2); color: var(--yazi-2); font-size: 16px; line-height: 1; cursor: pointer; }
.yz.dolu .yz-sil { display: block; }
.yz:not(.dolu) .yz-kutu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.yz.yeni .yz-kutu { border-color: var(--altin, #C9A24B); }
.yz-liste { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px; background: var(--yuzey); border: 1px solid var(--cizgi-koyu); border-radius: 10px; box-shadow: var(--golge-b); }
.yz-secenek { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; color: var(--yazi); text-align: left; cursor: pointer; }
.yz-secenek:hover, .yz-secenek.on { background: var(--yuzey-2); }
.yz-yeni { margin-top: 2px; font-weight: 650; color: var(--ana); border-top: 1px solid var(--cizgi); border-radius: 0 0 7px 7px; }
.yz-grup { padding: 8px 10px 3px; font-size: 11.5px; font-weight: 650; color: var(--yazi-3); }
.yz-bos { padding: 10px; font-size: 13px; color: var(--yazi-3); }
.daire-tel { color: var(--ana); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .daire-durum { white-space: normal; line-height: 1.25; } }

/* Puantaj: her işçi bir kutu; adı, işi, yevmiyesi elle yazılır */
.y-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 18px; border-bottom: 1px solid var(--cizgi); }
.y-cip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--gray-acik); font-size: 12.5px; color: var(--yazi-2); }
.y-cip b { font-weight: 750; color: var(--yazi); }
.y-cip-tam { background: #E7F6EE; } .y-cip-tam b { color: #0D7A4D; }
.y-cip-yarim { background: #FFF3E2; } .y-cip-yarim b { color: #B46A12; }
.y-cip-yok { background: #FCEAEA; } .y-cip-yok b { color: #B4322E; }
.y-ozet-sag { margin-left: auto; font-size: 12.5px; color: var(--yazi-3); }
.yoklama { list-style: none; display: grid; gap: 12px; padding: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.yoklama > li { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--cizgi-koyu); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.yoklama > li:has(input[type=radio][value="1"]:checked) { border-left-color: #2BA36C; }
.yoklama > li:has(input[type=radio][value="0.5"]:checked) { border-left-color: #E08A3A; }
.yoklama > li:has(input[type=radio][value="0"]:checked) { border-left-color: #D2534E; }
.yoklama > li:focus-within { box-shadow: 0 4px 14px rgba(20,30,50,.08); }
.y-kutular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.y-kutular-iki .y-alan { grid-column: 1 / -1; }
.y-alan, .yoklama .y-elle label { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--yazi-3); }
.y-alan-ad { grid-column: 1 / -1; }
.y-alan input, .yoklama .y-elle input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--cizgi-koyu); border-radius: 9px; background: var(--yuzey); font: inherit; font-size: 14px; font-weight: 500; color: var(--yazi); }
.y-alan-ad input { font-size: 15px; font-weight: 650; }
.y-alan input:hover, .yoklama .y-elle input:hover { border-color: var(--ana); }
.y-alan input:focus, .yoklama .y-elle input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(31,61,109,.12); }
.yoklama .y-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.yoklama .y-sec label { display: block; min-width: 0; }
.yoklama .y-sec span { display: flex; justify-content: center; width: 100%; height: 40px; padding: 0 4px; font-weight: 600; }
.yoklama .y-sec input[value="1"]:checked + span { background: #E7F6EE; border-color: #2BA36C; color: #0D7A4D; box-shadow: inset 0 0 0 1px #2BA36C; }
.yoklama .y-sec input[value="0.5"]:checked + span { background: #FFF3E2; border-color: #E08A3A; color: #B46A12; box-shadow: inset 0 0 0 1px #E08A3A; }
.yoklama .y-sec input[value="0"]:checked + span { background: #FCEAEA; border-color: #D2534E; color: #B4322E; box-shadow: inset 0 0 0 1px #D2534E; }
.y-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.y-alt small { font-size: 12.5px; color: var(--yazi-3); white-space: nowrap; }
.y-alt small strong { color: var(--yazi); font-variant-numeric: tabular-nums; }
.y-elle-ac { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--yazi-2); cursor: pointer; }
.y-elle-ac:hover { color: var(--ana); }
.yoklama .y-elle { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; border-radius: 9px; background: var(--yuzey-2); }
.yoklama .y-elle[hidden] { display: none; }
.yoklama .y-not { grid-column: 1 / -1; }
.yoklama .y-yeni { background: rgba(196,154,76,.07); border-left-color: var(--altin); }
.yoklama .y-elle label:nth-child(3):not(.y-not) { grid-column: 1 / -1; }

/* =========================================================
   GİRİŞ VE KURULUM: ana sayfanın gece sahnesi + altın kenarlı cam kart
   (includes/giris_parca.php). Bina ve tabela solda kalan boşluğa kart girmez.
   ========================================================= */
@property --giris-aci { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html:has(body.giris-zemin) { background: #0D1630; }
body.sahneli.giris-zemin::before {
    background:
        linear-gradient(90deg, rgba(6, 10, 28, .60) 0%, rgba(6, 10, 28, .28) 42%, rgba(6, 10, 28, 0) 66%),
        linear-gradient(180deg, rgba(8, 14, 34, .30) 0%, rgba(8, 14, 34, 0) 38%),
        var(--arka-gece) right bottom / cover no-repeat;
}
.giris-sayfa { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 32px 24px 32px max(24px, calc(35vw - 235px)); }
/* Gökyüzünde yavaşça yanıp sönen birkaç yıldız */
.giris-sayfa::before {
    content: ''; position: fixed; inset: 0 0 48% 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 6% 22%, rgba(255, 246, 220, .9), transparent),
        radial-gradient(1px 1px at 17% 60%, rgba(255, 246, 220, .8), transparent),
        radial-gradient(1.5px 1.5px at 31% 14%, rgba(255, 246, 220, .85), transparent),
        radial-gradient(1px 1px at 52% 40%, rgba(255, 246, 220, .8), transparent),
        radial-gradient(1.6px 1.6px at 61% 12%, rgba(255, 246, 220, .95), transparent),
        radial-gradient(1px 1px at 68% 58%, rgba(255, 246, 220, .7), transparent),
        radial-gradient(1.4px 1.4px at 78% 26%, rgba(255, 246, 220, .85), transparent),
        radial-gradient(1px 1px at 93% 10%, rgba(255, 246, 220, .8), transparent);
    animation: girisYildiz 3.8s ease-in-out infinite alternate;
}
@keyframes girisYildiz { from { opacity: .35; } to { opacity: 1; } }

.giris-sahne-tel { display: none; position: relative; background: #101B3A center / cover no-repeat; }
.giris-kart {
    position: relative; width: 100%; max-width: 470px; padding: 30px 32px 20px; border-radius: 22px; color: #F6F1E6;
    background: linear-gradient(160deg, rgba(26, 36, 76, .78), rgba(10, 16, 40, .86));
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 34px 80px -24px rgba(2, 5, 16, .9), 0 0 70px -22px rgba(244, 199, 110, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
    animation: girisYuksel .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* Kartın çevresinde tabeladaki LED gibi dönen tek renk altın ışık */
.giris-kart::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--giris-aci), rgba(217, 180, 106, .28) 0deg, rgba(217, 180, 106, .28) 245deg, #F4C76E 295deg, #FFF0C8 320deg, #F4C76E 340deg, rgba(217, 180, 106, .28) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: girisDon 7s linear infinite;
}
@keyframes girisDon { to { --giris-aci: 360deg; } }
@keyframes girisYuksel { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.giris-kart .yan-marka { padding: 0; color: #fff; }
.giris-kart .marka-isaret { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 8px 22px -8px rgba(244, 190, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.giris-kart .marka-isaret .ik { width: 24px; height: 24px; }
.giris-kart .marka-yazi strong {
    font-size: 19px; font-weight: 800; letter-spacing: .05em;
    background: linear-gradient(180deg, #FFF3CF 0%, #F0D28D 55%, #D9B05F 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.giris-kart .marka-yazi small { color: rgba(236, 226, 205, .68); font-size: 12px; }
.giris-cizgi { height: 1px; margin: 18px 0 20px; background: linear-gradient(90deg, #E8CB8A, rgba(232, 203, 138, .18) 70%, transparent); }
.giris-kart h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #FBF7EE; }
.giris-kart h1 + p { margin: 6px 0 20px; font-size: 14.5px; color: rgba(236, 226, 205, .78); }
.giris-kart .form { gap: 14px; }
.giris-kart .alan label { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: rgba(236, 226, 205, .85); }
.giris-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.giris-kutu { position: relative; display: block; }
.giris-kutu > .ik { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #D9B46A; pointer-events: none; }
.giris-kart .alan input[type=text], .giris-kart .alan input[type=password] {
    height: 48px; padding: 0 14px 0 42px; border: 1px solid rgba(217, 180, 106, .32); border-radius: 12px;
    background: rgba(255, 255, 255, .06); color: #fff; font-size: 15px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.giris-kutu.sifreli input { padding-right: 46px !important; }
.giris-kart .alan input:hover { border-color: rgba(217, 180, 106, .6); }
.giris-kart .alan input:focus { border-color: #E8CB8A; background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 3px rgba(232, 203, 138, .2), 0 0 24px -6px rgba(244, 199, 110, .6); }
/* Tarayıcının kayıtlı şifreyi doldurduğu kutu beyaza dönmesin */
.giris-kart .alan input:-webkit-autofill, .giris-kart .alan input:-webkit-autofill:hover, .giris-kart .alan input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1C2652 inset; transition: background-color 9999s;
}
.giris-goz { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: rgba(236, 226, 205, .7); cursor: pointer; }
.giris-goz .ik { width: 18px; height: 18px; }
.giris-goz:hover, .giris-goz.on { color: #E8CB8A; background: rgba(255, 255, 255, .07); }

.giris-dugme {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 6px;
    border: 0; border-radius: 12px; font: inherit; font-size: 15.5px; font-weight: 750; color: #241A08; text-decoration: none !important; cursor: pointer;
    background: linear-gradient(180deg, #F0D28D 0%, #D9B05F 55%, #C4973F 100%);
    box-shadow: 0 12px 28px -10px rgba(244, 190, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.giris-dugme .ik { width: 18px; height: 18px; }
.giris-dugme::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .6), transparent); animation: girisParilti 4.5s ease-in-out infinite; }
@keyframes girisParilti { 0%, 55% { left: -45%; } 100% { left: 115%; } }
.giris-dugme:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 32px -10px rgba(244, 190, 90, .95), inset 0 1px 0 rgba(255, 255, 255, .5); }
.giris-dugme:active { transform: none; }
.giris-dugme[disabled] { opacity: .75; cursor: wait; transform: none; }
.giris-kart .uyari-kutu.tehlike { margin-bottom: 12px; background: rgba(217, 68, 54, .16); border-color: rgba(255, 140, 128, .38); color: #FFD6D0; }
.giris-guven { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 12px; color: rgba(236, 226, 205, .62); }
.giris-guven .ik { width: 14px; height: 14px; color: #D9B46A; }

/* Büyük ekranda kart sahneye göre küçük kalmasın */
@media (min-width: 1700px) and (min-height: 860px) { .giris-kart { zoom: 1.14; } }
@media (min-width: 2300px) and (min-height: 1100px) { .giris-kart { zoom: 1.3; } }

/* Telefon ve dik tablet: bina ve tabela üstte resimde, kart altında */
@media (max-width: 759px), (max-aspect-ratio: 11/10) {
    body.sahneli.giris-zemin::before { background: linear-gradient(180deg, #0B1430 0%, #16224A 55%, #262C55 100%); }
    body.sahneli.giris-zemin .tabela-isilti, body.sahneli.giris-zemin .tabela-led { display: none; }
    .giris-sayfa { display: block; padding: 0 16px 28px; }
    .giris-sayfa::before { display: none; }
    .giris-sahne-tel { display: block; margin: 0 -16px; height: min(76.9vw, 50vh); }
    .giris-sahne-tel::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 12%; background: linear-gradient(180deg, rgba(11, 20, 48, 0), #0B1430); }
    .giris-kart { margin: -6px auto 0; padding: 24px 20px 18px; }
    .giris-kart h1 { font-size: 25px; }
}
/* Telefon: form tek ekrana sığsın. Kutu yazısı 16 px kalır (iPhone küçük yazıda sayfayı yakınlaştırır). */
@media (max-width: 599px) {
    .giris-iki { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .giris-sayfa { display: flex; flex-direction: column; align-items: stretch; padding: 0 14px 12px; }
    /* Bina çatısındaki yazıyla birlikte tümü görünür; kart kalan boşluğun ortasına oturur */
    .giris-sahne-tel { flex: none; margin: 0 -14px 10px; height: min(76.9vw, 42vh); background-position: center 60%; }
    .giris-sahne-tel .tabela-isilti-tel, .giris-sahne-tel .tabela-led-tel { -webkit-mask-position: center 60%; mask-position: center 60%; }
    .giris-kart { margin: auto; padding: 14px 16px 12px; border-radius: 16px; }
    /* Kurulum formu uzun: resim küçük kalır, form tek ekrana sığar */
    .giris-sayfa:has(.giris-iki) .giris-sahne-tel { height: min(56vw, 25vh); background-position: center 86%; }
    .giris-sayfa:has(.giris-iki) .tabela-isilti-tel, .giris-sayfa:has(.giris-iki) .tabela-led-tel { -webkit-mask-position: center 86%; mask-position: center 86%; }
    .giris-kart .marka-isaret { width: 36px; height: 36px; border-radius: 10px; }
    .giris-kart .marka-isaret .ik { width: 19px; height: 19px; }
    .giris-kart .yan-marka { gap: 10px; }
    .giris-kart .marka-yazi strong { font-size: 15.5px; }
    .giris-kart .marka-yazi small { font-size: 11px; margin-top: 1px; }
    .giris-cizgi { margin: 11px 0 11px; }
    .giris-kart h1 { font-size: 20px; }
    .giris-kart h1 + p { margin: 3px 0 11px; font-size: 13px; line-height: 1.35; }
    .giris-kart .form { gap: 10px; }
    .giris-kart .alan label { margin-bottom: 3px; font-size: 11.5px; }
    .giris-kart .alan input[type=text], .giris-kart .alan input[type=password] { height: 42px; padding-left: 38px; border-radius: 10px; font-size: 16px; }
    .giris-kutu > .ik { left: 12px; width: 16px; height: 16px; }
    .giris-goz { width: 32px; height: 32px; right: 5px; }
    .giris-goz .ik { width: 16px; height: 16px; }
    .giris-dugme { height: 44px; margin-top: 4px; border-radius: 10px; font-size: 14.5px; }
    .giris-dugme .ik { width: 16px; height: 16px; }
    .giris-guven { margin-top: 10px; font-size: 11px; }
    .giris-guven .ik { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .giris-kart, .giris-kart::before, .giris-sayfa::before, .giris-dugme::after { animation: none; } }

/* =========================================================
   KÂĞITTAN GİR (pages/kagit.php)
   ========================================================= */
.kg-serit { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px 18px; border-radius: 14px; color: #F6F1E6; text-decoration: none !important; background: linear-gradient(120deg, #16244A, #1F3D6D 70%, #2B4F86); border: 1px solid rgba(217, 180, 106, .45); box-shadow: 0 12px 26px -16px rgba(16, 28, 60, .8); transition: transform .15s, box-shadow .15s; }
.kg-serit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(16, 28, 60, .95); }
.kg-serit-ik { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #241A08; background: linear-gradient(180deg, #F0D28D, #C4973F); }
.kg-serit-ik .ik { width: 24px; height: 24px; }
.kg-serit strong { display: block; font-size: 15.5px; font-weight: 750; color: #FBF7EE; }
.kg-serit small { display: block; font-size: 12.5px; color: rgba(236, 226, 205, .8); line-height: 1.3; margin-top: 1px; }
.kg-serit > .ik { flex: none; margin-left: auto; color: #E8CB8A; }

.kg-yukle { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kg-yukle { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.kg-yukle-ic { padding: 30px 22px; text-align: center; border-radius: 16px; border: 1.5px dashed #D9BE85; background: rgba(255, 255, 255, .96); box-shadow: var(--golge); }
.kg-yukle-ik { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #241A08; background: linear-gradient(180deg, #F0D28D, #C4973F); box-shadow: 0 12px 24px -12px rgba(196, 151, 63, .9); }
.kg-yukle-ik .ik { width: 30px; height: 30px; }
.kg-yukle-ic h2 { margin-top: 12px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.kg-yukle-ic p { margin: 4px auto 18px; max-width: 380px; font-size: 14px; color: var(--yazi-2); }
.kg-yukle-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kg-yukle-dugmeler .dg { height: 48px; padding: 0 20px; cursor: pointer; }
.kg-deneme { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.kg-maddeler { display: grid; gap: 14px; align-content: center; padding: 22px; border-radius: 16px; border: 1px solid var(--cizgi); background: rgba(255, 255, 255, .92); box-shadow: var(--golge); list-style: none; }
.kg-maddeler li { display: flex; gap: 10px; font-size: 14px; color: var(--yazi-2); line-height: 1.4; }
.kg-maddeler strong { color: var(--yazi); }
.kg-maddeler .ik { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }

.kg-okuma { max-width: 460px; margin: 18px auto; text-align: center; }
.kg-okuma h2 { margin-top: 16px; font-size: 19px; font-weight: 800; }
.kg-okuma p { margin-top: 4px; font-size: 14px; color: var(--yazi-2); }
.kg-okuma-resim { position: relative; min-height: 180px; overflow: hidden; border-radius: 14px; background: #16224A; box-shadow: var(--golge-b); }
.kg-okuma-resim img { display: block; width: 100%; max-height: 52vh; object-fit: contain; opacity: .85; }
.kg-tarama { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #F4C76E; box-shadow: 0 0 18px 6px rgba(244, 199, 110, .65); animation: kgTarama 2.2s ease-in-out infinite alternate; }
@keyframes kgTarama { from { top: 2%; } to { top: 97%; } }

.kg-sonuc { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; }
@media (min-width: 1000px) { .kg-sonuc { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; } .kg-sol { position: sticky; top: 76px; } .kg-alt { grid-column: 1 / -1; } }
.kg-foto { overflow: hidden; }
.kg-foto img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #F2EEE6; }
@media (max-width: 999px) { .kg-foto img { max-height: 210px; } }
.kg-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kg-bas strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.kg-kart { margin-bottom: 12px; border-radius: 14px; border: 1.5px solid #DFC48C; background: rgba(255, 255, 255, .97); box-shadow: var(--golge); overflow: hidden; }
.kg-kart.kapali .kg-govde { display: none; }
.kg-kart.kapali { opacity: .72; }
.kg-kart.diger { padding: 14px 16px; border-color: var(--cizgi); }
.kg-kart.diger .kg-kart-bas { padding: 0; background: none; border: 0; margin-bottom: 8px; }
.kg-aciklama { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.kg-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: linear-gradient(180deg, #FCF5E6, #F8EEDA); border-bottom: 1px solid #EADFCB; }
.kg-tur { height: 36px; padding: 0 10px; border: 1px solid #D9BE85; border-radius: 9px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--yazi); }
.kg-isle { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.kg-isle input { width: 18px; height: 18px; accent-color: var(--ana); }
.kg-govde { display: grid; gap: 12px; padding: 14px; }
.kg-hesap { display: flex; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.kg-hesap .ik { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.kg-hesap.tamam { color: var(--ok); background: var(--ok-acik); }
.kg-hesap.uyari { color: #7A3306; background: var(--warn-acik); border: 1px solid #F3D3B5; }
.kg-eksik { border-color: var(--warn) !important; box-shadow: 0 0 0 3px rgba(181, 71, 8, .14) !important; }
.kg-tutar { font-weight: 750; }
.kg-odeme, .kg-kalan { padding-top: 12px; border-top: 1px dashed var(--cizgi-koyu); }
.kg-odeme[hidden], .kg-kalan[hidden] { display: none; }
.kg-kalan-yazi { display: flex; align-items: center; height: 44px; font-size: 18px; font-weight: 800; color: var(--danger); }
.kg-satirlar { border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.kg-satirlar > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 650; cursor: pointer; list-style: none; background: var(--yuzey-2); }
.kg-satirlar > summary::-webkit-details-marker { display: none; }
.kg-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 8px 12px; border-top: 1px solid var(--cizgi); font-size: 13px; }
.kg-satir-ad { grid-column: 1; font-weight: 600; }
.kg-satir-hesap { grid-column: 1; grid-row: 2; color: var(--yazi-3); font-size: 12px; }
.kg-satir strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.kg-satir.hatali { background: var(--warn-acik); }
.kg-satir.toplam { background: var(--yuzey-2); }
.kg-alt { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #DFC48C; background: rgba(255, 255, 255, .98); box-shadow: 0 -10px 30px -18px rgba(15, 26, 42, .5); }
@media (min-width: 1024px) { .kg-alt { bottom: 12px; } }
.kg-alt-ozet { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 16px; flex: 1 1 280px; }
.kg-alt-ozet small { display: block; font-size: 11px; color: var(--yazi-3); }
.kg-alt-ozet strong { font-size: 14px; font-weight: 800; white-space: nowrap; }
.kg-alt .dg { flex: 1 1 200px; height: 48px; }
.yz-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; color: var(--yazi-2); }
@media (prefers-reduced-motion: reduce) { .kg-tarama { animation: none; top: 50%; } }