/* Homepage hero/section display typeface — first-party self-hosted (OFL-1.1,
   license copy alongside the files), two subsets so Turkish letters outside
   Latin-1 (ğ, ş, İ) render in-family instead of falling back mid-word.
   Scoped to --font-hero only (hero H1 + a few major homepage H2s) - the
   site-wide --font-display (Georgia) below is untouched, so card titles,
   nav, buttons, badges, forms and every other page keep their existing
   typography unchanged. */
@font-face{font-family:"DM Serif Display";src:url("/fonts/DMSerifDisplay-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"DM Serif Display";src:url("/fonts/DMSerifDisplay-Regular-ext.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#153b38;--muted:#607976;--brand:#16796f;--brand2:#dff3ee;--sand:#f7f5ef;--line:#dfe8e5;--danger:#b93c3c;--warning:#795200;--white:#fff;--shadow:0 16px 48px rgba(21,59,56,.09);--radius-sm:10px;--radius-md:14px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(21,59,56,.05),0 2px 8px rgba(21,59,56,.06);--shadow-md:var(--shadow);--font-display:Georgia,serif;--font-hero:"DM Serif Display",Georgia,serif;
    /* Corporate UI/UX refinement pass: named tint families for the semantic
       states already used throughout the app (badges/alerts/toasts) - these
       exact hex values were previously repeated literally in 4-6 separate
       rule blocks each (a real "scattered literal color" inconsistency found
       during the audit, see docs/ui/corporate-ui-refinement.md). Extracting
       them to tokens does not change any rendered color - every consumer
       below is updated to reference the same value it already had. */
    --success:#17633b;--success-bg:#dff5e8;--success-line:#b9e4cc;
    --danger-bg:#fee1e1;--danger-line:#f3c1c1;--danger-strong:#8f2424;
    --warning-bg:#fff1c9;--warning-line:#ecd9a0}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fbfcfa}body{margin:0}a{color:var(--brand);text-decoration:none}button,input,select,textarea{font:inherit}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:55}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:750}.brand small{display:block;color:var(--muted);font-weight:450;font-size:11px}.brand-mark{width:42px;height:42px;object-fit:contain;flex:0 0 auto}.main-nav{display:flex;align-items:center;gap:20px}.main-nav form{margin:0}.link-button,.link-danger{border:0;background:none;color:var(--brand);cursor:pointer;padding:0}.link-danger{color:var(--danger)}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 76px)}.sidebar{border-right:1px solid var(--line);background:#f5f8f6}.sidebar a{display:block;padding:11px 13px 11px 10px;border-radius:var(--radius-sm);color:var(--ink);margin:3px 0;border-left:3px solid transparent}.sidebar a:hover{background:var(--brand2);color:var(--brand)}.side-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#4d6360;padding:0 13px 12px}.content{padding:38px;min-width:0}.public-content{max-width:1180px;margin:auto;padding:45px 24px 80px}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr .8fr;gap:60px;align-items:center;padding:70px 0}.hero::before{content:"";position:absolute;top:-140px;right:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 32% 32%,rgba(22,121,111,.12),rgba(223,243,238,.4) 55%,transparent 72%);pointer-events:none;z-index:0}.hero>*{position:relative;z-index:1}.hero h1{font-family:var(--font-display);font-size:58px;line-height:1.05;margin:14px 0 22px;letter-spacing:-.035em}.hero p,.lead{font-size:18px;color:var(--muted);line-height:1.65}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);font-weight:800}.hero-actions{display:flex;gap:12px;margin-top:28px}.hero-card,.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}.credit-orb{width:100px;height:100px;border-radius:50%;background:var(--brand2);display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--brand);margin-top:-60px}.credit-orb span{display:block;font-size:12px}.section{padding:60px 0}.section-heading h2,.page-header h1{font-family:var(--font-display);font-size:38px;margin:8px 0}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid-3,.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card b{color:var(--brand)}.notice{padding:18px 20px;border-radius:14px;background:var(--warning-bg);border:1px solid var(--warning-line);color:var(--warning)}.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.page-header p{color:var(--muted);margin:6px 0}/* PUBLIC UI STANDARDIZATION — one button system. .button/.button-outline/
   .button-secondary/.button-sm (used across the whole app: Admin, Customer,
   Expert, Auth) are now literally the same rules as the new canonical
   .btn-primary/.btn-secondary/.btn-sm/.btn-lg/.btn-ghost names — both class
   names work everywhere, nothing sitewide breaks, and there is exactly one
   set of button declarations (no duplicated CSS). New public markup should
   prefer the .btn-* names going forward. */
:root{--radius-btn:12px}
.button,.btn-primary{display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--brand);color:white;padding:0 18px;min-height:44px;border-radius:var(--radius-btn);font-weight:600;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease}.button:hover,.btn-primary:hover{filter:brightness(.94)}.button-outline,.button-secondary,.btn-secondary,.featured-tests-grid .content-card__cta{display:inline-flex;align-items:center;justify-content:center;padding:0 18px;min-height:44px;border-radius:var(--radius-btn);font-weight:600;cursor:pointer;background:white;color:var(--brand);border:1px solid var(--brand);transition:background-color .15s ease}.button-outline:hover,.button-secondary:hover,.btn-secondary:hover,.featured-tests-grid .content-card__cta:hover{background:var(--brand2)}.button-sm,.btn-sm,.featured-tests-grid .content-card__cta{padding:0 12px;min-height:36px;font-size:13px}.button-lg,.btn-lg{padding:0 22px;min-height:48px;font-size:15.5px}.btn-ghost,.guide-card__cta,.resource-card__cta{display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:0;font-weight:700;font-size:13px;color:var(--brand);white-space:nowrap;cursor:pointer;transition:color .15s ease}.btn-ghost:hover,.guide-card__cta:hover,.resource-card__cta:hover{color:#0f5750}.button:disabled,.button-outline:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled,.btn-sm:disabled,.btn-lg:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-danger{background:var(--danger)}.full{width:100%}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat{padding:20px;background:white;border:1px solid var(--line);border-radius:var(--radius-md)}.stat span{display:block;color:var(--muted);font-size:13px}.stat strong{font-size:34px;display:block;margin-top:8px}.stat.primary{background:var(--brand);color:white}.stat.primary span{color:#dff3ee}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card h2,.card-head h2{margin-top:0}.list>a,.list>div{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.list a:last-child,.list div:last-child{border-bottom:0}.list small{display:block;color:var(--muted);margin-top:4px}.unread{background:#f0faf7;margin:0 -12px;padding:13px 12px!important;border-radius:10px}.badge{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:750;border:1px solid transparent}.badge-success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}.badge-warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-line)}.badge-danger{background:var(--danger-bg);color:var(--danger-strong);border-color:var(--danger-line)}.badge-emergency{background:#8f2424;color:white;border-color:#6e1b1b}.badge-muted{background:#edf1f0;color:#4d6360;border-color:var(--line)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 11px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-stack{display:flex;flex-direction:column;gap:9px}.full-col{grid-column:1/-1}label{display:block;font-weight:650;margin-bottom:7px}input,select,textarea{width:100%;border:1px solid #75928c;border-radius:var(--radius-sm);padding:11px 12px;background:white;color:var(--ink);transition:border-color .15s ease}input:hover,select:hover,textarea:hover{border-color:var(--brand)}textarea{min-height:100px;resize:vertical}.check{font-weight:500;display:flex;align-items:center;gap:8px}.check input{width:auto}.validation,[data-valmsg-for]:not(:empty){color:var(--danger);font-size:13px}.auth-wrap{min-height:70vh;display:grid;place-items:center}.auth-card{width:min(460px,100%);padding:34px;border:1px solid var(--line);border-radius:var(--radius-lg);background:white;box-shadow:var(--shadow-md)}.auth-card h1{font-family:var(--font-display);font-size:38px}.auth-card label{margin-top:14px}.auth-card .button{margin-top:20px}.demo{background:var(--sand);border-radius:10px;padding:12px;font-size:12px;line-height:1.6}.content-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:white;display:flex;flex-direction:column;min-height:250px}.content-card h2{font-family:var(--font-display)}.content-card p{color:var(--muted);line-height:1.55}.content-meta{display:flex;justify-content:space-between;margin-top:auto;font-size:13px}.tag{display:inline-block;color:var(--brand);background:var(--brand2);padding:6px 9px;border-radius:999px;font-size:12px;font-weight:750}.article{max-width:820px;margin:20px auto}.article h1{font-family:var(--font-display);font-size:48px}.back{display:block;margin-bottom:22px}.prose{line-height:1.75}.prose h2,.answer h2,.answer h3{font-family:var(--font-display)}.answer{margin-top:20px}.empty{text-align:center;padding:70px 25px;border:1px dashed #bcd0cb;border-radius:var(--radius-lg);color:var(--muted)}dl{display:grid;grid-template-columns:150px 1fr;gap:10px;margin:0}dt{font-weight:750;color:var(--muted)}dd{margin:0}.json{white-space:pre-wrap;overflow:auto;background:#f5f7f6;border-radius:10px;padding:14px}.filters{display:flex;gap:10px;margin-bottom:18px}.filters input,.filters select{max-width:240px}.plan strong{font-size:28px}.plan strong small{font-size:13px;color:var(--muted)}.active-plan{margin-bottom:20px;border-color:var(--brand)}.active-plan form{display:flex;gap:10px}.review-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}.inline{display:inline}footer{text-align:center;padding:35px;border-top:1px solid var(--line);color:var(--muted);line-height:1.6}@media(max-width:900px){.main-nav>a:not(.button){display:none}.app-shell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:24px}.hero{grid-template-columns:1fr}.hero h1{font-size:44px}.hero-card{margin-top:35px}.grid-2,.grid-3,.content-grid,.stats,.review-actions{grid-template-columns:1fr 1fr}}@media(max-width:600px){.topbar{padding:0 16px}.brand small{display:none}.public-content{padding:25px 16px 60px}.hero{padding:35px 0}.hero::before{width:280px;height:280px;top:-60px;right:-100px}.hero h1{font-size:38px}.grid-2,.grid-3,.content-grid,.stats,.form-grid,.review-actions{grid-template-columns:1fr}.full-col{grid-column:auto}.page-header{align-items:flex-start;flex-direction:column}.hero-actions{flex-direction:column}.filters{flex-direction:column}.filters input,.filters select{max-width:none}.active-plan form{flex-direction:column}dl{grid-template-columns:1fr}}
/* Adım 26 shared UI foundation — tokens only, no inline styles */
.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);margin-bottom:18px}
.alert-success{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}
.alert-error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-strong)}
.alert-warning{background:var(--warning-bg);border-color:var(--warning-line);color:var(--warning)}
.alert-info{background:var(--brand2);border-color:#bfe4dc;color:var(--brand)}
.alert-close{border:0;background:none;color:inherit;cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
.breadcrumb{margin-bottom:14px;font-size:13px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.breadcrumb li+li::before{content:"›";color:var(--muted)}
.breadcrumb li[aria-current="page"] span{color:var(--ink);font-weight:650}
.sidebar a{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.sidebar a.active{background:var(--brand2);color:var(--brand);font-weight:700;border-left-color:var(--brand)}
.form-buttons{display:flex;align-items:center;gap:12px;margin-top:20px}
.confirm-prompt{color:var(--danger);font-weight:650}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:600px){.form-buttons{flex-direction:column;align-items:stretch}}

/* Mobile sidebar drawer — Adım 27 */
/*
 * Stacking order (mobile/tablet drawer layer, <=900px) — Adım 46 fix.
 *   normal page (auto)  <  backdrop (40)  <  topbar incl. drawer (55)  <  cookie banner (60)  <  skip-link (100)  <  toast (1000)  <  native <dialog> (browser top-layer)
 *
 * Root cause of the "menu opens but links are not clickable" bug: .topbar
 * has position:sticky, which creates its own CSS stacking context. Because
 * #public-nav-drawer is rendered *inside* <header class="topbar"> (it must
 * be, to sit inline with the brand/logo for the desktop nav), the drawer's
 * own z-index:50 only ever competes with siblings *inside* .topbar — it
 * cannot escape .topbar's stacking context to out-rank a body-level sibling
 * like #drawer-backdrop. With the old .topbar{z-index:10}, the whole topbar
 * (drawer included) rendered BELOW the backdrop (z-index:40) whenever a
 * drawer was open, so every tap on a nav link actually hit the backdrop and
 * closed the menu instead of navigating (verified live via
 * document.elementFromPoint - see docs/privacy-cookie-management.md). Fix:
 * .topbar's z-index is raised to 55 (above the backdrop) so its whole
 * stacking context - and everything nested in it, including the drawer -
 * renders above the backdrop. The authenticated .sidebar is NOT nested
 * inside .topbar (it is a sibling of #drawer-backdrop under .app-shell,
 * which creates no stacking context of its own), so it was never affected.
 */
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40}
.sidebar-backdrop.open{display:block}
@media(max-width:900px){
    .mobile-menu-toggle{display:flex}
    .sidebar{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;z-index:50;background:#f5f8f6}
    .sidebar.open{display:block}
    .sidebar a{min-height:44px;display:flex;align-items:center}
}

/* ===== Authenticated navigation shell refinement (Adım/task: shell) =====
   Single aside.sidebar element serves as BOTH the static desktop sidebar and
   the full-screen mobile/tablet drawer (toggled via .open at <=900px, see
   above) - .sidebar-inner is a height-filling flex column so the nav body
   can scroll independently while the identity block and logout footer stay
   pinned. Desktop vs mobile differ only in the .sidebar-user `order` (compact
   block near the bottom on desktop; prominent header at the top of the
   mobile/tablet drawer) - see docs/ui/authenticated-navigation-shell.md
   "Shell anatomy". No new z-index value here needs to compete with the
   documented global stacking scale above (backdrop 40 / topbar 55 / cookie
   banner 60 / skip-link 100 / toast 1000) - .sidebar itself already inherits
   its z-index:50 from the rule above, and .user-menu__panel below is a
   topbar CHILD (its own stacking context is already elevated by .topbar's
   z-index:55), so it only needs to out-rank its own topbar siblings. */
.sidebar-inner{height:100%;display:flex;flex-direction:column}
.sidebar-nav{order:1;flex:1 1 auto;overflow-y:auto;padding:20px 14px}
.sidebar-user{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px;border-top:1px solid var(--line)}
.sidebar-footer{order:3;border-top:1px solid var(--line);padding:6px 8px}
.avatar-circle{width:36px;height:36px;border-radius:50%;background:var(--brand2);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:750;flex:0 0 auto;letter-spacing:.02em}
.sidebar-user__info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sidebar-user__name{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sidebar-user__role{font-size:12px;color:var(--muted)}
.sidebar-user__link{flex:0 0 100%;font-size:12.5px;font-weight:650;color:var(--brand)}
.logout-form{margin:0}
.logout-form__button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:12px 14px;border:0;background:none;color:var(--ink);font-weight:650;font-size:14px;font-family:inherit;cursor:pointer;border-radius:var(--radius-sm);text-align:left}
.logout-form__button:hover{background:var(--brand2);color:var(--brand)}
.logout-form__button svg{flex:0 0 auto;color:var(--muted)}
.logout-form__button:hover svg{color:var(--brand)}
.user-menu{position:relative;margin-left:6px}
.user-menu__trigger{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:white;border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--ink)}
.user-menu__trigger:hover{border-color:var(--brand)}
.user-menu__trigger .sidebar-user__name{max-width:120px;font-size:13px}
.user-menu__trigger .sidebar-user__role{font-size:11px}
.user-menu__chevron{color:var(--muted);flex:0 0 auto}
.user-menu__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:white;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:8px;z-index:5;display:flex;flex-direction:column;gap:2px}
.user-menu__panel[hidden]{display:none}
.user-menu__panel a{display:block;padding:10px 12px;border-radius:var(--radius-sm);color:var(--ink);font-size:14px}
.user-menu__panel a:hover{background:var(--brand2);color:var(--brand)}
.user-menu__panel .logout-form__button{padding:10px 12px}
.user-menu__divider{height:1px;background:var(--line);margin:6px 4px}
@media(max-width:900px){
    .user-menu{display:none}
    .sidebar-inner{padding:0}
    .sidebar-user{order:-1;padding:20px 16px;border-top:0;border-bottom:1px solid var(--line)}
    .sidebar-user__name{max-width:none}
    .sidebar-footer{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}

/* Adım 27 — resolve undefined classes from Customer views (B5) */
.req{color:var(--danger);font-size:0.85em;margin-left:2px;vertical-align:super}
/* Corporate UI/UX refinement pass: .button-secondary was a byte-for-byte
   duplicate of .button-outline (two names, one visual button) — consolidated
   into the single .button-outline rule above (both class names still work
   unchanged in every existing view, zero Razor edits needed) instead of
   maintaining two copies of the same declaration. */
.detail-grid{display:grid;grid-template-columns:150px 1fr;gap:10px}
.detail-dl{display:grid;grid-template-columns:150px 1fr;gap:10px;margin:0}
.document-preview{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#f5f7f6}
.record-list{list-style:none;padding:0;margin:0}
.record-list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.record-list li:last-child{border-bottom:0}
.record-text{flex:1;min-width:0}
.card-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card-form-grid .full-col{grid-column:1/-1}
.inline-form{display:inline;margin:0}
.confirm-form{padding:16px;background:#fef7f7;border:1px solid #f3c1c1;border-radius:12px}
.confirm-form-inline{display:inline-flex;align-items:center;gap:8px}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.form-group{margin-bottom:16px}
.notice-card{padding:18px 20px;border-radius:14px;background:var(--warning-bg);border:1px solid var(--warning-line);color:var(--warning)}
@media(max-width:600px){
    .detail-grid,.detail-dl{grid-template-columns:1fr}
    .card-form-grid{grid-template-columns:1fr}
    .page-actions{flex-direction:column;align-items:stretch}
}

/* Adım 28 — Expert portal */
.form-column{order:2}
.context-column{order:1}
.detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.prose-plain{white-space:pre-wrap;line-height:1.75;word-break:break-word}
.text-danger{color:var(--danger)}
@media(max-width:900px){
    .form-column{order:1}
    .context-column{order:2}
}

/* ===== Adım 30 — Public website UI/UX finalization ===== */

/* Safety notice (disclaimer) — reused on Guides/Test detail, Test result */
.safety-notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:var(--brand2);border:1px solid #bfe4dc;color:var(--ink);margin:22px 0}
.safety-notice__icon{flex:0 0 auto;color:var(--brand);margin-top:1px}
.safety-notice__content{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.55}
.safety-notice__content strong{color:var(--brand)}
.safety-notice-compact{padding:12px 16px}

/* Content card polish — hover/focus affordance, reused by Public + shared Account/Security */
.content-card{transition:box-shadow .15s ease,transform .15s ease}
.content-card:hover,.content-card:focus-within{box-shadow:0 10px 24px rgba(21,59,56,.10);transform:translateY(-2px);border-color:#c7dcd7}
.content-card--highlighted{border-color:var(--brand);box-shadow:0 10px 26px rgba(22,121,111,.14)}
.content-card--locked{opacity:.88}
.content-card h2,.content-card h3{font-size:20px;font-family:var(--font-display);margin-top:0;color:var(--ink)}
a.content-card,button.content-card{text-decoration:none;color:var(--ink);width:100%}
.content-card--guide{border-left:3px solid var(--brand)}
.content-card--video{border-left:3px solid var(--brand2)}
/* Adım: 3D teal-mint featured-assessment icons (wwwroot/images/icons/home/assessments/)
   - object-fit:contain preserves each PNG's aspect ratio (no crop/distortion)
   at a fixed size; no breakpoint shrinks this circle, so sizing stays
   consistent on desktop/tablet/mobile. */
.content-card__icon{width:72px;height:72px;border-radius:50%;background:var(--brand2);color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.content-card__icon img{width:54px;height:54px;object-fit:contain;display:block}
.content-card__badge{align-self:flex-start;background:var(--success-bg);color:var(--success);border:1px solid var(--success-line);font-size:11px;font-weight:750;padding:4px 10px;border-radius:999px;margin-bottom:10px}

/* Home "Kendinizi değerlendirmeye buradan başlayın" — compact horizontal card,
   scoped to .featured-tests-grid only. .content-card is shared with
   Assessments/Index, Assessments/Result and Home/Privacy, so every rule here
   is written as a descendant selector rather than touching the base
   component - those other three screens keep the original vertical card
   unchanged. */
.featured-tests-grid{gap:16px}
.featured-tests-grid .content-card{flex-direction:row;align-items:flex-start;gap:14px;padding:20px 18px;min-height:0;border-radius:13px;border-color:rgba(21,59,56,.10)}
.featured-tests-grid .content-card__icon{margin-bottom:0;flex:0 0 auto}
.featured-tests-grid .content-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.featured-tests-grid .content-card__badge{margin:0 0 6px}
.featured-tests-grid .content-card h3{font-family:inherit;font-size:16px;font-weight:600;line-height:1.25;margin:0 0 6px;color:var(--ink)}
.featured-tests-grid .content-card p{font-size:12.5px;line-height:1.4;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-tests-grid .content-meta{align-items:center;font-size:11.5px}
/* Reuses the shared .btn-secondary + .btn-sm button system (see the
   PUBLIC UI STANDARDIZATION block) instead of a bespoke boxed-button
   declaration - only the layout-specific bit (no-wrap inside the card row)
   stays here. */
.featured-tests-grid .content-card__cta{white-space:nowrap}
@media(max-width:600px){
    .featured-tests-grid .content-card{flex-direction:column;align-items:flex-start}
}

/* Small metadata list (Test detail: soru sayısı, süre, ...) */
.meta-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px 22px;padding:0;margin:18px 0;font-size:14px;color:var(--muted)}
.meta-list li{display:flex;align-items:center;gap:7px}
.meta-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.disclaimer-text{font-size:13px;color:var(--muted);line-height:1.6;margin:8px 0 0}

/* Closing value-proposition band (Home's "Kişiselleştirilmiş danışmanlık" CTA) —
   a tonal section for rhythm before the footer transition (§20/§59), not a new
   card style: reuses .card inside it unchanged. */
.section--tint{background:var(--sand);border-radius:var(--radius-lg);padding:56px 40px}
.section--tint .section-heading{text-align:center}
.section--tint .card{box-shadow:none;text-align:center;max-width:640px;margin:0 auto}
.section--tint .card .button{margin-top:8px}
@media(max-width:600px){.section--tint{padding:32px 20px}}

/* Section heading used by Home "featured" blocks (Rehberler/Videolar/Testler) */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head h2{font-family:var(--font-display);font-size:32px;margin:6px 0}
.section-head p{color:var(--muted);margin:6px 0 0;max-width:52ch}

/* Assessment (Test) attempt flow */
.assessment-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:white;margin-bottom:24px}
.assessment-header .eyebrow{display:block;margin-bottom:2px}
.assessment-header h1{margin:0;font-size:20px;font-family:inherit;line-height:1.3}
.assessment-progress{flex:1 1 220px;min-width:180px}
.assessment-progress-track{height:8px;border-radius:999px;background:var(--brand2);overflow:hidden}
.assessment-progress-fill{width:0;height:100%;background:var(--brand);border-radius:999px;transition:width .2s ease}
.assessment-progress-label{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.assessment-question{border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;background:white}
.assessment-question legend{font-size:17px;font-weight:700;padding:0;color:var(--ink);line-height:1.4;float:left;width:100%}
.assessment-question .help-text{color:var(--muted);font-size:14px;margin:8px 0 0;clear:both}
.required-mark{color:var(--danger);margin-left:3px}
.assessment-options{display:grid;gap:10px;margin-top:16px;clear:both}
.assessment-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-weight:550;transition:border-color .12s ease,background .12s ease}
.assessment-option:hover{border-color:#9fcac2;background:#f8fbfa}
.assessment-option input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--brand)}
.assessment-option:has(input:checked){border-color:var(--brand);background:var(--brand2)}
.assessment-option:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.assessment-option span{flex:1}
.form-actions{display:flex;justify-content:flex-end;gap:12px;margin:26px 0 8px;padding-top:20px;border-top:1px solid var(--line)}

/* Test result */
.result-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:16px;background:var(--brand2);border:1px solid #bfe4dc;margin-bottom:10px}
.result-hero__icon{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--brand);color:white;display:grid;place-items:center}
.result-hero h1{margin:0;font-size:22px;font-family:inherit}
.result-hero p{margin:4px 0 0;color:var(--muted)}
.dimension-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand2);color:var(--brand);font-weight:800;font-size:12px;margin-right:8px}

/* Privacy Hub document list rows (Home/Privacy) - Adım 46.
   .button-outline (inline-flex) is blockified to `flex` when it becomes a
   flex item (CSS Display Level 3 §2.7 - unavoidable, cannot be reversed with
   `display:inline-flex` again); once a wrapped-flex-line's sole item, its
   auto width then fills the line. width:fit-content overrides that back to
   content-based sizing, scoped to this one usage only. */
.record-list li>a.button-outline{width:fit-content}

/* Cookie consent banner + preferences modal - Adım 46 */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:white;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:18px 22px;max-width:960px;margin:0 auto}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-banner__icon{flex:0 0 auto;border-radius:8px;object-fit:contain}
.cookie-banner__text{flex:1 1 320px;min-width:220px}
.cookie-banner__text p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto;align-items:center}
@media(max-width:700px){
    .cookie-banner{left:10px;right:10px;bottom:10px;padding:16px}
    .cookie-banner__actions{width:100%;flex-direction:column;align-items:stretch}
    .cookie-banner__actions .button,.cookie-banner__actions .button-outline{width:100%;min-height:44px}
    .cookie-banner__actions .link-button{padding:8px 0}
}
.cookie-category{padding:14px 0;border-bottom:1px solid var(--line)}
.cookie-category:last-of-type{border-bottom:0}
.cookie-category__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cookie-category__desc{color:var(--muted);font-size:13px;margin:6px 0 0;line-height:1.5}
.cookie-category--unused{opacity:.85}
#cookie-preferences-modal .app-dialog-inner{max-height:80vh;overflow-y:auto}
.site-footer button.link-button{font-size:inherit;text-align:left}

