/* Yetkin Portal giriş ekranı — yetkinsoft.com tasarım diliyle (Inter, mavi→yeşil, beyaz kartlar) */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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; font-display: swap; src: url(fonts/inter-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 500; font-display: swap; src: url(fonts/inter-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 600; font-display: swap; src: url(fonts/inter-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 700; font-display: swap; src: url(fonts/inter-latin-700.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; }

.yg, .yg-pencere-kutu {
    --ink: #0B1F33; --ink-2: #22384D; --muted: #566A7E; --line: #E3EAF1; --line-2: #EEF3F7;
    --surface: #F5F8FB; --surface-2: #EEF4F8;
    --blue: #1D88CA; --blue-ink: #136FA8; --blue-deep: #0E4C7A; --blue-50: #EAF4FB; --blue-100: #D3E8F6;
    --green: #0D9A49; --green-ink: #0A7D3B; --green-50: #E8F6EE;
    --amber: #E9A23B; --amber-50: #FDF4E6; --rose: #E25C7A; --rose-50: #FCEBEF; --red: #D64545; --red-50: #FCEDED;
    --r: 14px; --r-lg: 22px;
    --shadow: 0 1px 2px rgba(11,31,51,.06), 0 8px 24px rgba(11,31,51,.06);
    --shadow-lg: 0 2px 4px rgba(11,31,51,.05), 0 24px 60px rgba(11,31,51,.12);
    --sure: 8s;
}
.yg {

    margin: 0; min-height: 100vh; color: var(--ink);
    font: 400 15px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    background:
        radial-gradient(900px 520px at 88% 6%, rgba(29,136,202,.14), transparent 60%),
        radial-gradient(760px 480px at 6% 96%, rgba(13,154,73,.10), transparent 60%),
        linear-gradient(180deg, #F7FAFD, #FFFFFF);
    background-attachment: fixed;
}
.yg *, .yg *::before, .yg *::after { box-sizing: border-box; }
.yg a { color: var(--blue-ink); text-decoration: none; }
.yg a:hover { color: var(--blue-deep); text-decoration: underline; }
.yg :focus-visible { outline: 3px solid var(--blue-100); outline-offset: 2px; border-radius: 8px; }
.yg .grad { background: linear-gradient(92deg, var(--blue-ink) 10%, var(--green) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- iskelet ---- */
.yg-kabuk { max-width: 1320px; margin: 0 auto; min-height: 100vh; padding: 28px 40px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto 1fr auto; column-gap: 64px; }
.yg-ust { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; height: 44px; }
.yg-ust .yg-logo img { height: 34px; display: block; }
.yg-dil { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.yg-dil a { font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .04em; color: var(--muted); padding: 7px 12px; border-radius: 999px; }
.yg-dil a:hover { text-decoration: none; color: var(--ink); }
.yg-dil a.is-secili { background: var(--blue-ink); color: #fff; }
.yg-alt { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; padding-top: 16px; }
.yg-alt a { color: var(--muted); }

/* ---- vitrin (sol) ---- */
.yg-vitrin { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.yg-slaytlar { position: relative; display: grid; }
.yg-slayt { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s; }
.yg-slayt.is-aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease, transform .55s ease, visibility 0s; }
.yg-etiket { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 14px; }
.yg-etiket::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.yg-etiket img { width: 22px; height: 22px; margin-left: 2px; }
.yg-slayt h2 { margin: 0 0 12px; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; color: var(--ink); max-width: 720px; }
.yg-slayt h2 .grad { display: inline; }
.yg-etiket { align-self: flex-start; }
.yg-lead { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.yg-maddeler { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 0 0 22px; color: var(--ink-2); font-size: 14.5px; }
.yg-maddeler li { display: inline-flex; align-items: center; gap: 8px; }
.yg-maddeler li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230D9A49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* sahne: görsel kurgu */
.yg-sahne { position: relative; height: 380px; margin-top: auto; flex: none; }
.yg-sahne > * { position: absolute; }

/* ---- vitrin gezinme ---- */
.yg-gezinme { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.yg-gezinme button { font: inherit; }
.yg-ok { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); flex: none; }
.yg-ok:hover { border-color: var(--blue-100); color: var(--blue-ink); }
.yg-ok svg { width: 16px; height: 16px; }
.yg-cubuklar { display: flex; gap: 6px; flex: 1; max-width: 520px; }
.yg-cubuk { flex: 1; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.yg-cubuk span { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.yg-cubuk span i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-ink), var(--green)); border-radius: 4px; }
.yg-cubuk.is-gecti span i { width: 100%; }
.yg-cubuk.is-aktif span i { animation: yg-dol var(--sure) linear forwards; }
.yg-vitrin.is-durdu .yg-cubuk.is-aktif span i { animation-play-state: paused; }
@keyframes yg-dol { from { width: 0; } to { width: 100%; } }
.yg-sayac { font: 600 13px/1 Inter, sans-serif; color: var(--muted); min-width: 150px; white-space: nowrap; }
.yg-sayac b { color: var(--ink); font-weight: 600; }

/* ---- ortak görsel bileşenler ---- */
.yg-tarayici { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.yg-tarayici .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line-2); background: #FAFCFE; }
.yg-tarayici .bar i { width: 8px; height: 8px; border-radius: 50%; background: #E3EAF1; }
.yg-tarayici .bar .url { margin-left: 10px; height: 18px; border-radius: 6px; background: var(--surface); font: 500 10.5px/18px Inter, sans-serif; color: #5E7083; padding: 0 10px; }
.yg-tarayici img { display: block; width: 100%; height: auto; max-height: 330px; object-fit: cover; object-position: top left; }

.yg-telefon { width: 166px; border-radius: 30px; background: #0B1F33; padding: 7px; box-shadow: 0 30px 60px rgba(11,31,51,.26); }
.yg-telefon .ekran { border-radius: 24px; overflow: hidden; background: #F5F8FB; position: relative; aspect-ratio: 9 / 19.5; }
.yg-telefon .ekran::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 60px; height: 17px; border-radius: 10px; background: #0B1F33; z-index: 2; }
.yg-telefon .ekran > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.yg-yuzen { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 13px; line-height: 1.4; display: flex; gap: 11px; align-items: center; z-index: 3; }
.yg-yuzen b { display: block; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.yg-yuzen small { display: block; color: var(--muted); font-size: 12px; }
.yg-yuzen .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--green-50); color: var(--green); }
.yg-yuzen .ic.mavi { background: var(--blue-50); color: var(--blue-ink); }
.yg-yuzen .ic.amber { background: var(--amber-50); color: #B7791F; }
.yg-yuzen .ic.kirmizi { background: var(--red-50); color: var(--red); }
.yg-yuzen .ic svg { width: 18px; height: 18px; }
.yg-yuzen .ic.maskot { background: var(--blue-50); }
.yg-yuzen .ic.maskot img { width: 28px; height: 28px; }

.yg-kart { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px; font-size: 13px; line-height: 1.45; z-index: 2; }
.yg-kart-bas { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.yg-kart-bas b { display: block; font-size: 14px; font-weight: 600; }
.yg-kart-bas small { color: var(--muted); font-size: 12px; }
.yg-kart-bas .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--green-50); color: var(--green); flex: none; }
.yg-kart-bas .ic.mavi { background: var(--blue-50); color: var(--blue-ink); }
.yg-kart-bas .ic svg { width: 19px; height: 19px; }
.yg-kart-bas .ic img { width: 30px; height: 30px; }
.yg-satir { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--muted); }
.yg-satir strong { color: var(--ink); font-weight: 600; }
.yg-satir .yesil { color: var(--green); }
.yg-kutu { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.yg-not { margin-top: 10px; background: var(--surface); border-radius: 12px; padding: 10px 12px; color: var(--ink-2); font-size: 12.5px; }
.yg-ilerleme { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; margin: 4px 0 6px; }
.yg-ilerleme i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue-ink), var(--green)); }
.yg-rozet { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 Inter, sans-serif; padding: 5px 8px; border-radius: 999px; background: var(--green-50); color: var(--green-ink); white-space: nowrap; }
.yg-rozet.mavi { background: var(--blue-50); color: var(--blue-ink); }
.yg-rozet.amber { background: var(--amber-50); color: #9A6312; }
.yg-rozet.kirmizi { background: var(--red-50); color: var(--red); }
.yg-rozet.gri { background: var(--surface-2); color: var(--muted); }
.yg-dugmeler { display: flex; gap: 8px; margin-top: 12px; }
.yg-dugme { font: 600 12.5px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); background: #fff; }
.yg-dugme.ana { background: var(--blue-ink); color: #fff; border-color: var(--blue-ink); }
.yg-dugme.yesil { background: var(--green); color: #fff; border-color: var(--green); }

/* sohbet */
.yg-sohbet { display: flex; flex-direction: column; gap: 8px; padding: 34px 10px 10px; height: 100%; background: #fff; font-size: 10.5px; line-height: 1.4; }
.yg-sohbet .bas { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.yg-sohbet .bas img { width: 22px; height: 22px; }
.yg-balon { max-width: 88%; padding: 7px 9px; border-radius: 12px; }
.yg-balon.ben { align-self: flex-end; background: var(--blue-ink); color: #fff; border-bottom-right-radius: 4px; }
.yg-balon.o { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.yg-kaynak { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 7px; border: 1px solid var(--green); color: var(--green-ink); border-radius: 999px; font-weight: 600; font-size: 9.5px; background: #fff; }
.yg-kaynak svg { width: 10px; height: 10px; }
.yg-yaz { margin-top: auto; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 10px; color: #8A97A8; }
.yg-yaz span { flex: 1; }
.yg-yaz i { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-ink); }

/* sesli mesaj */
.yg-ses { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px !important; }
.yg-ses-ic { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.yg-ses-ic svg { width: 15px; height: 15px; }
.yg-dalga { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.yg-dalga i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.9); height: 30%; }
.yg-dalga i:nth-child(3n+1) { height: 55%; } .yg-dalga i:nth-child(4n+2) { height: 85%; } .yg-dalga i:nth-child(5n+3) { height: 40%; } .yg-dalga i:nth-child(7n) { height: 100%; }
.yg-ses-sure { font-size: 11.5px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.yg-ses-yazi { align-self: flex-end; margin-top: -5px; font-size: 12px; font-style: italic; color: var(--muted); }

/* kasa tablosu */
.yg-tablo { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 12px; }
.yg-tablo th { font-weight: 600; color: var(--muted); text-align: right; padding: 2px 8px; font-size: 11px; }
.yg-tablo th:first-child, .yg-tablo td:first-child { text-align: left; }
.yg-tablo td { text-align: right; padding: 7px 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.yg-tablo td.y { background: var(--green-50); color: var(--green-ink); }
.yg-tablo td.k { background: var(--red-50); color: var(--red); font-weight: 600; }
.yg-tablo td:first-child { font-weight: 600; }
.yg-tablo tr.alt td { padding-top: 4px; padding-bottom: 4px; font-size: 11.5px; }
.yg-tablo tr.alt td:first-child { padding-left: 22px; font-weight: 500; color: var(--ink-2); position: relative; }
.yg-tablo tr.alt td:first-child::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 1.5px; background: #B7C6D4; }
.yg-tablo tr.grup td { padding-bottom: 5px; }

/* zaman çizelgesi */
.yg-adimlar { list-style: none; margin: 0; padding: 0; }
.yg-adimlar li { position: relative; padding: 0 0 12px 28px; color: var(--muted); }
.yg-adimlar li:last-child { padding-bottom: 0; }
.yg-adimlar li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.yg-adimlar li::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: 2px; width: 2px; background: var(--green-50); }
.yg-adimlar li:last-child::after { display: none; }
.yg-adimlar li.simdi::before { background: #fff; border: 3px solid var(--blue-ink); }
.yg-adimlar li strong { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }

/* ERP bağlantı diyagramı */
.yg-erp { left: 0; right: 0; top: 10px; bottom: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.yg-erp svg.hat { position: absolute; inset: 0; width: 100%; height: 100%; }
.yg-erp-liste { display: grid; gap: 8px; position: relative; z-index: 1; }
.yg-erp-liste > span { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow); width: 150px; }
.yg-erp-merkez { justify-self: center; position: relative; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 20px; text-align: center; width: 190px; }
.yg-erp-merkez img { width: 48px; height: 48px; }
.yg-erp-merkez b { display: block; font-size: 16px; margin-top: 6px; }
.yg-erp-merkez small { color: var(--muted); font-size: 12px; }
.yg-erp-cihaz { justify-self: end; display: grid; gap: 10px; position: relative; z-index: 1; }
.yg-erp-cihaz > span { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-weight: 600; font-size: 13px; width: 170px; }
.yg-erp-cihaz > span i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-ink); font-style: normal; }
.yg-erp-cihaz > span i svg { width: 16px; height: 16px; }

.yg-erp-yorunge { position: absolute; left: 18%; right: 18%; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.yg-erp-yorunge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.yg-erp-yorunge span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font: 600 11px/1.2 Inter, sans-serif; color: var(--ink-2); box-shadow: 0 1px 2px rgba(11,31,51,.05), 0 4px 12px rgba(11,31,51,.06); }
.yg-erp-merkez .yg-rozet { display: inline-flex; }

/* foto küçük resimleri */
.yg-fotolar { display: flex; gap: 6px; margin: 8px 0 12px; }
.yg-fotolar span { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(135deg, #DCE7F1, #EEF4F8); display: grid; place-items: center; color: #8BA0B5; }
.yg-fotolar span svg { width: 20px; height: 20px; }

/* sms kodu */
.yg-kod { display: flex; gap: 6px; margin: 6px 0 2px; }
.yg-kod span { width: 30px; height: 38px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--ink); background: #fff; }
.yg-kod span.bos { color: var(--line); }
.yg-kod span.odak { border-color: var(--blue-ink); box-shadow: 0 0 0 3px var(--blue-100); }

/* qr */
.yg-qr { width: 64px; height: 64px; flex: none; }

/* ---- giriş kartı (sağ) ---- */
.yg-giris { align-self: center; padding: 24px 0; min-width: 0; }
.yg-giris-kart { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 36px 36px 30px; }
.yg-marka { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.yg-marka img { width: 34px; height: 33px; }
.yg-marka span { font: 700 22px/1 Inter, sans-serif; letter-spacing: -.02em; color: var(--blue-ink); }
.yg-marka span em { font-style: normal; color: var(--green); }
.yg-giris h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.yg-giris .yg-alt-metin { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.yg-kiraci { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 20px; }
.yg-kiraci small { display: block; font: 600 11px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.yg-kiraci strong { display: block; font-size: 15px; font-weight: 600; margin-top: 3px; }
.yg-kiraci a, .yg-kiraci .yg-kiraci-degistir { font: 600 13px/1 Inter, sans-serif; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--blue-ink); }
.yg-kiraci a:hover { text-decoration: none; border-color: var(--blue-100); }
.yg-alan { margin-bottom: 16px; }
.yg-alan label { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink-2); margin-bottom: 7px; }
.yg-alan input { width: 100%; height: 48px; border: 1px solid #D6E0EA; border-radius: 12px; padding: 0 14px; font: 400 15px Inter, sans-serif; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.yg-alan input::placeholder { color: #94A3B4; }
.yg-alan input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); }
.yg-alan .text-danger, .yg-alan .field-validation-error { display: block; color: var(--red); font-size: 12.5px; margin-top: 6px; }
.yg-sifre { position: relative; }
.yg-sifre input { padding-right: 48px; }
.yg-sifre button { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.yg-sifre button:hover { background: var(--surface); color: var(--ink); }
.yg-sifre button svg { width: 18px; height: 18px; }
.yg-satir-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; font-size: 14px; }
.yg-onay { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); cursor: pointer; }
.yg-onay input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-ink); }
.yg-gonder { width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--blue-ink); color: #fff; font: 600 16px/1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 6px 18px rgba(19,111,168,.25); transition: background .15s, transform .15s; }
.yg-gonder:hover { background: var(--blue-deep); }
.yg-gonder:active { transform: translateY(1px); }
.yg-gonder svg { width: 18px; height: 18px; }
.yg-gonder.ikincil { background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; margin-top: 10px; }
.yg-kayit { text-align: center; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
.yg-kayit a { font-weight: 600; }
.yg-guven { display: flex; flex-wrap: wrap; text-align: center; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 12.5px; }
.yg-guven svg { width: 14px; height: 14px; color: var(--green); }


/* ---- durum ekranları ve müşteri penceresi ---- */
.yg-giris-kart[hidden] { display: none; }
.yg-durum-ikon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--blue-50); color: var(--blue-ink); }
.yg-durum-ikon svg { width: 26px; height: 26px; }
.yg-durum-ikon.yesil { background: var(--green-50); color: var(--green); }
.yg-durum-ikon.kirmizi { background: var(--red-50); color: var(--red); }
.yg-bilgi { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; margin: 0 0 20px; color: var(--ink-2); font-size: 13.5px; }
.yg-bilgi svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.yg-uyari { display: flex; gap: 10px; background: var(--red-50); border: 1px solid #F5CFCF; color: #9B2C2C; border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; font-size: 13.5px; }
a.yg-gonder, a.yg-gonder:hover { text-decoration: none; color: #fff; }
a.yg-gonder.ikincil, a.yg-gonder.ikincil:hover { color: var(--ink-2); }
.yg-dugme-satir { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 6px; }
.yg-dugme-satir .yg-gonder.ikincil { margin-top: 0; }
.yg-geri { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.yg-geri svg { width: 16px; height: 16px; }
.yg-ipucu { display: block; margin-top: 7px; color: var(--muted); font-size: 12.5px; }
/* müşteri seçim penceresi: ABP ModalManager Bootstrap modal yapısını açar (Pages/Abp/MultiTenancy/TenantSwitchModal) */
.yg .modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; padding: 16px; }
.yg .modal-dialog { position: relative; width: auto; max-width: 440px; margin: 0 auto; min-height: calc(100% - 32px); display: flex; align-items: center; pointer-events: none; }
.yg .modal-content { pointer-events: auto; width: 100%; }
.yg .modal.fade .modal-dialog { transform: translateY(10px) scale(.98); transition: transform .18s ease-out; }
.yg .modal.show .modal-dialog { transform: none; }
.yg .modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(11,31,51,.42); backdrop-filter: blur(3px); }
.yg .fade { transition: opacity .15s linear; }
.yg .fade:not(.show) { opacity: 0; }
body.yg.modal-open { overflow: hidden; }
.yg-pencere-kutu { position: relative; width: 100%; max-width: 440px; font: 400 15px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); text-align: left; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 30px 30px 26px; }
.yg-pencere-kutu *, .yg-pencere-kutu *::before, .yg-pencere-kutu *::after { box-sizing: border-box; }
.yg-pencere-kutu h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.yg-pencere-kapat { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: none; border-radius: 10px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.yg-pencere-kapat:hover { background: var(--surface); color: var(--ink); }
.yg-pencere-kapat svg { width: 18px; height: 18px; }

/* ABP sayfa uyarıları ve doğrulama */
.yg .alert { position: relative; border-radius: 12px; padding: 11px 40px 11px 14px; margin: 0 0 16px; font-size: 13.5px; border: 1px solid transparent; }
.yg .alert-danger { background: var(--red-50); border-color: #F5CFCF; color: #9B2C2C; }
.yg .alert-warning { background: var(--amber-50); border-color: #F3DDB6; color: #8A5A10; }
.yg .alert-success { background: var(--green-50); border-color: #C7E8D4; color: var(--green-ink); }
.yg .alert-info { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-deep); }
.yg .alert .btn-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer; opacity: .6; background: transparent no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='%230B1F33' stroke-width='2'/%3E%3C/svg%3E"); }
.yg .alert .btn-close:hover { opacity: 1; }
.yg-alan input.input-validation-error { border-color: var(--red); }
.yg-alan input.input-validation-error:focus { box-shadow: 0 0 0 4px var(--red-50); }

/* ---- küçük ekranlar ---- */
@media (max-height: 820px) {
    .yg-kabuk { padding-top: 18px; padding-bottom: 12px; }
    .yg-vitrin { padding: 12px 0; }
    .yg-sahne { zoom: .8; }
    .yg-maddeler { display: none; }
    .yg-lead { font-size: 15.5px; margin-bottom: 18px; }
    .yg-gezinme { margin-top: 18px; }
    .yg-giris { padding: 12px 0; }
    .yg-giris-kart { padding: 26px 30px 22px; }
    .yg-marka { margin-bottom: 16px; }
    .yg-giris h1 { font-size: 23px; }
    .yg-giris .yg-alt-metin { margin-bottom: 16px; }
    .yg-kiraci { margin-bottom: 14px; padding: 9px 14px; }
    .yg-alan { margin-bottom: 12px; }
    .yg-alan input { height: 44px; }
    .yg-satir-form { margin-bottom: 16px; }
    .yg-gonder { height: 46px; }
    .yg-kayit { margin-top: 16px; padding-top: 14px; }
    .yg-guven { margin-top: 10px; }
}
@media (max-width: 1240px) {
    .yg-kabuk { column-gap: 40px; padding: 24px 28px 16px; grid-template-columns: minmax(0, 1fr) 410px; }
}
@media (max-width: 1080px) {
    .yg-kabuk { grid-template-columns: minmax(0, 1fr); max-width: 520px; padding: 16px 16px 12px; }
    .yg-vitrin { display: none; }
    .yg-giris { padding: 24px 0; }
    .yg-giris-kart { padding: 28px 22px 24px; border-radius: 20px; }
    .yg-alt { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .yg-slayt, .yg-slayt.is-aktif { transition: none; transform: none; }
    .yg-cubuk.is-aktif span i { animation: none; width: 100%; }
}