/* AZURE TERAS – Uygulama kabuğu tasarım katmanı (kabuk-tasarim.css). Tüm CSS dosyalarından SONRA yüklenir.
 * Kapsam: sol menü, üst çubuk, açılır menüler, bildirim paneli, Ctrl+K arama, çekmece, mobil alt gezinme, iPad dar menü,
 * giriş ekranı, sohbet, sürüm notları penceresi, PWA bandı, alt bilgi, SaaS konsolu ortak parçaları.
 * Kurallar: renk eklenmez (tema değişkenleri + color-mix); aralık tek ölçek (4 / 8 / 12 / 16 / 24 / 32); mantıksal özellikler (RTL);
 * HTML ve JS yapısı değişmez (menü öğeleri, düğmeler, rozetler aynı). Yalnız görünüm. */

:root {
  --kb-s1: 4px; --kb-s2: 8px; --kb-s3: 12px; --kb-s4: 16px; --kb-s5: 24px; --kb-s6: 32px;   /* tek aralık ölçeği */
  --kb-gol-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --kb-gol-2: 0 4px 12px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .08);
  --kb-gol-3: 0 16px 40px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .10);
  --kb-yavas: .16s cubic-bezier(.2, .7, .3, 1);
  --kb-halka: 0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent);
  --kb-yaz-ince: color-mix(in srgb, var(--ink, #232323) 62%, var(--panel, #fff));
}

/* ====================================================== ÜST ÇUBUK ====================================================== */
.top { gap: var(--kb-s4); padding-inline: var(--kb-s4); box-shadow: 0 1px 0 color-mix(in srgb, #000 10%, transparent), 0 2px 8px -4px rgba(15, 23, 42, .28); }
.brand { gap: var(--kb-s3); }
.brand img { height: 24px; }
.brand > span:not(.ap-rozet) { font-size: 13px; font-weight: 600; letter-spacing: .01em; padding-inline-start: var(--kb-s3); border-inline-start: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-left: 0; padding-left: 0; }
[dir="rtl"] .brand > span:not(.ap-rozet) { border-right: 0; padding-right: 0; }
.brand select { border-radius: 999px; padding: 4px var(--kb-s3); font-size: 13px; background-color: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
.top .ap-rozet { border-radius: 999px; font-size: 11px; letter-spacing: .04em; padding: 3px 10px; }

/* arama: yumuşak hap biçimli alan, kısayol rozeti */
.ara-alan { height: 38px; padding: 0 var(--kb-s3); border-radius: 999px; gap: var(--kb-s2); border-color: color-mix(in srgb, var(--bar-yazi, #fff) 20%, transparent); background: color-mix(in srgb, var(--bar-yazi, #fff) 10%, transparent); font-size: 13px; transition: background var(--kb-yavas), border-color var(--kb-yavas), box-shadow var(--kb-yavas); }
.ara-alan:hover { background: color-mix(in srgb, var(--bar-yazi, #fff) 16%, transparent); border-color: color-mix(in srgb, var(--bar-yazi, #fff) 34%, transparent); }
.ara-alan kbd { border-radius: var(--r-sm); padding: 2px 6px; background: color-mix(in srgb, var(--bar-yazi, #fff) 12%, transparent); border-color: color-mix(in srgb, var(--bar-yazi, #fff) 28%, transparent); letter-spacing: .02em; }

/* birincil eylem + ikon düğmeleri */
.yeni-btn { height: 36px; padding: 0 var(--kb-s4); border-radius: 999px; box-shadow: var(--kb-gol-1); transition: background var(--kb-yavas), box-shadow var(--kb-yavas), transform var(--kb-yavas); }
.yeni-btn:hover { box-shadow: var(--kb-gol-2); }
.yeni-btn:active { transform: translateY(1px); }
.who { gap: var(--kb-s2); }
.who button.link { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; transition: background var(--kb-yavas); }
.zil-say { top: 1px; inset-inline-end: 0; border: 2px solid var(--bar, var(--navy)); min-width: 18px; height: 18px; line-height: 14px; font-size: 10px; }
.um-btn { height: 40px; border-radius: 999px; padding-inline-end: var(--kb-s3); }
.um-av { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bar-yazi, #fff) 28%, transparent); }

/* açılır menüler ortak: kullanıcı, "+ Yeni", bildirim */
.um-menu, .yeni-menu, .zil-panel, .acts-menu { border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--kb-gol-3); }
.um-menu, .yeni-menu { padding: var(--kb-s2); animation: kbAc .14s ease; }
.um-menu button[role=menuitem], .yeni-menu button { min-height: 40px; padding: 0 var(--kb-s3); border-radius: var(--r-md); font-size: 14px; transition: background var(--kb-yavas); }
.yeni-menu button .ik { color: var(--navy); }
.yeni-menu { min-width: 232px; }
.um-ust { padding: var(--kb-s3); }
.um-ust b { font-size: 14px; }
.um-ust small { font-size: 12px; color: var(--kb-yaz-ince); }
.um-dil { padding: var(--kb-s2) var(--kb-s3); }
[dir="rtl"] .um-menu { right: auto; left: 0; }
@media (max-width: 860px) { [dir="rtl"] .um-menu { left: 8px; } }
@keyframes kbAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* bildirim paneli */
.zil-panel { top: calc(var(--top-h, 56px) + var(--kb-s2)); inset-inline-end: var(--kb-s3); overflow: hidden auto; scrollbar-width: thin; animation: kbAc .14s ease; }
[dir="rtl"] .zil-panel { right: auto; left: var(--kb-s3); }
.zil-ust { padding: var(--kb-s3) var(--kb-s4); border-bottom: 1px solid var(--line); font-size: 14px; }
.zil-l li { padding: var(--kb-s3) var(--kb-s4); gap: var(--kb-s3); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); position: relative; transition: background var(--kb-yavas); }
.zil-l li:last-child { border-bottom: 0; }
.zil-l li:hover { background: color-mix(in srgb, var(--navy) 5%, #fff); }
.zil-l li.yeni { background: color-mix(in srgb, var(--navy) 6%, #fff); }
.zil-l li.yeni::before { content: ""; position: absolute; inset-inline-start: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--navy); }
.zil-l li.bos { padding-block: var(--kb-s6); }
.zil-l li.bos:focus, .zil-l li.bos:focus-visible { outline: 0; }
.zil-i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-md); background: color-mix(in srgb, var(--navy) 8%, transparent); font-size: 16px; flex: none; }
.zil-l small { color: var(--kb-yaz-ince); }
.zil-alt { padding: var(--kb-s3) var(--kb-s4); }

/* ====================================================== SOL MENÜ ====================================================== */
.side:not(.side-cekmece) { width: 256px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
.side-ust { padding: var(--kb-s3) var(--kb-s2) var(--kb-s2); gap: 1px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.side-ust:hover, .side-ust:focus-within { scrollbar-color: rgba(255, 255, 255, .26) transparent; }
.side-ust::-webkit-scrollbar { width: 8px; }
.side-ust::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.side-ust:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); background-clip: padding-box; }
.side .si { min-height: 36px; padding: 0 var(--kb-s3); gap: var(--kb-s3); border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; letter-spacing: .005em; transition: background var(--kb-yavas), color var(--kb-yavas); }
.side .si .ik { width: 18px; height: 18px; flex: none; opacity: .86; transition: opacity var(--kb-yavas); }
.side .si:hover .ik, .side .si.on .ik { opacity: 1; }
.side .si > span:not(.bdg) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .si:hover { background: rgba(255, 255, 255, .08); }
.side .si.on { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.side .si.on::before { left: -8px; right: auto; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #f0b429; }
[dir="rtl"] .side .si.on::before { left: auto; right: -8px; border-radius: 3px 0 0 3px; }
.side .bdg { min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; }
.nav-grp { padding: var(--kb-s5) var(--kb-s3) var(--kb-s2); font-size: 11px; letter-spacing: .1em; }
.side-ust > .nav-grp:first-child { padding-top: var(--kb-s3); }
button.nav-grp-t { padding: var(--kb-s5) var(--kb-s3) var(--kb-s2); border-radius: var(--r-md); transition: color var(--kb-yavas); }
button.nav-grp-t:hover { background: none; color: #fff; }
.nav-alt { padding: var(--kb-s3) var(--kb-s3) var(--kb-s1); }
.side .si-alt { margin-block: var(--kb-s1) var(--kb-s2); }
.nav-ara { height: var(--kb-s2); }
.si-yildiz { border-radius: var(--r-sm); }

/* daralt düğmesi */
.side:not(.side-cekmece) .side-tog { min-height: 44px; padding: 0 var(--kb-s4); font-size: 12.5px; border-top-color: rgba(255, 255, 255, .12); box-shadow: none; transition: background var(--kb-yavas), color var(--kb-yavas); }
.side:not(.side-cekmece) .side-tog:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side-tog .ik { width: 16px; height: 16px; }

/* daraltılmış (simge) menü: etiketler üzerine gelince ipucu olarak açılır */
#app[data-dar="1"] .side:not(.side-cekmece) { width: 68px; }
#app[data-dar="1"] .side:not(.side-cekmece) .si { justify-content: center; padding: 0; }
#app[data-dar="1"] .side:not(.side-cekmece) .si[title]:hover::after, #app[data-dar="1"] .side:not(.side-cekmece) .si[title]:focus-visible::after {
  content: attr(title); position: fixed; inset-inline-start: 72px; z-index: 1200; padding: var(--kb-s2) var(--kb-s3); border-radius: var(--r-md);
  background: var(--ink, #232323); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--kb-gol-2); pointer-events: none; }

/* iPad / dar masaüstü simge menüsü: etiket ipucu */
@media (min-width: 820px) and (max-width: 1180px) {
  #app .side:not(.side-cekmece) .si { min-height: 44px; }
  #app .side:not(.side-cekmece) .si[title]:hover::after, #app .side:not(.side-cekmece) .si[title]:focus-visible::after {
    content: attr(title); position: fixed; inset-inline-start: 72px; z-index: 1200; padding: var(--kb-s2) var(--kb-s3); border-radius: var(--r-md);
    background: var(--ink, #232323); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--kb-gol-2); pointer-events: none; }
  #app .side:not(.side-cekmece) .nav-grp { height: var(--kb-s2); }
  #app .side:not(.side-cekmece) .nav-grp::after { content: ""; display: block; height: 1px; margin: 0 var(--kb-s3); background: rgba(255, 255, 255, .14); visibility: visible; }
}

/* ====================================================== İÇERİK ZEMİNİ / ALT BİLGİ ====================================================== */
.pg-bas-a { transition: color var(--kb-yavas); }
footer.azt-alt { padding: var(--kb-s5) var(--kb-s4) var(--kb-s6); font-size: 12px; }
footer.azt-alt a { font-weight: 600; }
footer.azt-alt .azt-surum { margin-inline-start: 2px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--navy); font-weight: 600; }
footer.azt-alt .azt-surum:hover { background: color-mix(in srgb, var(--navy) 14%, transparent); text-decoration: none; }

/* ====================================================== ÇEKMECE MENÜ (telefon / iPad dik) ====================================================== */
.drw-perde { backdrop-filter: blur(1.5px); }
.drw .side-cekmece { border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--kb-gol-3); }
[dir="rtl"] .drw .side-cekmece { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.drw-ust { padding: var(--kb-s3) var(--kb-s3) var(--kb-s3) var(--kb-s4); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.drw-ust b { color: #fff; font-size: 16px; letter-spacing: .01em; }
.drw-ust button { color: rgba(255, 255, 255, .86); width: 44px; height: 44px; }
.drw-ust button:hover { background: rgba(255, 255, 255, .1); }
.drw-proj { padding: var(--kb-s3) var(--kb-s4); border-bottom: 1px solid rgba(255, 255, 255, .1); gap: var(--kb-s1) var(--kb-s2); }
.drw-proj small { color: rgba(255, 255, 255, .7); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.side-cekmece .side-ust { padding-inline: var(--kb-s3); }
.side-cekmece .si { min-height: 44px; font-size: 14px; }

/* ====================================================== MOBİL ALT GEZİNME ====================================================== */
.mbar { box-shadow: 0 -1px 0 var(--line), 0 -6px 16px -10px rgba(15, 23, 42, .25); padding-bottom: env(safe-area-inset-bottom); }
.mbar a, .mbar button { position: relative; gap: 2px; min-height: 56px; padding: var(--kb-s2) var(--kb-s1) var(--kb-s1); font-size: 11px; font-weight: 600; color: var(--kb-yaz-ince); transition: color var(--kb-yavas); }
.mbar a .ik, .mbar button .ik { width: 22px; height: 22px; }
.mbar a.on { color: var(--navy); }
.mbar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--navy); }
.mbar a > span:not(.bdg), .mbar button > span:not(.bdg) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar .bdg { min-width: 18px; height: 18px; line-height: 18px; border-radius: 999px; font-size: 10px; border: 2px solid var(--panel, #fff); box-sizing: content-box; }
@media (max-width: 720px) { .ara-alan { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; } .ara-alan:hover { background: color-mix(in srgb, var(--bar-yazi, #fff) 14%, transparent); } }
@media (max-width: 860px) {
  .top { padding-inline: var(--kb-s3); gap: var(--kb-s2); }
  .who { gap: var(--kb-s1); }
  .brand img { height: 22px; }
}

/* ====================================================== Ctrl+K ARAMA ====================================================== */
.ara { background: color-mix(in srgb, #0b1220 54%, transparent); backdrop-filter: blur(3px); }
.ara-k { border-radius: var(--r-lg); box-shadow: var(--kb-gol-3); border-color: transparent; animation: kbAc .16s ease; }
.ara-i { padding-inline: var(--kb-s4); }
.ara-i input { height: 60px; font-size: 17px; }
.ara-l { padding: var(--kb-s2); scrollbar-width: thin; }
.ara-b { padding: var(--kb-s3) var(--kb-s3) var(--kb-s1); }
.ara-o { padding: var(--kb-s2) var(--kb-s3); border-radius: var(--r-md); transition: background var(--kb-yavas); }
.ara-o:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
.ara-o.on { background: color-mix(in srgb, var(--navy) 11%, transparent); box-shadow: inset 2px 0 0 var(--navy); }
[dir="rtl"] .ara-o.on { box-shadow: inset -2px 0 0 var(--navy); }
.ara-ik { width: 36px; height: 36px; }
.ara-f { padding: var(--kb-s2) var(--kb-s4); gap: var(--kb-s4); }
@media (max-width: 640px) { .ara-k { animation: none; } .ara-i input { height: 56px; } }

/* ====================================================== SOHBET ====================================================== */
.sh { border-radius: var(--r-lg); box-shadow: var(--kb-gol-1); overflow: hidden; }
.sh-sol { background: color-mix(in srgb, var(--navy) 2.5%, var(--panel, #fff)); }
.sh-ust, .sh-baslik { padding: var(--kb-s3) var(--kb-s4); min-height: 56px; }
.sh-ara { margin: var(--kb-s3); padding: var(--kb-s2) var(--kb-s3); height: 38px; border-radius: 999px; background: var(--panel, #fff); }
.sh-k { padding: var(--kb-s3) var(--kb-s4); gap: var(--kb-s3); transition: background var(--kb-yavas); border-inline-start: 3px solid transparent; }
.sh-k:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); }
.sh-k.on { background: color-mix(in srgb, var(--navy) 9%, transparent); border-inline-start-color: var(--navy); }
.sh-mesajlar { padding: var(--kb-s4) var(--kb-s5); gap: var(--kb-s2); background: color-mix(in srgb, var(--navy) 3%, var(--bg, #f6f5f3)); scrollbar-width: thin; }
.sh-b { border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--kb-s1); box-shadow: var(--kb-gol-1); border-color: transparent; }
.sh-m.ben .sh-b { border-radius: var(--r-lg) var(--r-lg) var(--kb-s1) var(--r-lg); background: color-mix(in srgb, var(--navy) 13%, #fff); border-color: transparent; }
.sh-gun { align-self: center; padding: 2px var(--kb-s3); border-radius: 999px; background: color-mix(in srgb, var(--mut) 12%, transparent); font-weight: 600; }
.sh-yaz { padding: var(--kb-s3) var(--kb-s4); align-items: center; }
.sh-yaz textarea { border-radius: var(--r-lg); padding: var(--kb-s3) var(--kb-s4); min-height: 44px; }
.sh-yaz textarea:focus { outline: 0; border-color: var(--navy); box-shadow: var(--kb-halka); }
.sh-hos-ust { padding-block: var(--kb-s5); }
.sh-hos-k, .sh-hos-kisi { border-radius: var(--r-lg); transition: border-color var(--kb-yavas), box-shadow var(--kb-yavas); }
.sh-toast { border-radius: var(--r-lg); box-shadow: var(--kb-gol-3); }
.sh-izin { border-radius: 0; }

/* ====================================================== SÜRÜM NOTLARI (yalnız yönetici) ====================================================== */
.sv-kok { display: flex; flex-direction: column; gap: var(--kb-s2); }
.sv-guncel { margin: 0 0 var(--kb-s2); padding: var(--kb-s3) var(--kb-s4); border-radius: var(--r-md); background: color-mix(in srgb, var(--navy) 6%, transparent); }
.sv-kayit { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel, #fff); overflow: hidden; }
.sv-kayit > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kb-s2) var(--kb-s3); padding: var(--kb-s3) var(--kb-s4); cursor: pointer; list-style: none; min-height: 48px; }
.sv-kayit > summary::-webkit-details-marker { display: none; }
.sv-kayit > summary::after { content: "›"; margin-inline-start: auto; font-size: 20px; line-height: 1; color: var(--mut); transform: rotate(90deg); transition: transform var(--kb-yavas); }
[dir="rtl"] .sv-kayit > summary::after { content: "‹"; }
.sv-kayit[open] > summary::after { transform: rotate(-90deg); }
[dir="rtl"] .sv-kayit[open] > summary::after { transform: rotate(90deg); }
.sv-kayit[open] > summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--navy) 3%, transparent); }
.sv-rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.sv-baslik { font-weight: 600; min-width: 0; flex: 1 1 200px; }
.sv-meta { color: var(--mut); font-size: 12px; }
.sv-ic { padding: var(--kb-s3) var(--kb-s4) var(--kb-s4); }
.sv-alt { margin: var(--kb-s3) 0 var(--kb-s1); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.sv-liste { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: var(--kb-s1); line-height: 1.5; }

/* ====================================================== PWA KURULUM BANDI ====================================================== */
.pwa-bnr { border-radius: var(--r-lg); box-shadow: var(--kb-gol-3); border: 1px solid var(--line); }

/* ====================================================== GİRİŞ EKRANI (panel, acenta, şifre) ====================================================== */
.login { min-height: 100%; padding: var(--kb-s5) var(--kb-s4); background:
  radial-gradient(900px 420px at 50% -120px, color-mix(in srgb, var(--navy) 14%, transparent), transparent 70%),
  var(--bg); }
.login form { position: relative; max-width: 400px; padding: var(--kb-s6) var(--kb-s6) var(--kb-s5); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 16px; box-shadow: var(--kb-gol-2), 0 24px 48px -24px rgba(15, 23, 42, .25); overflow: hidden; }
.login form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); }
.login img { width: 176px; margin: var(--kb-s2) auto var(--kb-s4); }
.login h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--kb-s1); }
.login p { color: var(--kb-yaz-ince); font-size: 14px; margin-bottom: var(--kb-s5); }
.login label { font-size: 13px; margin-bottom: var(--kb-s4); }
.login input { height: 44px; padding: 0 var(--kb-s3); margin-top: var(--kb-s1); border-radius: var(--r-md); font-size: 15px; transition: border-color var(--kb-yavas), box-shadow var(--kb-yavas); }
.login input:focus { outline: 0; border-color: var(--navy); box-shadow: var(--kb-halka); }
.login .primary { height: 44px; margin-top: var(--kb-s2); border-radius: var(--r-md); font-size: 15px; letter-spacing: .01em; box-shadow: var(--kb-gol-1); }
.login .err, .login .error { margin-top: var(--kb-s3); padding: var(--kb-s2) var(--kb-s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--red, #c00000) 8%, #fff); color: var(--red, #c00000); font-size: 13px; }
.login .err:empty { display: none; }
.login select { margin-top: var(--kb-s4); min-height: 36px; border-radius: 999px; padding: 0 var(--kb-s3); }
@media (max-width: 480px) { .login { padding: var(--kb-s4) var(--kb-s3); align-items: start; padding-top: var(--kb-s6); } .login form { padding: var(--kb-s5) var(--kb-s4); } }

/* ====================================================== ACENTA PANELİ ÜST ÇUBUK / SEKMELER ====================================================== */
/* acenta kartları ve alanları (acenta.php kendi sekme biçimini korur) */
.ap-card { border-radius: var(--r-lg); padding: var(--kb-s5); border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--kb-gol-1); }
.ap-card h2 { font-size: 18px; letter-spacing: -.005em; }
.ap-card input, .ap-card textarea { border-radius: var(--r-md); transition: border-color var(--kb-yavas), box-shadow var(--kb-yavas); }
.ap-card input:focus, .ap-card textarea:focus { outline: 0; border-color: var(--navy); box-shadow: var(--kb-halka); }
.ap-box { border-radius: var(--r-md); }
.ap-pen { border-radius: var(--r-lg); box-shadow: var(--kb-gol-3); }


/* ====================================================== DURUM BİLEŞENLERİ (boş / yükleniyor / hata) ====================================================== */
.loading { padding: var(--kb-s6) var(--kb-s4); text-align: center; color: var(--kb-yaz-ince); }
.loading.err { color: var(--red, #c00000); }
@media (prefers-reduced-motion: reduce) {
  .um-menu, .yeni-menu, .zil-panel, .ara-k { animation: none; }
  .side .si, .mbar a, .yeni-btn, .sv-kayit > summary::after { transition: none; }
}