/* Print-friendly legal document detail (Home/LegalDocument) - Adım 46 */
@media print{
    .topbar,.site-footer,footer,.mobile-menu-toggle,.no-print{display:none!important}
    .public-content{max-width:none;padding:0}
    .legal-document-print .back{display:none}
    body{background:white}
}

/* Public site footer (anonymous pages only — authenticated portals keep the
   minimal footer). Light, reference-matched footer (yeni-ana-sayfa.png
   direction): white background, thin top border, dark teal text accents —
   no dark band. */
.site-footer{border-top:1px solid var(--line);background:var(--white);margin-top:70px}
.site-footer .footer-inner{max-width:1180px;margin:auto;padding:44px 24px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.site-footer h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-footer ul a{font-size:14px}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--brand)}
.footer-brand__head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.footer-brand__head img{display:block;border-radius:8px}
.footer-brand strong{display:block;font-size:16px;color:var(--ink)}
.footer-brand__subtitle{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.footer-brand p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0}
.footer-contact{display:flex;flex-direction:column;gap:16px}
.footer-contact__list a{color:var(--ink)}
.footer-trust{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--brand2)}
.footer-trust svg{flex:0 0 auto;color:var(--brand)}
.footer-trust strong{display:block;font-size:12.5px;color:var(--ink)}
.footer-trust span{display:block;font-size:11.5px;color:var(--muted)}
.footer-bottom{border-top:1px solid var(--line);padding:16px 24px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}

