/* K-063 · Kehrima Yönetim · TAS tasarımından (departmanlar/tasarim/cikti/K-063, tasarim_sistemi.md). Telefon önce. */
@font-face { font-family: Figtree; src: url("Figtree-Variable.ttf"); font-weight: 300 900; font-display: swap; }
:root {
  --kehribar: #E8A73E; --odak: #D08A1C; --obsidyen: #1E1B22; --sedef: #F6F3F0; --kum: #EBE6E0;
  --beyaz: #FFFFFF; --recine: #8A4F0E; --soluk: #6C6770; --cizgi: #E6E1DB; --iyi: #2F7A55; --uyari: #A4561A; --hata: #B42318;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: Figtree, system-ui, sans-serif; color: var(--obsidyen); background: var(--beyaz); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body { min-height: 100dvh; }
button, input, textarea { font: inherit; color: inherit; border: 0; background: none; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ik { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gizli { display: none !important; }
#kok { max-width: 520px; margin: 0 auto; min-height: 100dvh; position: relative; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Tane halkası */
.halka { position: relative; flex: none; }
.halka i { position: absolute; border-radius: 50%; background: var(--kum); transform: translate(-50%,-50%); transition: width .08s, height .08s; }
.halka i.dolu { background: var(--obsidyen); }
.halka i.kb { background: var(--kehribar); box-shadow: 0 0 0 3px rgba(232,167,62,.25); }
.koyu .halka i { background: rgba(246,243,240,.18); } .koyu .halka i.dolu { background: var(--sedef); } .koyu .halka i.kb { background: var(--kehribar); }

.cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--kum); font: 700 13px/1 Figtree; white-space: nowrap; }
.cip.o { background: #FCEBD0; color: var(--recine); } .cip.u { background: #F6E3D6; color: var(--uyari); } .cip.i { background: #DDEDE4; color: var(--iyi); } .cip.k { background: var(--obsidyen); color: var(--beyaz); }

/* Üst çubuk */
.ust { height: 56px; padding: 0 12px 0 20px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); z-index: 5; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
.ust .ad { font: 800 18px Figtree; letter-spacing: -.01em; } .ust .bos { flex: 1; }
.ust .dg { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; }
.hal { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--sedef); font: 700 13px Figtree; }
.hal i { width: 8px; height: 8px; border-radius: 50%; background: var(--iyi); }
.hal.kb { background: #FCEBD0; color: var(--recine); } .hal.kb i { background: var(--kehribar); }
.hal.ob { background: var(--obsidyen); color: var(--sedef); } .hal.ob i { background: var(--kehribar); }
.hal.yok { background: #F6E3D6; color: var(--uyari); } .hal.yok i { background: var(--uyari); }
.ic { padding: 4px 20px 24px; }

h1 { font: 800 30px/1.05 Figtree; letter-spacing: -.035em; } h1 b { color: var(--kehribar); }
.etk { font: 700 12px/1.2 Figtree; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.h2 { font: 800 13px/1 Figtree; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); display: flex; justify-content: space-between; align-items: center; margin: 24px 0 10px; }
.h2 button { letter-spacing: 0; text-transform: none; font: 700 14px Figtree; color: var(--recine); }

/* Ana */
.kartlar { display: flex; gap: 10px; margin: 18px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.kart { flex: none; width: 146px; height: 118px; border-radius: 16px; background: var(--sedef); padding: 14px; display: flex; flex-direction: column; text-align: left; }
.kart .ust2 { display: flex; align-items: center; gap: 6px; font: 700 13px Figtree; color: var(--soluk); }
.kart .say { font: 800 34px/1 Figtree; letter-spacing: -.03em; margin-top: auto; }
.kart .alt { font: 600 13px Figtree; color: var(--soluk); margin-top: 4px; }
.kart.k { background: var(--obsidyen); color: var(--sedef); } .kart.k .ust2, .kart.k .alt { color: #B9B4BC; } .kart.k .say { font-size: 22px; }
.son { background: var(--sedef); border-radius: 16px; padding: 16px; }
.son .s { font: 500 14px/1.4 Figtree; color: var(--soluk); }
.son .c { font: 600 16px/1.45 Figtree; margin-top: 8px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.son .sat { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 700 14px Figtree; }
.yuv { width: 36px; height: 36px; border-radius: 50%; background: var(--obsidyen); color: var(--sedef); display: grid; place-items: center; flex: none; }

/* Bas-konuş */
.konus { position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; padding: 28px 0 14px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 28%); z-index: 4; }
.dugme { width: 104px; height: 104px; border-radius: 50%; background: var(--kehribar); display: grid; place-items: center; box-shadow: 0 10px 28px rgba(232,167,62,.45), 0 0 0 8px #FFF3E0; touch-action: none; user-select: none; -webkit-user-select: none; }
.dugme .ik { width: 40px; height: 40px; stroke-width: 2.2; }
.dugme.bas { background: var(--odak); transform: scale(.96); box-shadow: 0 0 0 10px rgba(232,167,62,.18), 0 0 0 22px rgba(232,167,62,.08); }
.konus.kucuk .dugme { width: 76px; height: 76px; } .konus.kucuk .dugme .ik { width: 30px; height: 30px; }
.dugme-et { margin-top: 16px; font: 800 16px Figtree; text-align: center; }
.dugme-alt { margin-top: 4px; font: 500 13px Figtree; color: var(--soluk); text-align: center; }
.dugme-alt button { text-decoration: underline; text-underline-offset: 3px; color: var(--recine); font-weight: 700; }
.bosluk { height: 230px; }

/* Dinliyor */
.canli { font: 700 27px/1.25 Figtree; letter-spacing: -.02em; margin-top: 18px; min-height: 70px; }
.canli span { color: #B3AEB6; } .imlec { display: inline-block; width: 3px; height: 28px; background: var(--kehribar); vertical-align: -5px; margin-left: 2px; border-radius: 2px; animation: yanip .9s steps(2) infinite; }
@keyframes yanip { 50% { opacity: 0; } }
.dinle-halka { position: relative; width: 216px; height: 216px; display: grid; place-items: center; margin: 0 auto -48px; }
.dinle-halka .halka { position: absolute; inset: 0; }

/* Yazarak sor */
.yaz { display: flex; gap: 8px; margin-top: 16px; }
.yaz textarea { flex: 1; min-height: 48px; max-height: 160px; border-radius: 14px; background: var(--sedef); padding: 12px 14px; font: 500 16px/1.4 Figtree; resize: none; }
.yaz button { height: 48px; padding: 0 16px; border-radius: 99px; background: var(--obsidyen); color: var(--beyaz); font: 800 15px Figtree; align-self: flex-end; }

/* Düşünüyor */
.balon { margin-left: 48px; background: var(--sedef); border-radius: 18px 18px 4px 18px; padding: 12px 14px; font: 600 16px/1.4 Figtree; white-space: pre-wrap; }
.balon-alt { text-align: right; font: 500 12px Figtree; color: var(--soluk); margin-top: 6px; }
.dus { margin-top: 18px; border: 1px solid var(--cizgi); border-radius: 20px; padding: 18px; background: var(--beyaz); }
.dus .bas { display: flex; align-items: center; gap: 14px; }
.dus .bt { font: 800 20px/1.15 Figtree; letter-spacing: -.02em; }
.dus .sure { font: 600 14px Figtree; color: var(--soluk); margin-top: 4px; } .dus .sure b { color: var(--obsidyen); font-weight: 800; }
.adim { list-style: none; margin-top: 16px; display: grid; gap: 11px; }
.adim li { display: flex; gap: 10px; align-items: flex-start; font: 600 15px/1.35 Figtree; }
.adim .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: -1px; }
.adim .ok .n { background: var(--obsidyen); color: var(--sedef); } .adim .ok .n .ik { width: 14px; height: 14px; stroke-width: 3; }
.adim .su .n { border: 2px solid var(--kehribar); } .adim .su .n::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kehribar); }
.adim .su { font-weight: 800; } .adim .bek { color: var(--soluk); } .adim .bek .n { border: 2px solid var(--kum); }
.bilgi { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--sedef); font: 500 14px/1.4 Figtree; color: #4A4550; }
.bilgi.u { background: #F6E3D6; color: var(--uyari); }
.iptal { display: block; margin: 12px 0 -4px auto; font: 700 14px Figtree; color: var(--soluk); text-decoration: underline; text-underline-offset: 3px; }

/* Konuşuyor / cevap */
.gm { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.gm .a { font: 800 17px Figtree; } .gm .b { font: 600 13px Figtree; color: var(--soluk); margin-top: 2px; }
.kontrol { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kontrol .yuv { width: 44px; height: 44px; } .kontrol .hiz { height: 36px; padding: 0 12px; border-radius: 99px; background: var(--kum); font: 800 13px Figtree; }
.metin { margin-top: 16px; font: 600 19px/1.5 Figtree; letter-spacing: -.01em; white-space: pre-wrap; }
.metin .simdi { background: #FCEBD0; box-shadow: 0 0 0 3px #FCEBD0; border-radius: 4px; } .metin .gelecek { color: #A9A4AD; }
.karar-k { margin-top: 18px; border: 2px solid var(--kehribar); background: #FFF9F0; border-radius: 18px; padding: 16px; }
.karar-k .q { font: 700 16px/1.4 Figtree; margin-top: 8px; }
.karar-k .bt { display: flex; gap: 8px; margin-top: 14px; }
.karar-k .bt button { flex: 1; height: 46px; border-radius: 99px; font: 800 15px Figtree; }
.karar-k .ev1 { background: var(--obsidyen); color: var(--beyaz); } .karar-k .ev2 { border: 1.5px solid var(--obsidyen) !important; } .karar-k .ev3 { background: var(--kum); }
.karar-k .not { font: 500 12px/1.4 Figtree; color: var(--soluk); margin-top: 10px; }

/* Geçmiş */
.kayit { padding: 14px 0; border-bottom: 1px solid var(--cizgi); display: block; width: 100%; text-align: left; }
.kayit .sa { display: flex; justify-content: space-between; font: 600 12px Figtree; color: var(--soluk); }
.kayit .q { font: 800 16px/1.3 Figtree; margin-top: 4px; }
.kayit .c { font: 500 14px/1.4 Figtree; color: var(--soluk); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kayit .t { display: flex; gap: 6px; margin-top: 8px; } .kayit .t .cip { height: 24px; font-size: 12px; padding: 0 9px; }

/* Departmanlar */
.dept-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.dept { border-radius: 16px; background: var(--sedef); padding: 14px; text-align: left; min-height: 112px; display: flex; flex-direction: column; }
.dept .k { font: 800 12px Figtree; letter-spacing: .08em; color: var(--soluk); } .dept .a { font: 800 16px/1.2 Figtree; margin-top: 4px; }
.dept .s { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; } .dept .s .cip { height: 24px; font-size: 12px; padding: 0 9px; }
.geri { display: inline-flex; align-items: center; gap: 4px; font: 700 14px Figtree; color: var(--recine); margin: 8px 0 6px -4px; height: 44px; }
.gorev { padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.gorev .u { display: flex; gap: 8px; align-items: center; font: 700 12px Figtree; color: var(--soluk); flex-wrap: wrap; }
.gorev .q { font: 700 15px/1.35 Figtree; margin-top: 4px; }
.gorev .c { font: 500 13px/1.45 Figtree; color: var(--soluk); margin-top: 4px; }
.gorev details summary { cursor: pointer; font: 700 13px Figtree; color: var(--recine); margin-top: 4px; list-style: none; }
.rapor { background: var(--sedef); border-radius: 16px; padding: 16px; font: 500 14px/1.5 Figtree; overflow-wrap: anywhere; }
.rapor h3 { font: 800 16px/1.3 Figtree; margin: 14px 0 6px; } .rapor h3:first-child { margin-top: 0; }
.rapor ul { padding-left: 18px; } .rapor p { margin: 6px 0; } .rapor .tr { padding: 6px 0; border-bottom: 1px solid var(--cizgi); }

/* Giriş */
.giris { background: var(--obsidyen); color: var(--sedef); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(56px + env(safe-area-inset-top)) 24px 30px; }
.giris .bas { font: 800 26px Figtree; margin-top: 18px; } .giris .alt2 { font: 600 15px Figtree; color: #B9B4BC; margin-top: 8px; }
.giris .kim { display: flex; gap: 8px; margin-top: 26px; }
.giris .kim button { height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(246,243,240,.1); font: 700 15px Figtree; }
.giris .kim button.on { background: var(--kehribar); color: var(--obsidyen); }
.giris .nok { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
.giris .nok i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(246,243,240,.45); } .giris .nok i.d { background: var(--kehribar); border-color: var(--kehribar); }
.giris .hata { min-height: 22px; margin-top: 14px; font: 700 14px Figtree; color: #F3B4A8; text-align: center; }
.tus { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px 20px; margin-top: 10px; }
.tus button { width: 76px; height: 64px; border-radius: 99px; display: grid; place-items: center; font: 600 28px Figtree; background: rgba(246,243,240,.07); }
.tus button.b { background: none; } .tus button:active { background: rgba(232,167,62,.35); }
.giris .dip { margin-top: auto; padding-top: 24px; font: 500 13px Figtree; color: #8E8994; text-align: center; }

/* Sekme çubuğu */
.sekme { position: fixed; left: 0; right: 0; bottom: 0; height: calc(84px + env(safe-area-inset-bottom)); background: var(--beyaz); border-top: 1px solid var(--cizgi); display: flex; padding: 0 12px env(safe-area-inset-bottom); z-index: 6; max-width: 520px; margin: 0 auto; }
.sekme button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 12px Figtree; color: var(--soluk); }
.sekme button.on { color: var(--obsidyen); font-weight: 800; }
.uyari-band { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #F6E3D6; color: var(--uyari); font: 700 14px/1.4 Figtree; }
@media (prefers-reduced-motion: reduce) { .imlec { animation: none; } }

/* Departmanlar ve Bugün (TAS olcu_notlari_departman.md) */
.cipler { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .cipler .cip { height: 30px; }
.dept { position: relative; height: auto; min-height: 112px; padding: 12px 13px; gap: 2px; }
.dept .a { font: 800 15px/1.15 Figtree; letter-spacing: -.01em; margin: 0 28px 0 0; }
.dept .dr { font: 600 12px Figtree; color: var(--soluk); margin-top: 4px; }
.dept .s { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 0; font: 600 12px Figtree; color: var(--soluk); }
.dept .s b { font: 800 22px Figtree; color: var(--obsidyen); margin-right: 3px; }
.dept .cip.son { background: var(--beyaz); height: 24px; padding: 0 8px; font-size: 12px; } .dept .cip.son.u { background: #F6E3D6; color: var(--uyari); }
.rozet { position: absolute; right: 10px; top: 10px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--kehribar); font: 800 12px/24px Figtree; text-align: center; }
.dbas { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rap { margin-top: 12px; background: var(--sedef); border-radius: 14px; padding: 11px 13px; }
.rap .rm { font: 500 14px/1.4 Figtree; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gsat { display: flex; gap: 10px; } .gno { flex: none; width: 46px; font: 800 13px/1.35 Figtree; color: var(--recine); padding-top: 1px; }
.gsat .q { margin-top: 0; font-size: 14px; } .gsat .c { margin-top: 2px; }
.sekme button .mk { width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; background: var(--kehribar); color: var(--obsidyen); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(232,167,62,.45), 0 0 0 5px #fff; }