/* Public nav active state */
.main-nav a.active{color:var(--brand);font-weight:750}

@media(max-width:900px){
    #public-nav-drawer{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;z-index:50;background:white;flex-direction:column;align-items:stretch;gap:2px;padding:18px;overflow-y:auto}
    #public-nav-drawer.open{display:flex}
    #public-nav-drawer a{display:block;padding:14px 10px;border-bottom:1px solid var(--line);border-radius:8px}
    #public-nav-drawer form{padding:6px 10px}
    .site-footer .footer-inner{grid-template-columns:1fr 1fr;gap:28px 26px}
    .assessment-header{position:static}
}
@media(max-width:600px){
    .site-footer .footer-inner{grid-template-columns:1fr;gap:26px}
    .footer-trust{align-self:flex-start}
    .result-hero{flex-direction:column;align-items:flex-start}
    .assessment-header{flex-direction:column;align-items:stretch}
    .assessment-question{padding:18px}
}

/* ===== Adım 31 — Navigation & role-based information architecture ===== */

/* Sidebar sub-group headings (Admin's 9 groups, Customer/Expert secondary groups) —
   visually lighter than .side-title so the role-level heading stays primary. */
/* Adım 43: was color:var(--muted) at opacity:.8, which rendered at only ~3.07:1
   against the sidebar background - below the 4.5:1 AA text threshold. Uses the
   existing badge-muted text tone instead (already in the palette, 6:1+) and
   drops the opacity, which served no purpose beyond making the label harder
   to read. */
.side-group{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#4d6360;padding:16px 13px 4px}
.side-title+.side-group{padding-top:6px}

/* Cross-area sidebar link (Admin → Expert "Danışmanlıklar") — kept reachable but
   visually marked as leaving the current area, per role-ux-principles.md. */
/* Adım 43: var(--muted) on the sidebar's #f5f8f6 background measured 4.37:1,
   just under the 4.5:1 AA text threshold - darkened to the same badge-muted
   tone used elsewhere against this background (6:1+). */
.side-link--cross-area{font-style:italic;color:#4d6360}
.side-link--cross-area:hover,.side-link--cross-area.active{color:var(--brand);font-style:normal}
.side-link--cross-area span{opacity:.7}

/* ===== Adım 32 — Dashboard finalization ===== */

.dashboard-section{margin-bottom:28px}
.dashboard-section__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dashboard-section__header h2{font-size:18px;margin:0}
.dashboard-section__header a{font-size:14px;white-space:nowrap}

/* Attention row — urgent items get a wider minimum so short sentences (e.g.
   "Sağlık profili eksik") stay readable instead of wrapping awkwardly. */
.dashboard-attention{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

.dashboard-metric{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:white;text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
a.dashboard-metric:hover,a.dashboard-metric:focus-visible{box-shadow:0 8px 20px rgba(21,59,56,.08);transform:translateY(-1px);border-color:#c7dcd7;outline:2px solid var(--brand);outline-offset:2px}
.dashboard-metric__label{font-size:13px;color:var(--muted)}
.dashboard-metric__value{font-size:30px;font-weight:800;font-family:var(--font-display);color:var(--ink);line-height:1.15}
.dashboard-metric__value--text{font-size:16px;font-weight:600;font-family:inherit;line-height:1.4}
.dashboard-metric__meta{font-size:12.5px;color:var(--muted)}

/* Attention/ok modifiers — never the only signal (label text always states
   what the number means; color reinforces, it does not replace, meaning). */
.dashboard-metric--attention{border-color:#e8b4b4;background:#fef7f7}
.dashboard-metric--attention .dashboard-metric__value{color:var(--danger)}
/* Adım 43: var(--muted) label/meta text measured 4.42:1 on this card's tinted
   #fef7f7 background - just under 4.5:1 AA. */
.dashboard-metric--attention .dashboard-metric__label,.dashboard-metric--attention .dashboard-metric__meta{color:#4d6360}
.dashboard-metric--ok .dashboard-metric__value{color:var(--brand)}

@media(max-width:600px){
    .dashboard-attention,.dashboard-grid{grid-template-columns:1fr}
    .dashboard-section__header{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ===== Adım 33 — Consultation experience finalization ===== */

/* Visually-hidden but screen-reader-visible text - pairs with an aria-hidden
   glyph (e.g. the ⚠ attention marker on consultation list rows) so urgency is
   never conveyed by an icon/color alone. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Adım 34 — Health Profile UX finalization ===== */

/* Native <progress> element for the completion bar (§6): text value is always
   rendered alongside it, and the browser derives valuenow/min/max from
   value/max — no inline style= needed for the fill width, and completion is
   never conveyed by color alone. */
.hp-summary__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.hp-summary__progress{display:flex;align-items:center;gap:14px;flex:1;min-width:220px}
.hp-summary__progress progress{flex:1;min-width:160px;height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--line);accent-color:var(--brand)}
.hp-summary__progress progress::-webkit-progress-bar{background:#eef3f1;border-radius:999px}
.hp-summary__progress progress::-webkit-progress-value{background:var(--brand);border-radius:999px}
.hp-summary__progress progress::-moz-progress-bar{background:var(--brand);border-radius:999px}
.hp-summary__pct{font-size:14px;color:var(--muted)}
.hp-summary__meta{color:var(--muted);font-size:13.5px;margin:8px 0 0}

.hp-help{color:var(--muted);font-size:13.5px;line-height:1.5;margin:2px 0 14px}

.hp-section{margin-top:20px}
.hp-section .card-head{margin-bottom:4px}

/* Per-record detail text under the primary line inside .record-list items
   (dose/frequency/route/etc.) — kept visually secondary to the main name.
   Overrides the base .record-list li row-flex layout: a stacked (column)
   layout is used here because record-actions can expand into a full
   edit form via <details> — a row layout with vertically-centered flex
   items breaks down once one side grows much taller than the other. */
.record-list li{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.record-detail{color:var(--muted);font-size:13.5px;margin-top:3px}
.record-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Legacy free-text carried over from before structured sections existed
   (§16) — calm, clearly secondary, never implies data corruption. */
.legacy-note{color:var(--muted);font-size:13px;font-style:normal;margin-top:4px;padding-left:10px;border-left:2px solid var(--line)}

/* Native <details>/<summary> progressive disclosure for per-record edit/remove
   actions and the "add a new record" form (§10, §21) — functions fully
   without JavaScript and is accessible by default (no extra ARIA required). */
.inline-disclosure{margin-top:2px}
.inline-disclosure>summary{cursor:pointer;color:var(--brand);font-weight:650;font-size:13.5px;list-style:none}
.inline-disclosure>summary::-webkit-details-marker{display:none}
.inline-disclosure>summary:before{content:"▸ ";display:inline-block}
.inline-disclosure[open]>summary:before{content:"▾ "}
.inline-disclosure>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.inline-disclosure>form,.inline-disclosure>.confirm-form{margin-top:10px}

.hp-add-disclosure{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.hp-add-disclosure>summary{cursor:pointer;font-weight:700;list-style:none}
.hp-add-disclosure>summary::-webkit-details-marker{display:none}
.hp-add-disclosure>summary:before{content:"▸ ";display:inline-block}
.hp-add-disclosure[open]>summary:before{content:"▾ "}
.hp-add-disclosure>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hp-add-disclosure>form{margin-top:14px}

.hp-snapshot-heading{margin-bottom:2px}

.hp-explainer dt{margin-top:12px}
.hp-explainer dt:first-child{margin-top:0}

@media(max-width:600px){
    .hp-summary__row{flex-direction:column;align-items:flex-start}
    /* Adım 42: the progress bar (min-width:160px) and the full-sentence "%N'i
       tamamlandı" label were competing for width in the same flex row inside
       .hp-summary__progress, overflowing the page at 360px. Stacking them
       removes the competition entirely instead of shrinking either below a
       usable size. */
    .hp-summary__progress{flex-direction:column;align-items:flex-start;min-width:0}
    .record-actions{flex-direction:column;gap:6px}
}

/* ===== Adım 35 — Risk Communication UX ===== */

/* Fieldset reset to match the token system (browser default adds its own gray
   border/padding) — used to group related checkbox filters (e.g. Admin's risk/credit
   queue filters) with a proper <legend>, never relying on visual grouping alone. */
fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0}
fieldset .check{display:flex;margin-top:8px}
fieldset .check:first-of-type{margin-top:10px}

/* Findings tables inside _RiskAssessmentPanel (Expert/Admin): High/Critical findings
   render in their own "Öncelikli Bulgular" table with a left accent so they visually
   dominate the "Diğer Bulgular" table below — severity is never conveyed by the badge
   color alone, the section heading and accent border reinforce it too (§11/§26). */
.findings-table--priority{border-left:3px solid var(--danger)}
.findings-table--priority th{color:var(--danger)}

/* ===== Adım 36 — Credits & Subscription UX ===== */

/* Positive credit delta — pairs with the existing .text-danger for negative deltas.
   Sign is never color-only: every amount is also prefixed with a literal +/− character
   in the markup (Credits history, Dashboard recent transactions, Admin credit history). */
.text-success{color:var(--success)}

/* ===== Adım 43.5 — Visual design & brand polish ===== */

/* Role-scoped density only — same palette/typography/radius/buttons/badges
   everywhere (one design system, never a second theme). Customer/Expert/Public
   keep the existing spacious baseline unchanged; Admin's screens are dominated
   by dense stacked filter/config cards and forms, so its .card gets a
   deliberately tighter padding — same border/radius/shadow language, just
   less air, matching the "medium-high density, operational" target. */
.role-admin .card{padding:18px}
.role-admin .page-header{margin-bottom:18px}
.role-admin .dashboard-section{margin-bottom:20px}
.role-admin .form-grid{gap:14px}

/* ===== Adım 43 — Accessibility & usability ===== */

/* Home hero-card heading was an <h3> directly after the page <h1> with no <h2>
   in between (a real heading-order skip) - promoted to <h2> for a correct
   outline; sized to match the same small-card heading treatment already used
   elsewhere (.content-card h2/h3) so the visual size is unchanged, not enlarged
   to a generic browser-default <h2> size. */
.hero-card h2{font-size:20px;font-family:var(--font-display);margin:0 0 8px}

/* Skip link: visually hidden until keyboard focus reaches it (the very first
   focusable element on every page), then rendered as a normal visible control
   above the topbar so a keyboard user never has to tab through the full nav
   on every single page load. Target is <main id="main-content" tabindex="-1">. */
.skip-link{position:absolute;top:-48px;left:8px;z-index:100;background:var(--brand);color:white;padding:12px 18px;border-radius:0 0 10px 10px;font-weight:700;transition:top .12s ease}
.skip-link:focus{top:0}

/* ===== Adım 40 — Table/List standardization ===== */

/* Corporate UI/UX refinement pass: no row-hover state existed anywhere in the
   table system (a real gap - every Admin/Customer/Expert data table lacked
   the affordance). Scoped to tbody rows only (never the header) and kept
   deliberately subtle (a tint, not a shadow/scale/border change) to match
   the "restrained, institutional" direction - not a color-only signal on its
   own, since every row's own content/status badge already carries meaning;
   this is pure hover affordance. */
tbody tr:hover{background:var(--sand)}
tr.row-attention:hover{background:#fdeeee}

/* Server-backed pager (Security Events/Incidents today; reusable by any future
   PagedResult-backed screen) — replaces the inline style= previously used here. */
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* Attention row marker for operational queue tables (e.g. SLA overdue) — the
   left accent is a second, non-color cue alongside the row's own status badge
   text; never the sole signal (mirrors .findings-table--priority, Adım 35).
   Applied to <td> (first cell), not <tr> itself: table{border-collapse:collapse}
   does not reliably render a border set directly on a row in every browser. */
.row-attention{border-left:3px solid var(--danger)}
tr.row-attention>td:first-child{border-left:3px solid var(--danger)}
tr.row-attention{background:#fef7f7}
/* Adım 43.5 verification: var(--muted) measures 4.42:1 on this row's #fef7f7
   tint — just under the 4.5:1 AA text threshold (the same tint already
   required this exact fix on .dashboard-metric--attention/.notification-list
   li.unread in Adım 43). No current cell in a .row-attention row actually
   renders muted-colored text (plain <td> text inherits --ink, not --muted),
   but <small> is the established secondary-text element elsewhere in the
   app - closing the gap defensively so it can never silently fail here. */
tr.row-attention small{color:#4d6360}

/* Row-action button group in a table's trailing column — wraps instead of
   overflowing the cell on narrow/dense Admin tables. */
.row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media(max-width:600px){.pagination{gap:6px}}

/* ===== Adım 38 — Notifications Center =====
   Unread state is never color-only: every item also carries an explicit
   Okunmadı/Okundu badge (site.css only supplies emphasis, not the sole signal). */
.notification-list{list-style:none;margin:0;padding:0}
.notification-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.notification-list li:last-child{border-bottom:0}
.notification-list li.unread{background:#f0faf7;margin:0 -16px;padding:16px;border-radius:12px;border-bottom-color:transparent}
/* Adım 43: var(--muted) meta text measured 4.39:1 on this item's tinted
   #f0faf7 background - just under 4.5:1 AA. */
.notification-list li.unread .notification-item__meta{color:#4d6360}
.notification-list article{flex:1 1 320px;min-width:0}
.notification-item__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notification-item__head h2{font-size:16px;margin:0;font-family:inherit}
.notification-list p{color:var(--ink);margin:6px 0;line-height:1.5;overflow-wrap:break-word}
.notification-item__meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px}
.notification-list .inline-form{flex:0 0 auto}

/* ===== Adım 44 — Customer Dashboard redesign =====
   Asymmetric two-column modifier for the "primary content gets more width"
   pattern (Recent Consultations ~2/3, Recent Credit Transactions ~1/3).
   Reuses .grid-2's own responsive collapse (§30/§31): applied alongside
   .grid-2, not instead of it, so only the wide-desktop column ratio changes -
   the existing 900px/600px stacking behavior is inherited unchanged. */
.grid-2--asym{grid-template-columns:2fr 1fr}
@media(max-width:900px){.grid-2--asym{grid-template-columns:1fr}}

/* Consultation list rows: reuse .row-attention (Adım 40) for currently-urgent
   items only (AwaitingCustomerInformation / ReferredToDoctor) - a closed/
   answered consultation keeps its own risk badge but never this accent, even
   when its stored risk level is High/Emergency (a historical record is not an
   active emergency). List rows aren't table rows, so the base .row-attention
   border-left is extended here with the same tint + contrast-safe muted text
   already established for .dashboard-metric--attention/.notification-list
   li.unread (Adım 43/43.5), rather than introducing a new tone. */
.list>a.row-attention{background:#fef7f7;margin:0 -12px;padding:13px 12px!important;border-radius:10px}
.list>a.row-attention small{color:#4d6360}

/* ===== Public Homepage — brand & visual refresh (frontend-design) =====
   New semantic tokens: a violet accent for the "expert-guided steps" panel
   (distinct from --lavender-bg, which stays reserved for Bach/awareness-test
   content per its own comment above). The public footer is styled with the
   existing light palette tokens directly (--white/--ink/--muted/--brand/
   --brand2/--line) — no dedicated footer tokens. Palette direction only — the button/radius/shadow system
   itself is never duplicated (§35, one design system). */
:root{--violet:#6a4fb0;--violet-bg:#efeaf7;--violet-line:#ded4c8}

/* --- Hero: real editorial photo + floating mission card --- */
.public-hero{display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:center;padding:52px 0 40px}
/* Pre-existing responsive bug found during Adım verification (not introduced by
   this pass): grid items default to min-width:auto, and Chrome's min-content
   measurement for a heading containing a manual <br> can exceed the item's
   track width, so the box refuses to shrink below it and overflows the
   viewport at narrow widths instead of wrapping. min-width:0 is the standard
   fix - it lets the item shrink to its track's definite width so text wraps
   normally again. */
.public-hero__content,.public-hero__visual{min-width:0}
.public-hero__content h1{font-family:var(--font-hero);font-weight:400;font-size:49px;line-height:1.04;letter-spacing:-.02em;margin:14px 0 18px}
.public-hero__content .hero-break{display:inline}
.public-hero__content .lead{margin:0 0 14px;font-weight:600;color:var(--ink);font-size:17px}
.public-hero__content>p:not(.lead){color:var(--muted);font-size:15px;line-height:1.65;max-width:56ch}
.public-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 26px}
.public-hero__visual{position:relative;padding-top:10px}
.public-hero__illustration{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);border:1px solid var(--line);background:radial-gradient(circle at 30% 26%,var(--brand2),#f3faf8 58%,transparent 78%);display:flex;align-items:center;justify-content:center;color:var(--ink);overflow:hidden}
/* Scoped to the hero slot only (not the other six illustration-slot usages) -
   the source asset carries generous transparent margin around the actual
   artwork, so scaling the <img> alone (not the card/border/gradient behind
   it) reads as a bigger, more dominant illustration without cropping into
   the shield/bottle/clipboard subject itself; the parent's overflow:hidden
   only ever trims that pre-existing empty margin. */
.public-hero__illustration .illustration-slot__asset{transform:scale(1.1)}

/* --- Trust bar (5 short credibility markers under the hero) --- */
.trust-bar{border:1px solid var(--line);border-radius:var(--radius-md);background:white;margin-bottom:8px}
.trust-bar__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
.trust-bar__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:18px 16px;border-left:1px solid rgba(21,59,56,.08)}
.trust-bar__item:first-child{border-left:0}
/* Adım: 3D mint/teal trust icons (wwwroot/images/icons/home/trust/) - sized
   larger than the previous 32px line icons so the detailed illustrations
   stay legible at every breakpoint (no responsive override shrinks this
   further, so it also satisfies "no shrinking away on tablet/mobile"). */
.trust-bar__icon{width:56px;height:56px;color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.trust-bar__icon img{width:100%;height:100%;object-fit:contain;display:block}
.trust-bar__text strong{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.trust-bar__text span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}

/* --- Reusable horizontal process chain (risk factors → real risk; alışveriş →
   bilinçli kullanım) — one component with size/tone modifiers. --- */
.chain{display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap}
.chain__step{display:flex;align-items:center;gap:4px}
.chain__marker{border-radius:10px;background:var(--brand2);color:var(--brand);display:grid;place-items:center;font-weight:800;margin:0 auto 6px}
.chain__node span{display:block;line-height:1.3;color:var(--ink);font-weight:600}
.chain__arrow{color:#b7bdb1;flex:0 0 auto}
.chain--tox{row-gap:16px;flex-wrap:wrap;gap:8px;justify-content:center}
.chain--tox .chain__node{width:100px;text-align:center;display:flex;flex-direction:column}
/* Adım: 3D mint/teal process icons (wwwroot/images/icons/home/process/) -
   sized larger than the previous line-icon markers (58px) so the detailed
   illustrations stay legible; object-fit:contain preserves their aspect
   ratio with no crop/distortion regardless of each source PNG's exact
   canvas proportions. */
.chain--tox .chain__marker{width:80px;height:80px;border-radius:50%;background:var(--brand2);border:none;margin-bottom:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chain--tox .chain__marker img{width:60px;height:60px;object-fit:contain;display:block}
.chain--tox .chain__label{display:flex;align-items:flex-end;justify-content:center;min-height:32px;font-size:12.5px;font-weight:600;line-height:1.25}
.chain--tox .chain__desc{display:block;min-height:29px;font-size:11px;font-weight:400;color:var(--muted);line-height:1.3;margin-top:2px}
.chain--tox .chain__arrow{color:var(--brand);flex:0 0 auto;height:80px;display:flex;align-items:center}

/* --- "Her takviye herkes için uygun değildir" suitability grid --- */
.suitability .section-heading{max-width:680px;margin:0 auto 34px;text-align:center}
.suitability-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:28px}
.suitability-card{border:1px solid rgba(21,59,56,.10);border-radius:12px;padding:18px 16px;background:white;display:flex;flex-direction:column;align-items:center;text-align:center}
/* Adım: 3D mint/teal suitability icons (wwwroot/images/icons/home/suitability/)
   - object-fit:contain keeps each PNG's aspect ratio intact (no crop/
   distortion) at a fixed, consistent size; no breakpoint shrinks this
   circle, so sizing stays identical on desktop/tablet/mobile. */
.suitability-card__icon{width:72px;height:72px;border-radius:50%;background:var(--brand2);color:var(--brand);display:grid;place-items:center;margin-bottom:10px}
.suitability-card__icon img{width:56px;height:56px;object-fit:contain;display:block}
.suitability-card h3{font-size:13.5px;font-weight:600;margin:0 0 6px;line-height:1.3}
.suitability-card p{font-size:12px;line-height:1.4;color:var(--muted);margin:0;max-width:22ch}
.suitability-note{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 20px;text-align:center}
.suitability-cta{text-align:center}

/* --- Toxicology approach: one integrated scientific panel (illustration left,
   title + intro + icon-chain right) - Adım "tox reference match" pass. --- */
.tox-section{padding:44px 0}
.tox-grid{display:grid;grid-template-columns:28% 1fr;gap:24px;align-items:center;background:white;border:1px solid rgba(21,59,56,.10);border-radius:15px;padding:26px}
.tox-media{display:flex;align-items:center;justify-content:center;color:var(--ink);aspect-ratio:4/3}
.tox-panel{display:flex;flex-direction:column;gap:12px}
#tox-heading{font-family:var(--font-hero);font-weight:400;font-size:32px;line-height:1.05;margin:0}
.tox-intro{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0;max-width:56ch}
.tox-panel__note{font-size:13px;line-height:1.5;color:var(--muted);margin:14px 0 2px;text-align:center;font-weight:600}

/* --- Resources: credit / rehberler / videolar / testler --- */
.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* Corporate UI/UX refinement pass: "Eğitim Kaynakları" (Rehberler/Videolar/
   Testler) is now its own 3-card section, separated from the standalone
   "Bilinçli Kullanım Kredisi" section below (see docs/ui/corporate-ui-
   refinement.md "Homepage information architecture") - a 3-column variant
   of the same grid rather than a new component. */
.resource-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.resource-card{border-radius:var(--radius-md);padding:24px 22px;display:flex;flex-direction:column}
.resource-card--guides,.resource-card--videos,.resource-card--tests{background:white;border:1px solid var(--line)}
.resource-card__illustration{display:flex;align-items:center;justify-content:center;background:var(--brand2);border-radius:var(--radius-md);aspect-ratio:4/3;margin:0 0 16px;color:var(--ink)}
.resource-card h3{font-size:16px;margin:0 0 4px;font-family:var(--font-display)}
.resource-card__sub{font-size:12px;color:var(--muted);margin:0 0 14px;line-height:1.55}
.resource-card__cta{margin-top:auto}

/* --- Credit / expert perspective — compact side-by-side highlight cards --- */
/* Compact horizontal highlight cards (credit / expert perspective) —
   reference-matched (yeni-ana-sayfa.png): body left, illustration integrated
   directly into the card's own tinted background on the right, no separate
   white illustration box, vertically centered, reduced height. */
.highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.highlight-card{border-radius:var(--radius-lg);padding:22px 26px;display:flex;align-items:center;gap:20px}
.highlight-card--credit{background:var(--sand)}
.highlight-card--expert{background:var(--brand2)}
.highlight-card__body{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.highlight-card__illustration{flex:0 0 auto;width:120px;height:110px;margin:0}
.highlight-card h3{font-family:var(--font-display);font-size:17px;margin:0;line-height:1.3}
.highlight-card p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}
.highlight-card .button-outline,.highlight-card .btn-secondary{align-self:flex-start;margin-top:2px}

/* Illustration asset slots (hero, toxicology, resource/highlight cards) — the
   approved editorial illustrations (yeni-ana-sayfa.png direction) now live
   under wwwroot/images/illustrations/. Each slot still falls back to a
   same-palette inline SVG sketch if its file is ever missing/fails to load
   (never a broken-image icon) via the sibling-selector rule below. */
.illustration-slot{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.illustration-slot__asset{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.illustration-slot__asset[data-missing]{display:none}
.illustration-slot__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.illustration-slot__asset:not([data-missing])+.illustration-slot__fallback{display:none}

/* --- Video card media zone (adds a thumbnail/play affordance on top of the
   existing .content-card component used by Learning views — additive only). --- */
.content-card__media{position:relative;margin:-22px -22px 16px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--brand2);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.content-card__play{width:52px;height:52px;border-radius:50%;background:white;color:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.content-card__play svg{width:20px;height:20px;margin-left:3px}

/* --- Final CTA band. Overrides are scoped to this section only (same pattern
   as .section--tint .card .button above) — not a second global button theme. --- */
.public-final-cta{background:var(--brand);color:white;border-radius:13px;padding:16px 22px;display:flex;align-items:center;gap:14px;text-align:left}
.public-final-cta__icon{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.public-final-cta__icon img{display:block;width:100%;height:100%;object-fit:contain}
.public-final-cta__text{flex:1 1 auto;min-width:0}
.public-final-cta h2{font-family:var(--font-hero);font-weight:400;font-size:26px;line-height:1.15;margin:0 0 4px;color:white}
/* Major homepage section titles get the same hero display face - scoped to
   these exact selectors only (all three .section-heading usages and this ID
   are Home/Index-only; card titles, nav, buttons, badges and forms keep the
   existing --font-display everywhere else, untouched). */
.section-heading h2,#resources-heading{font-family:var(--font-hero);font-weight:400}
.public-final-cta p{color:var(--brand2);font-size:13.5px;line-height:1.4;max-width:56ch;margin:0}
.public-final-cta__actions{flex:0 0 auto;display:flex;gap:14px;flex-wrap:wrap}
.public-final-cta .button,.public-final-cta .btn-primary{background:white;color:var(--brand)}
.public-final-cta .button:hover,.public-final-cta .btn-primary:hover{filter:none;background:#f3faf8}
.public-final-cta .button-outline,.public-final-cta .btn-secondary{background:transparent;color:white;border-color:rgba(255,255,255,.6)}
.public-final-cta a:focus-visible,.public-final-cta button:focus-visible{outline-color:#fff}

@media(max-width:900px){
    .public-hero{grid-template-columns:1fr;padding:36px 0}
    .public-hero__content h1{font-size:2.6rem}
    /* Tablet (~768-900px of this breakpoint's range): the illustration is the
       hero's visual anchor once stacked below the text - constraining it to a
       small fixed pixel box (previously max-width:420px) made it read as a
       tiny decorative afterthought. A percentage width keeps it visually
       strong (~78% of the stacked column) at any width in this range while
       preserving aspect-ratio/object-fit:contain on the asset itself. */
    .public-hero__visual{width:78%;margin:28px auto 0}
    .trust-bar__list{grid-template-columns:repeat(3,minmax(0,1fr))}
    .trust-bar__item:nth-child(3n+1){border-left:0}
    .trust-bar__item:nth-child(n+4){border-top:1px solid rgba(21,59,56,.08)}
    .suitability-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .tox-grid{grid-template-columns:1fr;padding:22px}
    .tox-media{max-width:260px;margin:0 auto}
    .resource-grid{grid-template-columns:1fr 1fr}
    .highlight-grid{grid-template-columns:1fr}
}
/* Hero-only gap breakpoint (901-1024px): the shared @media(max-width:900px)
   above already stacks/resizes the hero correctly for narrower tablets, but
   901-1024px still fell through to the two-column desktop grid, where the
   illustration reads as a small ~40%-wide column instead of the requested
   ~70-85% "visually strong" tablet size. Scoped to .public-hero only - every
   other section keeps its existing 900px behavior untouched. */
@media(min-width:901px) and (max-width:1024px){
    .public-hero{grid-template-columns:1fr;padding:36px 0}
    .public-hero__visual{width:78%;margin:28px auto 0}
}
@media(max-width:600px){
    .public-hero__content h1{font-size:2.15rem;letter-spacing:-.01em}
    .public-hero__content .hero-break{display:none}
    .public-hero__actions{flex-direction:column}
    .public-hero__actions .button,.public-hero__actions .button-outline,.public-hero__actions .btn-primary,.public-hero__actions .btn-secondary{width:100%}
    /* Mobile (~390-430px): wider still than tablet - the illustration stays
       the dominant visual element rather than shrinking into a small badge. */
    .public-hero__visual{width:92%;margin:22px auto 0}
    .trust-bar__list{grid-template-columns:1fr}
    .trust-bar__item{border-left:0!important;border-top:1px solid rgba(21,59,56,.08)}
    .trust-bar__item:first-child{border-top:0}
    .suitability-grid{grid-template-columns:1fr 1fr}
    .resource-grid{grid-template-columns:1fr}
    .highlight-card{flex-direction:column;align-items:flex-start;padding:20px 22px}
    .highlight-card__illustration{align-self:center;width:110px;height:96px}
    .public-final-cta{flex-direction:column;align-items:flex-start;padding:18px 18px}
    .public-final-cta__actions{flex-direction:column;width:100%;margin-top:4px}
    .public-final-cta__actions .button,.public-final-cta__actions .button-outline,.public-final-cta__actions .btn-primary,.public-final-cta__actions .btn-secondary{width:100%}
}

/* ============================================================
   Toast notifications + dialog system (_ToastHost, _ConfirmModal,
   _OperationErrorModal). Reuses existing tokens/badge colors so
   toasts read as the same system as .alert-*/.badge-*.
   ============================================================ */
.toast-host{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:380px;width:calc(100% - 40px);pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--white);pointer-events:auto;animation:toast-in .18s ease}
.toast-success{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}
.toast-error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-strong)}
.toast-warning{background:var(--warning-bg);border-color:var(--warning-line);color:var(--warning)}
.toast-info{background:var(--brand2);border-color:#bfe4dc;color:var(--brand)}
.toast-icon{font-weight:800;flex:0 0 auto;line-height:1.4}
.toast-body{flex:1;line-height:1.5;font-size:14px}
.toast-close{border:0;background:none;color:inherit;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;flex:0 0 auto}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
dialog.app-dialog{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:0;max-width:440px;width:calc(100% - 40px);color:var(--ink)}
dialog.app-dialog::backdrop{background:rgba(21,59,56,.35)}
.app-dialog-inner{padding:26px 28px}
.app-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.app-dialog-inner h2{font-family:var(--font-display);font-size:21px;margin:0 0 10px}
.app-dialog-inner p{color:var(--muted);line-height:1.6;margin:0 0 22px;font-size:14px}
.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.app-dialog-close{border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:2px 4px;margin:-2px -4px 0 0}
.app-dialog-error .app-dialog-inner h2{color:var(--danger)}
@media(max-width:600px){.toast-host{left:16px;right:16px;top:12px;max-width:none}.app-dialog-actions{flex-direction:column-reverse}.app-dialog-actions .button,.app-dialog-actions .button-outline{width:100%}}

/* ============================================================
   Public content library (Guides / Training Videos - Views/Learning/Index).
   Replaces the old generic .content-card grid with an editorial library card:
   icon marker, Turkish content-type eyebrow, clamped summary, footer anchored
   to the bottom (flex-column), and an access-level badge distinguished by
   icon + color + text (never color alone). Reuses existing tokens only -
   --violet/--violet-bg/--violet-line (already defined for the homepage
   "expert-guided steps" panel) double as the Subscriber "restrained lavender/
   premium" treatment; Public/Member reuse the existing badge-success/brand2
   families. One consistent card design regardless of topic - LearningContent
   .Category is free-text metadata (currently a single constant value across
   the whole catalog), not a canonical tag, so it is intentionally not used
   for per-topic styling.
   ============================================================ */
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.library-toolbar__count{font-size:13px;color:var(--muted)}
.library-toolbar__filter{display:flex;align-items:center;gap:10px}
.library-toolbar__filter label{margin:0;font-size:13px;font-weight:650;color:var(--muted);white-space:nowrap}
.library-toolbar__filter select{width:auto;min-width:170px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.guide-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm);min-height:290px;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.guide-card:hover,.guide-card:focus-within{box-shadow:0 10px 24px rgba(21,59,56,.10);transform:translateY(-2px);border-color:#c7dcd7}
/* Adım: 3D teal-mint content icons (wwwroot/images/icons/home/content/) -
   sized larger than the previous 18px line icons so the detailed
   illustrations stay legible; object-fit:contain preserves aspect ratio
   with no crop/distortion. No breakpoint shrinks this box, so guide/video/
   assessment cards stay visually consistent on desktop, tablet and mobile. */
.guide-card__icon{width:52px;height:52px;flex:0 0 auto;border-radius:10px;background:var(--brand2);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.guide-card__icon img{width:40px;height:40px;object-fit:contain;display:block}
.guide-card__icon.access-badge--member{background:var(--brand2);color:var(--brand)}
.guide-card__icon.access-badge--subscriber{background:var(--violet-bg);color:var(--violet)}
.guide-card__eyebrow{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);font-weight:750;margin-bottom:8px}
.guide-card h2{font-family:var(--font-display);font-size:19px;line-height:1.32;margin:0 0 10px}
.guide-card h2 a{color:var(--ink)}
.guide-card h2 a:hover{color:var(--brand)}
.guide-card__summary{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-card__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.access-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 10px 5px 8px;font-size:11.5px;font-weight:750;border:1px solid transparent;white-space:nowrap}
.access-badge svg{width:12px;height:12px;flex:0 0 auto}
.access-badge--public{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.access-badge--member{background:var(--brand2);color:var(--brand);border-color:#bfe4dc}
.access-badge--subscriber{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-line)}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.guide-grid{grid-template-columns:1fr}.library-toolbar{flex-direction:column;align-items:flex-start;gap:12px}.library-toolbar__filter{width:100%}.library-toolbar__filter select{flex:1}.guide-card__footer{align-items:flex-start}}
.guide-card__meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:0 0 14px}
.field-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin:6px 0 0}

/* Training Video Experience Refinement — responsive 16:9 player container.
   The iframe is only ever inserted client-side after an explicit click (see
   wwwroot/js/video-embed.js) — nothing here loads a third-party resource on
   page load. */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);border:1px solid var(--line);margin:20px 0}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:var(--muted)}
.video-embed__placeholder svg{color:var(--brand);flex:0 0 auto}
.video-embed__placeholder p{max-width:44ch;font-size:14px;line-height:1.6;margin:0}
.video-unavailable{margin:20px 0}
.video-unavailable p{margin:6px 0 0;font-size:13.5px}
.video-external-link{margin:20px 0}
.video-external-link p{margin:6px 0 14px;font-size:13.5px}
.related-content{margin:36px 0 8px;padding-top:28px;border-top:1px solid var(--line)}
.related-content h2{font-family:var(--font-display);font-size:20px;margin:0 0 16px}
.related-content__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.related-content__card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--white);transition:box-shadow .15s ease,border-color .15s ease}
.related-content__card:hover,.related-content__card:focus-visible{box-shadow:var(--shadow-sm);border-color:#c7dcd7}
.related-content__kind{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:750}
.related-content__title{font-size:14px;color:var(--ink);font-weight:650;line-height:1.4}
@media(max-width:900px){.related-content__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.related-content__grid{grid-template-columns:1fr}.video-embed__placeholder{padding:16px;gap:10px}.video-embed__placeholder p{font-size:13px}}

/* CAPTCHA (Cloudflare Turnstile) — Login form only. data-size="flexible" on
   the widget itself already shrinks to its container's width; this just
   keeps the container from ever forcing horizontal scroll on a narrow
   auth-card (min content width ~252px at the 320px viewport floor). */
.cf-turnstile{width:100%;max-width:100%;margin:2px 0 4px;overflow:hidden}

/* Admin "Bildirim ve E-posta Ayarları" module — local segmented navigation
   (EmailSettings / NotificationRules / EmailTemplates), shared across all
   three screens via _NotificationModuleHeader. Restrained underline-tab
   style, consistent with the rest of the Admin portal (no pills, no filled
   backgrounds) - see docs/ui module-tabs pattern. */
.module-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 26px;flex-wrap:wrap}
.module-tabs a{padding:10px 4px;margin-right:20px;font-size:14px;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.module-tabs a:hover{color:var(--ink)}
.module-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
.module-tabs a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media(max-width:600px){.module-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}}

/* Compact "Genel Durum" status summary (SMTP settings screen) - a row of
   small label/value pairs, never a colored KPI-card grid (see frontend-design
   skill §11: avoid oversized dashboard metrics). Color is never the only
   signal - each item's text value already states the state in words. */
.status-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:18px 0;margin-bottom:22px;border-bottom:1px solid var(--line)}
.status-summary__item{display:flex;flex-direction:column;gap:4px}
.status-summary__label{font-size:12px;color:var(--muted);font-weight:650}
.status-summary__value{font-size:15px;font-weight:750;display:flex;align-items:center;gap:6px}
@media(max-width:900px){.status-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.status-summary{grid-template-columns:1fr;gap:12px}}

/* Field-level validation message (asp-validation-for) - framework-generated
   class, used across the app (Account pages, Admin forms) but never
   previously styled, so a server-rejected field silently had no visible
   inline error. Reuses the existing --danger token; no new color. */
.field-validation-error{display:block;color:var(--danger);font-size:12.5px;font-weight:650;margin-top:4px}

/* Generic vertical stack of cards/blocks with consistent gap - replaces
   one-off inline margin-top overrides between sibling .card elements. */
.stack{display:flex;flex-direction:column;gap:16px}

/* Email template editor - two-column layout (main content + a narrower
   reference/action rail). Stacks to one column at the existing 900px
   breakpoint, main content first. */
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media(max-width:900px){.editor-layout{grid-template-columns:1fr}}

/* Template variable reference panel. */
.var-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.var-list code{background:var(--sand);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12.5px;color:var(--brand);cursor:pointer}
.var-list code:hover{border-color:var(--brand)}
.var-list code:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.var-list__desc{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* Generic "this control group doesn't currently apply" state (e.g. the
   NotificationRule edit page's e-posta şablonu field while E-posta is off) -
   visual only, never disables the field (server validates the real rule). */
.is-irrelevant{opacity:.5}

/* Rendered-email preview frame - reads as a neutral email client pane, not
   another generic card. */
.email-preview{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--white)}
.email-preview__meta{background:var(--sand);padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.email-preview__meta strong{color:var(--ink)}
.email-preview__meta div+div{margin-top:3px}
.email-preview__body{padding:18px 16px;font-size:14px;line-height:1.65;white-space:pre-wrap;color:var(--ink)}

/* ===== Corporate UI/UX refinement pass — motion ===== */

/* Every transition/animation already in this file is deliberately short
   (.12s-.2s) and restrained (opacity/color/small translateY - never scale,
   spin, or bounce) - no new motion was introduced by this pass. This is the
   one remaining gap: prefers-reduced-motion was not previously honored, so a
   user who has that OS setting still received the hover-lift transforms
   (.content-card/.guide-card/.dashboard-metric) and the toast slide-in.
   Reduced to an instant/opacity-only fallback here, without removing the
   transitions for everyone else. */
@media(prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .content-card:hover,.content-card:focus-within,.guide-card:hover,.guide-card:focus-within,a.dashboard-metric:hover,a.dashboard-metric:focus-visible{transform:none}
}