/* ==========================================================================
NIZAM | Studio — Tema
Palet: logo (metalik grafit + kırmızı), sıcak tarafa kaydırılmış.
KURAL: Bu bloğun dışında hiçbir yerde sabit renk yazılmaz.
Bir rengi değiştirmek istersen tek yer burasıdır.
========================================================================== */
:root {
/* --- Vurgu: tek kaynak. Markanın kırmızısı buradan türer. --- */
--red: #e5342a;
--red-parlak: #f24a40;
--red-acik: #f75f55;
--red-koyu: #b8221a;
--red-derin: #6d1a14;
--red-ink: #f08279;
--red-ink-soft: #f0a49e;
--red-soft: rgba(229, 52, 42, .13);
--red-cizgi: rgba(229, 52, 42, .34);
/* --- Metal --- */
--metal-1: #58504b;
--metal-2: #d6d0cd;
/* --- Yüzeyler: sıcak grafit merdiveni --- */
--bg: #171614;
/* iOS uygulama kipinde sayfanın DIŞINDA kalan şerit (ana ekran çizgisi bölgesi)
bu renkle boyanır. Alt çubuğun bittiği renkle aynı: ikisi tek parça görünsün. */
--cerceve: #1f1d1b;
--bg-ust: #232120;
--rail: #1a1817;
--rail-ust: #211f1d;
--kod-bg: #181614;
--yuva-2: #1c1b19;
--yuva: #211f1d;
/* Panelin ve çubukların ortak koyu malzemesi. Fotoğrafın üstünde duran
her şey bu renkte: kısayol kartları, bugünkü durum, selam hapı,
üst çubuk, alt çubuk. */
--panel-kart: #121110;
--panel-cam: rgba(18, 17, 16, .92);
--panel-cizgi: rgba(255, 255, 255, .06);
--kart-alt: #222020;
--surface: #272523;
--kart-ust: #2d2a27;
--surface-2: #2d2a27;
--surface-3: #363330;
/* --- Çizgiler --- */
--line-3: #2f2c2a;
--line-2: #373331;
--line: #3c3734;
--line-parlak: #4a4440;
--line-parlak-2: #4f4844;
/* --- Metin --- */
--ink-strong: #f6f5f4;
--ink: #eceae9;
--ink-soft: #b8b2ad;
--ink-faint: #938b85;
--ink-dim: #7c746e;
--kod-ink: #c6c1be;
/* --- Durum renkleri --- */
--st-todo: #a39a95;
--st-dev: #d8a63f;
--st-dev-t: #e8bb5c;
--st-check: #6b93e8;
--st-check-t: #8badf2;
--st-done: #45a37b;
--st-done-t: #62c295;
--st-done-parlak: #4fb388;
--dev-soft: rgba(216, 166, 63, .12);
--dev-cizgi: rgba(216, 166, 63, .32);
--dev-cizgi-2: rgba(216, 166, 63, .46);
--check-soft: rgba(107, 147, 232, .13);
--check-cizgi: rgba(107, 147, 232, .32);
--check-cizgi-2: rgba(107, 147, 232, .46);
--done-soft: rgba(69, 163, 123, .12);
--done-cizgi: rgba(69, 163, 123, .32);
--done-cizgi-2: rgba(69, 163, 123, .46);
/* --- Yardımcılar --- */
--bar-bos: #2c2826;
--iskelet-1: #23211f;
--iskelet-2: #34302d;
--isik: rgba(255, 255, 255, .052);
/* Kart gölgesi iki katman: yakın ve sert olan kartı zeminden ayırıyor,
uzak ve yumuşak olan yükseklik hissini veriyor. Tek katmanla kart
dokulu zemine yapışık duruyordu. */
--golge: 0 2px 4px -2px rgba(0, 0, 0, .70),
0 18px 34px -20px rgba(0, 0, 0, .95);
--golge-yuksek: 0 26px 50px -24px rgba(0, 0, 0, .95);
--perde: rgba(9, 7, 6, .74);
/* --- Ölçüler --- */
--radius: 12px;
--radius-sm: 9px;
--radius-lg: 14px;
--rail-w: 236px;
--dokunma: 44px;
--ease: cubic-bezier(.2, .7, .3, 1);
--yay: cubic-bezier(.34, 1.42, .48, 1);
/* --- Yazı --- */
--yazi-baslik: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--yazi-govde: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--yazi-kod: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
/* Markanın yazı tipi repoya gömülü — dışarıya bağlanmaz, çevrimdışı da gelir. */
@font-face {
font-family: "Space Grotesk";
src: url("font/grotesk-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Space Grotesk";
src: url("font/grotesk-700.woff2") format("woff2");
font-weight: 700 900; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Bir bağlantıya basıp parmağını sürükleyince iOS onu "taşınabilir" sayıp
başlık + adres balonu gösteriyor, arkadaki sayfayı da karartıyordu.
Sürüklemeyi kapatınca o davranış tümüyle kalkıyor. */
a, img, button, [role="button"], .card, .tab, .proje, .gorev, .gsatir, .modul-bas, .standart-bas {
-webkit-user-drag: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
/* Uygulama ekrana çivilenir: sayfa hiç kaymaz, altta beyaz boşluk kalmaz.
Kaydırma yalnızca içerik alanının kendi içinde olur. */
/* Uzun basınca iOS'un "Kopyala / Araştır / Çeviri" menüsü çıkıyordu.
Uygulama arayüzü seçilemez; yalnızca yazılan ve kopyalanan yerler seçilebilir. */
#app, #login, #tabbar, #topbar {
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
input, textarea, .kod, .secilebilir, .secilebilir * {
-webkit-user-select: text; user-select: text;
-webkit-touch-callout: default;
}
html {
height: 100%;
overscroll-behavior: none;
background: var(--cerceve);
-webkit-text-size-adjust: 100%;
}
body {
position: fixed;
top: 0; left: 0; right: 0;
height: 100%;
/* Tarayıcıda dvh doğrudur: adres çubuğu açılıp kapandıkça değişir. */
height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
background: var(--bg);
}
/* lvh denendi ve çubuk ekranın altına taştı: görünen alan gerçekten 793.
Sorun yükseklikte değil, sayfanın ekranda nereye oturduğundaydı —
çözüm index.html'deki durum çubuğu ayarında. */
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--yazi-govde);
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
h1, h2, h3, .brand-name, .loader-name, .num {
font-family: var(--yazi-baslik);
font-weight: 700;
margin: 0;
letter-spacing: -.01em;
}
a { color: var(--red); text-decoration: none; }
button { font-family: inherit; color: inherit; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.mono { font-family: var(--yazi-kod); }
.pipe { color: var(--red); font-weight: 400; }
.nav-item, .btn, .user-chip, .card-link, .icon-btn { user-select: none; }
/* ==========================================================================
AÇILIŞ EKRANI
========================================================================== */
#loader {
position: fixed; inset: 0; z-index: 999;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(130% 110% at 50% 0%, var(--bg-ust) 0%, var(--bg) 62%);
transition: opacity .35s var(--ease);
}
#loader.fade-out { opacity: 0; pointer-events: none; }
.loader-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.loader-logo {
width: auto; height: clamp(112px, 26vw, 136px);
filter: drop-shadow(0 18px 38px rgba(229,52,42,.22));
animation: riseIn .75s var(--ease) both, float 5s ease-in-out 1s infinite;
}
.loader-name {
margin-top: 26px; font-size: 25px; font-weight: 700; color: var(--ink-strong);
animation: riseIn .75s var(--ease) .10s both;
}
.loader-sub {
margin-top: 20px; font-size: 10px; letter-spacing: 3.4px; text-transform: uppercase;
color: var(--ink-dim); font-weight: 600;
animation: riseIn .75s var(--ease) .18s both;
}
.loader-track {
position: relative; width: min(210px, 60vw); height: 3px; border-radius: 999px;
background: var(--bar-bos); margin-top: 40px; overflow: hidden;
animation: riseIn .75s var(--ease) .26s both;
}
.loader-fill {
position: absolute; inset: 0 auto 0 0; width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, var(--metal-1), var(--metal-2));
transition: width .3s var(--ease);
}
.loader-msg {
margin-top: 15px; font-size: 11.5px; color: var(--ink-faint);
animation: riseIn .75s var(--ease) .32s both;
}
.loader-foot {
position: absolute; left: 0; right: 0;
bottom: calc(7% + env(safe-area-inset-bottom, 0px));
text-align: center; font-size: 9.5px; letter-spacing: 2.8px;
text-transform: uppercase; color: var(--ink-dim); font-weight: 600;
animation: fadeIn 1.1s ease .5s both;
}
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
GİRİŞ EKRANI
========================================================================== */
#login {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 24px;
background: radial-gradient(120% 90% at 50% -10%, var(--bg-ust) 0%, var(--bg) 60%);
animation: fadeIn .4s ease both;
}
.login-card {
width: 100%; max-width: 372px;
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 34px 28px 26px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
animation: riseIn .5s var(--ease) both;
}
.login-logo {
width: auto; height: 66px; align-self: center;
filter: drop-shadow(0 10px 22px rgba(229,52,42,.18));
}
.login-card h1 { margin-top: 16px; text-align: center; font-size: 20px; font-weight: 700; }
.login-sub {
margin: 6px 0 26px; text-align: center; font-size: 9.5px;
letter-spacing: 3px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600;
}
.login-note { margin: 14px 0 0; text-align: center; font-size: 11px; color: var(--ink-dim); }
.login-error {
margin: 0 0 14px; padding: 10px 12px;
background: var(--red-soft);
border: 1px solid var(--red-cizgi);
border-radius: var(--radius-sm);
font-size: 12.5px; color: var(--red-ink); text-align: center;
animation: riseIn .22s var(--ease) both;
}
.btn[disabled] { opacity: .6; pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
.field input {
height: 44px; padding: 0 13px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink); font-family: inherit; font-size: 14px;
transition: border-color .16s ease, background .16s ease;
}
.field input::placeholder { color: var(--metal-1); }
.field input:focus { outline: none; border-color: var(--metal-1); background: var(--surface-3); }
/* ==========================================================================
BUTONLAR
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 36px; padding: 0 15px;
border: 1px solid transparent; border-radius: var(--radius-sm);
background: var(--surface-2); color: var(--ink-soft);
font-size: 12.5px; font-weight: 500; cursor: pointer;
transition: background .16s ease, transform .12s var(--ease), border-color .16s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--red); color: #fff; font-weight: 600; border-color: var(--red); }
.btn-ghost { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.btn-block { width: 100%; height: 46px; font-size: 14.5px; }
.icon-btn {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex-shrink: 0;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 11px; cursor: pointer;
}
.icon-btn svg { width: 17px; height: 17px; }
/* Üst çubuğun geri oku ----------------------------------------------------
Kutu yok, çerçeve yok — yalnız ok. Düğme gibi değil, yön gibi duruyor.
Ana ekranda KAYBOLMUYOR, pasifleşiyor. Gizleseydik belirip kaybolurken
çubuktaki her şey 45 piksel sağa sola kayardı; yeri hep ayrılı olduğu için
artık tek piksel oynamıyor.
Ok 20 piksel ama basılan alan 44: dokunma hedefi simgenin boyu değildir. */
.geri-ok {
display: flex; align-items: center; justify-content: center;
flex: 0 0 24px; width: 24px; height: 44px; margin-left: -4px;
padding: 0; border: 0; background: none; cursor: pointer;
color: var(--ink-faint);
transition: color .16s ease, opacity .18s ease, transform .12s var(--ease);
}
.geri-ok svg { width: 20px; height: 20px; }
/* Küçülme: uygulamanın her yerindeki dokunma tepkisi. Ok küçük olduğu için
oran da büyük — %97 bu boyutta hiç fark edilmiyor. */
.geri-ok:not(.pasif):active { transform: scale(.82); }
.geri-ok:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; border-radius: 8px; }
/* Gidilecek yer yok: ok duruyor ama sönük ve basılamaz. */
.geri-ok.pasif { opacity: .26; cursor: default; pointer-events: none; }
/* ==========================================================================
UYGULAMA İSKELETİ
========================================================================== */
#app { display: flex; height: 100%; min-height: 0; animation: fadeIn .35s ease both; }
#sidebar {
display: flex; flex-direction: column;
width: var(--rail-w); flex-shrink: 0;
padding: 20px 14px;
background: var(--rail);
border-right: 1px solid var(--line-2);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.brand-logo { width: auto; height: 28px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.brand-sub { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 11px; border-radius: var(--radius-sm);
color: var(--ink-soft); font-size: 13px;
transition: background .16s ease, color .16s ease;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item.active {
background: var(--surface-3); color: var(--ink-strong); font-weight: 600;
box-shadow: inset 2px 0 0 var(--red);
}
.nav-count {
margin-left: auto; font-style: normal; font-size: 11px;
color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.nav-item.has-alert .nav-count {
background: var(--red); color: #fff; font-weight: 600;
border-radius: 999px; padding: 1px 7px; font-size: 10px;
}
.user-chip {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px; border-radius: 10px; text-align: left;
background: var(--surface-2); border: 1px solid var(--bar-bos); cursor: pointer;
transition: background .16s ease;
}
/* Baş harf kutusu metal — kırmızı yalnızca logo, ana buton, aktif sekme
ve "Acil"de kullanılır; avatar beşinci yer olmasın. */
.avatar {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
background: linear-gradient(150deg, #7a716a, #39332f);
color: #f2efec; font-size: 11px; font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.user-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; }
.user-role { font-size: 10px; color: var(--ink-dim); }
/* min-height: 0 olmadan dikey flex çocuğu içeriğinden küçülemez;
içerik uzayınca alt çubuğu ekranın dışına iter. Sorunun kökü buydu. */
#main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
#topbar {
display: flex; align-items: center; gap: 14px;
height: 64px; flex-shrink: 0; padding: 0 24px;
border-bottom: 1px solid var(--line-3);
}
/* Solda logo kutusu, yanında firma adı, altında bulunduğun sayfanın adı. */
.logo-kutu {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(180deg, var(--surface-2), var(--kart-alt));
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 var(--isik), 0 4px 10px -6px #000;
}
.logo-kutu img { width: 24px; height: 24px; object-fit: contain; }
.marka { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.marka b {
font-family: var(--yazi-baslik); font-size: 14.5px; font-weight: 700;
color: var(--ink-strong); letter-spacing: -.015em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marka i {
font-style: normal; font-family: var(--yazi-baslik);
font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--st-dev);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sağdaki hesap hapı: rol, ad soyad, fotoğraf. Basınca hesap sayfası açılır. */
.hesap {
display: flex; align-items: center; gap: 9px; flex-shrink: 0;
padding: 4px 6px 4px 12px; border-radius: 999px;
background: linear-gradient(180deg, var(--surface-2), var(--kart-alt));
border: 1px solid var(--line); color: var(--ink); cursor: pointer;
box-shadow: inset 0 1px 0 var(--isik);
transition: border-color .16s ease, transform .12s var(--ease);
}
.hesap:active { transform: scale(.97); }
.hesap-yazi { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.hesap .user-role {
font-size: 8.5px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-dim);
}
.hesap .user-name {
font-family: var(--yazi-baslik); font-size: 12px; font-weight: 700;
color: var(--ink); line-height: 1.2; white-space: nowrap;
}
.foto {
position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px;
background-color: #4b443f;
background-image: linear-gradient(150deg, #7a716a, #39332f);
background-size: cover; background-position: center;
box-shadow: 0 0 0 1px var(--line-parlak), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Resim yüklenince baş harfler gizlenir, iç ışık resmi bozmasın diye sönükleşir. */
.foto.resimli > b { display: none; }
.foto.resimli { box-shadow: 0 0 0 1px var(--line-parlak); }
.foto.kucuk { width: 30px; height: 30px; }
/* Fotoğrafın içindeki baş harfler — eski kırmızı avatar kutusunu geçersiz kılar. */
.foto > b {
position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit;
display: flex; align-items: center; justify-content: center;
background: none; box-shadow: none;
font-family: var(--yazi-baslik); font-weight: 700; font-size: 12px; color: #f2efec;
}
.foto.buyuk { width: 48px; height: 48px; }
.foto.buyuk > b { font-size: 16px; }
/* Okunmamış bildirim sayısı — kırmızının beşinci yeri değil, uyarı rozeti. */
.nokta {
position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 999px; font-size: 9.5px; font-weight: 700; font-style: normal; color: #fff;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--red-acik), var(--red-koyu));
box-shadow: 0 2px 6px -2px rgba(229, 52, 42, .9), 0 0 0 2px var(--surface-2);
}
.search {
display: flex; align-items: center; gap: 8px;
width: 230px; height: 34px; padding: 0 11px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); color: var(--ink-dim);
font-size: 12px; cursor: pointer;
}
.search svg { width: 15px; height: 15px; color: var(--ink-dim); }
.view {
--yan: 24px; --ust: 20px;
flex: 1; min-height: 0; padding: var(--ust) var(--yan) 32px;
overflow-y: auto; overscroll-behavior: contain;
/* Eski iOS'ta momentum kaydırma bunsuz açılmıyor: parmak kalkınca
liste anında duruyor ve kasıyormuş gibi hissettiriyor. */
-webkit-overflow-scrolling: touch;
}
/* Aşama ekranlarının (Firma/Program/Bağlantılar/Kurulum/Beta) gövde
sarmalayıcısı — panel zeminindeki ofis fotoğrafının (z-index:0) üstünde
kalması için. */
.fb-govde { position: relative; z-index: 3; }
/* ==========================================================================
İKONLAR — çift katman
Altta soluk dolgu, üstte ince çizgi. Tek kural burada; her simge uyar.
========================================================================== */
svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
svg .dolgu { stroke: none; }
svg .dolgu > * { fill: currentColor; fill-opacity: .22; }
/* ==========================================================================
BİLEŞENLER
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Özet kartları kabartma: üstten ışık, altta gölge, köşeden sızan parlaklık. */
.stat {
display: flex; flex-direction: column; gap: 7px; padding: 15px 16px;
position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
border-color: var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 10px 22px -14px rgba(0, 0, 0, .95);
transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
/* Sol üstten gelen ışık huzmesi. */
.stat::before {
content: ''; position: absolute; top: -55%; left: -20%; width: 90%; height: 150%;
background: radial-gradient(closest-side, rgba(255, 255, 255, .085), transparent 70%);
pointer-events: none;
}
/* Dış çerçeve kartın kendi renginde ve ışıklı. */
.stat::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px var(--k-cizgi, rgba(255, 255, 255, .07));
}
.stat {
border-color: transparent;
outline: 1px solid var(--k-cizgi, transparent); outline-offset: -1px;
}
.stat.k-dev { --k-renk: 216, 166, 63; }
.stat.k-check { --k-renk: 107, 147, 232; }
.stat.k-done { --k-renk: 69, 163, 123; }
.stat.k-metal { --k-renk: 214, 208, 205; }
.stat[class*="k-"] {
--k-cizgi: rgba(var(--k-renk), .34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 0 0 1px rgba(var(--k-renk), .10),
0 8px 24px -16px rgba(var(--k-renk), .55),
0 10px 22px -14px rgba(0, 0, 0, .95);
}
/* Rakam kendi renginde hafifçe parlasın. */
.stat-num { text-shadow: 0 0 22px rgba(255, 255, 255, .12); }
.stat-num.c-check { text-shadow: 0 0 20px rgba(107, 147, 232, .40); }
.stat-num.c-done { text-shadow: 0 0 20px rgba(69, 163, 123, .40); }
.stat-num.c-dev { text-shadow: 0 0 20px rgba(216, 166, 63, .40); }
.stat-label { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding-right: 34px; }
/* Kartın sağ üstündeki simge — kartın kendi renginde. */
.stat-ikon {
position: absolute; top: 12px; right: 12px; z-index: 1;
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 9px;
color: rgb(var(--k-renk, 214, 208, 205));
background: rgba(var(--k-renk, 214, 208, 205), .10);
box-shadow: inset 0 0 0 1px rgba(var(--k-renk, 214, 208, 205), .22);
}
.stat-ikon svg { width: 16px; height: 16px; }
.stat-num { font-family: var(--yazi-baslik); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 11px; color: var(--ink-faint); }
.stat-num.c-check { color: var(--st-check-t); }
.stat-num.c-done { color: var(--st-done-t); }
.stat-num.c-dev { color: var(--st-dev-t); }
.section { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; }
.section-head { display: flex; align-items: center; gap: 12px; }
.section-head h2 { font-size: 13px; font-weight: 600; }
.section-head .hint { font-size: 11px; color: var(--ink-faint); }
.label {
font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--ink-dim); font-weight: 800;
}
.pill {
display: inline-flex; align-items: center;
font-size: 10.5px; font-weight: 600;
border-radius: 999px; padding: 3px 10px;
color: var(--st-todo); background: rgba(154,160,168,.11);
}
.pill.dev { color: var(--st-dev-t); background: var(--dev-soft); }
.pill.check { color: var(--st-check-t); background: var(--check-soft); }
.pill.done { color: var(--st-done-t); background: var(--done-soft); }
.pill.red { color: var(--red-ink); background: var(--red-soft); }
.bar { height: 5px; border-radius: 999px; background: var(--bar-bos); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); }
/* Boş durum */
.empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 12px; padding: 56px 24px;
}
.empty-icon {
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 16px;
background: var(--surface-2); border: 1px solid var(--line);
}
.empty-icon svg { width: 24px; height: 24px; color: var(--ink-dim); }
.empty h3 { font-size: 15px; font-weight: 600; }
.empty p { margin: 0; max-width: 340px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }
/* Yol haritası satırı (Standartlar / Ayarlar) */
.row-list { display: flex; flex-direction: column; }
.row {
display: flex; align-items: center; gap: 13px;
padding: 13px 16px; border-top: 1px solid var(--line-3);
}
.row:first-child { border-top: none; }
.row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.row-title { font-size: 12.5px; font-weight: 500; }
.row-sub { font-size: 11px; color: var(--ink-faint); }
.row-val { font-size: 12px; color: var(--ink-soft); }
.note {
display: flex; gap: 10px; padding: 13px 14px;
background: var(--surface-2); border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-size: 11.5px; color: var(--ink-faint); line-height: 1.6;
}
.note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--st-check-t); }
/* Toast */
#toast {
position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 500; padding: 11px 18px;
background: var(--surface-3); border: 1px solid var(--line);
border-radius: 999px; font-size: 12.5px; color: var(--ink);
box-shadow: 0 12px 34px -10px rgba(0,0,0,.8);
animation: riseIn .3s var(--ease) both;
}
/* ==========================================================================
PROJE KARTLARI
========================================================================== */
.proje-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
/* Projeler ekranının iki kovası --------------------------------------------
Yan yana iki kart; içinde yalnız kaç proje olduğu. Basınca o kovanın
sayfası açılıyor — kart açılıp kapanmıyor.
Havada duruyorlar: iki katmanlı gölge (yakını zeminden ayırır, uzağı
yüksekliği verir), üstte ışık kenarı, köşeden geçen huzme. Standartlar
ve panel kartlarıyla aynı dil. */
.kovalar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kova {
position: relative; overflow: hidden; display: flex; flex-direction: column;
align-items: flex-start; gap: 12px; width: 100%; text-align: left; cursor: pointer;
padding: 15px 13px 16px; border-radius: var(--radius-lg); text-decoration: none;
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
border: 1px solid var(--line); color: var(--ink); font-family: var(--yazi-govde);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7),
0 22px 40px -22px rgba(0, 0, 0, .95),
inset 0 1px 0 var(--isik);
transition: transform .3s var(--yay), box-shadow .3s var(--ease), border-color .2s var(--ease);
}
.kova::before {
content: ''; position: absolute; top: -55%; left: -16%; width: 66%; height: 190%;
background: linear-gradient(101deg, rgba(255, 255, 255, .06), transparent 60%);
pointer-events: none;
}
/* Üstte kovanın rengini taşıyan ince şerit — proje kartındaki ile aynı. */
.kova::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--kv), transparent 68%);
}
.kova:active { transform: translateY(-1px) scale(.985); transition-duration: .1s; }
.kova:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; }
.kv-ust { position: relative; display: flex; align-items: center;
justify-content: space-between; width: 100%; }
.kv-ikon {
display: flex; align-items: center; justify-content: center;
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; color: var(--kv);
background: linear-gradient(180deg,
color-mix(in srgb, var(--kv) 22%, transparent),
color-mix(in srgb, var(--kv) 9%, transparent));
border: 1px solid color-mix(in srgb, var(--kv) 32%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.kv-cv { position: relative; display: flex; color: var(--ink-dim); }
.kv-yz { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* Sayı asıl bilgi: kartın içindeki en büyük şey o. */
.kv-say {
font-family: var(--yazi-baslik); font-weight: 700; font-size: 30px; line-height: 1;
color: var(--kv); font-variant-numeric: tabular-nums;
}
/* Başlığa sabit yer AYRILMIYOR: yan yana iki kart tek ızgara satırında
duruyor, ızgara ikisini zaten aynı yüksekliğe çekiyor. Ayırsaydık iki
başlık da tek satıra sığdığı için kartın altında boşluk kalırdı. */
.kv-ad {
font-family: var(--yazi-baslik); font-weight: 600; font-size: 12.5px;
line-height: 1.34; color: var(--ink-strong); letter-spacing: -.005em;
}
/* Renkler uydurma değil: sarı uygulamanın "Geliştiriliyor", yeşil
"Tamamlandı" rengi. Kırmızı yok — o alt çubuktaki artının. */
.k-basmis { --kv: var(--st-dev); }
.k-bitmis { --kv: var(--st-done); }
/* Boş kova kaybolmuyor, sönüyor: iki kart hep aynı yerde dursun, biri
kaybolunca öbürü tek başına ortada kalmasın. */
.kova.bos { opacity: .5; }
.kova.bos .kv-say { color: var(--ink-dim); }
.proje {
display: flex; flex-direction: column; cursor: pointer;
transition: background .16s ease, border-color .16s ease, transform .12s var(--ease);
}
/* İç payı gövde taşıyor: görselli kartta görsel kenarlara kadar uzanmalı,
kartın kendi payı olsaydı çevresinde çerçeve gibi bir boşluk kalırdı. */
.proje-govde {
position: relative; z-index: 3;
display: flex; flex-direction: column; gap: 12px;
padding: 16px 16px 14px;
}
/* --- İşletme görseli kartın zemininde ---------------------------------------
Görsel varken kartın üst yarısı ona ait, bilgiler alta iniyor. Ölçüldü:
bilgiler üstteyken firma adının kontrastı 2.8, alt bilgi satırınınki 1.2'ye
düşüyor — çizimlerin en parlak yeri tam oraya denk geliyor. Alta alınca
ikisi de sekizin üstüne çıkıyor.
Perde kesik bir kenarla değil, yumuşak bir geçişle iniyor: amaç görseli
göstermek, kesmek değil. */
.proje.gorselli { min-height: 236px; justify-content: flex-end; }
/* Bilgi bloğu kartın çeyreğine sıkıştırıldı. Yalnız punto küçültmek
yetmiyordu — %40'ta takılıyordu; çeyreğe inmek için bir SATIRIN gitmesi
gerekiyor. İlerleme rayı kendi satırından çıkıp kartın dibine indi,
platform satırı da kalktı: blok %50'den %27'ye düştü. */
.proje.gorselli .proje-govde { padding: 8px 12px 9px; gap: 6px; }
.proje.gorselli .proje-ust { gap: 9px; }
.proje.gorselli .proje-rozet { width: 26px; height: 26px; font-size: 10.5px; border-radius: 8px; }
.proje.gorselli .proje-ad { font-size: 13px; }
.proje.gorselli .proje-meta { display: none; }
.proje.gorselli .pill { font-size: 9.5px; padding: 3px 8px; }
/* Yüzde satırı gitti: aynı bilgiyi alttaki ray ve "bitmiş/toplam görev"
sayısı zaten söylüyordu. */
.proje.gorselli .proje-orta { display: none; }
/* Ayraç çizgisi ve üst payı kalkıyor: görselli kartta satırları zaten perde
ayırıyor, çizgi hem gereksiz hem 12 piksel yiyordu. */
.proje.gorselli .proje-alt {
gap: 10px; font-size: 10px; padding: 0 30px 0 0; border-top: 0;
}
/* Menü düğmesi satırın içinde dururken 38 piksellik dokunma hedefiyle sayı
satırını 48 piksele şişiriyordu — blok bir türlü çeyreğe inmiyordu. Köşeye
alındı: hedef boyu aynı kaldı, satır tek satıra indi. */
.proje.gorselli .proje-menu {
position: absolute; right: 4px; bottom: 4px; z-index: 5;
}
/* İlerleme rayı kartın en dibinde, tam genişlikte. Kendi satırında dururken
hem yer yiyordu hem daha darda kalıyordu. */
.proje-ray {
position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4;
background: rgba(255, 255, 255, .10);
}
.proje-ray > i {
display: block; height: 100%;
background: linear-gradient(90deg, var(--metal-1), var(--metal-2));
}
.proje-gorsel { position: absolute; inset: 0; z-index: 0; }
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proje-gorsel::after {
content: ''; position: absolute; inset: 0;
/* Duraklar ölçerek bulundu. İlk deneme kartın dar mockup hâlinde geçiyordu
ama gerçek kart daha geniş: `cover` görselin başka, daha parlak bir yerini
başlığın altına getirince firma adı 3.8'e düştü. Bu eğride dört satır da
sekizin üstünde ve görselin üst %40'ına hiç dokunulmuyor. */
background: linear-gradient(180deg, transparent 56%, rgba(10, 9, 8, .66) 70%,
rgba(10, 9, 8, .94) 80%, rgba(10, 9, 8, .99) 90%, rgba(10, 9, 8, .99) 100%);
}
/* Tepedeki sönük pay yalnız "i" düğmesi için — görselin geri kalanına
dokunmuyor. */
.proje-tepe {
position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(10, 9, 8, .42), transparent);
}
/* Görselin üstünde silik gri okunmuyor: sayılar ve etiketler bir kademe
parlatılıyor, ilerleme yatağı opak kalıyor. */
.proje.gorselli .proje-meta,
.proje.gorselli .proje-alt { color: var(--ink-soft); }
.proje.gorselli .proje-alt b { color: var(--ink-strong); }
.proje.gorselli .proje-pct { color: var(--ink-soft); }
.proje.gorselli .proje-menu { color: var(--ink-soft); }
/* Sağ üstteki "i": görseli buradan yüklüyoruz. Kendi koyu diskini ve ince
ışık kenarını taşıyor, görselin en parlak yerine denk gelse de görünüyor. */
.proje-bilgi {
position: absolute; top: 10px; right: 10px; z-index: 6;
width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(8, 7, 6, .76);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 4px 12px -4px rgba(0, 0, 0, .8);
color: #fff; font-family: var(--yazi-baslik); font-weight: 700; font-size: 14px;
transition: transform .12s var(--ease), background .16s ease;
}
/* Görselsiz kartta başlık satırı en üstte duruyor ve "i" onun sağ ucuna
biniyordu: durum etiketine yer açılıyor. Görselli kartta başlık zaten
aşağıda, orada böyle bir pay gerekmiyor. */
.proje:not(.gorselli) .proje-ust { padding-right: 34px; }
.proje-bilgi:active { transform: scale(.88); }
/* Görsel yüklenirken kartın üstünde duran katman ------------------------------
Halkanın dolduğu oran gerçek: gönderilen bayttan geliyor, zamana bağlı bir
sayaçtan değil. Uydurma dolan bir çubuk erken biterse zıplıyor, gecikirse
sonda bekliyor; bir kez öyle olunca kullanıcı hiçbir çubuğa inanmıyor. */
.proje-yukleme {
position: absolute; inset: 0; z-index: 7;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
background: rgba(10, 9, 8, .78);
}
/* Yeni görselin geldiği belli olsun diye eski görsel geri çekiliyor.
Kardeş seçici işe yaramıyor: katman görselin SONRASINDA duruyor. */
.proje.yukluyor .proje-gorsel { opacity: .5; transition: opacity .3s var(--ease); }
.py-halka { position: relative; display: flex; width: 56px; height: 56px; }
/* Doğrudan çocuk: tikin kendi svg'si de halkanın İÇİNDE duruyor, seçici
ayrılmazsa aşağıdaki "bitince halkayı gizle" kuralı tiki de gizliyor. */
.py-halka > svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.py-iz { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 4; }
.py-dolu { fill: none; stroke: var(--metal-2); stroke-width: 4; stroke-linecap: round;
transition: stroke-dashoffset .18s linear; }
/* Bitince halka yerini tike bırakıyor. */
.py-tik {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
border-radius: 999px; color: #0f1a15; opacity: 0; transform: scale(.5);
background: linear-gradient(180deg, var(--st-done-t), var(--st-done));
transition: opacity .2s var(--ease), transform .3s var(--yay);
}
.py-tik svg { stroke-width: 3; }
.proje-yukleme.bitti .py-halka > svg { opacity: 0; }
.proje-yukleme.bitti .py-tik { opacity: 1; transform: none; }
.py-yazi { font-family: var(--yazi-baslik); font-weight: 600; font-size: 12.5px; color: var(--ink-strong); }
.py-alt { font-family: var(--yazi-kod); font-size: 10.5px; color: var(--ink-soft); margin-top: -8px;
font-variant-numeric: tabular-nums; }
.proje-bilgi:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; }
.proje:active { transform: scale(.99); }
.proje:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; }
.proje-ust { display: flex; align-items: flex-start; gap: 11px; }
.proje-rozet {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--yazi-baslik); font-weight: 700; font-size: 12.5px; color: #fff;
}
.proje-ad-kutu { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.proje-ad {
font-family: var(--yazi-baslik); font-size: 14.5px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proje-meta { font-size: 11.5px; color: var(--ink-faint); }
.proje-orta { display: flex; align-items: center; gap: 10px; }
.proje-orta .bar { flex: 1; }
.proje-pct { font-size: 11.5px; color: var(--ink-soft); min-width: 34px; text-align: right; }
.proje-alt {
display: flex; gap: 14px; flex-wrap: wrap;
font-size: 11px; color: var(--ink-dim);
border-top: 1px solid var(--line-3); padding-top: 11px;
}
.proje-alt b { color: var(--ink-soft); font-weight: 600; }
/* ==========================================================================
PROJE DETAYI
========================================================================== */
.ozet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.oz { padding: 14px 15px; display: flex; flex-direction: column; }
.oz-label { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.oz-num { font-family: var(--yazi-baslik); font-size: 26px; font-weight: 700; margin-top: 5px; line-height: 1; }
.oz-num em { font-style: normal; color: var(--ink-dim); font-size: 17px; }
.oz-sub { font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.modul { margin-bottom: 9px; overflow: hidden; }
.modul-genel { background: linear-gradient(180deg, var(--kart-ust), var(--surface)); border-color: var(--line-parlak); }
.modul-bas {
display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer;
transition: background .16s ease;
}
.modul-bas:focus-visible { outline: 2px solid var(--metal-1); outline-offset: -2px; }
.modul-bas .chev { display: flex; color: var(--ink-dim); flex-shrink: 0; transition: transform .2s var(--ease); }
.modul-bas.acik .chev { transform: rotate(90deg); }
.modul-ikon {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
background: var(--surface-3); color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
}
.modul-yazi { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.modul-ad { font-size: 13.5px; font-weight: 600; }
.modul-alt { font-size: 11px; color: var(--ink-faint); }
.modul-bar { display: flex; align-items: center; gap: 9px; width: 130px; flex-shrink: 0; }
.modul-bar .bar { flex: 1; }
.modul-pct { font-size: 11px; color: var(--ink-soft); width: 32px; text-align: right; }
.sayfalar { border-top: 1px solid var(--line-3); background: var(--yuva); }
.sayfa {
display: flex; align-items: center; gap: 11px;
padding: 10px 15px 10px 41px; border-bottom: 1px solid var(--line-3);
}
.sayfa:last-child { border-bottom: 0; }
.sayfa-nokta { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.sayfa-ad { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sayfa-say { font-size: 11px; color: var(--ink-dim); margin-left: auto; }
.sayfa-bos { padding: 13px 15px 13px 41px; font-size: 12px; color: var(--ink-dim); }
.sayfa-ekle {
display: flex; align-items: center; gap: 9px;
padding: 11px 15px 11px 41px; color: var(--ink-dim); font-size: 12px; cursor: pointer;
border-top: 1px solid var(--line-3);
}
.modul-araclar { display: flex; gap: 6px; padding: 9px 15px 11px 38px; border-top: 1px solid var(--line-3); }
.mini-link {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 5px 7px; border-radius: 7px;
color: var(--ink-dim); font-family: inherit; font-size: 11.5px; cursor: pointer;
}
.mini-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; flex-shrink: 0; margin-left: 4px;
background: none; border: 0; border-radius: 7px; color: var(--ink-dim); cursor: pointer;
}
.btn-wide { width: 100%; justify-content: center; height: 44px; margin-top: 4px; }
/* ==========================================================================
İSKELET (yükleniyor)
========================================================================== */
.iskelet { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.i-satir { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--iskelet-1), var(--bar-bos), var(--iskelet-1));
background-size: 200% 100%; animation: kayan 1.4s linear infinite; }
.i-satir.k { width: 55%; height: 15px; }
.i-satir.o { width: 75%; }
@keyframes kayan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ==========================================================================
MODAL
========================================================================== */
.modal-perde {
position: fixed; inset: 0; z-index: 600;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(6,7,9,.72); backdrop-filter: blur(3px);
animation: fadeIn .18s ease both;
}
.modal-kutu {
width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 22px 22px 18px;
box-shadow: 0 26px 60px -22px rgba(0,0,0,.8);
animation: riseIn .26s var(--ease) both;
}
.modal-h { font-size: 17px; font-weight: 600; margin: 0; }
.modal-s { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0 18px; }
.modal-alt { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.modal-alt .btn { flex: 1; justify-content: center; height: 42px; font-size: 13.5px; }
.btn-tehlike { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
/* sihirbaz adım çizgisi */
.steps { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
.steps .sd { height: 4px; border-radius: 999px; background: var(--bar-bos); flex: 1; transition: background .25s ease; }
.steps .sd.on { background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); }
.steps .sd.cur { background: var(--red); }
/* renk seçimi */
.renkler { display: flex; gap: 9px; flex-wrap: wrap; }
.renk {
width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent;
cursor: pointer; padding: 0; transition: transform .12s var(--ease);
}
.renk.sec { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--metal-1); }
/* büyük seçim satırları */
.secim { display: grid; gap: 9px; }
.sc {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
border: 1px solid var(--line); background: var(--surface-2);
border-radius: var(--radius-sm); padding: 13px 14px;
color: var(--ink); font-family: inherit; cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.sc-yazi { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sc-ad { font-size: 13.5px; font-weight: 600; }
.sc-alt { font-size: 11.5px; color: var(--ink-faint); }
.sc.sec { border-color: var(--red); background: var(--red-soft); }
.tik {
width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.sc.sec .tik, .mod.sec .tik { background: var(--red); border-color: var(--red); }
.tik svg { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* modül tikleri */
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mod {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); background: var(--surface-2);
border-radius: var(--radius-sm); padding: 11px 12px;
color: var(--ink); font-family: inherit; font-size: 13px; cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.mod span:first-child { flex: 1; text-align: left; }
.mod.sec { border-color: var(--red); background: var(--red-soft); }
.note-kucuk { margin-top: 14px; font-size: 11.5px; }
.note-kucuk b { color: var(--ink-soft); font-weight: 600; }
.empty-icon.uyari svg { color: var(--red-ink); }
.empty .btn { align-self: center; }
/* ==========================================================================
GÖREVLER
========================================================================== */
/* durum rozeti */
.durum {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
font-size: 11px; padding: 3px 9px 3px 7px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface-3); color: var(--ink-soft);
white-space: nowrap;
}
.durum i { width: 6px; height: 6px; border-radius: 999px; display: block; }
.d-todo { color: var(--st-todo); } .d-todo i { background: var(--st-todo); }
.d-dev { color: var(--st-dev-t); border-color: var(--dev-cizgi); background: var(--dev-soft); } .d-dev i { background: var(--st-dev); }
.d-check { color: var(--st-check-t); border-color: var(--check-cizgi); background: var(--check-soft); } .d-check i { background: var(--st-check); }
.d-done { color: var(--st-done-t); border-color: var(--done-cizgi); background: var(--done-soft); } .d-done i { background: var(--st-done); }
.acil {
font-size: 10px; font-weight: 600; color: #fff; background: var(--red);
padding: 2px 7px; border-radius: 999px; flex-shrink: 0; letter-spacing: .2px;
}
.gav {
width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--yazi-baslik); font-size: 9.5px; font-weight: 700; color: #fff;
}
.gav.kucuk { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }
/* ağaç içindeki görev satırı */
.sayfa { cursor: pointer; }
.sayfa-chev {
display: flex; color: var(--ink-dim); flex-shrink: 0; margin-left: -19px;
transition: transform .2s var(--ease);
}
.sayfa.acik .sayfa-chev { transform: rotate(90deg); }
.sayfa.acik { background: var(--surface-2); }
.sayfa.acik .sayfa-ad { font-weight: 600; }
.gorev {
display: flex; align-items: center; gap: 10px;
padding: 10px 15px 10px 62px; border-bottom: 1px solid var(--line-3);
cursor: pointer; background: var(--yuva-2);
}
.gorev-no { font-size: 11px; color: var(--ink-dim); flex-shrink: 0; width: 54px; }
.gorev-baslik { font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gorev-bos { padding: 12px 15px 12px 62px; font-size: 12px; color: var(--ink-dim); background: var(--yuva-2); }
.gorev-ekle {
display: flex; align-items: center; gap: 8px; cursor: pointer; background: var(--yuva-2);
padding: 10px 15px 10px 62px; color: var(--ink-dim); font-size: 12px;
border-bottom: 1px solid var(--line-3);
}
/* Bana Atananlar listesi */
.filtre { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.f {
padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface-2); color: var(--ink-soft);
font-family: inherit; font-size: 12px; cursor: pointer;
}
.f.on { background: var(--surface-3); color: var(--ink); border-color: var(--line-parlak-2); font-weight: 600; }
.f em { font-style: normal; color: var(--ink-dim); margin-left: 6px; font-size: 11px; }
.liste { overflow: hidden; }
.gsatir {
display: flex; align-items: center; gap: 13px; padding: 13px 16px;
border-bottom: 1px solid var(--line-3); cursor: pointer;
}
.gsatir:last-child { border-bottom: 0; }
.gsol { width: 4px; align-self: stretch; border-radius: 999px; flex-shrink: 0; }
.gorta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gust { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gbaslik { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gyol { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gyol b { color: var(--ink-soft); font-weight: 500; }
/* ==========================================================================
GÖREV KARTI
========================================================================== */
.modal-kutu.genis { max-width: 540px; }
.gk-ust { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.gk-no {
font-size: 12px; color: var(--ink-soft); background: var(--surface-3);
border: 1px solid var(--line); padding: 3px 9px; border-radius: 7px;
}
.gk-x {
margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gk-baslik { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0; }
.gk-yol { font-size: 11.5px; color: var(--ink-faint); margin: 5px 0 0; }
.gk-yol b { color: var(--ink-soft); font-weight: 500; }
.serit { display: flex; gap: 4px; margin: 18px 0 0; }
.serit .st {
flex: 1; text-align: center; font-size: 10.5px; padding: 9px 3px;
border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
color: var(--ink-dim); font-family: inherit; cursor: pointer;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.serit .st[disabled] { cursor: default; }
.serit .st.gecti { color: var(--ink-soft); background: var(--surface-3); }
.serit .st.simdi { font-weight: 700; }
.serit .st.simdi.todo { color: var(--ink); border-color: var(--line-parlak-2); background: var(--surface-3); }
.serit .st.simdi.dev { color: var(--st-dev-t); border-color: var(--dev-cizgi-2); background: var(--dev-soft); }
.serit .st.simdi.check { color: var(--st-check-t); border-color: var(--check-cizgi-2); background: rgba(91,141,239,.13); }
.serit .st.simdi.done { color: var(--st-done-t); border-color: var(--done-cizgi-2); background: var(--done-soft); }
.serit-not { font-size: 10.5px; color: var(--ink-dim); text-align: center; margin: 8px 0 0; }
.gk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0 0; }
.mi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.mil { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.miv { font-size: 12.5px; margin-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gk-blok { margin-top: 18px; }
.gk-cap { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; display: block; margin-bottom: 8px; }
.gk-aciklama {
font-size: 12.5px; color: var(--ink-soft); line-height: 1.65;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 12px 13px; white-space: pre-wrap;
}
.iz { display: flex; flex-direction: column; }
.izs { display: flex; gap: 11px; padding: 7px 0; }
.izn { width: 8px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.izd { width: 7px; height: 7px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; }
.izl { width: 1px; flex: 1; background: var(--line); margin-top: 3px; }
.izy { font-size: 12px; flex: 1; min-width: 0; }
.izy em { font-style: normal; color: var(--ink-dim); font-size: 11px; display: block; margin-top: 3px; font-family: var(--yazi-kod); }
.revize {
display: block; margin-top: 6px; padding: 9px 11px;
background: var(--red-soft); border: 1px solid var(--red-cizgi);
border-radius: var(--radius-sm); font-size: 12px; color: var(--red-ink-soft); line-height: 1.55;
}
.btn-onay { background: var(--st-done); border-color: var(--st-done); color: #fff; font-weight: 600; }
.btn-red { background: var(--surface-2); border-color: var(--red-cizgi); color: var(--red-ink); }
/* seçenek şeritleri (yeni görev penceresi) */
.secenek-serit { display: flex; gap: 6px; flex-wrap: wrap; }
.ss {
padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface-2); color: var(--ink-soft);
font-family: inherit; font-size: 12px; cursor: pointer;
}
.ss.sec { background: var(--surface-3); color: var(--ink); border-color: var(--metal-1); font-weight: 600; }
.ss.acil-ss.sec { background: var(--red-soft); color: var(--red-ink-soft); border-color: var(--red-cizgi); }
.ipucu { font-size: 10.5px; color: var(--ink-dim); font-weight: 400; font-style: normal; }
.field textarea {
padding: 11px 13px; min-height: 76px; resize: vertical;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink); font-family: inherit; font-size: 13.5px; line-height: 1.55;
transition: border-color .16s ease, background .16s ease;
}
.field textarea::placeholder { color: var(--metal-1); }
.field textarea:focus { outline: none; border-color: var(--metal-1); background: var(--surface-3); }
/* ==========================================================================
STANDARTLAR
========================================================================== */
.standart { margin-bottom: 9px; overflow: hidden; }
.standart-bas {
display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer;
transition: background .16s ease;
}
.standart-bas:focus-visible { outline: 2px solid var(--metal-1); outline-offset: -2px; }
.standart-bas .chev { display: flex; color: var(--ink-dim); flex-shrink: 0; transition: transform .2s var(--ease); }
.standart-bas.acik .chev { transform: rotate(90deg); }
.kullanim { font-size: 10.5px; color: var(--ink-dim); flex-shrink: 0; margin-left: auto; }
.standart-govde {
border-top: 1px solid var(--line-3); background: var(--yuva);
padding: 14px 16px 12px 41px;
font-size: 12.5px; color: var(--ink-soft); line-height: 1.7;
}
/* Tarif kendi kutusunda: satır sonları korunur ama şablondaki girintiler
metne karışmaz. Eskiden pre-wrap kabın kendisindeydi, ilk satır kayıyordu. */
.standart-tarif { margin: 0; white-space: pre-wrap; }
/* göreve bağlı standart etiketleri */
.std-etiketler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.std-etiket {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.std-etiket.ekle { cursor: pointer; color: var(--ink-dim); font-family: inherit; }
/* ==========================================================================
METİN PENCERESİ (prompt · kimlik dosyası)
========================================================================== */
.kod {
margin: 0; padding: 14px 15px; max-height: 46vh; overflow: auto;
background: var(--kod-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
font-family: var(--yazi-kod);
font-size: 11.5px; line-height: 1.75; color: var(--kod-ink);
white-space: pre-wrap; word-break: break-word;
-webkit-user-select: text; user-select: text;
}
.proje-arac { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.proje-arac .btn { max-width: 100%; }
.proje-arac .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==========================================================================
TEMA — Derin Metal + Renkli Kimlik
Kural: hareket yalnızca transform ve opacity ile yapılır.
Genişlik, yükseklik, gölge animasyonu yok — onlar tarayıcıyı yorar.
========================================================================== */
/* Zemin: karbon dokusu. Düz gri bir yüzeyde kartlar zemine yapışık
duruyordu; ince köşegen örgü zemine derinlik veriyor ve kartlar üstünde
duruyormuş gibi okunuyor. Resim değil, çizim — dosya ağırlığı sıfır.
Sayfa kaydırılırken zemin yerinde durduğu için yeniden boyanmıyor.
Panelde görünmüyor: orada ofis fotoğrafı zaten üstünü kapatıyor. */
body {
background-color: var(--bg);
background-image:
repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg, rgba(0, 0, 0, .30) 0 1px, transparent 1px 4px),
radial-gradient(120% 55% at 50% -8%, rgba(214, 208, 205, .08), transparent 62%),
linear-gradient(180deg, #1e1c1a, #131211);
}
html { background: var(--bg); }
/* ---------- Kartlar: metal levha ---------- */
.card,
.modul,
.standart-grup,
.note {
box-shadow: var(--golge), inset 0 1px 0 var(--isik);
}
.card {
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
border-color: var(--line);
}
/* ---------- Yan menü ---------- */
#sidebar { background: linear-gradient(180deg, var(--bg-ust), var(--rail)); }
.nav-item.active { background: linear-gradient(90deg, rgba(229,52,42,.10), var(--surface-2) 60%); }
.user-chip { background: linear-gradient(180deg, var(--surface-2), var(--kart-alt)); box-shadow: inset 0 1px 0 var(--isik); }
/* ---------- Üst çubuk: açık projenin rengini taşır ---------- */
#topbar { position: relative; }
/* ---------- Ana buton ---------- */
.btn-primary {
background: linear-gradient(180deg, var(--red-parlak), var(--red));
box-shadow: 0 8px 20px -8px rgba(229,52,42,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-ghost { background: linear-gradient(180deg, var(--surface-2), var(--kart-alt)); box-shadow: inset 0 1px 0 var(--isik); }
/* ---------- İlerleme çubuğu ---------- */
.bar { background: var(--bar-bos); box-shadow: inset 0 1px 2px rgba(0,0,0,.55); }
.bar > i {
background: linear-gradient(90deg, var(--metal-1), var(--metal-2));
box-shadow: 0 0 10px rgba(200,210,220,.22);
}
/* ---------- Proje kartı: kendi rengini taşır ---------- */
.proje {
position: relative; overflow: hidden;
background:
linear-gradient(152deg, var(--pg), transparent 46%),
linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
}
.proje::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 5;
background: linear-gradient(90deg, var(--p1), transparent 68%);
}
.proje-rozet {
background: linear-gradient(140deg, var(--p1), var(--p2));
box-shadow: 0 8px 18px -10px var(--pk), inset 0 1px 0 rgba(255,255,255,.24);
}
.proje .bar > i {
background: linear-gradient(90deg, var(--p2), var(--pl));
box-shadow: 0 0 12px var(--pk);
}
.proje-pct { color: var(--pl); }
.proje-alt { border-top-color: var(--line-3); }
.proje-menu { margin-left: auto; margin-right: -6px; }
/* ---------- Modül satırı: açık projenin rengiyle ---------- */
.modul-ikon {
background: var(--pg, var(--surface-3));
color: var(--pl, var(--ink-soft));
border: 1px solid var(--pk, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.modul-genel .modul-ikon { background: var(--surface-3); color: var(--ink-soft); border-color: var(--line); }
.modul .bar > i { background: linear-gradient(90deg, var(--p2, var(--metal-1)), var(--pl, var(--metal-2))); }
/* ---------- 3B eğilme ---------- */
.tilt {
transform-style: preserve-3d;
transition: transform .38s var(--ease), border-color .2s ease;
will-change: transform;
}
.parlama {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
transition: opacity .3s ease;
background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
rgba(255,255,255,.075), transparent 62%);
}
@media (hover: hover) and (pointer: fine) {
.modul-ikon { transition: transform .25s var(--ease); }
@media (hover: hover) {
.tilt:hover {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -3px, 0);
}
.tilt:hover .parlama { opacity: 1; }
.modul-bas:hover .modul-ikon, .standart-bas:hover .modul-ikon { transform: translate3d(0,-1px,0); }
}
}
/* ---------- Giriş hareketleri (yalnızca ekran değişince) ---------- */
@keyframes yukariGel {
from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes doldur { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Kartlar artık tek tek gelmiyor: sayfa geçişi bu işi bir bütün olarak
yapıyor, ikisi üst üste binince hem yavaş hem dağınık duruyordu.
İlerleme rayları dolmaya devam ediyor — o kartın gelişi değil, verinin
kendisi. Tek ve sabit gecikme, sıraya bağlı değil. */
.view.swap .bar > i {
transform-origin: left center;
animation: doldur .85s var(--ease) both;
animation-delay: 180ms;
}
/* ---------- Pencereler ---------- */
@keyframes pencereGir {
from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); }
to { opacity: 1; transform: none; }
}
.modal-kutu {
animation: pencereGir .32s cubic-bezier(.2,.9,.25,1) both;
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow: var(--golge-yuksek), inset 0 1px 0 var(--isik);
}
.modal-perde { background: rgba(6,7,9,.66); backdrop-filter: blur(6px); }
/* ---------- Seçenek penceresi ---------- */
.sc-ikon {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--surface-3); color: var(--ink-soft);
box-shadow: inset 0 1px 0 var(--isik);
}
.sc.tehlikeli .sc-ikon { background: var(--red-soft); color: var(--red-ink); }
.renkler-buyuk { gap: 11px; }
.renkler-buyuk .renk { width: 42px; height: 42px; border-radius: 13px; }
/* ---------- Durum rozetleri biraz daha canlı ---------- */
.durum { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.acil { box-shadow: 0 4px 12px -4px rgba(229,52,42,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.avatar { box-shadow: 0 5px 12px -8px #000, inset 0 1px 0 rgba(255,255,255,.2); }
.gav { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
/* ---------- Sayfa ve görev satırları ---------- */
.sayfalar { background: var(--yuva); }
.gorev, .gorev-bos, .gorev-ekle { background: var(--yuva-2); }
.standart-govde { background: var(--yuva); }
/* ==========================================================================
AŞAMA 2 — KABUK, PENCERELER, HAREKET
========================================================================== */
/* --- Üst panel: yapışkan, safe-area duyarlı --- */
#topbar {
position: sticky; top: 0; z-index: 40;
background: var(--panel-cam);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border-bottom: 0;
}
/* Alt kenardaki kırmızı çizgi soldan başlar, sağa doğru söner. */
#topbar::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: linear-gradient(90deg, var(--red), rgba(229, 52, 42, .15) 46%, transparent 78%);
opacity: .9;
}
/* Üst paneldeki hesap kutusu — mobilde yan menü olmadığı için kim olduğun buradan görünür */
.user-tile {
display: flex; align-items: center; gap: 9px; flex-shrink: 0;
height: var(--dokunma); padding: 0 10px 0 7px;
background: linear-gradient(180deg, var(--surface-2), var(--kart-alt));
border: 1px solid var(--line); border-radius: var(--radius-sm);
color: var(--ink); cursor: pointer;
box-shadow: inset 0 1px 0 var(--isik);
transition: border-color .16s ease, transform .12s var(--ease);
}
.user-tile:active { transform: scale(.97); }
.user-tile .avatar {
box-shadow: 0 0 0 2px var(--rail), 0 0 0 3px var(--line-parlak);
}
/* --- Yan menü altındaki sürüm satırı --- */
.rail-surum {
padding: 0 10px 10px;
font-family: var(--yazi-kod); font-size: 10px;
color: var(--ink-dim); letter-spacing: .2px;
}
/* --- Modal: bulanık perde + yaylanarak açılma --- */
.modal-perde {
background: var(--perde);
backdrop-filter: blur(5px) saturate(115%);
-webkit-backdrop-filter: blur(5px) saturate(115%);
}
.modal-kutu {
position: relative; overflow-x: hidden;
background: linear-gradient(180deg, var(--kart-ust), var(--surface));
box-shadow: var(--golge-yuksek), inset 0 1px 0 var(--isik);
animation: modalGir .34s var(--yay) both;
}
/* üstte ince vurgu saç teli */
.modal-kutu::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent);
opacity: .55;
}
.modal-kutu.kucuk { max-width: 340px; }
@keyframes modalGir {
from { opacity: 0; transform: translateY(18px) scale(.965); }
to { opacity: 1; transform: none; }
}
/* --- Modal başlığı: rozet + başlık --- */
.modal-bas { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.modal-rozet {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--red-soft); border: 1px solid var(--red-cizgi); color: var(--red-ink);
}
.modal-bas-yazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modal-bas .modal-h { font-size: 16.5px; font-weight: 700; font-family: var(--yazi-baslik); }
.modal-bas .modal-s { margin: 0; font-size: 12px; }
/* --- Onay kutusu: küçük, başlıksız, ortada ikon --- */
.onay { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 4px 2px; }
.onay-ikon {
width: 46px; height: 46px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: var(--red-soft); border: 1px solid var(--red-cizgi); color: var(--red-ink);
}
.onay-soru { margin: 4px 0 0; font-size: 15px; font-weight: 700; font-family: var(--yazi-baslik); }
.onay-alt { margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }
/* --- Toast: türlere göre --- */
#toast {
display: flex; align-items: center; gap: 9px;
border-left: 3px solid var(--metal-1);
animation: toastGir .32s var(--yay) both;
}
#toast.t-basari { border-left-color: var(--st-done); }
#toast.t-hata { border-left-color: var(--red); }
#toast.t-uyari { border-left-color: var(--st-dev); }
#toast.hidden { display: none !important; }
@keyframes toastGir {
from { opacity: 0; transform: translate(-50%, 14px) scale(.96); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* --- Dokunma hedefleri --- */
.icon-btn, .btn, .nav-item, .user-chip, .user-tile, .mini-btn, .f, .ss { min-height: 36px; }
@media (pointer: coarse) {
.icon-btn, .btn, .nav-item, .user-chip, .user-tile, .f, .ss,
.sayfa, .modul-bas, .gorev, .gsatir, .standart-bas, .sayfa-ekle, .gorev-ekle {
min-height: var(--dokunma);
}
.mini-btn, .mini-link { min-width: 38px; min-height: 38px; }}
/* --- Sayfa geçişi ---
Yeni ekran soluk gelir, eskisi anında gider. Ucuz olanı bu: tek katman,
`opacity` ekran kartında bedava sayılır. Tarayıcının geçiş motoru daha
zengin bir çapraz geçiş yapabiliyordu ama her seferinde tüm sayfanın iki
tam ekran görüntüsünü alıyordu — telefonda bunun bedeli animasyonun
kendisinden büyük. */
@keyframes viewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.view.swap { animation: viewIn .24s var(--ease) both; }
/* Alt çubuk yalnızca dar ekranlarda görünür */
#tabbar { display: none; }
/* Dokunmatikte :hover parmağı kaldırınca üzerinde kalıyor ve düğmeler
basılı gibi görünüyordu. Hover yalnızca gerçek fare varken çalışsın. */
/* Dokunmatikte klavye yok; parmakla basınca kalan halka yalnızca kir yapıyor. */
/* Dokunmatik cihaz: imleç yok, klavye yok.
Hover kuralları artık "hover: hover" içinde, buraya hiç düşmüyor. */
@media (hover: none) {
/* Parmakla basınca kalan odak halkası yalnızca kir yapıyor. */
:focus, :focus-visible { outline: none !important; }
/* Dokunma tepkisi karartma değil, hafif küçülme.
Zemini koyulaştırmak koyu temada "sönüyor" gibi okunuyordu. */
/* SADECE küçülme. "border-color: inherit" burada duruyordu ve kartın
çerçevesini üst kutunun renginden alıyordu — o da metin rengi olduğu için
basınca çevresinde beyaz bir çizgi beliriyordu. */
.proje:active, .gorev:active, .gsatir:active, .sayfa:active,
.modul-bas:active, .standart-bas:active, .row[data-hs]:active, .hp-sat:active,
.btn:active, .mini-btn:active, .mini-link:active, .ss:active, .mod:active,
.sc:active, .renk:active, .nav-item:active, .sayfa-ekle:active,
.gorev-ekle:active, .bsc:active {
transform: scale(.985);
transition: transform .1s var(--ease);
}
}
/* Onay satırı (kutucuk + açıklama) ------------------------------------------ */
.onay-satir {
display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
padding: 12px; margin-bottom: 4px; border-radius: 12px;
background: var(--yuva); border: 1px solid var(--line-3);
}
.onay-satir input { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; accent-color: var(--red); }
.onay-satir b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.onay-satir i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
/* Sihirbaz — tam ekran ------------------------------------------------------ */
.sihirbaz {
position: fixed; inset: 0; z-index: 300;
display: flex; flex-direction: column;
background: var(--bg);
opacity: 0; transform: translateY(14px);
transition: opacity .2s ease, transform .26s var(--ease);
}
.sihirbaz.acik { opacity: 1; transform: none; }
.sh-tepe {
display: flex; align-items: center; gap: 12px; flex-shrink: 0;
padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0;
}
.sh-kapat {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 36px; height: 36px; border-radius: 11px; cursor: pointer;
background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.sh-kapat svg { width: 15px; height: 15px; }
.sh-ad { flex: 1; font-family: var(--yazi-baslik); font-size: 14px; font-weight: 700; color: var(--ink-strong); }
.sh-say {
font-size: 11.5px; color: var(--ink-dim); flex-shrink: 0;
padding: 4px 10px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line-3);
}
.sh-sayfa { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px; }
/* Sihirbaz tek adıma indi: adım şeridi çizilmiyor, onun üstteki payını
içeriğin kendisi veriyor. */
.sh-sayfa > .sh-icerik:first-child { padding-top: 20px; }
.sh-serit { display: flex; gap: 5px; padding: 14px 0 20px; flex-shrink: 0; }
.sh-serit i { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); }
.sh-serit i.ok { background: linear-gradient(90deg, #5cbf92, #3f9871); }
.sh-serit i.simdi {
background: linear-gradient(90deg, var(--red-acik), var(--red-koyu));
box-shadow: 0 0 10px -2px rgba(229, 52, 42, .8);
}
.sh-icerik { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
/* Sihirbaz telefon ekranına göre tasarlandı; masaüstünde `.sihirbaz` tüm
pencere genişliğine yayılınca içerik (özellikle görsel kutuları) dev
görünüyordu. Genişçe bir sütuna sabitleyip ortalıyoruz — telefonda zaten
bundan dar olduğu için görünüm değişmiyor. */
@media (min-width: 640px) {
.sh-tepe, .sh-sayfa { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
}
.sh-bas { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 22px; }
.sh-rozet {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 46px; height: 46px; border-radius: 15px;
background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red-cizgi); color: var(--red-ink);
}
/* Gerçek servis logosu — beyaz zemin: logolar kendi rengiyle geliyor,
siyah GitHub gibi bir logo kırmızı zeminde kaybolurdu. */
.sh-rozet-servis { background: #fff; box-shadow: none; padding: 8px; box-sizing: border-box; }
.sh-rozet-servis img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sh-bas h2 {
font-family: var(--yazi-baslik); font-size: 22px; font-weight: 700;
color: var(--ink-strong); letter-spacing: -.015em;
}
.sh-bas p { font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
/* Düğmeler dipte sabit — içerik uzayınca kaymıyorlar. */
.sh-dip {
display: flex; gap: 10px; flex-shrink: 0;
padding: 14px 0 calc(20px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line-3);
}
.sh-dip .btn { flex: 1; height: 46px; font-size: 14px; }
/* Sihirbazın üç adımı: geçilen tik, şimdiki dolu, sıradaki soluk. Aynı
renk dili "Beta ve geliştirme"deki durum rengiyle (sarı) — sürüyor ama
bitmedi. */
.sh-adimlar{ display:flex; align-items:flex-start; margin:2px 0 24px; }
.sh-adim{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:0 0 auto; }
.sh-adim-no{
width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
font-family:var(--yazi-kod); font-size:13px; color:var(--ink-dim);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.sh-adim i{ font-style:normal; font-size:10.5px; color:var(--ink-dim); white-space:nowrap; }
.sh-adim.done .sh-adim-no, .sh-adim.simdi .sh-adim-no{
color:#241a05; background:linear-gradient(180deg, var(--st-dev-t), var(--st-dev));
box-shadow:0 6px 14px -8px rgba(216,166,63,.6);
}
.sh-adim.done i, .sh-adim.simdi i{ color:var(--st-dev-t); }
/* Bağlantılar adımlarının servis logolu hâli: hep beyaz zemin (logo kendi
rengiyle geliyor), sırası gelmemiş adım soluk/gri, şimdiki tam renkli —
aşama listesindeki gri/yeşil mantığının aynısı, tek renk boyama yerine
filtreyle. */
.sh-adim-no.servis{ background:#fff; box-shadow:inset 0 0 0 1px var(--line-3); }
.sh-adim-no.servis img{ width:18px; height:18px; object-fit:contain; filter:grayscale(1); opacity:.45; }
.sh-adim.simdi .sh-adim-no.servis{ box-shadow:0 6px 14px -8px rgba(216,166,63,.6); }
.sh-adim.simdi .sh-adim-no.servis img{ filter:none; opacity:1; }
.sh-adim-cizgi{ flex:1 1 auto; height:2px; background:var(--line-3); margin:16px 8px 0; }
/* Sektör ızgarası — iki sütun, seçili olan sarı çerçeveli ve tikli. */
.sh-sektor-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.sh-sektor{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
padding:14px; border-radius:var(--radius-lg); border:1px solid var(--line);
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-strong);
text-align:left; cursor:pointer;
}
.sh-sektor-ik{
width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3); color:var(--ink-dim);
}
.sh-sektor.on{ border-color:var(--st-dev-t); box-shadow:0 0 0 1px var(--st-dev-t); }
.sh-sektor.on .sh-sektor-ik{ color:var(--st-dev-t); }
.sh-sektor-tik{
position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
color:#241a05; background:linear-gradient(180deg, var(--st-dev-t), var(--st-dev));
}
.sh-sektor-ekle{ color:var(--ink-dim); }
.sh-sektor-ekle .sh-sektor-ik{ color:inherit; }
/* Logo/görsel yükleme kutuları — proje daha kurulmadan seçilen dosya
blob adresiyle önizleniyor, kurulunca gerçekten yükleniyor. Logo kare
ve küçük (bir simge gibi düşün), işletme görseli yatay bir kart —
ikisi de eskiden `width:100%` + sabit piksel yükseklikti; masaüstünde
sihirbaz tüm ekran genişliğine yayılınca aynı yükseklik dev, düz bir
şerit gibi görünüyordu. */
.sb-yukle{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
width:112px; aspect-ratio:1/1; margin-bottom:6px; padding:10px;
border-radius:var(--radius-lg); border:1.5px dashed var(--line-2);
background:var(--yuva); color:var(--ink-dim);
font-family:inherit; cursor:pointer; text-align:center;
background-size:cover; background-position:center;
}
.sb-yukle b{ font-size:11.5px; color:var(--ink-strong); font-weight:600; }
.sb-yukle i{ font-style:normal; font-size:9.5px; color:var(--ink-dim); line-height:1.35; }
.sb-yukle.dolu{ border-style:solid; border-color:var(--line-3); }
.sb-yukle.genis{ width:100%; aspect-ratio:2.4/1; max-height:170px; padding:16px; }
.sb-yukle.genis b{ font-size:12.5px; }
.sb-yukle.genis i{ font-size:10.5px; }
/* Program temeli'nde veri katmanı seçimi — iki büyük kart, her biri kendi
artı/eksi listesiyle. Küçük pul yerine bunu seçtik çünkü karar tek
satırlık değil: sonucu (senkron var mı, sunucu gerekir mi) görmeden
seçmek kullanıcıyı geri dönüp pişman ediyordu. */
.pa-veri-liste{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.pa-veri-kart{
display:block; padding:14px; border-radius:var(--radius-lg);
border:1px solid var(--line); cursor:pointer;
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
}
.pa-veri-kart.on{ border-color:var(--ki); box-shadow:0 0 0 1px var(--ki); }
.pa-veri-ust{ display:flex; align-items:center; gap:10px; }
.pa-veri-ik{
flex:0 0 36px; width:36px; height:36px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3); color:var(--ki);
}
/* Kartın gerçek servis logosu varsa (Supabase, github.io, Namecheap)
beyaz zemine geçiyor — logo kendi rengiyle geliyor. */
.pa-veri-ik.servis{ background:#fff; }
.pa-veri-ik.servis img{ width:20px; height:20px; object-fit:contain; display:block; }
.pa-veri-ad{ font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px; color:var(--ink-strong); }
.pa-veri-rozet{
padding:2px 8px; border-radius:999px; font-size:9.5px; font-weight:700;
color:#241a05; background:linear-gradient(180deg, var(--st-dev-t), var(--st-dev));
}
.pa-veri-radyo{
flex:0 0 auto; margin-left:auto; width:20px; height:20px; border-radius:999px;
box-shadow:inset 0 0 0 2px var(--line-2);
}
.pa-veri-kart.on .pa-veri-radyo{
box-shadow:inset 0 0 0 6px var(--ki), inset 0 0 0 1px var(--ki);
}
.pa-veri-oz-liste{ display:flex; flex-direction:column; gap:5px; margin:12px 0 0 46px; }
.pa-veri-oz{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-dim); }
.pa-veri-oz svg{ flex:0 0 auto; }
.pa-veri-oz.iyi{ color:var(--st-done-t); }
.pa-veri-oz.kotu{ color:var(--ink-faint); }
.pa-veri-oz.kotu svg{ color:var(--red-ink); }
/* Bağlantılar sihirbazı — her adımın altındaki avantaj listesi (hepsi
zaten avantaj, artı/eksi ayrımı yok) ve bağlantı kurulduğunda çıkan
yeşil durum şeridi. */
.ba-oz-liste{ display:flex; flex-direction:column; gap:8px; margin:18px 0 4px; }
.ba-oz{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.ba-oz svg{ flex:0 0 auto; color:var(--st-done-t); }
.ba-durum{
display:flex; align-items:center; gap:11px; margin-bottom:14px; padding:13px 14px;
border-radius:var(--radius-lg); border:1px solid var(--done-cizgi); background:var(--done-soft);
}
.ba-durum-ik{
flex:0 0 30px; width:30px; height:30px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg, var(--st-done-t), var(--st-done)); color:#04170e;
}
.ba-durum b{ display:block; font-size:12.5px; color:var(--ink-strong); }
.ba-durum i{ display:block; font-style:normal; font-size:11px; color:var(--ink-dim); margin-top:1px; word-break:break-all; }
/* Sektör pulları */
.pullar { display: flex; flex-wrap: wrap; gap: 7px; }
.pul {
padding: 9px 13px; border-radius: 11px; cursor: pointer; font-family: inherit;
background: var(--yuva); border: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px;
}
.pul.sec { background: var(--red-soft); border-color: var(--red-cizgi); color: var(--red-ink); font-weight: 600; }
.pul.yeni { border-style: dashed; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 6px; }
.pul:active { transform: scale(.97); }
/* Çok seçimlik modül satırı */
.sec-satir {
display: flex; align-items: center; gap: 12px; cursor: pointer;
padding: 13px 14px; border-radius: 13px;
background: var(--yuva); border: 1px solid var(--line);
}
.sec-satir.sec { background: var(--red-soft); border-color: var(--red-cizgi); }
.sec-yazi { min-width: 0; }
.sec-yazi b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sec-yazi i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); margin-top: 1px; }
.sec-satir .onerildi {
margin-left: auto; flex-shrink: 0;
font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--st-dev-t); background: var(--dev-soft);
border: 1px solid var(--dev-cizgi); padding: 3px 7px; border-radius: 999px;
}
.sec-satir .kare {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 20px; height: 20px; border-radius: 6px; margin-left: auto;
box-shadow: inset 0 0 0 1.6px var(--line-parlak);
}
.sec-satir .onerildi + .kare { margin-left: 0; }
.sec-satir.sec .kare { background: var(--red); box-shadow: none; color: #fff; }
/* Özet kutusu — durak kutularıyla aynı dil */
.ozet-kutu {
position: relative; overflow: hidden; border-radius: 15px; padding: 4px 14px 4px 17px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .55);
}
.ozet-kutu::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, #5cbf92, #2f7a58);
}
.ozet-kutu .os { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 12.5px; color: var(--ink-soft); }
.ozet-kutu .os + .os { border-top: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 -1px 0 rgba(255, 255, 255, .035); }
.ozet-kutu .os b { margin-left: auto; color: var(--ink); font-weight: 600; font-size: 12px; text-align: right; }
.mk-logo.buyuk { width: 56px; height: 56px; border-radius: 15px; margin-left: 0; }
.mk-logo.buyuk svg { width: 20px; height: 20px; }
/* Projeler ekranı — açılır bölümler ----------------------------------------- */
.pgrup { margin-bottom: 14px; }
.pgrup-bas {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 12px; margin-bottom: 10px; border: 0; border-radius: 12px; cursor: pointer;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
color: var(--ink); font-family: inherit; text-align: left;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line-3);
}
.pgrup-bas .chev { display: flex; color: var(--ink-dim); flex-shrink: 0;
transition: transform .2s var(--ease); }
.pgrup-bas.acik .chev { transform: rotate(90deg); }
.pgrup-ad { flex: 1; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.pgrup-say {
min-width: 22px; padding: 2px 8px; border-radius: 999px; text-align: center;
background: var(--yuva); color: var(--ink-dim);
font-family: var(--yazi-kod); font-size: 10.5px; font-weight: 700;
box-shadow: inset 0 0 0 1px var(--line-3);
}
/* Durak sayfaları ----------------------------------------------------------- */
/* Sayfanın tepesi: logo büyük, arkasında projenin kendi rengi. */
.hero {
position: relative; overflow: hidden; text-align: center;
border-radius: 22px; padding: 24px 18px 20px; margin-bottom: 20px;
}
.hero-zemin {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(120% 100% at 50% -10%, var(--pg, rgba(255, 255, 255, .08)), transparent 68%),
linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.hero-no {
position: absolute; top: 14px; right: 14px; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 999px;
background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
font-family: var(--yazi-baslik); font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}
.hero-logo {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
width: 96px; height: 96px; border-radius: 26px; margin: 0 auto 14px;
background-color: var(--surface-2); background-size: contain;
background-position: center; background-repeat: no-repeat;
font-family: var(--yazi-baslik); font-weight: 700; font-size: 26px; color: var(--ink-soft);
box-shadow: 0 14px 30px -14px #000, 0 0 0 1px rgba(255, 255, 255, .12);
}
.hero-logo.dolu { background-color: #fff; }
.hero h1 {
position: relative; z-index: 2;
font-family: var(--yazi-baslik); font-size: 23px; font-weight: 700;
color: var(--ink-strong); letter-spacing: -.02em;
}
.hero-rozetler {
position: relative; z-index: 2; display: flex; gap: 6px;
justify-content: center; flex-wrap: wrap; margin-top: 10px;
}
.rz {
font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
background: rgba(255, 255, 255, .07); color: var(--ink-soft);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.rz.marka {
background: var(--pg, rgba(255, 255, 255, .1)); color: var(--pl, var(--ink));
box-shadow: inset 0 0 0 1px var(--pk, rgba(255, 255, 255, .2));
}
/* Bölüm başlığı: yazı + çizgi */
.bl { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.bl span {
font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-dim);
}
.bl i { flex: 1; height: 1px; background: var(--line-3); }
/* Yetkili kişi kartviziti */
.kisi-kart {
position: relative; overflow: hidden; border-radius: 17px;
padding: 15px 15px 13px 18px; margin-bottom: 18px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 -1px 0 rgba(0, 0, 0, .55), 0 8px 18px -10px #000;
}
.kisi-kart::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--p1, var(--line-parlak));
}
.kk-ust { display: flex; align-items: center; gap: 12px; }
.kk-av {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 44px; height: 44px; border-radius: 999px;
background: linear-gradient(150deg, #7a716a, #39332f);
font-family: var(--yazi-baslik); font-weight: 700; font-size: 15px; color: #f2efec;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.kk-ad { min-width: 0; }
.kk-ad b { display: block; font-family: var(--yazi-baslik); font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.kk-ad i { display: block; font-style: normal; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.kk-eylem { display: flex; gap: 8px; margin-top: 14px; }
.ke {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px; border: 0; border-radius: 12px; cursor: pointer;
background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
color: var(--ink-soft); font-size: 12px; font-weight: 600; font-family: inherit;
}
.ke svg { width: 14px; height: 14px; }
.ke:active { transform: scale(.97); }
/* İkili bilgi kutuları */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.tkutu {
position: relative; overflow: hidden; border-radius: 15px; padding: 13px 14px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -1px 0 rgba(0, 0, 0, .5), 0 6px 14px -9px #000;
}
.tkutu .ik {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 8px; margin-bottom: 9px;
background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
color: var(--ink-faint);
}
.tkutu b { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.tkutu u { display: block; text-decoration: none; font-family: var(--yazi-baslik); font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 4px; }
/* Takvim çubuğu */
.takvim {
position: relative; overflow: hidden; border-radius: 17px;
padding: 16px 16px 18px; margin-bottom: 18px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.tk-ust { display: flex; align-items: baseline; margin-bottom: 14px; }
.tk-ust b { font-family: var(--yazi-baslik); font-size: 13px; font-weight: 700; color: var(--ink); }
.tk-ust b.gecikti { color: var(--red-ink); }
.tk-ust em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-dim); }
.ray {
position: relative; height: 6px; border-radius: 4px; margin: 0 2px 12px;
background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55);
}
.ray i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
background: linear-gradient(90deg, var(--p2, var(--metal-1)), var(--pl, var(--metal-2))); }
.ray b {
position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
border-radius: 999px; background: #fff;
box-shadow: 0 0 0 3px var(--kart-alt), 0 0 12px 0 rgba(255, 255, 255, .5);
}
.tk-uc { display: flex; font-size: 11px; color: var(--ink-dim); }
.tk-uc span:last-child { margin-left: auto; text-align: right; }
.tk-uc b { display: block; color: var(--ink-soft); font-weight: 600; font-size: 12px; margin-top: 2px; }
/* Satır listesi */
.satirlar {
border-radius: 17px; overflow: hidden; padding: 2px 15px; margin-bottom: 18px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.sr { display: flex; align-items: center; gap: 11px; padding: 12px 0; font-size: 12.5px; color: var(--ink-soft); }
.sr + .sr { border-top: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 -1px 0 rgba(255, 255, 255, .035); }
.sr svg { flex-shrink: 0; color: var(--ink-faint); }
.sr b { margin-left: auto; color: var(--ink); font-weight: 600; font-size: 12px; }
.sr b.eksik { color: var(--st-dev-t); }
.sr b.mono { font-family: var(--yazi-kod); font-size: 11px; }
.sr[role="button"] { cursor: pointer; }
/* Boş durum kutusu */
.bos-kutu {
display: flex; gap: 11px; align-items: flex-start;
padding: 15px; border-radius: 15px; margin-bottom: 18px;
background: var(--yuva); border: 1px dashed var(--line);
font-size: 11.5px; color: var(--ink-dim); line-height: 1.55;
}
.bos-kutu svg { flex-shrink: 0; color: var(--ink-faint); margin-top: 1px; }
.bos-kutu b { color: var(--ink-soft); font-weight: 600; }
/* Palet tam genişlik şerit */
.tip { display: flex; gap: 9px; margin-bottom: 12px; }
.tip div {
flex: 1; border-radius: 13px; padding: 10px 12px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.tip b { display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; margin-bottom: 3px; }
.tip u { display: block; text-decoration: none; font-size: 15px; color: var(--ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-bolum { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
/* Sayfa dibindeki büyük düğmeler */
.sayfa-dug {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
height: 48px; margin-top: 10px; border: 0; border-radius: 14px; cursor: pointer;
font-family: var(--yazi-baslik); font-size: 14px; font-weight: 600; color: #fff;
background: linear-gradient(180deg, var(--red-acik), var(--red));
box-shadow: 0 10px 24px -10px rgba(229, 52, 42, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.sayfa-dug.ikincil {
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
color: var(--ink-soft);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.sayfa-dug:active { transform: scale(.985); }
/* Dışarı açılan düğmeler gerçek bağlantı: iOS'ta ana ekrandan açılan
uygulamada window.open engelleniyor, çalışıyor. */
a.sayfa-dug { text-decoration: none; }
/* Depo durağının tepesindeki modül adı satırı. */
.kur-dug { display: flex; gap: 8px; margin-left: 37px; }
.kur-dug .sayfa-dug { margin: 0; height: 42px; font-size: 13px; }
.kur-deger { display: flex; align-items: center; gap: 7px; margin: 11px 0 0 37px;
font-size: 11.5px; color: var(--ink-faint); cursor: pointer; }
.kur-deger b { color: var(--ink); font-size: 11px; word-break: break-all; }
.kur-deger .eksik { color: var(--uyari, #d0a13c); font-family: inherit; font-size: 11.5px; }
.kur-onay { display: flex; align-items: center; gap: 9px; margin: 12px 0 0 37px;
font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.kur-kutu { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
border: 1.5px solid var(--line); display: grid; place-items: center;
color: transparent; transition: background .16s ease, border-color .16s ease; }
.kur-onay.on .kur-kutu { background: #2f7a58; border-color: #2f7a58; color: #fff; }
/* Koşulu tutmayan onay: görünür ama dokunulmaz. */
.kur-onay.pasif { opacity: .45; cursor: default; }
/* Koşulu tutmayan kopyala düğmesi: görünür ama basılamaz. */
.sayfa-dug[disabled] { opacity: .45; cursor: default; box-shadow: none; }
/* Dokunulmayan değer satırı — yalnız bilgi. */
.kur-deger.duz { cursor: default; }
/* Sonradan gelen teknik standartlar — Geliştirme durağında. */
.std-liste { margin: 11px 0 0 37px; display: grid; gap: 7px; }
.std-satir { display: flex; align-items: baseline; gap: 9px; padding: 8px 11px;
border: 1px solid var(--line); border-radius: 9px;
background: var(--yuzey-2, rgba(255, 255, 255, .03)); }
.std-satir b { font-size: 12px; color: var(--ink); }
.std-satir span { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
color: var(--ink-soft); margin-left: auto; text-align: right; }
/* Silmeden sonra dışarıda kalanlar. `.dk` adı yapı ağacında kullanılıyor,
bu yüzden ayrı önek. */
.sk-liste { display: grid; gap: 10px; margin-top: 4px; }
.sk { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px;
border: 1px solid var(--line-2); border-radius: 13px; background: var(--yuva); }
.sk-n { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
display: grid; place-items: center; background: var(--surface-2);
font-family: var(--yazi-kod); font-size: 10.5px; color: var(--ink-faint); }
.sk-yz { flex: 1; min-width: 0; }
/* Doğrudan çocuk: açıklamanın içindeki kalın sözcükler satır kırmasın. */
.sk-yz > b { display: block; font-family: var(--yazi-baslik); font-size: 13.5px; color: var(--ink); }
.sk-yz > i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-faint);
margin-top: 3px; line-height: 1.5; }
.sk-yz i b { color: var(--ink-soft); font-weight: 600; }
.sk-ad { display: inline-block; margin-top: 6px; font-family: var(--yazi-kod); font-size: 11px;
color: var(--ink-soft); padding: 3px 8px; border-radius: 6px; background: var(--surface); }
.sk-liste .sayfa-dug { margin: -2px 0 2px 33px; width: calc(100% - 33px); }
/* Kapalı adım satırı — biten ya da sırası gelmemiş. */
.ada-satir {
display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
padding: 12px 14px; margin-bottom: 9px; border: 1px solid var(--line-3);
border-radius: 14px; background: var(--yuva-2); cursor: pointer;
font-family: inherit; color: inherit;
}
.ada-satir:active { transform: scale(.995); }
.as-no {
width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
display: grid; place-items: center; font-family: var(--yazi-kod); font-size: 10.5px;
background: var(--surface-2); color: var(--ink-dim);
}
.ada-satir.bitti .as-no { background: var(--st-done); color: #0d1a14; }
.ada-satir b { flex: 1; font-family: var(--yazi-baslik); font-size: 14px; color: var(--ink-soft); }
.ada-satir.bitti b { color: var(--ink); }
.as-ozet { font-size: 10px; color: var(--ink-dim); }
.as-cev { color: var(--ink-dim); display: flex; }
.ada-acik { margin-bottom: 9px; }
.ada-acik .kur-kart:not(.bitti) {
border-color: var(--red-cizgi);
background: linear-gradient(180deg, var(--red-soft), var(--yuva-2) 45%);
}
.ada-acik .kur-kart:not(.bitti) .kur-no { background: var(--red); color: #fff; }
.ada-acik .kur-kart:not(.bitti) .kur-rozet { color: var(--red-ink-soft); }
/* Ada bitmeden "Adayı bitir" öne çıkmasın; bitince yeşile dönsün. */
.ag.ileri.sonuk { opacity: .45; }
.ag.ileri.tam { background: var(--st-done); border-color: var(--st-done); color: #0d1a14;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
/* ==========================================================================
GÖRSEL DÜNYA
Ada gövdesi kurulum kartlarının aynı dilini kullanıyor; buradakiler yalnız
o karta özgü parçalar.
========================================================================== */
.gd-kaydir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
margin: 0 calc(var(--yan) * -1); padding: 2px var(--yan) 8px;
-webkit-overflow-scrolling: touch; }
.gd-iki { display: flex; gap: 9px; margin: 12px 0 0 37px; }
.gd-kutu {
flex: 1; border: 1.5px dashed var(--line-parlak); border-radius: 13px;
padding: 12px 8px; text-align: center; background: var(--yuva); cursor: pointer;
transition: border-color .16s ease;
}
.gd-kutu.var { border-style: solid; border-color: var(--line-2); }
.gd-kutu:active { transform: scale(.99); }
.gd-on {
display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 8px;
border-radius: 11px; background: var(--surface-2); color: var(--ink-dim);
font-size: 19px; background-size: cover; background-position: center;
}
.gd-on.resim { background-color: var(--surface); }
.gd-kutu b { display: block; font-size: 12px; color: var(--ink); }
.gd-kutu i { display: block; font-style: normal; font-size: 10px; color: var(--ink-dim); margin-top: 2px; }
.gd-uret { margin: 12px 0 0 37px; display: grid; gap: 7px; }
.gd-us {
display: flex; align-items: center; gap: 9px; padding: 8px 11px;
border: 1px solid var(--line-2); border-radius: 10px; background: var(--yuva);
color: var(--ink-faint);
}
.gd-us b { flex: 1; font-size: 12px; color: var(--ink); font-weight: 600; }
.gd-us span { font-family: var(--yazi-kod); font-size: 10px; color: var(--ink-dim); }
/* Tarif kartı — ada içinde ve özet adımında. */
.tarif-kart {
margin: 12px 0 0 37px; border: 1px solid var(--line-2); border-radius: 13px;
background: var(--yuva); padding: 12px 13px;
}
.tk-bas { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.tk-bas b { flex: 1; font-family: var(--yazi-baslik); font-size: 13.5px; color: var(--ink-strong); }
.tk-rz {
font-family: var(--yazi-kod); font-size: 9.5px; padding: 3px 7px; border-radius: 6px;
background: rgba(69, 163, 123, .15); color: var(--st-done-t);
}
.tk-satir { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-3); font-size: 11.5px; }
.tk-satir b { flex: 0 0 78px; font-weight: 600; color: var(--ink-soft); }
.tk-satir span { flex: 1; color: var(--ink-faint); line-height: 1.45; }
.tk-yer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tk-y {
font-family: var(--yazi-kod); font-size: 10px; padding: 4px 8px; border-radius: 7px;
background: var(--surface); border: 1px solid var(--line-3); color: var(--ink-dim);
}
.tk-y.dolu { border-color: var(--line-parlak); color: var(--ink-soft); }
/* Özet adımının tepesindeki kısa tarif şeridi. */
.tarif-serit {
border: 1px solid var(--line-2); border-radius: 14px; background: var(--yuva-2);
padding: 13px 14px; margin-bottom: 14px;
}
.ts-ust { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ts-ust b { flex: 1; font-family: var(--yazi-baslik); font-size: 14px; color: var(--ink-strong); }
.ts-rz { font-family: var(--yazi-kod); font-size: 10px; color: var(--ink-dim); }
.ts-satir { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.ts-devam { color: var(--ink-dim); font-size: 13px; letter-spacing: .2em; }
/* Yuva listesi — pencere içinde. */
.yuva-l { display: grid; gap: 9px; margin-top: 4px; }
.yv {
display: flex; align-items: center; gap: 11px; padding: 10px 11px;
border: 1px solid var(--line-2); border-radius: 13px; background: var(--yuva);
cursor: pointer; text-align: left;
}
.yv.bos { border-style: dashed; border-color: var(--line-parlak); background: transparent; }
.yv:active { transform: scale(.995); }
.yv-kare {
width: 52px; height: 52px; border-radius: 10px; flex: 0 0 52px;
display: grid; place-items: center; font-size: 19px; color: var(--ink-dim);
background: var(--surface); background-size: cover; background-position: center;
}
.yv.bos .yv-kare { border: 1px dashed var(--line-parlak); }
.yv-yz { flex: 1; min-width: 0; }
.yv-ust { display: flex; align-items: baseline; gap: 7px; }
.yv-ust em { font-style: normal; font-size: 10px; color: var(--ink-dim); }
.yv-ust b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.yv-yz i { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint);
margin-top: 2px; line-height: 1.4; }
.yv-yz u { display: block; text-decoration: none; font-size: 10px; color: var(--ink-dim); margin-top: 3px; }
.yv-dr { font-family: var(--yazi-kod); font-size: 9.5px; padding: 3px 8px; border-radius: 6px; flex: 0 0 auto; }
.yv-dr.ok { background: rgba(69, 163, 123, .15); color: var(--st-done-t); }
.yv-dr.bek { background: rgba(216, 166, 63, .13); color: var(--st-dev-t); }
.yv-ilerle { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.yv-ilerle span.mono { font-size: 11px; color: var(--ink-dim); }
.yv-cb { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.yv-cb i { display: block; height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); }
.durak.ada { padding-bottom: 14px; }
.durak.bitti .ada-kart { background: transparent; }
.durak.simdi .ada-kart {
border-color: var(--red-cizgi); background: var(--red-soft);
animation: adaNabiz 2.2s ease-in-out infinite;
}
@keyframes adaNabiz {
0%, 100% { box-shadow: 0 0 0 0 rgba(229, 52, 42, .34); }
60% { box-shadow: 0 0 0 6px rgba(229, 52, 42, 0); }
}
.durak.bitti .ada-say { color: #5cbf92; }
.durak.simdi .ada-durum { color: var(--red-ink); }
/* Öbek rozeti artık haritaya dönüş düğmesi. */
button.as-rozet { border: 0; cursor: pointer; font-family: var(--yazi-baslik); }
button.as-rozet:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
.durak.simdi .ada-kart { animation: none; }
}
/* Duraklar artık sayfaya götüren bağlantı */
a.durak { display: block; text-decoration: none; color: inherit; }
a.durak:active { transform: scale(.99); transition: transform .1s var(--ease); }
/* Proje künyesi ------------------------------------------------------------- */
.kunye { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.kunye-logo {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 52px; height: 52px; border-radius: 15px;
background-color: var(--surface-2); background-size: contain;
background-position: center; background-repeat: no-repeat;
font-family: var(--yazi-baslik); font-weight: 700; font-size: 15px; color: var(--ink-soft);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -8px #000;
}
.kunye-logo.dolu { background-color: #fff; }
.kunye-logo.dolu .logo-harf,
.mk-logo.dolu .logo-harf,
.hero-logo.dolu .logo-harf { display: none; }
/* Yüklenirken baş harf sönükleşir, üstünde dönen gösterge durur. */
.kunye-logo.yukleniyor .logo-harf,
.mk-logo.yukleniyor .logo-harf,
.hero-logo.yukleniyor .logo-harf { opacity: .25; }
.logo-harf { display: flex; align-items: center; justify-content: center; }
/* Dönen gösterge — tek bir kenarı renkli halka, sürekli döner. */
.donen {
position: absolute; width: 20px; height: 20px; border-radius: 999px;
border: 2px solid var(--line-parlak);
border-top-color: var(--ink-soft);
animation: donuyor .7s linear infinite;
}
@keyframes donuyor { to { transform: rotate(360deg); } }
/* Güvenlik ağı: gösterge bir şekilde silinemezse bile görünmesin. */
.dolu .donen, .resimli .donen, .yuklenemedi .donen { display: none; }
/* Avatar yüklenirken baş harfler durur, gösterge üstünde döner. */
.foto.yukleniyor > b { opacity: .3; }
.kunye-logo, /* Logo satırı: solda kutu, yanında iki satır yazı. */
.mk-ust { display: flex; align-items: center; gap: 13px; }
.mk-yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-yazi b {
font-size: 13px; font-weight: 600; color: var(--ink);
text-transform: none; letter-spacing: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-yazi i {
font-style: normal; font-size: 11px; color: var(--ink-dim);
text-transform: none; letter-spacing: 0;
}
.mk-logo { position: relative; }
.mk-logo .donen { width: 16px; height: 16px; border-width: 1.6px; }
/* Adres süresi dolmuşsa kırık resim yerine kesik çerçeve kalır — sessizce
boş görünmesin, uyarı renginde dursun ki dokunulacağı anlaşılsın. */
.yuklenemedi { border: 1px dashed var(--uyari, #d0a13c) !important;
color: var(--uyari, #d0a13c) !important; }
.kunye-yazi { flex: 1; min-width: 0; }
.kunye-yazi h2 {
font-family: var(--yazi-baslik); font-size: 19px; font-weight: 700;
color: var(--ink-strong); letter-spacing: -.015em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kunye-yazi p { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.kunye-pct { font-size: 19px; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }
.kunye-bar {
height: 4px; border-radius: 3px; margin-bottom: 24px; overflow: hidden;
background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.kunye-bar i {
display: block; height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--metal-1), var(--metal-2));
transition: width .7s var(--ease);
}
/* Proje yolu — numaralı duraklar ------------------------------------------- */
/* Ada listesindeki durak: projenin yol haritası karta döndü ama görsel dünya
adası hâlâ numaralı satırlar kullanıyor. `.yol`, `.durak` ve `.durak-no`
yalnız orası için duruyor. */
.yol { position: relative; padding-left: 40px; }
/* Duraklar arası kesikli çizgi. */
.yol::before {
content: ''; position: absolute; left: 13px; top: 14px; bottom: 18px; width: 1px;
background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
}
.durak { position: relative; padding-bottom: 26px; }
.durak:last-child { padding-bottom: 6px; }
.durak-no {
position: absolute; left: -40px; top: -1px; z-index: 1;
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 999px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
font-family: var(--yazi-baslik); font-size: 12px; font-weight: 700; color: var(--ink-dim);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line);
}
.durak.bitti .durak-no {
background: linear-gradient(180deg, #5cbf92, #2f7a58); color: #08150f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 14px -5px rgba(69, 163, 123, .9);
}
.durak.simdi .durak-no {
background: linear-gradient(180deg, var(--red-acik), var(--red-koyu)); color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px -3px rgba(229, 52, 42, .8);
}
/* Proje adımları: zigzag akış -----------------------------------------------
Tamamlananlar dönüşümlü sola ve sağa yaslanan bir merdiven, aralarında
dirsekli yeşil oklar. Şimdiki adım merdivenin dışına çıkıp tam genişliğe
yayılıyor — bir satırlık özeti de sığıyor, göz doğrudan oraya gidiyor.
Sırası gelmemiş adımlar altta küçük ve kesik çerçeveli: sekiz adımı büyük
kartla göstermek ekranı gereksiz uzatıyordu. */
.merdiven { position: relative; }
.oklar { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.oklar path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oklar .iz { stroke: var(--st-done); }
.oklar .iz.bekleyen { stroke: var(--line-2); stroke-dasharray: 3 5; }
.oklar .basucu { fill: var(--st-done); stroke: none; }
.oklar .basucu.bekleyen { fill: var(--line-2); }
/* Satır arası boşluk okun DÖNMESİ için: bitişik dururken dirsek sıkışıyor
ve ok bir çizgi lekesine dönüyor. */
.basamaklar { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.satir { display: flex; }
.satir.sag { justify-content: flex-end; }
.bs-kart {
position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px;
width: 76%; padding: 11px 13px; border-radius: var(--radius-lg); text-decoration: none;
border: 1px solid var(--line); color: var(--ink);
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .75),
0 14px 26px -20px rgba(0, 0, 0, .95),
inset 0 1px 0 var(--isik);
transition: transform .12s var(--ease), border-color .2s var(--ease);
}
.bs-kart::before {
content: ''; position: absolute; top: -55%; left: -16%; width: 56%; height: 190%;
background: linear-gradient(101deg, rgba(255, 255, 255, .05), transparent 60%);
pointer-events: none;
}
.bs-kart:active { transform: scale(.99); }
.bs-kart:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; }
.bs-ikon {
position: relative; display: flex; align-items: center; justify-content: center;
flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px;
background: linear-gradient(180deg, var(--st-done-t), var(--st-done)); color: #08150f;
box-shadow: 0 8px 18px -9px rgba(69, 163, 123, .7), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.bs-ikon svg { stroke-width: 2.6; }
.bs-no { position: relative; font-size: 14px; color: var(--ink-soft); }
.bs-yz { position: relative; flex: 1; min-width: 0; }
.bs-ad {
display: block; font-family: var(--yazi-baslik); font-weight: 600; font-size: 13px;
color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-durum {
display: block; margin-top: 1px; font-family: var(--yazi-baslik); font-size: 9.5px;
font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--st-done-t);
}
/* Kırmızı burada "şimdi buradasın" demek — aynı anda yalnız bir kart. */
.bs-kart.simdi {
width: 100%; padding: 13px; border-color: var(--red-cizgi);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .75),
0 16px 30px -18px rgba(0, 0, 0, .95),
0 0 0 1px rgba(229, 52, 42, .10),
inset 0 1px 0 var(--isik);
}
.bs-kart.simdi .bs-ikon {
background: linear-gradient(180deg, var(--red-acik), var(--red)); color: #fff;
box-shadow: 0 8px 20px -8px rgba(229, 52, 42, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.bs-kart.simdi .bs-ikon svg { stroke-width: 1.9; }
.bs-kart.simdi .bs-ad { font-size: 14px; }
.bs-kart.simdi .bs-ozet {
display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-kart.simdi .bs-durum { color: var(--red-ink); margin-top: 3px; }
.kilitliler { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 34px; }
.kl-kart {
position: relative; display: flex; flex-direction: column; gap: 7px;
padding: 11px 11px 12px; border-radius: 12px;
border: 1px dashed var(--line-2); background: rgba(28, 27, 25, .5);
}
.kl-ust { display: flex; align-items: center; justify-content: space-between; }
.kl-no { font-size: 12.5px; color: var(--ink-dim); }
.kl-kilit { display: flex; color: var(--ink-dim); }
.kl-ad {
font-family: var(--yazi-baslik); font-weight: 600; font-size: 11.5px;
color: var(--ink-faint); line-height: 1.3;
}
.kl-kart .yeni-rozet { align-self: flex-start; }
/* Adım ilerlemesi. Üstteki künye çubuğu GÖREVLERİN yüzdesini gösteriyor,
bu ADIMLARIN — iki ayrı sayı, o yüzden başlığı "Adımlar". */
.genel {
margin-top: 16px; padding: 12px 13px 13px; border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow: inset 0 1px 0 var(--isik);
}
.genel-ust { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.genel-ust b { font-family: var(--yazi-baslik); font-weight: 600; font-size: 12.5px; color: var(--ink-strong); }
.genel-ust u {
text-decoration: none; font-family: var(--yazi-baslik); font-weight: 700; font-size: 15px;
color: var(--ink-strong);
}
.genel-ray {
height: 5px; border-radius: 999px; background: var(--bar-bos); overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
/* Metal gradyan — kırmızı değil. Dolu kırmızı bir çubuk "tehlike" diye
okunuyor, oysa anlatmak istediği şey ilerleme. */
.genel-ray i {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--metal-1), var(--metal-2));
box-shadow: 0 0 10px rgba(200, 210, 220, .22);
}
.genel-alt { margin-top: 7px; font-size: 10px; color: var(--ink-dim); }
margin-top: 12px; padding: 12px 14px 12px 17px; border-radius: 15px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 -1px 0 rgba(0, 0, 0, .55),
0 8px 18px -10px rgba(0, 0, 0, .95);
}
.durak-ic::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--line-parlak);
}
.durak.bitti .durak-ic::before { background: linear-gradient(180deg, #5cbf92, #2f7a58); }
.durak.simdi .durak-ic::before {
background: linear-gradient(180deg, var(--red-acik), var(--red-koyu));
box-shadow: 0 0 14px 0 rgba(229, 52, 42, .55);
}
.durak-ic .satir {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; font-size: 12.5px; color: var(--ink-soft);
}
/* Kabartma yüzeyde düz çizgi yerine oyuk çizgi — hacimle uyumlu. */
.durak-ic .satir + .satir {
border-top: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 -1px 0 rgba(255, 255, 255, .035);
}
.durak-ic .satir > b { margin-left: auto; color: var(--ink); font-weight: 600; font-size: 12px; }
.durak-ic .satir > b.eksik { color: var(--st-dev-t); }
.durak-ic .satir > b.mono { font-family: var(--yazi-kod); font-size: 11px; }
.durak-arac { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mini-kabart {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 12px; border: 0; border-radius: 11px; cursor: pointer;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
color: var(--ink-soft); font-size: 11.5px; font-family: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 -1px 0 rgba(0, 0, 0, .5),
0 5px 12px -7px rgba(0, 0, 0, .9);
}
.mini-kabart svg { width: 13px; height: 13px; flex-shrink: 0; }
.mini-kabart:active { transform: scale(.97); }
/* Modüller kutunun kenarlarına kadar açılsın — dar kalınca adlar kesiliyordu.
Sol kenarda şerit vurgu için 3 piksel bırakıldı. */
.durak-moduller { margin: -2px -14px 0 -3px; }
.durak-moduller .modul { margin-bottom: 7px; background: var(--yuva); }
.durak-moduller .modul:last-child { margin-bottom: 0; }
.durak-moduller .modul-bas { padding: 11px 13px; gap: 10px; }
/* Durak içinde ilerleme çubuğuna yer yok; yüzde zaten künyede yazıyor. */
.durak-moduller .modul-bar { display: none; }
/* Marka: firma logosu -------------------------------------------------------- */
.mk-logo {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 38px; height: 38px; margin-left: auto; border-radius: 11px; cursor: pointer;
/* Boş kutu koyu zeminde siyah bir delik gibi okunuyordu: bir tık açık
yüzey ve belirgin kesik çerçeve "buraya logo koy" diye anlaşılsın. */
background-color: var(--surface-2); background-size: contain;
background-position: center; background-repeat: no-repeat;
border: 1px dashed var(--line-parlak); color: var(--ink-faint);
transition: border-color .16s ease, background-color .16s ease;
}
.mk-logo:hover { border-color: var(--metal-1); color: var(--ink-soft); }
/* Beyaz logo beyaz zeminde kaybolmasın diye içeriden ince bir çizgi. */
.mk-logo.dolu { border-style: solid; border-color: var(--line);
background-color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.secenek-serit.ufak { margin-left: auto; width: auto; flex: 0 0 auto; }
.secenek-serit.ufak .ss { padding: 5px 12px; font-size: 11.5px; }
/* Elle düzenleme satırı */
/* Ekip listesi -------------------------------------------------------------- */
.kisi-satir { cursor: pointer; }
.kisi-satir .foto { margin-right: 12px; }
.kisi-satir.pasif { opacity: .55; }
.kisi-satir.pasif .row-sub { color: var(--st-dev-t); }
.kisi-satir .row-title em { font-style: normal; font-size: 11px; color: var(--ink-dim); }
.ss:disabled { opacity: .45; cursor: default; }
/* Panel karşılaması --------------------------------------------------------- */
.karsilama { text-align: center; margin: 2px 0 20px; }
.halka { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.halka svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.halka-iz { fill: none; stroke: var(--surface-3); stroke-width: 11; }
.halka-dolu {
fill: none; stroke: url(#halka-metal); stroke-width: 11; stroke-linecap: round;
filter: drop-shadow(0 0 7px rgba(214, 208, 205, .35));
transition: stroke-dashoffset .9s var(--ease);
}
/* Fotoğraf halkanın tam ortasında, çift çerçeve içinde. */
.halka-foto {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 104px; height: 104px; border-radius: 999px; overflow: hidden;
background-color: #4b443f;
background-image: linear-gradient(150deg, #7a716a, #39332f);
background-size: cover; background-position: center;
box-shadow: 0 0 0 1px var(--line-parlak),
0 0 0 6px var(--bg),
inset 0 2px 0 rgba(255, 255, 255, .16),
0 10px 26px -12px #000;
}
.halka-foto > b {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--yazi-baslik); font-weight: 700; font-size: 34px; color: #f4f1ef;
letter-spacing: .01em;
}
/* Yüzde halkanın alt kenarına oturan küçük rozet. */
.halka-rozet {
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
padding: 4px 11px; border-radius: 999px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
border: 1px solid var(--line-parlak);
box-shadow: 0 6px 14px -8px #000, inset 0 1px 0 var(--isik);
font-family: var(--yazi-kod); font-size: 11px; font-weight: 700; color: var(--ink);
}
.selam {
font-family: var(--yazi-baslik); font-size: 20px; font-weight: 700;
color: var(--ink-strong); letter-spacing: -.015em;
}
.selam-alt { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; }
.selam-alt b { color: var(--ink-soft); font-weight: 600; }
/* Zemin: ofis fotoğrafı ------------------------------------------------------
Yalnızca Panel'de. Fotoğraf #main içinde mutlak konumlu; kayan şey .view
olduğu için ekranda sabit kalır ve kartlar üstünden akar.
Üç katman üst üste:
1) fotoğraf — tepede net
2) bulanıklık — aşağı indikçe artar (maske ile)
3) perde — aşağı indikçe koyulaşır, en altta tam zemin rengi
Amaç: en alttaki kart bile okunsun ama üstte fotoğraf net dursun. */
#zemin-sus { display: none; }
#main.susulu #zemin-sus {
display: block; position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
/* Fotoğraf `#view` dışında duruyor; onunla birlikte solmazsa panele
dönerken olduğu yerde patlıyor ve geçiş hiç olmamış gibi görünüyor.
Panelden çıkarken `susulu` kalkıp geri gelince animasyon kendiliğinden
baştan çalışıyor. */
animation: zeminIn .34s var(--ease) both;
}
@keyframes zeminIn { from { opacity: 0; } to { opacity: 1; } }
/* Panelde kartlar solmuyor. Fotoğraf onların altında durduğu için kart yarı
saydamken ışığı geçiriyor, açık başlayıp koyulaşıyorlardı. Kartlar ilk
kareden itibaren tam koyu geliyor, sahne arkalarında açılıyor. */
#main.susulu .view.swap { animation: none; }
#zemin-sus .ofis {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 22%;
/* Kendi katmanına alınıyor: kaydırırken yeniden boyanmasın. */
transform: translateZ(0);
}
#zemin-sus .ofis-perde {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(11, 10, 9, .10) 0%,
rgba(11, 10, 9, .10) 24%,
rgba(11, 10, 9, .34) 40%,
rgba(11, 10, 9, .80) 56%,
rgba(23, 22, 20, .95) 74%,
var(--bg) 92%);
}
/* Markanın kırmızısı fotoğrafın üstünde de bir kez duysun — üst köşede,
çok soluk. */
#zemin-sus .hale-kirmizi {
position: absolute; top: -110px; left: -70px; width: 420px; height: 340px;
background: radial-gradient(closest-side, rgba(229, 52, 42, .16), transparent 72%);
}
#main { position: relative; }
#main.susulu .view { position: relative; z-index: 1; }
/* Panelin selam şeridi — fotoğrafın tavan bandında yüzen buzlu hap.
Doğrudan fotoğrafın üstüne yazılınca yapışık duruyordu; hap alt çubukla
aynı malzeme olduğu için uygulamaya ait görünüyor. */
.p-selam-yer { text-align: center; }
.p-selam {
display: inline-block; text-align: center; white-space: nowrap;
margin-top: 12px; padding: 10px 22px; border-radius: 999px;
background: var(--panel-cam);
border: 1px solid var(--panel-cizgi);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
0 14px 30px -18px rgba(0, 0, 0, .9);
}
.p-selam b { display: block; font-family: var(--yazi-baslik); font-size: 15px; color: #fff; }
.p-selam i { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px;
color: rgba(255, 255, 255, .62); }
/* Cam yoksa hap yarı saydam kalır ve yazı fotoğrafa karışır: kapatıyoruz. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.p-selam { background: rgba(16, 15, 14, .88); }
}
/* Panelin kısayol ızgarası ---------------------------------------------------
Üç sütun. Her kutu bir yere götürüyor; kırmızı yalnız "Yeni Proje"de. */
/* Panelde zemindeki ofis fotoğrafı hero: ızgara onun altından başlıyor ki
logo duvarı ve raflar görünsün. Fotoğrafsız ekranlarda böyle bir pay yok. */
.kisayol {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
margin-top: 16px;
}
/* Izgara fotoğrafın masa hizasında başlıyor. Sabit bir değer kısa
ekranlarda kartları alt çubuğun altına itiyordu: 552px selamın, ızgaranın
ve çubuk payının kapladığı yer, kalanı boşluğa veriliyor. Uzun ekranda
228'de duruyor, kısaldıkça kendiliğinden yukarı çıkıyor. */
#main.susulu .kisayol { margin-top: clamp(0px, 100vh - 552px, 228px); }
/* Panel kaydırılmıyor: içerik zaten tam sığıyor, kalan tek hareket
parmağı bırakınca gelen esneme oluyordu. */
#main.susulu .view { overflow: hidden; }
/* Kısayol kartı, Standartlar ekranındaki kartın dilinde: karo simge sol
üstte, ok sağ üstte, yazı altta sola hizalı. Malzemesi de aynı — grafit
degrade ve açık çerçeve; panel kartının koyusu yerine bu kullanılıyor ki
uygulama tek bir kart dili konuşsun.
"Uçuyor" hissi üç şeyden: iki katmanlı gölge (yakını zeminden ayırır,
uzağı yüksekliği verir), üstte ışık kenarı, köşeden geçen huzme. */
.kk {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 10px; padding: 14px 12px; border-radius: var(--radius-lg);
text-decoration: none; cursor: pointer;
font-family: var(--yazi-govde); color: var(--ink);
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
border: 1px solid var(--line);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7),
0 22px 40px -22px rgba(0, 0, 0, .95),
inset 0 1px 0 var(--isik);
transition: border-color .16s ease, transform .12s var(--ease), box-shadow .3s var(--ease);
}
.kk:active { transform: scale(.98); }
.kk:hover { border-color: var(--line-parlak); }
.kk-bas { position: relative; display: flex; align-items: center;
justify-content: space-between; width: 100%; }
.kk-dr {
position: relative; display: flex; align-items: center; justify-content: center;
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .10);
color: var(--metal-2);
}
.kk-yz { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* "Örnek Projeler" iki satıra taşıyor; başlığa iki satırlık sabit yer
ayrılıyor ki kartların iç hizası bozulmasın. */
.kk b { display: block; font-family: var(--yazi-baslik); font-weight: 600; font-size: 12.5px;
line-height: 1.34; min-height: calc(1.34em * 2);
color: var(--ink-strong); letter-spacing: -.005em; }
.kk i { display: block; font-style: normal; font-size: 10px; color: var(--ink-dim);
line-height: 1.4; }
/* Ok kartın altındaki ortadan sağ üste taşındı: alttaki yeri açıklama
satırına bıraktı. */
.kk-cv { position: relative; color: var(--ink-dim); display: flex; }
/* Dokunma tepkisi: kart hafifçe çöküyor ve camın üstünden bir ışık geçiyor.
Uygulamanın "cevap verdiği" hissi buradan geliyor; süre kısa ki
art arda dokunuşta birikmesin. */
.kk { overflow: hidden; }
/* Köşeden geçen duran ışık: kartın yüzeyine hacim veriyor, dokunma
huzmesinden ayrı — o geçip gidiyor, bu hep duruyor. */
.kk::before {
content: ""; position: absolute; top: -55%; left: -16%; width: 66%; height: 190%;
background: linear-gradient(101deg, rgba(255, 255, 255, .06), transparent 60%);
pointer-events: none;
}
.kk::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 38%,
rgba(255, 255, 255, .16) 50%, transparent 62%);
transform: translateX(-120%);
opacity: 0;
}
.kk:not(.yakinda):active { transform: scale(.965); }
.kk:not(.yakinda):active::after { animation: kkParla .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
.kk:not(.yakinda):active::after { animation: none; }
}
@keyframes kkParla {
from { transform: translateX(-120%); opacity: 1; }
to { transform: translateX(120%); opacity: 0; }
}
/* Ekranı henüz olmayan kart: görünür ama sönük ve dokunmuyor. */
.kk.yakinda { opacity: .42; cursor: default; }
.kk.yakinda:hover { border-color: var(--line-2); }
.kk.yakinda:active { transform: none; }
/* Izgaranın ana eylemi: kırmızı burada, başka yerde değil. */
.kk.ana {
background: linear-gradient(180deg, rgba(229, 52, 42, .20), rgba(229, 52, 42, .07));
border-color: var(--red-cizgi);
}
/* Alt çubukta zaten kırmızı dolu bir + var; ızgarada ikinci bir kırmızı
daire üst üste binmiş gibi duruyordu. Kutu kırmızıyla işaretli ama
simgesi dolu değil. */
.kk.ana .kk-dr {
background: var(--red-soft); color: var(--red-ink);
box-shadow: inset 0 0 0 1px var(--red-cizgi), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.kk.ana .kk-cv { color: var(--red-ink-soft); }
/* Panel kartları: fotoğrafın üstünde yüzen buzlu cam --------------------------
Yalnız Panel'de. Diğer ekranlarda kartlar katı grafit olarak kalıyor —
orada arkada fotoğraf yok, cam yapmanın anlamı da yok. */
/* Kartlarda `backdrop-filter` YOK — bilerek. Kaydırırken sekiz kartın
arkasını her karede yeniden bulanıklaştırmak takılmanın asıl sebebiydi.
Bulanıklık zaten görselin kendisine pişirildi; kartların yaptığı iş
sadece koyultmak. Görünüş neredeyse aynı, hesap sıfır.
Kartlar ayrıca saydam DEĞİL: yarı saydam kalınca altındaki fotoğrafın
ışığını geçiriyor ve ekran solarken açıktan koyuya kayıyorlardı. */
/* Kısayol kartı bu listeden çıktı: artık Standartlar ekranındaki kartın
malzemesini taşıyor ve panelde de aynı görünüyor — uygulama tek bir kart
dili konuşsun diye. Diğerleri fotoğrafın üstünde koyu kalmaya devam
ediyor, orada okunurluğu taşıyan şey koyuluk. */
#main.susulu .stat,
#main.susulu .proje,
#main.susulu .card {
background: var(--panel-kart);
border: 1px solid var(--panel-cizgi);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
0 20px 44px -24px rgba(0, 0, 0, .98);
}
/* Kartın kendi süsleri camın üstünde çamur yapıyordu: ışık huzmesi ve
proje rengi degradesi bu ekranda kapalı. */
#main.susulu .stat::before,
#main.susulu .proje::before { display: none; }
#main.susulu .stat[class*="k-"] {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
0 0 0 1px rgba(var(--k-renk), .16),
0 18px 40px -22px rgba(0, 0, 0, .95);
}
/* Rozet ve ilerleme rayı fotoğrafın üstünde de okunsun. */
#main.susulu .proje-rozet { box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .8); }
#main.susulu .halka-iz { stroke: rgba(255, 255, 255, .14); }
/* Selamlama fotoğrafın en net yerinde duruyor: yazı gölgesi olmadan
okunmuyordu. */
#main.susulu .selam { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
#main.susulu .selam-alt { color: var(--ink-soft); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
#main.susulu .label { color: var(--ink-soft); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
/* Hesap paneli — üst çubuğun aşağı uzayan parçası.
İçeriği aşağı itmiyor, üstüne biniyor: yalnızca kaydırma, kırpma ve
saydamlık oynuyor. Üçü de ekran kartında yapıldığı için takılma olmuyor. */
.hesap-panel {
position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
padding: 4px 13px 10px;
/* Neredeyse kapalı: arkadaki içerik satırların okunmasını bozmasın. */
background: linear-gradient(180deg,
color-mix(in srgb, var(--bg-ust) 99%, transparent),
color-mix(in srgb, var(--bg-ust) 96%, transparent));
box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .95);
/* Hareket yalnız `transform` ve `opacity` ile — ikisi de ekran kartında
yapılır, hiçbir kare yeniden boyanmaz.
Eskiden üç ayrı özellik, üç ayrı süre ve iki ayrı eğri vardı: içerik
`--yay` ile hedefi aşıp geri gelirken açılan kenarı `clip-path` düz
gidiyordu, ikisi birbirinden ayrılıyordu; saydamlık da yolun yarısında
bitiyordu. Şimdi tek süre, tek eğri.
`clip-path` kalktı: `transform` gibi ekran kartında yapılmıyor, her
karede yeniden boyanıyordu. `backdrop-filter` de kalktı — panelin zemini
zaten %96-99 kapalı, bulanıklaştırdığı şey görünmüyordu bile; ama her
karede arkayı yeniden bulanıklaştırma bedelini ödüyorduk. */
opacity: 0;
transform: translateY(-8px);
/* Kapalıyken tıklamayı yutmasın: artık hep sayfada duruyor. */
visibility: hidden;
transition: opacity .2s var(--ease),
transform .2s var(--ease),
visibility 0s linear .2s;
will-change: transform, opacity;
}
.hesap-panel.acik {
opacity: 1; transform: none; visibility: visible;
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
/* Kırmızı çizgi açıkken panelin dibine iner — çubuk tek parça görünsün. */
#topbar.panel-acik::after { opacity: 0; }
.hesap-panel::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: linear-gradient(90deg, var(--red), rgba(229, 52, 42, .15) 46%, transparent 78%);
opacity: .9;
}
.hp-sat {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 9px 6px; border: 0; border-radius: 12px; background: none;
color: var(--ink); font-size: 13px; text-align: left; cursor: pointer;
}
.hp-ikon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 30px; height: 30px; border-radius: 999px; color: var(--ink-soft);
background: rgba(255, 255, 255, .05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.hp-ikon svg { width: 16px; height: 16px; }
.hp-ad { flex: 1; min-width: 0; }
.hp-deger {
font-size: 10.5px; color: var(--ink-dim);
max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-sat.tehlike-satir .hp-ad { color: var(--red-ink); }
/* Güncelleme denetlenirken kum saati devriliyor ------------------------------
Sürekli fırıl fırıl dönmüyor: gerçek kum saati gibi yarım tur atıp bekliyor.
Kesintisiz dönen bir kum saati bozuk bir bekleme çarkı gibi okunuyor.
Hareket azaltma açıkken animasyon zaten kapanıyor; o yüzden satırın yazısı
da "Denetleniyor…" oluyor — bekleme bilgisi yalnız harekete bırakılmıyor. */
@keyframes kumDevril {
0%, 38% { transform: rotate(0); }
58%, 100% { transform: rotate(180deg); }
}
.hp-sat.deneniyor .hp-ikon svg,
.btn.deneniyor .kum-don svg {
transform-origin: 50% 50%;
animation: kumDevril 1.25s var(--ease) infinite;
}
.hp-sat.deneniyor .hp-ikon { color: var(--st-dev-t); }
.btn.deneniyor .kum-don { display: inline-flex; color: var(--st-dev-t); }
.btn.deneniyor { color: var(--ink-soft); opacity: 1; }
/* Satır arası ince ayraç — kart hissi vermeden ayırıyor. */
.hp-sat + .hp-sat { border-top: 1px solid var(--line-3); border-radius: 0; }
/* Standart grupları -------------------------------------------------------- */
/* Sağa yaslı tek "yeni …" bağlantısı — sektör, şablon, ekip ekranlarında. */
.standart-arac { display: flex; justify-content: flex-end; margin-bottom: 12px; }
/* Standart ekleme akışının iki kartı: promptu al, cevabı yapıştır.
Tek satırda iki sütun — bu ekranın asıl işi bu. Ortadaki dar şerit
bağlantı çizgisini taşıyor, telefonda da bölünmüyorlar: kartlar
döşeme olduğu için dar sütuna sığıyor. */
.std-arac {
display: grid; grid-template-columns: 1fr 20px 1fr; align-items: stretch;
margin-bottom: 14px;
}
.sa-bag { position: relative; display: flex; align-items: center; justify-content: center; }
.sa-bag i {
display: block; width: 100%; height: 1px;
background: linear-gradient(90deg, var(--line), var(--line-3));
transition: background .3s var(--ease);
}
.sa-bag em {
position: absolute; display: flex; color: var(--ink-dim);
transition: color .3s var(--ease), transform .35s var(--yay);
}
.std-arac.adim2 .sa-bag i { background: linear-gradient(90deg, var(--st-done), var(--red)); }
.std-arac.adim2 .sa-bag em { color: var(--red-ink); transform: translateX(2px); }
/* Döşeme kart. "Uçuyor" hissi üç şeyden: iki katmanlı gölge (yakını
zeminden ayırır, uzağı yüksekliği verir), üstte ışık kenarı, köşeden
geçen huzme. Dokununca hafifçe çöküyor. */
.sa-kart {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 10px; padding: 14px 13px 15px; border-radius: var(--radius-lg);
border: 1px solid var(--line); cursor: pointer; overflow: hidden;
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
color: var(--ink); font-family: inherit; text-align: left;
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7),
0 22px 40px -22px rgba(0, 0, 0, .95),
inset 0 1px 0 var(--isik);
transition: transform .3s var(--yay), box-shadow .3s var(--ease),
background .28s var(--ease), border-color .28s var(--ease), opacity .28s var(--ease);
}
.sa-kart:active { transform: translateY(-1px) scale(.985); transition-duration: .1s; }
.sa-kart:focus-visible { outline: 2px solid var(--metal-1); outline-offset: 2px; }
.sa-kart::before {
content: ''; position: absolute; top: -55%; left: -16%; width: 66%; height: 190%;
background: linear-gradient(101deg, rgba(255, 255, 255, .06), transparent 60%);
pointer-events: none;
}
.sa-ust { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sa-ikon {
position: relative; display: flex; align-items: center; justify-content: center;
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .10);
color: var(--ink-soft);
transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
/* Birinci kartın karosunda iki simge üst üste: kopya ve tik. Yalnız burada
iki tane var, o yüzden kural `.ana` altında — ikinci kartta tek simge
`:last-child` olurdu ve gizlenirdi. */
.sa-kart.ana .sa-ikon svg:not(:only-child) { position: absolute; transition: opacity .2s var(--ease), transform .3s var(--yay); }
.sa-kart.ana .sa-ikon svg:nth-child(2) { opacity: 0; transform: scale(.4) rotate(-25deg); }
.sa-adim {
display: flex; align-items: center; justify-content: center;
width: 19px; height: 19px; border-radius: 999px;
font-family: var(--yazi-kod); font-size: 10px; color: var(--ink-dim);
background: var(--yuva-2); box-shadow: inset 0 0 0 1px var(--line-3);
transition: color .28s var(--ease), box-shadow .28s var(--ease);
}
.sa-yazi { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* Başlığa iki satırlık sabit yer: "Standart ekleme promptu" iki satıra
sürerken "Kuralı yapıştır" bir satırda kalıyor ve iç hizalar kayıyordu.
Punto 12.5'e indi — 13.5'te "Standart ekleme" dar sütuna sığmıyor ve
başlık üç satıra taşıp ayrılan yeri aşıyordu. */
.sa-ad {
font-family: var(--yazi-baslik); font-weight: 600; font-size: 12.5px;
line-height: 1.34; min-height: calc(1.34em * 2);
color: var(--ink-strong); letter-spacing: -.005em;
}
.sa-alt { font-size: 11px; line-height: 1.45; color: var(--ink-dim); transition: color .28s var(--ease); }
/* Ana eylem. Kırmızı yalnız simge karosunda: kartın tamamı kırmızı olsaydı
alt çubuktaki + ile ekranda ikinci bir kırmızı blok olurdu. */
.sa-kart.ana .sa-ikon {
background: linear-gradient(180deg, var(--red-acik), var(--red));
color: #fff;
box-shadow: 0 8px 18px -8px rgba(229, 52, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* Kopyalandı: kırmızı söner, yeşile döner, tik çıkar. */
.sa-kart.kopyalandi { border-color: rgba(69, 163, 123, .34); }
.sa-kart.kopyalandi .sa-ikon {
background: linear-gradient(180deg, var(--st-done-t), var(--st-done));
color: #0f1a15;
box-shadow: 0 8px 18px -8px rgba(69, 163, 123, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sa-kart.kopyalandi .sa-ikon svg:first-child:not(:only-child) { opacity: 0; transform: scale(.4); }
.sa-kart.kopyalandi .sa-ikon svg:nth-child(2) { opacity: 1; transform: none; }
.sa-kart.kopyalandi .sa-alt { color: var(--st-done-t); }
.sa-kart.kopyalandi .sa-adim { color: var(--st-done-t); box-shadow: inset 0 0 0 1px rgba(69, 163, 123, .4); }
/* İkinci kart sırasını bekliyor, prompt kopyalanınca kırmızıyı devralıyor. */
.sa-kart.bekliyor { opacity: .5; }
.sa-kart.bekliyor .sa-ikon { background: linear-gradient(180deg, var(--surface-2), var(--yuva)); }
.sa-kart.sirada { border-color: rgba(229, 52, 42, .30); }
.sa-kart.sirada .sa-ikon {
background: linear-gradient(180deg, var(--red-acik), var(--red));
color: #fff;
box-shadow: 0 8px 18px -8px rgba(229, 52, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* Grup simgeleri: sekiz grubun her biri kendi rengi ---------------------------
Hepsi aynı katman simgesi ve aynı gri karo olunca kartlar birbirinden
ayırt edilemiyordu; göz listeyi baştan okumak zorunda kalıyordu.
Renk yalnız KAROda: kart, yazı ve çerçeve grafit kalıyor. Doygunluk düşük
tutuldu — sekiz canlı renk yan yana gelince ekran şeker kutusuna dönüyor.
Kırmızı listede yok; o hâlâ logoya, ana eyleme, aktif sekmeye ve "Acil"e ait.
Tanınmayan bir grup adı doğarsa metal kalır: renk uydurmuyoruz. */
.gr-altyapi { --gr: #7d93b8; } /* çelik mavisi */
.gr-veri { --gr: #3fa694; } /* teal */
.gr-guvenlik { --gr: #c8973f; } /* altın */
.gr-tasarim { --gr: #9b7fd4; } /* mor */
.gr-animasyon { --gr: #4fa8c9; } /* camgöbeği */
.gr-optimizasyon { --gr: #8fae4a; } /* zeytin */
.gr-bicim { --gr: #b8926b; } /* kum */
.gr-erisim { --gr: #5f93d6; } /* gök */
/* Yedek renk `var()` çağrısının İÇİNDE duruyor, ayrı bir `--gr` bildirimi
olarak değil: bu kural `.gr-*`ten daha seçici olduğu için orada bildirilen
yedek grup rengini eziyor ve sekiz grup da gri kalıyordu. */
.modul-ikon.grup-ikon {
background: linear-gradient(180deg,
color-mix(in srgb, var(--gr, var(--ink-faint)) 22%, transparent),
color-mix(in srgb, var(--gr, var(--ink-faint)) 9%, transparent));
border: 1px solid color-mix(in srgb, var(--gr, var(--ink-faint)) 32%, transparent);
color: var(--gr, var(--ink-faint));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* Grup açılınca içerideki kuralların karoları da aynı renge geçiyor, ama
çok daha sönük: hangi grubun içinde olduğun kaybolmasın, listeyi de
renk basmasın. */
.grup-govde .modul-ikon {
background: color-mix(in srgb, var(--gr, var(--ink-faint)) 13%, transparent);
border: 1px solid color-mix(in srgb, var(--gr, var(--ink-faint)) 20%, transparent);
color: color-mix(in srgb, var(--gr, var(--ink-faint)) 78%, var(--ink-soft));
}
/* Cam desteklenmeyen eski tarayıcıda color-mix de yok: karo düz gri kalır,
simge yine kendi rengini taşır. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
.modul-ikon.grup-ikon,
.grup-govde .modul-ikon { background: var(--surface-3); border-color: var(--line); }
}
/* Grubun içindeki alan başlığı. Ayrı bir açılır katman değil, çizgi:
üç kademe açıp kapamak telefonda yoruyor. */
.std-alan + .std-alan { margin-top: 14px; }
.std-alan-bas {
display: flex; align-items: baseline; gap: 8px;
margin: 10px 2px 2px; font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-faint);
}
.std-alan-bas::after {
content: ''; flex: 1; height: 1px; background: var(--line-3);
}
.std-alan-bas em {
order: 3; font-style: normal; font-family: var(--yazi-kod);
font-size: 10px; color: var(--ink-faint);
}
/* Sunucusuz projede geçerli karşılık — kuralın altında, sönük. */
.standart-tarif.yerel { margin-top: 9px; color: var(--ink-soft); font-size: 12.5px; }
.standart-tarif.yerel b { color: var(--ink); }
.note.uyari svg { color: var(--st-dev); }
.row-val.uyari-yazi { color: var(--st-dev); }
.standart-grup .grup-govde { padding: 4px 10px 10px; border-top: 1px solid var(--line-3); }
.standart-grup .grup-govde .standart { margin: 8px 0 0; background: var(--surface-2); }
.standart-grup .grup-govde .standart:first-child { margin-top: 8px; }
/* Pencerelerdeki grup başlığı (görev açarken, standart seçerken) */
.grup-etiket {
display: block; margin: 12px 0 6px;
font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: var(--ink-faint);
}
.field > .grup-etiket:first-of-type { margin-top: 6px; }
/* ==========================================================================
MOBİL
========================================================================== */
.only-mobile { display: none; }
/* Masaüstünde yan menüde zaten logo var; üstte ikincisi gereksiz. */
@media (min-width: 901px) {
#topbar .logo-kutu { display: none; }}
@media (max-width: 900px) {
#sidebar { display: none; }
.only-desktop { display: none !important; }
#app { flex-direction: column; position: relative; }
#main { flex: 1; min-height: 0; }
#topbar {
height: auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 13px 11px;
gap: 9px;
}
#topbar .btn span { display: none; }
#topbar .btn { width: 44px; height: 44px; padding: 0; }
/* Alt pay çubuk kadar: içerik cam çubuğun altından akıp geçsin. */
.view { --yan: 16px; --ust: 16px; padding: var(--ust) var(--yan) 96px; }
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-num { font-size: 26px; }
.proje-grid { grid-template-columns: 1fr; }
.ozet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modul-bar { width: 70px; }
.modul-pct { display: none; }
.modul-alt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modul-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kullanim { display: none; }
.gorev, .gorev-ekle, .gorev-bos { padding-left: 46px; }
.sayfa { padding-left: 38px; }
.sayfa-chev { margin-left: -17px; }
.gorev-no { display: none; }
.gk-meta { grid-template-columns: 1fr; }
.standart-govde { padding-left: 16px; }
/* Grup içinde kart daralıyor; kullanım yazısı özete yer bırakmıyordu. */
.standart-grup .kullanim { display: none; }
.kod { font-size: 11px; max-height: 40vh; }
.proje-arac .btn { flex: 1; min-width: 0; }
.serit .st { font-size: 9.5px; padding: 8px 2px; }
.modal-perde { align-items: flex-end; padding: 0; }
.modal-kutu {
max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
max-height: 92vh;
}
#topbar .btn[id="topbar-action"] span { display: none; }
/* Görünürlük ve akış. Renk, kenarlık ve boşluklar aşağıdaki tek yerde tanımlı —
burada tekrar yazılırsa oradaki ayarı ezer. */
}
@media (max-width: 900px) {
.parlama { display: none; }
@media (hover: hover) {
.tilt:hover { transform: none; }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.tilt { transform: none !important; }
.sa-kart:hover, .kova:hover { transform: none !important; }
.geri-ok:active, .proje-bilgi:active { transform: none !important; }}
/* ==========================================================================
ALT SEKME ÇUBUĞU — yüzen cam hap
Ekranın dibine yapışmaz; kenarlardan boşluk bırakıp havada durur.
Simgeler kendi kutusunda değil: kap camın kendisi.
========================================================================== */
@media (max-width: 900px) {
#tabbar {
display: flex; align-items: center;
position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
margin: 0 14px 14px;
padding: 6px; border-radius: 26px;
background: var(--panel-cam);
backdrop-filter: blur(34px) saturate(190%);
-webkit-backdrop-filter: blur(34px) saturate(190%);
/* Üstte ışık kırılması, altta gölge, çevrede ince cam kenar. */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .35),
0 0 0 1px var(--panel-cizgi),
0 22px 44px -20px rgba(0, 0, 0, .95);
box-sizing: border-box;
}
/* Cam desteklenmiyorsa düz zemin — okunaklılık bozulmasın. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
#tabbar { background: var(--surface-2); }
}
/* Alt çubuk yüzüyor: içerik her hâlükârda altında kalmasın. Bu pay eskiden
yalnız uygulama kipinde veriliyordu; tarayıcı sekmesinde son kart çubuğun
arkasına giriyordu. */
.view { padding-bottom: 96px; }
/* Uygulama kipinde ana ekran çizgisinin payı da eklenir. */
@media (display-mode: standalone) {
#tabbar { margin-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 8px)); }
.view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
html.uygulama #tabbar { margin-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 8px)); }
html.uygulama .view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.tab {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; flex: 1; position: relative;
padding: 8px 0; border-radius: 20px;
color: var(--ink-dim); font-size: 10px;
}
.tab span { line-height: 1; white-space: nowrap; position: relative; z-index: 2; }
.tab svg { width: 23px; height: 23px; position: relative; z-index: 2; }
/* Aktif sekmenin arkasında cam kabarcık. */
.tab::before {
content: ''; position: absolute; inset: 2px; border-radius: 19px; z-index: 1;
background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 6px 14px -8px rgba(0, 0, 0, .9);
opacity: 0; transform: scale(.88);
transition: opacity .2s ease, transform .32s var(--yay);
}
.tab.active::before { opacity: 1; transform: none; }
.tab.active, .tab.active span { color: #fff; }
.tab.active span { font-weight: 600; }
.tab.active svg { stroke: var(--red-acik); }
.tab.active .dolgu > * { fill: var(--red-acik); fill-opacity: .30; }
/* Ortadaki artı hapın içinde, kendi ışığıyla ayrışıyor. */
.tab-arti { flex: 0 0 62px; display: flex; justify-content: center; align-items: center; }
.arti-btn {
width: 48px; height: 48px; border-radius: 999px; border: 0; padding: 0;
display: flex; align-items: center; justify-content: center; cursor: pointer;
background: linear-gradient(160deg, var(--red-acik), var(--red-koyu));
box-shadow: 0 8px 20px -6px rgba(229, 52, 42, .9),
inset 0 1px 0 rgba(255, 255, 255, .35);
transition: transform .16s var(--yay);
}
.arti-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.arti-btn:active { transform: scale(.92); }
.arti-btn.hidden { display: none; }
.tab-arti:has(.arti-btn.hidden) { flex: 0 0 0; }
}
/* ==========================================================================
VURGU (HOVER) — YALNIZCA FARE VARSA
Dokunmatikte imleç yok; parmakla basınca hover kuralı tetiklenip
ekranda takılı kalıyordu. Hepsi tek yerde toplandı.
========================================================================== */
/* ==========================================================================
ARAYÜZ BİÇİMİ — görselli seçim rafları (Tasarımı belirleme durağı)
Her seçenek yazı değil, küçük bir gerçek çizim. Rafla yana kayar.
========================================================================== */
.raf-alt { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; margin: -5px 0 10px; }
.coklu-not {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
background: var(--yuva); border: 1px solid var(--line-3);
font-size: 9.5px; font-weight: 600; letter-spacing: .3px; color: var(--ink-faint);
}
/* Seçenekler ızgara: yatay raf üç seçenekten sonra sağa taşıyor ve
kaydırılabildiği görünmüyordu. Sığmayan satırlar aşağı sarıyor, taşan
kısım rafın kendi içinde kayıyor (bkz. .akis-alt > .raf). */
.raf {
display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px; padding: 4px 0 2px;
scrollbar-width: none;
}
.raf::-webkit-scrollbar { display: none; }
/* Kart dili sayfanın geri kalanıyla ortak: aynı degrade, aynı gölge,
seçilen yeşil — biten kare kartlarla aynı işaret. */
.bsc {
position: relative; overflow: hidden; min-width: 0;
display: flex; flex-direction: column; gap: 8px;
padding: 9px 8px 10px;
border: 1px solid var(--line); border-radius: 12px;
text-align: left; font-family: inherit; color: inherit; cursor: pointer;
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7), inset 0 1px 0 var(--isik);
transition: border-color .16s var(--ease), transform .16s var(--yay);
}
.bsc::before {
content: ""; position: absolute; top: -60%; left: -16%; width: 58%; height: 200%;
background: linear-gradient(101deg, rgba(255, 255, 255, .05), transparent 60%);
pointer-events: none;
}
.bsc:not(:disabled):active { transform: scale(.96); }
.bsc:disabled { cursor: default; opacity: .75; }
/* Sıfırla — seçenek değil eylem, o yüzden kesik çerçeve ve tik rozeti yok. */
.bsc.sifir {
background: transparent; box-shadow: none;
border-style: dashed; border-color: var(--line-2);
}
.bsc.sifir::before { display: none; }
.bsc.sifir .bon { background: transparent; box-shadow: none; }
.bsc.sifir:disabled { opacity: .34; }
.on-sifir { flex: 1; display: grid; place-items: center; color: var(--ink-faint); }
.bsc.sifir:not(:disabled) .on-sifir { color: var(--ink-soft); }
.bsc-ad {
position: relative; display: block;
font-family: var(--yazi-baslik); font-weight: 600; font-size: 11.5px;
line-height: 1.25; color: var(--ink-soft);
}
.bsc.on { border-color: rgba(69, 163, 123, .42); }
.bsc.on .bsc-ad { color: var(--st-done-t); }
.bsc.on::after {
content: ""; position: absolute; top: 6px; right: 6px;
width: 17px; height: 17px; border-radius: 50%;
background: linear-gradient(180deg, var(--st-done-t), var(--st-done));
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px; background-repeat: no-repeat; background-position: center;
}
/* --------------------------------------------------------------------------
Görsel dünya — blokla ilerleyen
ChatGPT'ye altı ekranı tek promptta çizdirmek dağıtıyordu. Her adım artık
tek iş ve her adım bir JSON bloğuyla bitiyor. Studio bloğu geri çiziyor:
kullanıcı ChatGPT'nin resmiyle yan yana koyup uyuşup uyuşmadığına bakıyor.
-------------------------------------------------------------------------- */
/* Görsel dil kartı — bloktan çizilmiş. Renkler gerçek hex'leriyle. */
.dil {
border: 1px solid var(--line-2); border-radius: 14px;
background: var(--yuva-2); padding: 12px; margin-top: 10px;
}
.dil-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dil-bas b { flex: 1; font-family: var(--yazi-baslik); font-size: 13px; color: var(--ink-strong); }
.dil-rz {
padding: 3px 8px; border-radius: 999px;
font-family: var(--yazi-kod); font-size: 8.5px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--st-done-t); background: rgba(69, 163, 123, .14);
}
.dil-pl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 11px; }
.dil-pl figure { margin: 0; min-width: 0; }
.dil-pl i {
display: block; height: 34px; border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.dil-pl figcaption {
display: block; margin-top: 4px; text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--yazi-kod); font-size: 7.5px; color: var(--ink-dim);
}
.dil-sat {
display: flex; gap: 8px; align-items: baseline;
padding: 6px 0; border-top: 1px solid var(--line-3); font-size: 11.5px;
}
.dil-sat b { flex: 0 0 68px; font-weight: 500; color: var(--ink-faint); }
.dil-sat span { flex: 1; min-width: 0; color: var(--ink-soft); }
.dil-sat u { text-decoration: none; font-family: var(--yazi-kod); font-size: 10.5px; color: var(--ink-faint); }
/* Dilin kendi rengiyle boyanmış küçük örnek: sayılar somutlaşsın. */
.dil-orn { display: flex; gap: 7px; align-items: center; margin-top: 10px; }
.dil-orn em {
flex: 0 0 auto; font-style: normal; padding: 7px 12px;
font-size: 11.5px; font-weight: 600; color: #fff;
background: var(--v); border-radius: var(--k);
}
.dil-orn u {
flex: 1; height: 32px; text-decoration: none;
border-radius: var(--k); background: var(--z);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
/* "İkisi uyuşuyor mu?" — karar sorusu, uyarı değil: amber. */
.soru {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px 11px; margin-bottom: 10px; border-radius: 11px;
border: 1px solid rgba(216, 166, 63, .26); background: rgba(216, 166, 63, .08);
}
.soru svg { flex: 0 0 auto; color: var(--st-dev-t); margin-top: 1px; }
.soru span { font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.soru b { color: var(--st-dev-t); font-weight: 600; }
/* Bilginin nereden geldiğini söyleyen satır — Claude mavisi. */
.kaynak {
display: flex; gap: 8px; align-items: flex-start;
padding: 9px 10px; margin-bottom: 10px; border-radius: 11px;
border: 1px solid rgba(107, 147, 232, .22); background: rgba(107, 147, 232, .07);
}
.kaynak svg { flex: 0 0 auto; color: var(--st-check-t); margin-top: 1px; }
.kaynak span { font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.kaynak b { color: var(--st-check-t); font-weight: 600; }
/* Çizim hatası kutusu — telefonda konsol yok, hata ekranda yazıyor. */
.hata-iz { margin: 10px 0; }
.hata-iz b {
display: block; margin-bottom: 6px;
font-family: var(--yazi-kod); font-size: 10px;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.hata-iz pre {
margin: 0 0 6px; padding: 10px 11px; border-radius: 10px;
border: 1px solid var(--line-3); background: var(--kod-bg);
font: 11.5px/1.5 var(--yazi-kod); color: var(--red-ink);
white-space: pre-wrap; word-break: break-word;
}
.hata-iz pre.soluk { color: var(--ink-dim); font-size: 10.5px; }
/* --------------------------------------------------------------------------
Veritabanı kurulumu
Bağlantı kurulum adımında toplanıyor, SQL'i kullanıcı çalıştırıyor.
Adım listesi "nasıl yapılır" penceresinde.
-------------------------------------------------------------------------- */
/* Veri katmanı Supabase değilken bağlantı alanları görünmez. */
.fbd-ayrac.gizli { display: none; }
.adm-l { margin-bottom: 12px; }
.adm {
display: flex; gap: 11px; align-items: flex-start;
padding: 11px 0; border-top: 1px solid var(--line-3);
}
.adm:first-child { border-top: 0; padding-top: 2px; }
.adm b {
flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center; margin-top: 1px;
font-family: var(--yazi-kod); font-size: 10px; font-weight: 400;
background: var(--surface-2); color: var(--ink-dim);
}
.adm span { flex: 1; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.adm span b { display: inline; width: auto; height: auto; background: none;
border-radius: 0; color: var(--ink-strong); font-weight: 600;
font-family: inherit; font-size: inherit; margin: 0; }
.adm span b.mono { font-family: var(--yazi-kod); font-size: 11.5px; }
/* --------------------------------------------------------------------------
Claude'un soruları
Künyede yazmayan ama kod yazılırken karar gerektiren şeyler. Bir kez
soruluyor, bir kez cevaplanıyor; cevap her bloğa giriyor. Cevaplanan satır
yeşile dönüyor ve cevabı altında duruyor — geri dönüp bakabilesin.
-------------------------------------------------------------------------- */
.cs {
display: flex; align-items: flex-start; gap: 11px; width: 100%;
padding: 12px 13px; margin-bottom: 8px; text-align: left;
border: 1px solid var(--line-2); border-radius: 13px;
background: var(--yuva-2); font-family: inherit; color: inherit; cursor: pointer;
}
.cs.bitti { border-color: rgba(69, 163, 123, .30); }
.cs-no {
flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; margin-top: 1px;
font-family: var(--yazi-kod); font-size: 10.5px;
background: var(--surface-2); color: var(--ink-dim);
}
.cs.bitti .cs-no { background: var(--st-done); color: #0d1a14; }
.cs-yz { flex: 1; min-width: 0; }
.cs-yz b {
display: block; font-family: var(--yazi-baslik); font-weight: 600;
font-size: 13px; line-height: 1.35; color: var(--ink-strong);
}
.cs-yz i {
display: block; margin-top: 3px; font-style: normal;
font-size: 11px; line-height: 1.45; color: var(--ink-dim);
}
.cs-yz u {
display: block; margin-top: 7px; padding: 6px 9px; text-decoration: none;
border-radius: 9px; background: rgba(69, 163, 123, .10);
box-shadow: inset 0 0 0 1px rgba(69, 163, 123, .22);
font-size: 11.5px; line-height: 1.45; color: var(--st-done-t);
}
.cs-ok { flex: 0 0 auto; margin-top: 3px; color: var(--ink-dim); display: flex; }
/* Pencerede sorunun kendisi — başlıktan büyük, cevaplanacak cümle o. */
.cs-soru {
margin: 0 0 12px; font-family: var(--yazi-baslik); font-weight: 600;
font-size: 15px; line-height: 1.4; color: var(--ink-strong);
}
/* Bileşenler ve iskeletler — kartın alt yarısı. Her satır tek cümle;
kodun asıl işi bunlar. */
.dil-et {
display: block; margin: 13px 0 6px;
font-family: var(--yazi-kod); font-size: 8.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.dil-p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.dil-bl { display: flex; flex-direction: column; gap: 5px; }
.dil-b {
padding: 8px 10px; border-radius: 10px;
border: 1px solid var(--line-3); background: var(--yuva);
}
.dil-b b {
display: block; margin-bottom: 2px;
font-family: var(--yazi-baslik); font-size: 11.5px; color: var(--ink-strong);
}
.dil-b span { font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
/* Görsel dünya iki adıma indi: ızgara iki sütun. */
.ya-satir.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* --------------------------------------------------------------------------
İhtiyaç çözümlemesi
Claude'un çıktısı üç yerde görünüyor: adanın özet kartı, kararlar listesi
ve bir sayfanın tasarım notu. Üçü de mavi rozetli — bu bilgi Studio'nun
değil, Claude'un. Kırmızıya dokunmuyor: kırmızı dört yere ayrılmış.
-------------------------------------------------------------------------- */
.coz {
border: 1px solid var(--line-2); border-radius: 14px;
padding: 12px; margin-bottom: 9px; background: var(--yuva-2);
}
.coz-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.coz-bas b { flex: 1; font-family: var(--yazi-baslik); font-size: 13px; color: var(--ink-strong); }
.coz-rz {
padding: 3px 8px; border-radius: 999px;
font-family: var(--yazi-kod); font-size: 8.5px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--st-check-t); background: rgba(107, 147, 232, .14);
}
.coz-sat {
display: flex; align-items: baseline; gap: 8px;
padding: 7px 0; border-top: 1px solid var(--line-3);
}
.coz-sat span { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft); }
.coz-sat u {
text-decoration: none; flex: 0 0 auto;
font-size: 11px; font-weight: 600; color: var(--st-done-t);
}
.coz-sat u.yok { color: var(--ink-dim); }
.coz-sat u.yeni { color: var(--st-check-t); }
.coz-not { margin: 2px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-dim); }
/* Bir sayfanın tasarım notu */
.tn {
border: 1px solid var(--line-2); border-radius: 14px;
padding: 12px; margin-bottom: 9px; background: var(--yuva-2);
}
.tn-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tn-bas b { flex: 1; font-family: var(--yazi-baslik); font-size: 13px; color: var(--ink-strong); }
.tn-rz {
padding: 3px 8px; border-radius: 999px;
font-family: var(--yazi-kod); font-size: 8.5px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--st-check-t); background: rgba(107, 147, 232, .14);
}
.tn p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.tn-et {
display: block; margin: 11px 0 5px;
font-family: var(--yazi-kod); font-size: 8.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.tn-cip { display: flex; flex-wrap: wrap; gap: 5px; }
.tn-cip span {
padding: 4px 9px; border-radius: 999px;
border: 1px solid var(--line-2); background: var(--yuva);
font-size: 10.5px; color: var(--ink-soft);
}
.tn-g {
display: flex; gap: 9px; align-items: flex-start;
padding: 9px 10px; margin-top: 5px; border-radius: 11px;
border: 1px solid rgba(107, 147, 232, .22); background: rgba(107, 147, 232, .07);
}
.tn-g svg { flex: 0 0 auto; color: var(--st-check-t); margin-top: 2px; }
.tn-g b { display: block; font-size: 11px; font-weight: 600; color: var(--st-check-t); margin-bottom: 2px; }
.tn-g i { font-style: normal; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
/* Seçenek kartındaki öneri rozeti ve altındaki gerekçe. Yeşil tik "seçildi"
demek; mavi rozet "Claude bunu öneriyor" — ikisi karışmasın. */
.bsc.oner { border-color: rgba(107, 147, 232, .45); }
.bsc-rz {
position: absolute; top: 6px; right: 6px; z-index: 1;
padding: 2px 6px; border-radius: 999px;
font-family: var(--yazi-kod); font-size: 7.5px;
letter-spacing: .09em; text-transform: uppercase;
color: var(--st-check-t); background: rgba(107, 147, 232, .18);
box-shadow: inset 0 0 0 1px rgba(107, 147, 232, .3);
}
.oner-not {
display: flex; gap: 7px; align-items: flex-start;
margin: 9px 0 0; padding: 9px 10px; border-radius: 11px;
border: 1px solid rgba(107, 147, 232, .22); background: rgba(107, 147, 232, .07);
}
.oner-not svg { flex: 0 0 auto; color: var(--st-check-t); margin-top: 1px; }
.oner-not span { font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.oner-not b { color: var(--st-check-t); font-weight: 600; }
/* Claude'un açtığı başlığın çizimi yok — üç şerit, seçeneğin adı konuşsun. */
.on-serbest {
flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;
padding: 0 4px;
}
.on-serbest i { display: block; height: 5px; border-radius: 3px; background: var(--line-parlak); }
.on-serbest i:nth-child(1) { width: 100%; }
.on-serbest i:nth-child(2) { width: 72%; background: var(--metal-1); }
.on-serbest i:nth-child(3) { width: 48%; }
/* Önizleme gövdesi — tüm çizimler bunun içinde yaşar. */
.bon {
position: relative;
display: flex; height: 58px; border-radius: 8px; overflow: hidden;
background: var(--yuva-2); padding: 8px;
box-shadow: inset 0 0 0 1px var(--line-3);
}
.bon .ln { display: block; height: 5px; border-radius: 3px; background: var(--line-parlak); }
.bon .ln.b { background: var(--metal-1); }
.bon .ln.k { width: 52%; } .bon .ln.o { width: 78%; } .bon .ln.u { width: 100%; }
/* Yüzey ------------------------------------------------------------------- */
.on-kart {
flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;
padding: 8px; border-radius: 8px;
}
.k-duz { background: var(--surface); }
.k-yuksek { background: var(--surface-2);
box-shadow: 0 9px 14px -6px #000, 0 1px 0 rgba(255, 255, 255, .10) inset; }
.k-cizgi { background: transparent; border: 1px solid var(--line-parlak); }
.k-cam { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
backdrop-filter: blur(6px); }
.k-serit { background: var(--surface); border-left: 3px solid var(--p1, var(--metal-2)); }
.k-kagit { background: var(--surface); border-radius: 3px; box-shadow: 3px 3px 0 var(--yuva); }
.k-oyuk { background: var(--yuva); box-shadow: 0 2px 5px rgba(0, 0, 0, .55) inset,
0 -1px 0 rgba(255, 255, 255, .07) inset; }
.k-isik { background: var(--surface); border: 1px solid var(--p1, var(--metal-2));
box-shadow: 0 0 12px -3px var(--p1, var(--metal-2)); }
.k-degrade{ background: linear-gradient(180deg, var(--surface-3), var(--yuva)); }
.k-doku { background: var(--surface);
background-image: repeating-linear-gradient(45deg,
rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px); }
.bsc:has(.k-cam) .bon { background: linear-gradient(135deg, var(--surface-3), var(--yuva-2)); }
/* Köşe -------------------------------------------------------------------- */
.on-kose { flex: 1; background: var(--surface-3);
box-shadow: inset 0 0 0 1px var(--line-parlak); }
/* Yoğunluk ---------------------------------------------------------------- */
.on-yog { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.on-yog i { display: block; height: 8px; border-radius: 3px; background: var(--surface); }
.on-yog em { display: flex; flex-direction: column; }
.on-yog.karma em:last-child i { height: 11px; }
.on-kd { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.on-kd i { display: block; height: 14px; border-radius: 6px; background: var(--surface);
padding: 4px 5px; }
.on-kd u { display: block; height: 4px; width: 60%; border-radius: 2px;
background: var(--line-parlak); }
/* Tablo ------------------------------------------------------------------- */
.bsc:has(.on-tb) .bon { padding: 0; }
.on-tb { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.on-tb u { display: flex; align-items: center; text-decoration: none; }
.on-tb .h { height: 13px; background: var(--surface-3); }
.on-tb .r { height: 12px; }
.on-tb i { flex: 1; height: 4px; margin: 0 5px; border-radius: 2px; background: var(--line-parlak); }
.on-tb .h i { background: var(--metal-1); }
.on-tb i.dar { flex: 0 0 14px; background: var(--line-2); }
.on-tb.tasan u { width: 150%; flex: 0 0 auto; }
.t-zebra .r:nth-child(odd) { background: rgba(255, 255, 255, .085); }
.t-yatay .r, .t-izgara .r { border-top: 1px solid var(--line-parlak); }
.t-izgara i + i { box-shadow: -5px 0 0 -4px var(--line-parlak); }
.on-tb.kartli { gap: 5px; padding: 8px 7px; justify-content: center; }
.on-tb.kartli .r { height: 11px; border-radius: 4px; background: var(--surface); }
.on-tb.gruplu .g { height: 10px; padding: 0 5px; }
.on-tb.gruplu .g i { flex: 0 0 26px; height: 3px; background: var(--metal-1); margin: 0; }
.on-tb.gruplu .r { height: 10px; }
.on-tb i.rakam { flex: 0 0 20px; background: var(--metal-2); opacity: .55; }
.on-tb .h i.rakam { opacity: 1; }
.on-tb.vurgulu i.ilk { background: var(--metal-2); opacity: .8;
box-shadow: 6px 0 0 -5px var(--line-parlak); }
/* Tablo · telefonda — aç-kapa, iki satır, tam ekran */
.on-ak { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.on-ak i { display: block; height: 8px; border-radius: 3px; background: var(--surface); }
.on-ak u { display: block; height: 16px; border-radius: 4px; background: var(--surface-3);
border-left: 2px solid var(--metal-1); }
.on-is { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.on-is em { display: flex; flex-direction: column; gap: 3px; }
.on-is i { display: block; height: 5px; width: 70%; border-radius: 2px; background: var(--metal-1); }
.on-is b { display: block; height: 3px; width: 45%; border-radius: 2px; background: var(--line-2); }
.on-te { flex: 1; display: flex; align-items: center; gap: 4px; }
.on-te i { flex: 0 0 6px; align-self: stretch; margin: 6px 0; border-radius: 3px;
background: var(--yuva); }
.on-te u { flex: 1; align-self: stretch; border-radius: 6px; background: var(--surface); }
/* Tablo · telefonda — karta dönüş */
.on-mk { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.on-mk i { display: block; height: 11px; border-radius: 5px; background: var(--surface); }
/* Düğme ------------------------------------------------------------------- */
.on-dg { flex: 1; display: grid; place-items: center; }
.on-dg em {
font-style: normal; font-family: var(--yazi-baslik); font-weight: 600;
font-size: 9px; padding: 5px 14px; white-space: nowrap;
}
.d-dolu { background: var(--red); color: #fff; border-radius: 8px; }
.d-cizgi { border: 1px solid var(--red); color: var(--red-ink); border-radius: 8px; }
.d-yumusak { background: var(--red-soft); color: var(--red-ink-soft); border-radius: 999px; }
.d-golge { background: var(--red); color: #fff; border-radius: 8px;
box-shadow: 0 6px 12px -4px var(--red); }
.d-degrade { background: linear-gradient(135deg, var(--red-parlak), var(--red-koyu));
color: #fff; border-radius: 8px; }
.d-yazi { color: var(--red-ink); padding: 5px 6px; }
.d-dolu.ikonlu { display: inline-flex; align-items: center; gap: 6px; }
.d-dolu.ikonlu svg { width: 10px; height: 10px; fill: none; stroke: #fff;
stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* Simge ------------------------------------------------------------------- */
.on-sm { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; }
.on-sm svg { width: 19px; height: 19px; }
.sm-cizgi svg { fill: none; stroke: var(--metal-2); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
.sm-dolu svg { fill: var(--ink-soft); stroke: none; }
.sm-katman svg { fill: rgba(214, 208, 205, .26); stroke: var(--metal-2); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
.sm-kalin svg { fill: none; stroke: var(--metal-2); stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; }
.sm-elle svg { fill: none; stroke: var(--metal-2); stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 26 1.4; }
.sm-elle svg:nth-child(2) { width: 21px; height: 21px; }
.sm-zemin { gap: 5px; }
.sm-zemin svg { fill: none; stroke: var(--metal-2); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
width: 22px; height: 22px; padding: 3px; border-radius: 50%;
background: color-mix(in srgb, var(--p1, var(--metal-2)) 16%, transparent); }
/* ==========================================================================
ÖNİZLEME — seçimlerin bir arada nasıl durduğu
İçerideki her şey --o-* değişkenlerinden beslenir. Studio'nun kendi
renkleri buraya sızmaz: gösterdiğimiz şey müşterinin uygulaması.
========================================================================== */
/* Yukarıdan inen büyük önizleme — sayfadaki küçük önizlemenin "Büyüt"ü.
Tam ekran değil: altta en az bir seçim rafı açıkta kalıyor ve panel
açıkken oraya dokunulabiliyor. */
.onz {
position: fixed; top: 0; left: 0; right: 0; z-index: 300;
max-height: max(300px, calc(100dvh - 300px));
display: flex; flex-direction: column; background: var(--bg);
border-bottom: 1px solid var(--line-2);
border-radius: 0 0 20px 20px;
box-shadow: 0 22px 34px -20px #000;
transform: translateY(-102%);
transition: transform .3s var(--ease);
}
.onz.acik { transform: none; }
.onz-tepe {
display: flex; align-items: center; gap: 12px; flex-shrink: 0;
padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
border-bottom: 1px solid var(--line-3);
}
/* Panelin altında tutamaç — aşağıda seçim yapılabildiği belli olsun. */
.onz::after {
content: ""; position: absolute; left: 50%; bottom: 7px; width: 38px; height: 4px;
margin-left: -19px; border-radius: 999px; background: var(--line-parlak);
}
.onz-ad { flex: 1; min-width: 0; font-family: var(--yazi-baslik); font-size: 14px;
font-weight: 700; color: var(--ink-strong); }
.onz-ad u { display: block; text-decoration: none; font-family: var(--yazi-govde);
font-size: 11px; font-weight: 400; color: var(--ink-dim); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onz-goz {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 14px 16px 20px;
display: flex; flex-direction: column; align-items: center;
background: repeating-conic-gradient(#1a1918 0 25%, #171614 0 50%) 0 0 / 16px 16px;
}
.onz-goz > .o-app { max-width: 520px; }
.cihaz {
display: flex; gap: 3px; padding: 3px; flex-shrink: 0;
background: var(--yuva-2); border: 1px solid var(--line-3); border-radius: 999px;
}
.cihaz button {
font-family: inherit; font-size: 10.5px; padding: 5px 12px; border: 0;
border-radius: 999px; background: transparent; color: var(--ink-dim); cursor: pointer;
}
.cihaz button.on { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.onk-not {
display: flex; align-items: center; gap: 7px; margin-top: 14px;
padding: 6px 12px 6px 10px; border-radius: 999px;
border: 1px solid var(--line-3); background: var(--yuva);
font-size: 10.5px; line-height: 1.4; color: var(--ink-dim);
}
.onk-not svg { flex: 0 0 auto; color: var(--ink-faint); }
/* Tema seçimi — kilitliyken neden kilitli olduğu yazar. */
.logo-bolum.ince { padding: 9px 11px; gap: 10px; margin-bottom: 9px; }
.logo-bolum.ince .mk-logo { width: 34px; height: 34px; border-radius: 10px;
margin-left: 0; }
.baslangic-not { padding: 13px 15px; border-radius: 13px;
border: 1px solid var(--line-2); background: var(--yuva); }
.baslangic-not b { display: block; font-family: var(--yazi-baslik); font-size: 13px;
color: var(--ink); margin-bottom: 4px; }
.baslangic-not i { display: block; font-style: normal; font-size: 11.5px;
line-height: 1.55; color: var(--ink-dim); }
.tema-secim .secenek-serit { margin-bottom: 8px; }
.tema-secim i { display: block; font-style: normal; font-size: 11px;
line-height: 1.5; color: var(--ink-dim); }
.tema-secim.kilitli .ss { opacity: .55; }
.tema-secim.kilitli .ss.sec { opacity: 1; }
/* ---------- Sahte uygulama ---------- */
.o-app {
width: 100%; overflow: hidden; border-radius: 12px;
background: var(--o-bg); color: var(--o-metin);
font-family: var(--o-govde); font-size: 11px;
box-shadow: 0 14px 30px -18px #000;
}
.o-app.o-tel { width: 244px; border: 7px solid #2a2724; border-radius: 26px; }
.o-ust {
display: flex; align-items: center; gap: 8px; padding: 10px 12px;
background: color-mix(in srgb, var(--o-yuzey) 60%, var(--o-bg));
border-bottom: 1px solid var(--o-cizgi);
}
.o-ust b { font-size: 12px; font-family: var(--o-baslik); }
.o-logo {
width: 22px; height: 22px; flex: 0 0 22px; border-radius: calc(var(--o-rb) * .6);
display: grid; place-items: center; overflow: hidden;
font-family: var(--o-baslik); font-weight: 700; font-size: 10px; color: var(--o-uzeri);
}
.o-logo.dolu { background: #fff; }
.o-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Zeminsiz logo: kutu ve beyaz zemin yok, harf vurgu renginde. */
.o-logo.acik { background: none; }
.o-markaYan { display: flex; align-items: center; gap: 6px; min-width: 0; }
.o-markaYan b { font-family: var(--o-baslik); font-size: 10.5px; color: var(--o-metin);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-ik { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.o-ik svg { width: 15px; height: 15px; }
.os-cizgi svg { fill: none; stroke: var(--o-metin2); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
.os-dolu svg { fill: var(--o-metin2); stroke: none; }
.os-katman svg { fill: color-mix(in srgb, var(--o-metin2) 26%, transparent);
stroke: var(--o-metin2); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
.os-kalin svg { fill: none; stroke: var(--o-metin2); stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; }
.os-elle svg { fill: none; stroke: var(--o-metin2); stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26 1.4; }
.os-zemin { gap: 6px; }
.os-zemin svg { width: 22px; height: 22px; padding: 3.5px; border-radius: 50%;
background: var(--o-vurgu-soft); }
.o-gov { padding: var(--o-pad); }
.o-ikili { display: flex; gap: 9px; margin-bottom: var(--o-pad); }
/* Kart yüzeyi — seçilen her biçim üst üste biner. */
.o-kutu { background: var(--o-yuzey); border-radius: var(--o-r); }
.ok-yuksek .o-kutu { box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .8),
0 1px 0 rgba(255, 255, 255, .07) inset; }
.ok-cizgi .o-kutu { background: transparent; border: 1px solid var(--o-cizgi); }
.ok-cam .o-kutu { background: color-mix(in srgb, var(--o-yuzey) 55%, transparent);
border: 1px solid color-mix(in srgb, var(--o-metin) 14%, transparent);
backdrop-filter: blur(7px); }
.ok-serit .o-kutu { border-left: 3px solid var(--o-vurgu); }
.ok-kagit .o-kutu { border-radius: 3px; box-shadow: 3px 3px 0 var(--o-cizgi); }
.ok-oyuk .o-kutu { background: color-mix(in srgb, var(--o-bg) 70%, var(--o-yuzey));
box-shadow: 0 2px 5px rgba(0, 0, 0, .45) inset,
0 -1px 0 rgba(255, 255, 255, .06) inset; }
.ok-isik .o-kutu { border: 1px solid var(--o-vurgu);
box-shadow: 0 0 12px -3px var(--o-vurgu); }
.ok-degrade .o-kutu { background: linear-gradient(180deg,
color-mix(in srgb, var(--o-yuzey) 80%, var(--o-metin)), var(--o-yuzey)); }
.ok-doku .o-kutu { background-image: repeating-linear-gradient(45deg,
color-mix(in srgb, var(--o-metin) 2.5%, transparent) 0 1px,
transparent 1px 4px); }
.o-kesik .o-kutu { border-radius: 0;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.o-stat { flex: 1; padding: 10px 12px; }
.o-stat i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .4px;
text-transform: uppercase; color: var(--o-metin3); }
.o-stat b { display: block; font-size: 18px; font-family: var(--o-baslik); margin-top: 3px; }
.o-tblbas { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
color: var(--o-metin3); margin: 0 0 7px 2px; }
.o-nefesli .o-tblbas { margin-top: 14px; }
/* Tablo */
.o-tbl { overflow: hidden; }
.o-r { display: flex; align-items: center; gap: 8px; padding: 0 11px;
height: calc(var(--o-satir) * .72); }
.o-r span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-r u { text-decoration: none; flex: 0 0 auto; align-self: stretch;
display: flex; align-items: center; }
.o-r.o-h { height: calc(var(--o-satir) * .58); font-size: 9.5px; letter-spacing: .5px;
text-transform: uppercase; color: var(--o-metin3);
background: color-mix(in srgb, var(--o-metin) 6%, transparent); }
.ot-zebra .o-r:nth-child(even):not(.o-h) { background: color-mix(in srgb, var(--o-metin) 5%, transparent); }
.ot-yatay .o-r + .o-r { border-top: 1px solid var(--o-cizgi); }
.ot-izgara .o-r + .o-r { border-top: 1px solid var(--o-cizgi); }
.ot-izgara .o-r u { border-left: 1px solid var(--o-cizgi); padding-left: 10px; margin-left: 2px; }
.ot-rakam .o-r u { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px;
min-width: 68px; text-align: right; }
.ot-vurgulu .o-r:not(.o-h) span { font-weight: 600; color: var(--o-metin); }
.ot-kartli .o-tbl { background: transparent; box-shadow: none; border: 0; }
.ot-kartli .o-r:not(.o-h) { background: var(--o-yuzey); border-radius: var(--o-r);
margin-bottom: 6px; border: 0; }
.ot-kartli .o-r.o-h { background: transparent; padding-bottom: 2px; }
.ot-kartli.ok-serit .o-r:not(.o-h) { border-left: 3px solid var(--o-vurgu); }
.ot-gruplu .o-r:nth-child(2)::before,
.ot-gruplu .o-r:nth-child(4)::before {
content: "18 Ağustos"; position: absolute; margin: -22px 0 0 -11px;
font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--o-metin3);
}
.ot-gruplu .o-r:nth-child(4)::before { content: "17 Ağustos"; }
.ot-gruplu .o-r:nth-child(2), .ot-gruplu .o-r:nth-child(4) { margin-top: 22px; position: relative; }
/* Telefonda karta dönen liste */
.o-kartlar { display: flex; flex-direction: column; gap: 7px; }
.o-kk { padding: 9px 11px; }
.o-kk-ust { display: flex; align-items: baseline; gap: 8px; }
.o-kk-ust b { font-size: 11.5px; font-family: var(--o-baslik); flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-kk-ust u { text-decoration: none; font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 10.5px; }
.o-kk i { display: block; font-style: normal; font-size: 9.5px; color: var(--o-metin3); margin-top: 2px; }
.o-r span i { display: block; font-style: normal; font-size: 9px; color: var(--o-metin3); }
.om-iki .o-r:not(.o-h) { height: calc(var(--o-satir) * .95); }
.om-gizle .o-r u { max-width: 62px; overflow: hidden; }
/* Düğmeler */
.o-dugmeler { display: flex; gap: 8px; margin-top: var(--o-pad); }
.o-dg { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px; border-radius: var(--o-rb); font-size: 11px; font-weight: 600;
font-family: var(--o-baslik); white-space: nowrap; }
.o-dg.od-dolu, .o-dg.od-golge, .o-dg.od-degrade { flex: 1; }
.od-dolu { background: var(--o-vurgu); color: var(--o-uzeri); }
.od-golge { background: var(--o-vurgu); color: var(--o-uzeri);
box-shadow: 0 7px 14px -5px var(--o-vurgu); }
.od-degrade { background: linear-gradient(135deg, var(--o-vurgu),
color-mix(in srgb, var(--o-vurgu) 55%, #000)); color: var(--o-uzeri); flex: 1; }
.od-cizgi { border: 1px solid var(--o-vurgu); color: var(--o-vurgu-ink); flex: 1; }
.od-yumusak { background: var(--o-vurgu-soft); color: var(--o-vurgu-ink); flex: 1; }
.od-ikincil { border: 1px solid var(--o-cizgi); color: var(--o-metin2); font-weight: 400; }
.od-yazi { color: var(--o-vurgu-ink); padding: 9px 10px; }
.od-ik { width: 13px; height: 13px; fill: none; stroke: currentColor;
stroke-width: 3; stroke-linecap: round; }
/* ==========================================================================
TEL ÇİZİM — yerleşim ve durum seçeneklerinin iskeleti
Yüzey çizimleriyle karışmasın diye başka bir dil: kutu değil,
ekran planı.
========================================================================== */
.bsc:has(.tel-wf) .bon { padding: 6px; }.tel-wf {
position: relative; flex: 1; display: flex; flex-direction: column; gap: 3px;
overflow: hidden; border-radius: 5px;
}.tel-wf u { display: flex; align-items: center; gap: 3px; text-decoration: none; flex: 0 0 auto; }.tel-wf i { display: block; font-style: normal; }.tel-wf b { display: block; }/* üst çubuk çeşitleri */
.w-ust { height: 9px; background: var(--surface-3); border-radius: 2px; padding: 0 3px; }.tel-wf .w-ust i { height: 3px; border-radius: 1px; background: var(--metal-1); }.tel-wf .w-ust .w-ara { flex: 1; background: var(--line-parlak); height: 5px; border-radius: 2px; }.tel-wf .w-ust .w-dug { margin-left: auto; width: 12px; height: 5px; border-radius: 2px; background: var(--metal-2); }.tel-wf .w-ust .w-ham { width: 5px; height: 4px; border-radius: 1px; background: var(--metal-2); }.tel-wf .w-ust .w-ok { margin-left: 3px; width: 4px; height: 3px; background: var(--metal-2); border-radius: 1px; }.tel-wf .w-sekme { height: 6px; gap: 2px; }.tel-wf .w-sekme i { flex: 1; height: 4px; border-radius: 1px; background: var(--surface-3); }.tel-wf .w-sekme i.a { background: var(--metal-1); }.tel-wf .w-adim { height: 5px; gap: 2px; }.tel-wf .w-adim i { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); }.tel-wf .w-adim i.a { background: var(--p1, var(--metal-2)); }.tel-wf .w-satir { height: 8px; border-radius: 3px; background: var(--yuva); border: 1px solid var(--line-2); }.tel-wf .w-cip { height: 7px; gap: 3px; }.tel-wf .w-cip i { flex: 0 0 13px; height: 6px; border-radius: 999px; background: var(--surface-3); }.tel-wf .w-cip i.a { background: var(--metal-1); flex: 0 0 16px; }.tel-wf .w-ilerleme { height: 3px; border-radius: 2px; background: var(--surface-3); }.tel-wf .w-ilerleme i { width: 40%; height: 100%; border-radius: 2px; background: var(--p1, var(--metal-2)); }.tel-wf .w-serit { height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--p1, var(--metal-2)) 34%, var(--surface)); }.tel-wf .w-alt { height: 9px; background: var(--surface-3); border-radius: 2px; padding: 0 3px; gap: 3px; }.tel-wf .w-alt i { flex: 1; height: 4px; border-radius: 1px; background: var(--metal-1); }.tel-wf .w-alt i.bos { background: transparent; }.tel-wf .w-sonDug { height: 8px; border-radius: 3px; background: var(--p1, var(--metal-2)); opacity: .8; }.tel-wf .w-sayfa { height: 7px; justify-content: center; gap: 3px; }.tel-wf .w-sayfa i { width: 6px; height: 6px; border-radius: 2px; background: var(--surface-3); }.tel-wf .w-sayfa i.a { background: var(--metal-1); }/* gövde */
.tel-wf u.w-govde { flex: 1 1 auto; min-height: 0; align-items: stretch; }.tel-wf u.w-govde.bos { flex-direction: column; align-items: center; justify-content: center; gap: 4px; }.tel-wf .w-blk { flex: 1; border-radius: 3px; background: var(--surface-2); }.tel-wf .w-bos { flex: 1; }.tel-wf .w-yan { flex: 0 0 13px; border-radius: 3px; background: var(--line-parlak); }.tel-wf .w-panel { flex: 0 0 18px; border-radius: 3px; background: var(--line-parlak); opacity: .8; }.tel-wf .w-panel.ince { flex: 0 0 14px; }.tel-wf .w-sagPanel { flex: 0 0 24px; border-radius: 3px; background: var(--surface-3);
box-shadow: inset 0 0 0 1px var(--line-parlak); }.tel-wf .w-liste { flex: 1; display: flex; flex-direction: column; gap: 2px; }.tel-wf .w-liste b { flex: 1; border-radius: 2px; background: var(--surface-2); }.tel-wf .w-liste.grup b.bas { flex: .5; background: transparent;
box-shadow: inset 0 2px 0 -1px var(--line-parlak); }.tel-wf .w-liste.katlanir b.bas { flex: .6; background: var(--surface-3); }.tel-wf .w-liste.katlanir b.acik { flex: 2; }.tel-wf .w-liste.iskelet b { background: linear-gradient(90deg, var(--surface), var(--line-parlak), var(--surface)); }.tel-wf .w-liste b.duzen { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--p1, var(--metal-2)); }.tel-wf .w-liste b.kaydir { background: linear-gradient(90deg, var(--surface-2) 62%, var(--red) 62%); }.tel-wf .w-izgara { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }.tel-wf .w-izgara b { border-radius: 3px; background: var(--surface-2); }.tel-wf .w-grafik { flex: 1; border-radius: 3px; background: var(--surface-2);
background-image: linear-gradient(120deg, transparent 55%,
color-mix(in srgb, var(--p1, var(--metal-2)) 45%, transparent) 55% 58%, transparent 58%); }.tel-wf .w-kart2 { height: 14px; gap: 3px; }.tel-wf .w-kart2 i { flex: 1; border-radius: 3px; background: var(--surface-2); height: 100%; }.tel-wf .w-form { flex: 1; display: flex; flex-direction: column; gap: 3px; justify-content: center; }.tel-wf .w-form b { height: 7px; border-radius: 2px; background: var(--yuva);
box-shadow: inset 0 0 0 1px var(--line-2); }/* boş ve bekleme */
.w-cizgi { width: 32px; height: 3px; border-radius: 2px; background: var(--line-parlak); }.tel-wf .w-halka { width: 13px; height: 13px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--line-parlak); }.tel-wf .w-minidug { width: 22px; height: 6px; border-radius: 3px; background: var(--p1, var(--metal-2)); opacity: .8; }.tel-wf .w-cizim { width: 26px; height: 15px; border-radius: 3px; background: var(--surface-3);
background-image: linear-gradient(135deg, transparent 45%, var(--line-parlak) 45% 52%, transparent 52%); }.tel-wf .w-cark { width: 13px; height: 13px; border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--line-2);
border-top: 2px solid var(--metal-2); box-sizing: border-box; }/* üstte yüzenler */
.w-cekmece { position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
background: var(--surface-3); border-left: 1px solid var(--line-parlak);
box-shadow: -8px 0 10px -8px #000; }.tel-wf .w-pencere { position: absolute; top: 50%; left: 50%; width: 62%; height: 48%;
transform: translate(-50%, -50%); border-radius: 4px;
background: var(--surface-3); box-shadow: 0 0 0 100px rgba(0, 0, 0, .45),
inset 0 0 0 1px var(--line-parlak); }.tel-wf .w-fab { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px;
border-radius: 50%; background: var(--p1, var(--metal-2)); }.tel-wf .w-fab.alt { left: 50%; right: auto; bottom: 5px; margin-left: -6px; }.tel-wf .w-altSayfa { position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
border-radius: 5px 5px 0 0; background: var(--surface-2);
box-shadow: 0 -6px 10px -8px #000, inset 0 1px 0 var(--line-parlak); }.tel-wf .w-seritAlt { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 8px;
border-radius: 3px; background: var(--surface-3);
box-shadow: 0 3px 6px -4px #000, inset 0 0 0 1px var(--line-parlak); }.tel-wf .w-seritAlt.geri { background: var(--surface-3);
background-image: linear-gradient(90deg, transparent 62%,
color-mix(in srgb, var(--p1, var(--metal-2)) 60%, transparent) 62%); }.tel-wf .w-sagUst { position: absolute; right: 3px; top: 3px; width: 40%; height: 9px;
border-radius: 3px; background: var(--surface-3);
box-shadow: 0 3px 6px -4px #000, inset 0 0 0 1px var(--line-parlak); }.tel-wf .w-sonsuz { position: absolute; left: 50%; bottom: 3px; width: 9px; height: 9px;
margin-left: -4.5px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--line-2); border-top: 1.5px solid var(--metal-2);
box-sizing: border-box; }
/* ---- Sahte uygulamanın yeni parçaları ---- */
.o-app { display: flex; flex-direction: column; }
.o-alt2 { display: flex; flex: 1; min-height: 0; }
.o-alt2 > .o-gov { flex: 1; min-width: 0; position: relative; }
/* Çekmece ve pencere gövdenin içinde yaşıyor: taşmasın diye taban yükseklik. */
.oe-form .o-gov { min-height: 236px; }
.oe-form.o-tel .o-gov { min-height: 268px; }
.o-app.o-genis-orta .o-gov { max-width: 460px; margin: 0 auto; width: 100%; }
.o-app.o-genis-sol .o-gov { max-width: 460px; }
.o-ham { width: 15px; height: 11px; flex: 0 0 15px; border-radius: 2px;
background: linear-gradient(var(--o-metin2) 0 2px, transparent 2px 4px) 0 0/100% 4px repeat; }
.o-ustAra { flex: 1; margin: 0 6px; height: 19px; border-radius: var(--o-rb);
border: 1px solid var(--o-cizgi); display: flex; align-items: center;
padding: 0 8px; font-size: 9.5px; color: var(--o-metin3); }
.o-ustDug { margin-left: auto; font-size: 9.5px; padding: 5px 11px; font-weight: 600;
font-family: var(--o-baslik); border-radius: var(--o-rb); }
.o-yatay { margin-left: 12px; display: flex; gap: 10px; }
.o-yatay i { font-style: normal; font-size: 9.5px; color: var(--o-metin3); }
.o-yatay i.a { color: var(--o-vurgu-ink); font-weight: 600; }
.o-sekme { display: flex; gap: 14px; padding: 0 12px;
border-bottom: 1px solid var(--o-cizgi); background: var(--o-bg); }
.o-sekme i { font-style: normal; font-size: 9.5px; color: var(--o-metin3);
padding: 7px 0; border-bottom: 2px solid transparent; }
.o-sekme i.a { color: var(--o-metin); border-bottom-color: var(--o-vurgu); }
.o-sekme.ic { border: 0; padding: 0 2px; margin-bottom: 8px; }
.o-nav { display: flex; align-items: center; flex-shrink: 0; position: relative;
border-top: 1px solid var(--o-cizgi);
background: color-mix(in srgb, var(--o-yuzey) 60%, var(--o-bg)); }
.o-nav span { flex: 1; text-align: center; padding: 7px 0; font-size: 9px; color: var(--o-metin3); }
.o-nav span.a { color: var(--o-vurgu-ink); }
.o-nav.arti em { position: absolute; left: 50%; top: -11px; width: 24px; height: 24px;
margin-left: -12px; border-radius: 50%; background: var(--o-vurgu);
border: 3px solid var(--o-bg); box-sizing: content-box;
box-shadow: 0 4px 10px -5px #000; }
.o-nav.arti em::before, .o-nav.arti em::after {
content: ""; position: absolute; left: 50%; top: 50%; background: var(--o-uzeri);
transform: translate(-50%, -50%); border-radius: 1px;
}
.o-nav.arti em::before { width: 11px; height: 2px; }
.o-nav.arti em::after { width: 2px; height: 11px; }
.o-nav.arti span:nth-child(2) { margin-right: 24px; }
.o-yanMenu { flex: 0 0 62px; padding: 9px 8px; display: flex; flex-direction: column; gap: 4px;
border-right: 1px solid var(--o-cizgi);
background: color-mix(in srgb, var(--o-yuzey) 55%, var(--o-bg)); }
.o-yanMenu i { font-style: normal; font-size: 9.5px; color: var(--o-metin3);
padding: 5px 7px; border-radius: var(--o-rb); }
.o-yanMenu i.a { background: var(--o-vurgu-soft); color: var(--o-vurgu-ink); font-weight: 600; }
.o-arama { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.o-arama span { flex: 1; height: 24px; border-radius: var(--o-rb); border: 1px solid var(--o-cizgi);
display: flex; align-items: center; padding: 0 9px; font-size: 9.5px; color: var(--o-metin3); }
.o-arama em { font-style: normal; font-size: 9.5px; padding: 0 10px; height: 24px;
display: flex; align-items: center; border-radius: var(--o-rb);
border: 1px solid var(--o-cizgi); color: var(--o-metin2); }
.o-cip { display: flex; gap: 5px; margin-bottom: 8px; overflow: hidden; }
.o-cip span { flex: 0 0 auto; font-size: 9px; padding: 4px 9px; border-radius: 999px;
border: 1px solid var(--o-cizgi); color: var(--o-metin3); }
.o-cip span.a { background: var(--o-vurgu-soft); color: var(--o-vurgu-ink);
border-color: transparent; font-weight: 600; }
.o-tarihCip { flex: 0 0 auto; font-size: 9px; padding: 4px 9px; border-radius: 999px;
border: 1px solid var(--o-vurgu); color: var(--o-vurgu-ink); font-weight: 600; }
.o-tbl.ipucuKutu { margin-bottom: var(--o-pad); }
.o-ikiBolme { display: flex; gap: 8px; align-items: flex-start; }
.o-akan { flex: 1; min-width: 0; }
.o-yanFiltre { flex: 0 0 66px; display: flex; flex-direction: column; gap: 4px; }
.o-yanFiltre i { font-style: normal; font-size: 9px; color: var(--o-metin3);
padding: 5px 7px; border-radius: var(--o-rb); background: var(--o-yuzey); }
.o-yanFiltre i.a { color: var(--o-vurgu-ink); font-weight: 600; }
.o-detayBolme { flex: 0 0 92px; }
.o-sagKolon { flex: 0 0 82px; display: flex; flex-direction: column; gap: 7px; }
.o-dk { padding: 9px; }
.o-dk b { display: block; font-size: 10.5px; font-family: var(--o-baslik); }
.o-dk i { display: block; font-style: normal; font-size: 9px; color: var(--o-metin3); margin: 2px 0 6px; }
.o-dk u { text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; }
.o-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.o-buyuk { padding: 10px; }
.o-grafik { display: block; height: 74px; border-radius: 6px; position: relative;
background:
repeating-linear-gradient(90deg, transparent 0 15px,
color-mix(in srgb, var(--o-metin) 5%, transparent) 15px 16px),
linear-gradient(180deg, transparent 0 97%, var(--o-cizgi) 97%),
color-mix(in srgb, var(--o-metin) 3%, transparent); }
.o-grafik::before {
content: ""; position: absolute; inset: 8px 6px 3px;
background: var(--o-vurgu); opacity: .9;
clip-path: polygon(0 78%, 16% 56%, 32% 66%, 48% 30%, 64% 44%, 80% 14%, 100% 26%,
100% 30%, 80% 18%, 64% 48%, 48% 34%, 32% 70%, 16% 60%, 0 82%);
}
.o-grafik::after {
content: ""; position: absolute; inset: 8px 6px 3px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--o-vurgu) 22%, transparent), transparent);
clip-path: polygon(0 80%, 16% 58%, 32% 68%, 48% 32%, 64% 46%, 80% 16%, 100% 28%, 100% 100%, 0 100%);
}
.o-sayfano { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.o-sayfano span { width: 20px; height: 20px; border-radius: var(--o-rb); font-size: 9.5px;
display: grid; place-items: center; border: 1px solid var(--o-cizgi);
color: var(--o-metin3); }
.o-sayfano span.a { background: var(--o-vurgu-soft); color: var(--o-vurgu-ink); border-color: transparent; }
.o-sonsuz { display: flex; justify-content: center; padding: 10px 0 2px; }
.o-sonsuz i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
border: 2px solid var(--o-cizgi); border-top-color: var(--o-metin2); }
.o-dugmeler.tek { justify-content: stretch; }
.o-dg.tam { flex: 1; }
.o-alan { display: block; margin-bottom: 9px; }
.o-alan i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .4px;
text-transform: uppercase; color: var(--o-metin3); margin-bottom: 3px; }
.o-alan span { display: block; height: 24px; border-radius: var(--o-rb);
border: 1px solid var(--o-cizgi);
background: color-mix(in srgb, var(--o-bg) 60%, var(--o-yuzey)); }
.o-adim { display: flex; gap: 4px; margin-bottom: 10px; }
.o-adim i { flex: 1; height: 3px; border-radius: 2px; background: var(--o-cizgi); }
.o-adim i.a { background: var(--o-vurgu); }
.o-ipucu { margin-top: 9px; font-size: 9.5px; color: var(--o-metin3); text-align: center; }
.o-arka { opacity: .3; pointer-events: none; }
.o-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.o-cekmece { position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
padding: 11px; overflow: hidden;
background: var(--o-yuzey); border-left: 1px solid var(--o-cizgi);
box-shadow: -18px 0 30px -14px #000; }
.o-cekmece.alttan { top: auto; left: 0; width: auto; height: 78%;
border-left: 0; border-top: 1px solid var(--o-cizgi);
border-radius: 16px 16px 0 0; box-shadow: 0 -18px 30px -14px #000; }
.o-pencere { position: absolute; top: 50%; left: 50%; width: 78%;
transform: translate(-50%, -50%); padding: 12px;
border-radius: var(--o-r); background: var(--o-yuzey);
box-shadow: 0 20px 34px -18px #000; }
.o-pencere.kucuk b { display: block; font-family: var(--o-baslik); font-size: 11.5px; }
.o-pencere.kucuk i { display: block; font-style: normal; font-size: 10px;
color: var(--o-metin2); margin: 4px 0 10px; }
.o-cekBas { display: flex; align-items: center; margin-bottom: 10px; }
.o-cekBas b { flex: 1; font-family: var(--o-baslik); font-size: 11.5px; }
.o-cekBas u { text-decoration: none; color: var(--o-metin3); }
.o-grupBas { font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase;
color: var(--o-metin3); margin: 12px 0 5px 2px; }
.o-grupBas:first-child { margin-top: 0; }
.o-bos { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 9px; padding: 26px 12px; text-align: center; }
.o-bos i { font-style: normal; font-size: 10.5px; color: var(--o-metin3); max-width: 180px; }
.o-bosSimge svg { width: 26px; height: 26px; opacity: .5; }
.o-bosCizim { width: 54px; height: 34px; border-radius: 8px;
background: color-mix(in srgb, var(--o-metin) 7%, transparent);
background-image: linear-gradient(135deg, transparent 42%,
var(--o-vurgu) 42% 48%, transparent 48%); }
.o-cark { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
border: 3px solid var(--o-cizgi); border-top-color: var(--o-vurgu); }
.o-iskelet { display: flex; flex-direction: column; gap: 7px; }
.o-iskelet i { height: 26px; border-radius: var(--o-r);
background: linear-gradient(90deg,
color-mix(in srgb, var(--o-metin) 5%, transparent),
color-mix(in srgb, var(--o-metin) 11%, transparent),
color-mix(in srgb, var(--o-metin) 5%, transparent)); }
.o-ilerleme { height: 3px; border-radius: 2px; background: var(--o-cizgi); margin-bottom: 10px; }
.o-ilerleme i { display: block; width: 42%; height: 100%; border-radius: 2px; background: var(--o-vurgu); }
.o-bildirimUst { margin: calc(var(--o-pad) * -1) calc(var(--o-pad) * -1) var(--o-pad);
padding: 7px 12px; font-size: 9.5px; color: var(--o-vurgu-ink);
background: var(--o-vurgu-soft); }
.o-toast { position: absolute; padding: 7px 12px; border-radius: var(--o-r);
font-size: 9.5px; background: var(--o-yuzey); color: var(--o-metin);
box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--o-cizgi); }
.o-toast.alt { left: 12px; right: 12px; bottom: 8px; padding: 6px 11px; font-size: 9px; }
.o-toast.sag { right: 10px; top: 10px; }
.o-geriSerit { display: flex; align-items: center; margin-top: 9px; padding: 8px 12px;
border-radius: var(--o-r); font-size: 9.5px; color: var(--o-metin);
background: var(--o-yuzey); box-shadow: inset 0 0 0 1px var(--o-cizgi); }
.o-geriSerit em { margin-left: auto; font-style: normal; font-weight: 700;
color: var(--o-vurgu-ink); font-family: var(--o-baslik); }
.o-toast em { margin-left: auto; font-style: normal; font-weight: 700;
color: var(--o-vurgu-ink); font-family: var(--o-baslik); }
.o-fab { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px;
border-radius: 50%; display: grid; place-items: center;
color: var(--o-uzeri); font-size: 17px; font-weight: 300; line-height: 1;
box-shadow: 0 8px 16px -6px #000; }
/* ==========================================================================
TASARIM AKIŞI — bir ekranda tek karar
Üstte adım çubuğu, ortada önizleme, altta seçim. Sayfa kaydırılmaz;
üç parça kalan yeri bölüşür.
========================================================================== */
/* Kural: kaydırma yok. Çok kısa ekranlarda önizleme okunmaz hâle gelmesin
diye taşarsa kaymasına izin veriyoruz — istisna, kural değil. */
.view.sabit { overflow-y: auto; display: flex; flex-direction: column; }
/* min-height:100% iç boşluğun üstüne biniyor ve sayfayı alt çubuğun
altına kaydırıyordu: İleri düğmesine basılamıyordu. */
.view.sabit .akis { min-height: 0; }
.akis { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.adim-serit { flex: 0 0 auto; }
/* Kart altındaki satır: nereden geldiğin ve iki kısayol. */
.as-alt { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
/* Yol izi uzayınca son basamak kırpılıyordu — bulunduğun yer o.
Kesmek yerine kaydırıyoruz. */
.as-yol { flex: 0 1 auto; min-width: 0; margin-right: auto;
display: flex; align-items: center; gap: 5px;
overflow-x: auto; scrollbar-width: none; }
.as-yol::-webkit-scrollbar { display: none; }
.as-yol .yi { flex: 0 0 auto; }
.as-yol s { flex: 0 0 auto; text-decoration: none; color: var(--ink-dim); font-size: 11px; }
.as-not {
flex: 1; min-width: 0; text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10.5px; color: var(--ink-dim);
}
.ab-kararlar {
flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
padding: 0; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line-2); background: var(--yuva); color: var(--ink-soft);
}
/* Noktalar yalnız bu adayı sayıyor: nerede olduğunu harita söylüyor,
burada kaç karar kaldığı önemli. */
.as-noktalar { display: flex; gap: 4px; margin-top: 9px; }
.as-noktalar button,
.as-noktalar span { flex: 1; min-width: 3px; padding: 5px 0 0; border: 0;
background: transparent; cursor: pointer; }
.as-noktalar span { cursor: default; }
.as-noktalar i { display: block; height: 3px; border-radius: 2px; background: var(--line-2); }
.as-noktalar .gecti i { background: var(--metal-1); }
.as-noktalar .on i { background: var(--kr, var(--metal-2)); }
/* Önizleme: kalan boşluğun tamamını alır, içindeki uygulama sığacak kadar küçülür. */
.onz-satir {
/* Yer daralınca önce önizleme küçülsün (içindeki uygulama zaten ölçekleniyor),
seçenek rafı en son. Bu yüzden büzülme katsayısı yüksek. */
flex: 1 8 auto; min-height: 170px; position: relative; margin: 11px 0;
border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
background: var(--yuva-2);
}
.onz-satir .onz-goz {
position: absolute; inset: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center; padding: 12px;
background: repeating-conic-gradient(#1a1918 0 25%, #171614 0 50%) 0 0 / 16px 16px;
}
.onz-satir .onz-goz > .o-app { max-width: 360px; flex: 0 0 auto; }
.onz-satir .onz-goz > .o-app.o-genisAdim { width: 100%; }
.onz-satir .onk-not { display: none; }
/* Kutuya sığmayan önizleme küçültülür; kırpma yok. */
.onz-satir .onz-goz > .o-app { transform-origin: center; transition: transform .16s var(--ease); }
.tumSifir {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; margin-top: 14px; padding: 11px; cursor: pointer;
border: 1px dashed var(--red-cizgi); border-radius: 12px;
background: var(--red-soft); color: var(--red-ink-soft);
font-family: inherit; font-size: 11.5px;
}
.tumSifir svg { flex: 0 0 auto; }
/* Alt blok esnesin: sabit kalınca uzun adımlarda Geri/İleri satırı kutunun
dışına, alt çubuğun altına taşıyordu. Taşan kısım rafın içinde kayar. */
.akis-alt { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.akis-alt > .raf { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.akis-alt > .adim-gez { flex: 0 0 auto; }
.adim-bas { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.ab-yazi { flex: 1; min-width: 0; }
.adim-bas b { display: block; font-family: var(--yazi-baslik); font-size: 17px;
letter-spacing: -.2px; color: var(--ink-strong); }
.adim-bas i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.45;
color: var(--ink-dim); margin-top: 2px; }
.ab-tur { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-faint); }
.adim-not { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
padding: 9px 12px; border-radius: 12px;
border: 1px solid var(--line-3); background: var(--yuva);
font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.adim-not svg { flex: 0 0 auto; margin-top: 1px; color: var(--ink-faint); }
/* Kopyala düğmesi: dokununca ikon tike döner, yazı değişir.
`.pano-dug` aynı görünüşün bağlantı hâli — prompt düğmeleri gerçek
olmak zorunda, yoksa iOS'ta uygulama kipinde sekme açılmıyor. */
.pano-dug { text-decoration: none; }
.kopyala-dug, .pano-dug { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.kd-ikon { position: relative; width: 15px; height: 15px; flex: 0 0 15px; }
.kd-ikon svg { position: absolute; inset: 0; transition: opacity .18s ease, transform .18s ease; }
.kd-ikon svg:last-child { opacity: 0; transform: scale(.5) rotate(-25deg); }
.kopyala-dug.kopyalandi .kd-ikon svg:first-child, .pano-dug.kopyalandi .kd-ikon svg:first-child { opacity: 0; transform: scale(.5); }
.kopyala-dug.kopyalandi .kd-ikon svg:last-child, .pano-dug.kopyalandi .kd-ikon svg:last-child { opacity: 1; transform: none; }
/* Kopyalanınca iki düğme rol değiştirir: iş bitti, sıra yapıştırmada.
Kırmızı tek yerde kalsın diye kopyalanan düğme sessizleşir. */
.kopyala-dug.kopyalandi, .pano-dug.kopyalandi {
background: linear-gradient(180deg, var(--surface-3), var(--kart-alt));
color: var(--ink-soft);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.kopyala-dug.kopyalandi .kd-ikon, .pano-dug.kopyalandi .kd-ikon { color: var(--basari, #3d9970); }
.kd-yazi { white-space: nowrap; transition: opacity .18s ease; }
.kopyala-dug.kopyalandi .kd-yazi, .pano-dug.kopyalandi .kd-yazi { font-size: 13px; }
/* Sıradaki adım: yapıştır düğmesi kopyalanana kadar bekler, sonra öne çıkar. */
.sayfa-dug.parla {
background: linear-gradient(180deg, var(--red-acik), var(--red));
color: #fff;
animation: dugParla 1.7s ease-in-out infinite;
}
@keyframes dugParla {
0%, 100% { box-shadow: 0 10px 24px -10px rgba(229, 52, 42, .8),
inset 0 1px 0 rgba(255, 255, 255, .28),
0 0 0 0 rgba(229, 52, 42, .55); }
60% { box-shadow: 0 10px 24px -10px rgba(229, 52, 42, .8),
inset 0 1px 0 rgba(255, 255, 255, .28),
0 0 0 7px rgba(229, 52, 42, 0); }
}
/* Promptu okumak isteyen için sessiz bağlantı. */
.promptu-gor { display: block; width: 100%; margin-top: 9px; padding: 6px;
background: none; border: 0; cursor: pointer; font-family: inherit;
font-size: 11.5px; color: var(--ink-dim); text-decoration: underline;
text-underline-offset: 3px; }
.promptu-gor:hover { color: var(--ink-soft); }
.akis.ozet .akis-alt { margin-top: 14px; }
.akis.ozet .akis-alt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Görsel dünya adasının gövdesi uzun: kendi içinde kaysın ki Geri/İleri
satırı ekranın dışına taşmasın. */
.akis.gorsel .akis-alt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ozet-kaydir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
margin: 0 calc(var(--yan) * -1); padding: 0 var(--yan); }
.adim-gez { display: flex; gap: 9px; margin-top: 11px; }
.ag { display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 13px 16px; border-radius: 13px; cursor: pointer;
font-family: var(--yazi-baslik); font-size: 13px; font-weight: 600;
border: 1px solid var(--line); color: var(--ink-soft);
background: linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow: inset 0 1px 0 var(--isik); }
.ag.geri { flex: 0 0 auto; }
.ag.geri svg { transform: rotate(180deg); }
.ag.geri:disabled { opacity: .38; cursor: default; }
/* İleri bu ekranın ana düğmesi — kırmızının izinli olduğu dört yerden biri. */
.ag.ileri { flex: 1; color: #fff;
border-color: rgba(229, 52, 42, .42);
background: linear-gradient(180deg, var(--red-acik), var(--red));
box-shadow: 0 10px 22px -12px rgba(229, 52, 42, .8),
inset 0 1px 0 rgba(255, 255, 255, .22); }
.ag svg { flex: 0 0 auto; }
/* Kararlar paneli — adımdan çıkmadan hepsine bakmak için. */
.krp { max-height: min(78dvh, 720px); }
.kr-govde {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.kr-obek { margin-bottom: 14px; }
.kr-obek-ad {
display: block; margin: 0 0 6px 2px; font-family: var(--yazi-baslik);
font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint);
}
.kr-sat {
display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
padding: 11px 13px; cursor: pointer; font-family: inherit;
border: 1px solid var(--line-3); border-radius: 12px; background: var(--yuva);
margin-bottom: 5px;
}
.kr-sat span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-dim); }
.kr-sat u { text-align: right; text-decoration: none;
font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* ---- Önizlemenin eksik kalan hâlleri ---- */
.o-arama.acik { gap: 8px; }
.o-arama.acik u { text-decoration: none; color: var(--o-metin2); font-size: 13px; }
.o-arama.acik span { border-color: var(--o-vurgu); color: var(--o-metin); }
.o-arama.acik em { border: 0; color: var(--o-metin3); padding: 0 4px; }
.o-arama.ayri span { border-color: var(--o-vurgu); }
.o-inpanel, .o-altSayfa {
background: var(--o-yuzey); border-radius: var(--o-r); padding: 10px 12px;
margin-bottom: var(--o-pad); box-shadow: 0 12px 20px -14px #000;
}
.o-inpanel i, .o-altSayfa i {
display: flex; align-items: center; font-style: normal; font-size: 10px;
color: var(--o-metin2); padding: 6px 0; border-bottom: 1px solid var(--o-cizgi);
}
.o-inpanel i:last-of-type, .o-altSayfa i:last-of-type { border-bottom: 0; }
.o-inpanel u, .o-altSayfa u { margin-left: auto; text-decoration: none; color: var(--o-metin3); }
.o-altSayfa { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
border-radius: 16px 16px 0 0; padding: 12px 14px 16px; }
.o-altSayfa b { display: block; font-family: var(--o-baslik); font-size: 11.5px; margin-bottom: 6px; }
.o-dg.kucuk { width: 100%; margin-top: 9px; padding: 7px; font-size: 10px; }
.od-sil { background: #c8352b; color: #fff; flex: 1; }
.o-r.kaydirildi { position: relative; overflow: hidden; }
.o-r.kaydirildi span, .o-r.kaydirildi u { transform: translateX(-34px); }
.o-sil { position: absolute; right: 0; top: 0; bottom: 0; width: 42px;
display: grid; place-items: center; background: #c8352b; color: #fff;
font-size: 9.5px; font-weight: 600; font-family: var(--o-baslik); }
.o-acilan { padding: 6px 11px 9px; background: color-mix(in srgb, var(--o-metin) 4%, transparent); }
.o-acilan i { display: flex; font-style: normal; font-size: 9.5px; color: var(--o-metin3); padding: 2px 0; }
.o-acilan u { margin-left: auto; text-decoration: none; color: var(--o-metin2); }
.o-yanMenu.acilir { box-shadow: 8px 0 16px -8px #000; border-right-color: var(--o-vurgu); }
.o-secici { display: flex; align-items: center; gap: 6px; padding: 8px 11px;
border-radius: var(--o-r); background: var(--o-yuzey); margin-bottom: 5px; }
.o-secici b { font-family: var(--o-baslik); font-size: 11.5px; }
.o-secici u { margin-left: auto; text-decoration: none; color: var(--o-metin3); }
.o-acilanListe { border-radius: var(--o-r); background: var(--o-yuzey); padding: 4px 0;
margin-bottom: var(--o-pad); box-shadow: 0 12px 20px -14px #000; }
.o-acilanListe i { display: block; font-style: normal; font-size: 10.5px;
color: var(--o-metin2); padding: 6px 11px; }
.o-modul { display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 8px; text-align: center; }
.o-modul i { font-style: normal; font-size: 10px; color: var(--o-metin2); }
.o-mIk svg { width: 20px; height: 20px; }
.o-ozetBolme { flex: 0 0 108px; }
.o-katlanir { border-radius: var(--o-r); background: var(--o-yuzey); overflow: hidden;
margin-top: var(--o-pad); }
.o-katlanir > i { display: flex; align-items: center; font-style: normal; font-size: 11px;
color: var(--o-metin2); padding: 9px 12px;
border-bottom: 1px solid var(--o-cizgi); }
.o-katlanir > i.acik { color: var(--o-metin); font-weight: 600; }
.o-katlanir > i u { margin-left: auto; text-decoration: none; color: var(--o-metin3); }
.o-katIc { display: block; padding: 10px 12px; border-bottom: 1px solid var(--o-cizgi); }
.o-formKutu { background: var(--o-yuzey); border-radius: var(--o-r); padding: 10px 12px; }
.o-formKutu.ferah { padding: 18px 16px; }
.o-tblbas.ferah { margin-top: 16px; }
.o-app.o-genisAdim { max-width: none !important; width: 100%; }
/* ---- Tel çizim: çatı, açılış, sistem parçaları ---- */
.tel-wf .w-ust b { flex: 0 0 auto; }
.tel-wf .w-cip2 { margin-left: auto; width: 20px; height: 6px; border-radius: 999px;
background: var(--metal-2); }
.tel-wf .w-av { margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
background: var(--metal-2); }
.tel-wf .w-soru { margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--metal-2); }
.tel-wf .w-nokta{ margin-left: auto; width: 5px; height: 5px; border-radius: 50%;
background: var(--p1, var(--metal-2)); }
.tel-wf .w-geri { width: 5px; height: 5px; border-left: 1.5px solid var(--metal-2);
border-bottom: 1.5px solid var(--metal-2); transform: rotate(45deg); margin: 0 3px; }
.tel-wf .w-yol { height: 5px; gap: 3px; }
.tel-wf .w-yol i { width: 14px; height: 2px; border-radius: 1px; background: var(--line-parlak); }
.tel-wf .w-yol i.k { width: 9px; }
.tel-wf .w-yan.kisi { background: linear-gradient(180deg, var(--line-parlak) 0 72%,
var(--metal-2) 72% 84%, var(--line-parlak) 84%); }
.tel-wf .w-hero { height: 20px; border-radius: 5px;
background: linear-gradient(135deg, var(--p1, var(--metal-2)),
color-mix(in srgb, var(--p1, var(--metal-2)) 45%, #000)); }
.tel-wf .w-bb { height: 14px; align-items: flex-end; }
.tel-wf .w-bb i { width: 60%; height: 6px; border-radius: 2px; background: var(--metal-2);
box-shadow: 0 4px 0 -3px var(--line-parlak); }
.tel-wf .w-seritK { height: 20px; border-radius: 4px; background: var(--surface-2);
border-top: 3px solid var(--p1, var(--metal-2)); }
.tel-wf .w-kart2.uc i { flex: 1; }
.tel-wf .w-kartS { height: 13px; gap: 3px; overflow: hidden; }
.tel-wf .w-kartS i { flex: 0 0 20px; height: 100%; border-radius: 3px; background: var(--surface-2); }
.tel-wf .w-liste.dikey b { flex: 0 0 9px; }
.tel-wf .w-ay { height: 12px; gap: 4px; justify-content: center;
background: var(--surface); border-radius: 3px; }
.tel-wf .w-ay b { font-size: 7px; line-height: 1; color: var(--ink-faint); }
.tel-wf .w-ay i { width: 24px; height: 4px; border-radius: 2px; background: var(--metal-1); }
.tel-wf .w-dosya { height: 16px; border-radius: 4px; border: 1px dashed var(--line-parlak); }
.tel-wf .w-ozet { height: 8px; gap: 3px; }
.tel-wf .w-ozet i { flex: 1; height: 100%; border-radius: 2px;
background: color-mix(in srgb, var(--p1, var(--metal-2)) 30%, var(--surface)); }
.tel-wf .w-esles { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.tel-wf .w-esles b { display: flex; height: 8px; border-radius: 2px;
background: linear-gradient(90deg, var(--surface-2) 0 44%, transparent 44% 56%, var(--surface-3) 56%); }
.tel-wf .w-alogo { width: 20px; height: 20px; border-radius: 6px;
background: var(--p1, var(--metal-2)); }
.tel-wf .w-alogo.kucuk { width: 14px; height: 14px; border-radius: 5px; }
.tel-wf .w-alogo.kutulu { background: var(--surface-2); border: 1px solid var(--line-parlak);
box-shadow: inset 0 0 0 3px var(--p1, var(--metal-2)); }
/* Logonun altındaki ışık çizgisi — uçlara doğru sönüyor. */
.tel-wf .w-isik { width: 26px; height: 2px; border-radius: 1px;
background: linear-gradient(90deg, transparent, var(--p1, var(--red)) 45% 55%, transparent); }
.tel-wf .w-ad { width: 20px; height: 4px; border-radius: 2px; background: var(--line-parlak); }
.tel-wf .w-govde.yan { flex-direction: row; gap: 5px; align-items: center; justify-content: center; }
.tel-wf .w-govde.yan .w-ad { width: 24px; }
.tel-wf .w-iki { flex-direction: column; gap: 2px; align-items: center; }
.tel-wf .w-iki i { width: 16px; height: 2px; border-radius: 1px; background: var(--line-parlak); }
.tel-wf .w-iki i.k { width: 26px; }
.tel-wf .w-gkart { width: 74%; padding: 6px; border-radius: 5px; background: var(--surface-2);
display: flex; flex-direction: column; gap: 4px;
box-shadow: 0 6px 10px -7px #000; }
.tel-wf .w-gkart.yalin { flex: 1; box-shadow: none; background: transparent; }
.tel-wf .w-gkart b { height: 6px; border-radius: 2px; background: var(--yuva);
box-shadow: inset 0 0 0 1px var(--line-2); }
.tel-wf .w-gkart b.d { background: var(--p1, var(--metal-2)); box-shadow: none; }
.tel-wf .w-govde.gtam, .tel-wf .w-govde.gsade { gap: 5px; padding: 0 12px; }
.tel-wf .w-govde.gtam b, .tel-wf .w-govde.gsade b {
width: 100%; height: 6px; border-radius: 2px; background: var(--yuva);
box-shadow: inset 0 0 0 1px var(--line-2); }
.tel-wf .w-govde.gtam b.d { background: var(--p1, var(--metal-2)); box-shadow: none; }
.tel-wf .w-gsol { flex: 0 0 34%; border-radius: 4px;
background: linear-gradient(160deg, var(--p1, var(--metal-2)),
color-mix(in srgb, var(--p1, var(--metal-2)) 40%, #000)); }
.tel-wf .w-govde.gec { position: relative; overflow: hidden; }
.tel-wf .w-govde.gec .eski { position: absolute; inset: 0; opacity: .32; }
.tel-wf .w-govde.gec .yeni { position: absolute; inset: 0; left: 38%;
box-shadow: -6px 0 10px -6px #000; }
.tel-wf .w-govde.gec.yukari .yeni { left: 0; top: 38%; box-shadow: 0 -6px 10px -6px #000; }
.tel-wf .w-tema { height: 12px; gap: 5px; align-items: center; }
.tel-wf .w-tema i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-parlak); }
.tel-wf .w-tema b { flex: 0 0 16px; height: 9px; border-radius: 999px; background: var(--surface-3);
box-shadow: inset -7px 0 0 -3px var(--metal-2); }
.tel-wf .w-tema.iki b { box-shadow: inset 7px 0 0 -3px var(--metal-2); }
.tel-wf .w-ikiDug { height: 10px; gap: 4px; }
.tel-wf .w-ikiDug i { flex: 1; height: 100%; border-radius: 3px; background: var(--surface-3); }
.tel-wf .w-ikiDug.kucuk { display: flex; height: 7px; gap: 4px; width: 42px; }
.tel-wf .w-ikiDug.kucuk b { flex: 1; border-radius: 2px; background: var(--surface-3); }
.tel-wf .w-uyari { width: 13px; height: 13px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--st-dev, var(--metal-2)); }
.tel-wf .w-uyari.buyuk { width: 18px; height: 18px; }
.tel-wf .w-tik { width: 16px; height: 16px; border-radius: 50%;
background: var(--p1, var(--metal-2));
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px; background-repeat: no-repeat; background-position: center; }
/* ---- Önizleme: çatı, açılış, sistem ---- */
.o-soru { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
font-size: 9px; color: var(--o-metin2);
box-shadow: inset 0 0 0 1px var(--o-cizgi); flex: 0 0 auto; }
.o-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--o-vurgu); flex: 0 0 auto; }
.o-av { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
background: color-mix(in srgb, var(--o-metin) 16%, transparent); }
.o-kcip { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 3px 4px 3px 3px;
border-radius: 999px; box-shadow: inset 0 0 0 1px var(--o-cizgi); }
.o-kcip em { width: 16px; height: 16px; border-radius: 50%;
background: color-mix(in srgb, var(--o-metin) 16%, transparent); }
.o-kcip i { font-style: normal; font-size: 9px; line-height: 1.15; color: var(--o-metin); }
.o-kcip u { display: block; text-decoration: none; font-size: 7.5px; color: var(--o-metin3); }
.o-yanKisi { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px;
font-size: 9px; color: var(--o-metin2); border-top: 1px solid var(--o-cizgi); }
.o-yanKisi em { width: 14px; height: 14px; border-radius: 50%;
background: color-mix(in srgb, var(--o-metin) 16%, transparent); }
.o-ok { font-size: 9px; font-weight: 400; color: var(--o-metin3); text-decoration: none; }
.o-hero { border-radius: var(--o-r); padding: 12px 14px; margin-bottom: var(--o-pad);
background: linear-gradient(135deg, var(--o-vurgu),
color-mix(in srgb, var(--o-vurgu) 45%, #000));
box-shadow: 0 12px 22px -14px var(--o-vurgu); color: var(--o-uzeri); }
.o-hero i { display: block; font-style: normal; font-size: 9px; opacity: .8;
text-transform: uppercase; letter-spacing: .5px; }
.o-hero b { display: block; font-size: 20px; font-family: var(--o-baslik); margin-top: 2px; }
.o-sadeBaslik { font-family: var(--o-baslik); font-size: 15px; padding-bottom: 8px;
margin-bottom: var(--o-pad); border-bottom: 1px solid var(--o-cizgi); }
.o-stat.o-ustSerit { border-top: 3px solid var(--o-vurgu); margin-bottom: var(--o-pad); }
.o-ucKart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: var(--o-pad); }
.o-serit { display: flex; gap: 7px; overflow: hidden; margin-bottom: var(--o-pad); }
.o-serit .o-stat { flex: 0 0 76px; }
.o-tbl.dikeySayac { margin-bottom: var(--o-pad); }
.o-ay { display: flex; align-items: center; justify-content: center; gap: 14px;
padding: 7px; margin-bottom: var(--o-pad); border-radius: var(--o-r);
background: var(--o-yuzey); box-shadow: inset 0 0 0 1px var(--o-cizgi); }
.o-ay u { text-decoration: none; color: var(--o-metin3); font-size: 12px; }
.o-ay b { font-family: var(--o-baslik); font-size: 12px; text-align: center; }
.o-ay i { display: block; font-style: normal; font-size: 8.5px; color: var(--o-vurgu-ink); font-weight: 600; }
.o-yol { font-size: 9px; color: var(--o-metin3); margin-bottom: 8px; }
.o-geriBas { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.o-geriBas u { text-decoration: none; color: var(--o-metin2); font-size: 14px; }
.o-geriBas b { font-family: var(--o-baslik); font-size: 12.5px; }
.o-guncelle { padding: 11px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.o-guncelle i { font-style: normal; font-size: 9px; color: var(--o-metin3); }
.o-acilis { flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 10px; padding: 30px 16px; }
.o-aLogo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
font-family: var(--o-baslik); font-weight: 700; font-size: 18px; color: var(--o-uzeri);
overflow: hidden; }
.o-aLogo.kucuk { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
.o-aLogo.dolu { background: #fff; }
.o-aLogo img { width: 100%; height: 100%; object-fit: contain; }
.o-aLogo.acik { background: none; }
/* Logonun altındaki ışık çizgisi. */
.o-isik { display: block; width: 76px; height: 2px; border-radius: 2px; margin: -2px 0; }
.o-gMarka .o-isik { width: 54px; }
.o-acilis.yan, .o-gMarka.yan { flex-direction: row; align-items: center; gap: 8px; }
.o-acilis.yan .o-isik, .o-gMarka.yan .o-isik { display: none; }
.o-acilis b { font-family: var(--o-baslik); font-size: 13px; }
.o-aCubuk { width: 120px; height: 3px; border-radius: 2px; margin-top: 4px;
background: color-mix(in srgb, var(--o-metin) 12%, transparent); }
.o-aCubuk i { display: block; width: 64%; height: 100%; border-radius: 2px; background: var(--o-vurgu); }
.o-acilis u { text-decoration: none; font-size: 9.5px; color: var(--o-metin3); }
.o-girisOrta { flex: 1; display: grid; place-items: center; padding: 20px 14px; }
.o-gKart { width: 100%; max-width: 230px; padding: 16px 14px; }
.o-gMarka { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 12px; }
.o-gMarka b { font-family: var(--o-baslik); font-size: 12px; }
.o-girisTam, .o-girisSade { padding: 24px 18px; }
.o-girisSade .o-gMarka { align-items: flex-start; }
.o-girisIki { display: flex; min-height: 190px; }
.o-gGorsel { flex: 0 0 38%; border-radius: var(--o-r);
background: linear-gradient(160deg, var(--o-vurgu),
color-mix(in srgb, var(--o-vurgu) 40%, #000)); }
.o-gSag { flex: 1; padding: 14px 0 0 14px; }
.o-dosya { border: 1px dashed var(--o-cizgi); border-radius: var(--o-r);
padding: 16px; text-align: center; margin-bottom: var(--o-pad); }
.o-dosya b { display: block; font-family: var(--o-baslik); font-size: 11.5px; }
.o-dosya i { display: block; font-style: normal; font-size: 9px; color: var(--o-metin3); margin-top: 3px; }
.o-ozetSatir { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px;
border-radius: var(--o-r); margin-bottom: 8px;
background: var(--o-vurgu-soft); color: var(--o-vurgu-ink); }
.o-ozetSatir b { font-family: var(--o-baslik); font-size: 11.5px; }
.o-ozetSatir i { font-style: normal; font-size: 9.5px; opacity: .8; }
.o-esles { display: flex; flex-direction: column; gap: 6px; }
.o-eslesSat { display: flex; align-items: center; gap: 8px; padding: 8px 11px;
border-radius: var(--o-r); background: var(--o-yuzey); font-size: 10px; }
.o-eslesSat span { flex: 1; color: var(--o-metin3); }
.o-eslesSat u { text-decoration: none; color: var(--o-metin3); }
.o-eslesSat em { flex: 1; font-style: normal; text-align: right; font-weight: 600; }
.o-uyari { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--o-baslik); font-size: 16px; font-weight: 700;
color: var(--st-dev); box-shadow: inset 0 0 0 2px currentColor; }
.o-uyari.buyuk { width: 40px; height: 40px; font-size: 21px; }
.o-bos.genis b { font-family: var(--o-baslik); font-size: 13px; color: var(--o-metin); }
.o-tikKutu { position: absolute; inset: 0; display: grid; place-items: center; }
.o-tikKutu span { width: 46px; height: 46px; border-radius: 50%; background: var(--o-vurgu);
background-image: url("data:image/svg+xml;utf8,");
background-size: 24px; background-repeat: no-repeat; background-position: center;
box-shadow: 0 12px 26px -10px #000; }
.o-ilerleme.ust { position: absolute; left: 0; right: 0; top: 0; margin: 0; border-radius: 0; }
.o-destekFab { position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px;
border-radius: 50%; display: grid; place-items: center; font-size: 12px;
background: var(--o-yuzey); color: var(--o-metin2);
box-shadow: 0 8px 14px -8px #000, inset 0 0 0 1px var(--o-cizgi); }
.o-gecis { position: absolute; inset: 0; pointer-events: none; }
.o-gecis.soluk { background: var(--o-bg); opacity: .45; }
.o-gecis.sag { left: 40%; background: var(--o-bg); box-shadow: -12px 0 20px -10px #000; }
.o-gecis.yukari { top: 40%; background: var(--o-bg); box-shadow: 0 -12px 20px -10px #000; }
/* ---- Tel çizim: hareket kararları ---- */
.tel-wf .w-liste.dok b.kucul { transform: scale(.88); background: var(--surface-3); }
.tel-wf .w-liste.dok b.dalga { background: radial-gradient(circle at 30% 50%,
var(--metal-1) 0 22%, var(--surface-2) 22%); }
.tel-wf .w-liste.dok b.koyu { background: var(--yuva); }
.tel-wf .w-liste.sv b.sec { background: var(--metal-2); }
.tel-wf .w-liste.sv.soluk b:not(.sec) { opacity: .35; }
.tel-wf .w-liste.sv.kucuk b:not(.sec) { transform: scaleX(.82); }
.tel-wf .w-liste.sv.kucuk b.sec { transform: scaleY(1.15); }
.tel-wf .w-liste.sv.bulanik b:not(.sec) { filter: blur(1.6px); opacity: .6; }
.tel-wf .w-liste.kat b.bas { flex: .55; background: var(--surface-3); }
.tel-wf .w-liste.kat b.acik { flex: 2.2; }
.tel-wf .w-liste.kat.kay b.acik { background: linear-gradient(180deg, var(--surface-3), var(--surface)); }
.tel-wf .w-liste.kat.soluk b.acik { opacity: .55; }
.tel-wf .w-liste.lg b { opacity: 1; }
.tel-wf .w-liste.lg b:nth-child(2) { opacity: .7; }
.tel-wf .w-liste.lg b:nth-child(3) { opacity: .45; }
.tel-wf .w-liste.lg b:nth-child(4) { opacity: .22; }
.tel-wf .w-liste.lg.kay b:nth-child(2) { transform: translateY(2px); }
.tel-wf .w-liste.lg.kay b:nth-child(3) { transform: translateY(4px); }
.tel-wf .w-liste.lg.kay b:nth-child(4) { transform: translateY(6px); }
.tel-wf .w-bekDug { width: 46px; height: 14px; border-radius: 4px;
background: var(--metal-1); display: grid; place-items: center; }
.tel-wf .w-bekDug.yazi { background: var(--metal-1);
background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.25) 4px 6px); }
.tel-wf .w-donen { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
border: 1.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; }
.tel-wf .w-sayi { display: flex; align-items: baseline; gap: 4px; }
.tel-wf .w-sayi b { width: 18px; height: 10px; border-radius: 2px; background: var(--metal-2); }
.tel-wf .w-sayi b.ok { width: 8px; height: 6px; background: transparent;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-bottom: 6px solid var(--metal-1); border-radius: 0; }
.tel-wf .w-sayi.parla b { background: var(--p1, var(--metal-2)); box-shadow: 0 0 8px -1px var(--p1, var(--metal-2)); }
.tel-wf .w-hm { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.tel-wf .w-hm b { width: 5px; border-radius: 2px; background: var(--metal-1); }
.tel-wf .w-hm b:nth-child(1) { height: 6px; }
.tel-wf .w-hm b:nth-child(2) { height: 10px; }
.tel-wf .w-hm b:nth-child(3) { height: 14px; }
.tel-wf .w-hm b:nth-child(4) { height: 18px; background: var(--metal-2); }
/* ---- Önizleme: hareket katmanı (durdurulmuş kare) ---- */
.o-app.od-kucul .o-r:nth-child(3) { transform: scale(.975); }
.o-app.od-dalga .o-r:nth-child(3) { background: radial-gradient(circle at 26% 50%,
color-mix(in srgb, var(--o-metin) 14%, transparent) 0 26%, transparent 26%); }
.o-app.od-koyu .o-r:nth-child(3) { background: color-mix(in srgb, var(--o-metin) 9%, transparent); }
.o-app.sv-soluk .o-r:not(:nth-child(3)):not(.o-h) { opacity: .42; }
.o-app.sv-kucuk .o-r:not(:nth-child(3)):not(.o-h) { transform: scale(.96); }
.o-app.sv-kucuk .o-r:nth-child(3) { transform: scale(1.02); }
.o-app.sv-bulanik .o-r:not(:nth-child(3)):not(.o-h) { filter: blur(1.4px); opacity: .7; }
.o-app[class*="sv-"] .o-r:nth-child(3) { background: var(--o-vurgu-soft); }
.o-app.lg-sira .o-r:nth-child(3) { opacity: .6; }
.o-app.lg-sira .o-r:nth-child(4) { opacity: .3; }
.o-app.lg-sira .o-r:nth-child(5) { opacity: .12; }
.o-app.lg-kay .o-r:nth-child(3) { opacity: .6; transform: translateY(3px); }
.o-app.lg-kay .o-r:nth-child(4) { opacity: .3; transform: translateY(6px); }
.o-app.lg-kay .o-r:nth-child(5) { opacity: .12; transform: translateY(9px); }
.o-app.sy-parla .o-stat b { color: var(--o-vurgu);
text-shadow: 0 0 14px color-mix(in srgb, var(--o-vurgu) 55%, transparent); }
.o-app.sy-say .o-stat b::after { content: "↑"; font-size: 11px; margin-left: 5px;
color: var(--o-vurgu); vertical-align: 2px; }
.o-dg.bekliyor { opacity: .75; }
.o-halka { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
border: 2px solid color-mix(in srgb, var(--o-uzeri) 35%, transparent);
border-top-color: var(--o-uzeri); }
.o-ilerleme.belirsiz i { width: 38%; margin-left: 22%; }
.o-tikBuyuk { width: 52px; height: 52px; border-radius: 50%; background: var(--o-vurgu);
background-image: url("data:image/svg+xml;utf8,");
background-size: 26px; background-repeat: no-repeat; background-position: center; }
.o-sagKolon.dikey { flex: 0 0 96px; }
.o-izgara.uc { grid-template-columns: repeat(3, 1fr); }
/* Yapıştırma denetimi — model kuralı çiğnediyse sessiz kalmasın. */
.pa-denetim {
margin-top: 10px; padding: 11px 13px; border-radius: 12px;
border: 1px solid var(--red-cizgi); background: var(--red-soft);
}
.pa-denetim b { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
color: var(--red-ink-soft); margin-bottom: 6px; }
.pa-denetim i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.5;
color: var(--ink-soft); padding: 3px 0 3px 18px; position: relative; }
.pa-denetim i::before { content: "•"; position: absolute; left: 6px; color: var(--red-ink); }
.pa-denetim u { display: block; text-decoration: none; margin-top: 7px;
font-size: 10.5px; color: var(--ink-dim); }
/* Rol merdiveni — en altta en dar yetki, en üstte en geniş.
Satırlar kart oldu: eskiden etiketler girdiyi ittiği için her satır
farklı genişlikteydi, merdiven merdiven gibi durmuyordu. */
.rol-kat { display: block; }
/* Tarih alanları: native kontrol koyu arayüze uysun, ikisi yan yana dursun. */
.field input[type="date"] { color-scheme: dark; }
.tarih-ikili { display: flex; gap: 9px; }
.tarih-ikili .field { flex: 1; margin-bottom: 14px; }
.rol-goster { display: flex; flex-direction: column; gap: 5px; }
.rg { display: flex; align-items: center; gap: 10px; padding: 10px 13px;
border-radius: 12px; background: var(--yuva); border: 1px solid var(--line-3);
font-size: 12.5px; color: var(--ink); }
.rg b { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
display: grid; place-items: center; font-size: 10.5px;
background: var(--surface-3); color: var(--ink-soft); }
.rg u { margin-left: auto; text-decoration: none; font-size: 10px; color: var(--ink-dim); }
.rg:first-child { border-color: var(--line-parlak); background: var(--surface-2); }
/* Özet adımındaki çelişki uyarıları — dokununca ilgili adıma gider. */
.adim-not.iyi { border-color: var(--line-2); }
.adim-not.iyi svg { color: var(--st-done, var(--metal-2)); }
.celiski { margin-top: 12px; padding: 12px 13px; border-radius: 13px;
border: 1px solid var(--red-cizgi); background: var(--red-soft); }
.celiski > b { display: flex; align-items: center; gap: 7px; font-size: 12px;
color: var(--red-ink-soft); margin-bottom: 8px; }
.celiski button {
display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 6px;
padding: 9px 11px; border-radius: 10px;
border: 1px solid var(--line-3); background: var(--yuva); font-family: inherit;
}
.celiski button span { display: block; font-size: 12px; color: var(--ink); }
.celiski button i { display: block; font-style: normal; font-size: 10.5px;
color: var(--ink-dim); margin-top: 2px; }
.ck-satir { display: block; font-size: 11.5px; color: var(--ink-soft);
padding: 4px 0 4px 4px; }
@media (hover: hover) {
a:hover { color: var(--red-ink); }
.btn:hover { background: var(--surface-3); }
.btn-primary:hover { background: var(--red-parlak); }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.user-chip:hover { background: var(--surface-3); }
.hesap:hover { border-color: var(--line-parlak); }
.geri-ok:not(.pasif):hover { color: var(--ink-strong); }
.proje-bilgi:hover { background: rgba(8, 7, 6, .9); }
.stat[class*="k-"]:hover {
--k-cizgi: rgba(var(--k-renk), .58);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 0 0 1px rgba(var(--k-renk), .18),
0 10px 30px -14px rgba(var(--k-renk), .8),
0 16px 30px -16px rgba(0, 0, 0, .95);
}
.stat:hover {
transform: translate3d(0, -2px, 0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 16px 30px -16px rgba(0, 0, 0, .95);
}
.kova:hover {
transform: translateY(-3px); border-color: var(--line-parlak);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7),
0 32px 54px -24px rgba(0, 0, 0, .98),
inset 0 1px 0 rgba(255, 255, 255, .09);
}
.proje:hover { background: var(--surface-2); border-color: var(--line-parlak); }
.modul-bas:hover { background: var(--surface-2); }
.sayfa:hover { background: var(--surface-2); }
.sayfa-ekle:hover { color: var(--ink-soft); background: var(--surface-2); }
.mini-link:hover { background: var(--surface-3); color: var(--ink-soft); }
.mini-link.tehlike:hover { color: var(--red-ink); background: var(--red-soft); }
.mini-btn:hover { background: var(--red-soft); color: var(--red-ink); }
.btn-tehlike:hover { background: var(--red-parlak); }
.renk:hover { transform: scale(1.06); }
.sc:hover { border-color: var(--line-parlak); }
.mod:hover { border-color: var(--line-parlak); }
.gorev:hover { background: var(--surface-2); }
.gorev-ekle:hover { color: var(--ink-soft); background: var(--surface-2); }
.f:hover { border-color: var(--line-parlak); }
.gsatir:hover { background: var(--surface-2); }
.gk-x:hover { background: var(--surface-3); color: var(--ink-soft); }
.serit .st:not([disabled]):hover { border-color: var(--line-parlak-2); color: var(--ink-soft); }
.btn-onay:hover { background: var(--st-done-parlak); }
.btn-red:hover { background: var(--red-soft); }
.ss:hover { border-color: var(--line-parlak); }
.standart-bas:hover { background: var(--surface-2); }
/* Araç kartları imleçle yükseliyor — "uçuyor" hissini taşıyan hareket bu. */
.sa-kart:hover {
transform: translateY(-3px);
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .7),
0 32px 54px -24px rgba(0, 0, 0, .98),
inset 0 1px 0 rgba(255, 255, 255, .09);
}
.std-etiket.ekle:hover { border-color: var(--line-parlak); color: var(--ink-soft); }
.btn-primary:hover { background: linear-gradient(180deg, var(--red-acik), var(--red)); }
.proje:hover { background:
linear-gradient(152deg, var(--pg), transparent 42%),
linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
border-color: var(--line-parlak); }
.sc.tehlikeli:hover { border-color: var(--red-cizgi); }
.user-tile:hover { border-color: var(--line-parlak); }
.hp-sat:hover { background: rgba(255, 255, 255, .05); }
.bsc:not(.on):not(:disabled):hover { border-color: var(--line-parlak); background: var(--surface); }
}
/* ==========================================================================
ÇUBUK VE PANEL DOKUSU
Tek karar; üst çubuk, alt sekme, yan menü ve sayfa panelinin hepsine iner.
Sonda duruyor: yukarıdaki temel çubuk kurallarını bilerek eziyor.
========================================================================== */
/* --- tel çizim ---
Beş dokunun kart üstünde birbirinden ayırt edilmesi gerekiyor: yalnız
renk tonu yetmiyor, her biri ayrı bir davranış çiziyor. */
/* Dolu: kapalı zemin, altında sert ayrım çizgisi. */
.tel-wf .w-ust.wd-dolu, .tel-wf .w-alt.wd-dolu {
background: var(--line-parlak); height: 12px; border-radius: 3px;
}
.tel-wf .w-ust.wd-dolu { box-shadow: 0 1px 0 var(--line-parlak); }
.tel-wf .w-alt.wd-dolu { box-shadow: 0 -1px 0 var(--line-parlak); }
.tel-wf .w-ust.wd-dolu i, .tel-wf .w-alt.wd-dolu i { background: var(--metal-2); opacity: .75; }
/* Cam: gövde çubuğun altından geçiyor — çakışma çizimin kendisinde. */
.tel-wf .w-ust.wd-cam, .tel-wf .w-alt.wd-cam {
position: relative; z-index: 2; height: 11px; border-radius: 3px;
background: color-mix(in srgb, var(--line-parlak) 38%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
}
.tel-wf .w-ust.wd-cam { margin-bottom: -8px; }
.tel-wf .w-alt.wd-cam { margin-top: -8px; }
.tel-wf .w-ust.wd-cam i, .tel-wf .w-alt.wd-cam i { background: var(--metal-2); opacity: .5; }
.tel-wf .w-blk.gecen {
background: color-mix(in srgb, var(--p1, var(--metal-2)) 36%, var(--surface-2));
}
/* Çizgi: zemin yok, yalnız saç teli bir ayrım. */
.tel-wf .w-ust.wd-cizgi, .tel-wf .w-alt.wd-cizgi {
background: transparent; border-radius: 0; height: 11px; box-shadow: none;
}
.tel-wf .w-ust.wd-cizgi { border-bottom: 1px solid var(--line-parlak); }
.tel-wf .w-alt.wd-cizgi { border-top: 1px solid var(--line-parlak); }
.tel-wf .w-ust.wd-cizgi i, .tel-wf .w-alt.wd-cizgi i { background: var(--metal-1); }
/* Hap: kenarlardan kopmuş, tam yuvarlak ada. */
.tel-wf .w-ust.wd-hap, .tel-wf .w-alt.wd-hap {
margin: 0 8px; height: 11px; border-radius: 999px; background: var(--surface-3);
box-shadow: 0 0 0 1px var(--line-parlak), 0 3px 6px -3px #000;
}
.tel-wf .w-ust.wd-hap { margin-top: 3px; }
.tel-wf .w-alt.wd-hap { margin-bottom: 3px; }
.tel-wf .w-ust.wd-hap i, .tel-wf .w-alt.wd-hap i { background: var(--metal-2); opacity: .7; }
/* Koyu: gövdeden koyulukla ayrılıyor, üstündeki yazı açık. */
.tel-wf .w-ust.wd-koyu, .tel-wf .w-alt.wd-koyu {
background: #100f0e; height: 11px; border-radius: 3px;
box-shadow: inset 0 0 0 1px #000;
}
.tel-wf .w-ust.wd-koyu i, .tel-wf .w-alt.wd-koyu i { background: var(--metal-2); }
/* --- önizleme: dolu zemin --- */
/* Temel çubuk yüzey ile zemin arasında bir tondaydı; çizgili doku ile
ayırt edilmiyordu. Dolu olan tam yüzey rengi, kapalı bir bant. */
.o-app.ocd-dolu .o-ust, .o-app.ocd-dolu .o-nav, .o-app.ocd-dolu .o-yanMenu {
background: var(--o-yuzey);
}
.o-app.ocd-dolu .o-ust { box-shadow: 0 2px 5px -3px rgba(0, 0, 0, .35); }
.o-app.ocd-dolu .o-nav { box-shadow: 0 -2px 5px -3px rgba(0, 0, 0, .35); }
/* --- önizleme: buzlu cam --- */
.o-app.ocd-cam .o-ust, .o-app.ocd-cam .o-nav {
background: color-mix(in srgb, var(--o-yuzey) 55%, transparent);
backdrop-filter: blur(9px) saturate(150%);
-webkit-backdrop-filter: blur(9px) saturate(150%);
}
.o-app.ocd-cam .o-yanMenu, .o-app.ocd-cam .o-yanFiltre {
background: color-mix(in srgb, var(--o-yuzey) 45%, transparent);
backdrop-filter: blur(9px) saturate(150%);
-webkit-backdrop-filter: blur(9px) saturate(150%);
}
.o-app.ocd-cam .o-sekme { background: color-mix(in srgb, var(--o-yuzey) 40%, transparent); }
/* Camın anlaşılması için içeriğin bir parçası çubuğun altına girsin —
yoksa yarı saydamlık boş zeminde görünmez. */
.o-app.ocd-cam .o-ust { position: relative; z-index: 2; margin-bottom: -7px; }
.o-app.ocd-cam .o-nav { position: relative; z-index: 2; margin-top: -9px; }
.o-app.ocd-cam .o-gov { padding-top: 15px; padding-bottom: 15px; }
/* --- önizleme: çizgiyle ayrık --- */
.o-app.ocd-cizgi .o-ust, .o-app.ocd-cizgi .o-nav,
.o-app.ocd-cizgi .o-yanMenu, .o-app.ocd-cizgi .o-sekme {
background: transparent; box-shadow: none;
}
.o-app.ocd-cizgi .o-ust { border-bottom-color: color-mix(in srgb, var(--o-metin3) 45%, var(--o-cizgi)); }
.o-app.ocd-cizgi .o-nav { border-top-color: color-mix(in srgb, var(--o-metin3) 45%, var(--o-cizgi)); }
/* --- önizleme: yüzen hap --- */
.o-app.ocd-hap .o-ust, .o-app.ocd-hap .o-nav, .o-app.ocd-hap .o-yanMenu {
/* Ada gibi dursun: gövdeden hem boşlukla hem kenarla ayrılıyor. */
border: 0; background: color-mix(in srgb, var(--o-yuzey) 88%, var(--o-metin));
box-shadow: 0 0 0 1px var(--o-cizgi), 0 7px 15px -7px rgba(0, 0, 0, .55);
}
.o-app.ocd-hap .o-ust { margin: 7px 7px 0; border-radius: 999px; padding: 8px 12px; }
.o-app.ocd-hap .o-nav { margin: 0 7px 7px; border-radius: 999px; }
.o-app.ocd-hap .o-yanMenu { margin: 7px 0 7px 7px; border-radius: 14px; }
.o-app.ocd-hap .o-gov { padding-top: 8px; }
/* --- önizleme: koyu kontrast --- */
.o-app.ocd-koyu .o-ust, .o-app.ocd-koyu .o-nav, .o-app.ocd-koyu .o-yanMenu {
background: var(--o-metin); border-color: var(--o-metin);
}
.o-app.ocd-koyu .o-ust b, .o-app.ocd-koyu .o-ust .o-kcip i,
.o-app.ocd-koyu .o-nav span.a, .o-app.ocd-koyu .o-yanMenu i.a { color: var(--o-bg); }
.o-app.ocd-koyu .o-ust .o-ik, .o-app.ocd-koyu .o-ust .o-soru,
.o-app.ocd-koyu .o-nav span, .o-app.ocd-koyu .o-yanMenu i {
color: color-mix(in srgb, var(--o-bg) 68%, var(--o-metin));
}
.o-app.ocd-koyu .o-yanMenu i.a { background: color-mix(in srgb, var(--o-bg) 22%, transparent); }
/* ==========================================================================
SONRADAN EKLENEN KARAR ROZETİ
Kırmızı değil: kırmızı logo, ana düğme, aktif menü ve "Acil" için ayrıldı.
========================================================================== */
.yeni-rozet {
margin-left: 8px; flex: 0 0 auto;
font-family: var(--yazi-kod); font-size: 9px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 999px;
color: #cfe0ff; background: color-mix(in srgb, #5b8def 26%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, #5b8def 55%, transparent);
}
.as-yeni {
flex: 0 0 auto; margin-left: auto;
font-family: var(--yazi-kod); font-size: 10px; font-weight: 600;
padding: 5px 9px; border-radius: 999px; cursor: pointer;
color: #cfe0ff; background: color-mix(in srgb, #5b8def 22%, transparent);
border: 1px solid color-mix(in srgb, #5b8def 50%, transparent);
animation: yeniNabiz 2.4s ease-in-out infinite;
}
.as-yeni:active { transform: scale(.96); }
.as-obek .as-yeni + .ab-kararlar { margin-left: 8px; }
.ab-yeni {
flex: 0 0 auto; align-self: flex-start; margin-left: 8px; cursor: pointer;
white-space: nowrap;
font-family: var(--yazi-kod); font-size: 9.5px; font-weight: 600;
letter-spacing: .05em; padding: 4px 8px; border-radius: 999px;
color: #cfe0ff; background: color-mix(in srgb, #5b8def 22%, transparent);
border: 1px solid color-mix(in srgb, #5b8def 50%, transparent);
}
.ab-yeni:active { transform: scale(.96); }
/* Nokta şeridinde: sonradan eklenen adım parlar. */
.as-noktalar button.yeni i {
background: #5b8def;
box-shadow: 0 0 0 3px color-mix(in srgb, #5b8def 26%, transparent);
animation: yeniNabiz 2.4s ease-in-out infinite;
}
@keyframes yeniNabiz {
0%, 100% { opacity: 1; }
50% { opacity: .58; }
}
@media (prefers-reduced-motion: reduce) {
.as-yeni, .as-noktalar button.yeni i, .sayfa-dug.parla { animation: none; }
.kd-ikon svg, .kd-yazi { transition: none; }
}
/* Kısa ekranlarda (664px ve altı) akış tek ekrana sığmıyordu: seçenek
kartının adı kesiliyordu. Kart küçülür, önizleme zaten ölçekleniyor. */
@media (max-height: 700px) {
.onz-satir { min-height: 132px; margin: 8px 0; }
.bsc { width: 88px; padding: 7px; }
.bsc.sifir { width: 62px; }
.bon { height: 50px; }
.bsc-ad { margin-top: 6px; font-size: 10px; }
.adim-bas { margin-bottom: 8px; }
.ab-yazi i { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; }
}
/* Yeni karar kipindeki İleri: normal akışa değil, özete/sıradaki yeniye gider. */
.ag.ileri.yeni {
color: var(--ink);
border-color: color-mix(in srgb, #5b8def 55%, transparent);
background: color-mix(in srgb, #5b8def 16%, var(--yuva));
box-shadow: inset 0 1px 0 var(--isik);
}
/* ==========================================================================
YAPI AKIŞI — modül ve sayfa kurulumu
İskelet tasarım akışıyla ortak (.akis, .adim-serit, .adim-gez);
burada yalnız gövdeye özel parçalar var.
========================================================================== */
.yapi-arac { display: flex; gap: 9px; }
.yapi-arac .sayfa-dug { flex: 1; }
/* Modül kartı — tel çizim yerine simge, ad, sayfa sayısı. */
.bsc.yk { width: 108px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bsc.yk .yk-ik {
display: grid; place-items: center; width: 100%; height: 46px;
border-radius: 9px; background: var(--surface-2); color: var(--ink-soft);
}
.bsc.yk .bsc-ad { margin-top: 7px; }
.bsc.yk .yk-alt { display: block; font-size: 9.5px; color: var(--ink-faint); }
.bsc.yk.on .yk-ik { background: var(--surface-3); color: var(--ink-strong); }
.bsc.yk.ekle { border-style: dashed; }
/* Sayfa çipleri — akışın içinde sarılarak dizilir. */
.raf.sayfa-raf { flex-wrap: wrap; overflow-x: visible; align-content: flex-start; }
.cip-sec {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
padding: 9px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: var(--yuva);
color: var(--ink-soft); font-family: inherit; font-size: 12px;
transition: border-color .16s var(--ease), background .16s var(--ease);
}
.cip-sec svg { opacity: .7; }
.cip-sec.on {
background: var(--surface-2); border-color: var(--metal-2); color: var(--ink-strong);
}
.cip-sec.on svg { opacity: 1; }
.cip-sec.ekle { border-style: dashed; color: var(--ink-faint); }
.cip-sec:active { transform: scale(.97); }
/* Özet satırı */
.yo { padding: 10px 12px; border-radius: 13px; background: var(--yuva);
border: 1px solid var(--line-2); margin-bottom: 7px; }
.yo b { display: block; font-size: 13px; color: var(--ink-strong); }
.yo i { display: block; font-style: normal; margin-top: 3px;
font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
.yo i:empty { display: none; }
.yo i u { text-decoration: none; font-family: var(--yazi-kod); font-size: 10px;
color: var(--ink-dim); }
.yo i.ky-kural { color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
/* ---- Sayfa künyesi ---- */
.kunye-kaydir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ky-alan { margin-bottom: 12px; }
.ky-bas {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-dim); font-weight: 600; margin: 0 0 7px;
}
.ky-cipler { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ky-cipler .cip-sec { padding: 7px 11px; font-size: 11.5px; }
.ky-alanlar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ky-a {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 7px 6px 11px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface-2);
}
.ky-a b { font-size: 11.5px; color: var(--ink-strong); }
.ky-a i { font-style: normal; font-family: var(--yazi-kod); font-size: 9.5px;
color: var(--ink-dim); }
.ky-a button {
width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer;
border: 0; border-radius: 50%; background: var(--yuva); color: var(--ink-faint);
}
.ky-bos { margin: 0 0 14px; }
/* Özet ve sıra adımlarında önizleme yok: alt blok kalan yeri alır, taşan
kısım kendi içinde kayar. */
.akis.yapi.y-ozet .akis-alt, .akis.yapi.y-kunye .akis-alt {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.akis.yapi .ozet-kaydir {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* Yapı akışında önizleme kararın kendisi (menüdeki modüller): kolay
kolay ezilmesin, taşan liste kendi içinde kaysın. */
.akis.yapi .onz-satir { flex: 1 2 auto; min-height: 238px; }
@media (max-height: 700px) { .akis.yapi .onz-satir { min-height: 178px; } }
/* Özet adımında ileri gidilecek yer yok: düğme kurulumun kendisi. */
.ag.ileri.kur { background: linear-gradient(180deg, var(--red-acik), var(--red));
border-color: var(--red); color: #fff; }
.ag.ileri.kur svg { opacity: 1; }
.ag.ileri.kur:disabled { opacity: .45; }
/* Öbek başlığı taşmasın: uzun not satırı şeridi genişletip bütün sayfayı
yana kaydırıyordu. */
.as-obek .as-ad { min-width: 0; }
.as-obek .as-ad b, .as-obek .as-ad i {
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Künye adımında asıl iş formda: önizleme küçülür, form kalanı alır. */
.akis.yapi.y-kunye .onz-satir { flex: 0 1 auto; min-height: 150px; }
@media (max-height: 700px) { .akis.yapi.y-kunye .onz-satir { min-height: 118px; } }
/* Form alanı türünü belli etsin: kutuya bakınca ne girileceği anlaşılsın. */
.o-alan i em { font-style: normal; color: var(--o-tehlike, #b3122b); margin-left: 2px; }
.o-alan span { position: relative; }
.o-alan span.oa-sec::after,
.o-alan span.oa-iliski::after {
content: "▾"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
font-size: 9px; color: var(--o-metin3);
}
.o-alan span.oa-tarih::after {
content: ""; position: absolute; right: 7px; top: 50%; width: 10px; height: 10px;
margin-top: -5px; border: 1px solid var(--o-metin3); border-radius: 2px;
border-top-width: 3px;
}
.o-alan span.oa-para::before, .o-alan span.oa-sayi::before {
content: "₺"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
font-size: 10px; color: var(--o-metin3);
}
.o-alan span.oa-sayi::before { content: "#"; }
.o-alan span.oa-dosya::after {
content: "Seç"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-size: 8.5px; padding: 2px 6px; border-radius: 999px;
background: var(--o-cizgi); color: var(--o-metin2);
}
.o-alan span.oa-anahtar {
height: 20px; width: 36px; border-radius: 999px;
background: color-mix(in srgb, var(--o-vurgu) 26%, transparent);
border-color: color-mix(in srgb, var(--o-vurgu) 40%, transparent);
}
.o-alan span.oa-anahtar::after {
content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px;
border-radius: 50%; background: var(--o-vurgu);
}
/* ---- Künye alt adımları: sohbet tonu ---- */
.ky-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex: 0 0 auto; }
.ky-yol { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.ky-yol b { color: var(--ink-strong); font-weight: 600; overflow: hidden;
text-overflow: ellipsis; }
.ky-yol s { text-decoration: none; opacity: .4; }
.ky-adimlar { display: flex; gap: 4px; flex: 0 0 auto; }
.ky-adimlar i { width: 16px; height: 3px; border-radius: 2px; background: var(--surface-3); }
.ky-adimlar i.gecti { background: var(--metal-1); }
.ky-adimlar i.on { background: var(--metal-2); }
.sohbet { display: flex; gap: 9px; margin-bottom: 12px; }
.sohbet .av { flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid;
place-items: center; background: var(--surface-3); color: var(--ink-soft);
font-size: 12px; font-weight: 700; }
.sohbet .bal { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 14px 14px 14px 4px;
background: var(--yuva); border: 1px solid var(--line-2);
font-size: 13px; line-height: 1.55; color: var(--ink); }
.sohbet .bal em { font-style: normal; color: var(--ink-strong); font-weight: 600; }
.sohbet .bal i { display: block; font-style: normal; margin-top: 5px;
font-size: 11px; color: var(--ink-faint); }
.ky-not { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); }
.ornekler { display: flex; flex-wrap: wrap; gap: 6px; }
.ornekler button { padding: 6px 10px; border-radius: 999px; font-size: 11px; cursor: pointer;
border: 1px dashed var(--line); background: transparent;
color: var(--ink-faint); font-family: inherit; text-align: left; }
.ornekler button:active { transform: scale(.97); }
/* Alan kartı */
.alan-kart { border: 1px solid var(--line-2); border-radius: 15px; background: var(--yuva);
padding: 11px 12px; margin-bottom: 9px; }
.alan-kart.eksik { border-color: color-mix(in srgb, #d0a13c 55%, transparent); }
.ak-ust { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ak-ust b { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-ust u { text-decoration: none; font-family: var(--yazi-kod); font-size: 10px;
color: var(--ink-dim); padding: 3px 8px; border-radius: 999px;
background: var(--surface-2); flex: 0 0 auto; }
.ak-sil { width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer;
border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-faint); }
.ak-soru { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 8px; }
.ak-degerler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ak-degerler span { padding: 6px 10px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
background: var(--surface-2); border: 1px solid var(--line);
color: var(--ink-strong); }
.ak-degerler span em { font-style: normal; color: var(--ink-faint); margin-left: 4px; }
.ak-degerler span.ekle { border-style: dashed; background: transparent; color: var(--ink-faint); }
.ak-anahtar { display: flex; align-items: center; gap: 9px; font-size: 12px; cursor: pointer;
color: var(--ink-faint); background: transparent; border: 0; padding: 0;
font-family: inherit; }
.ak-anahtar > span { width: 34px; height: 20px; border-radius: 999px; flex: 0 0 34px;
background: var(--surface-3); position: relative;
transition: background .16s var(--ease); }
.ak-anahtar > span::after { content: ""; position: absolute; left: 2px; top: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--ink-faint);
transition: transform .16s var(--ease), background .16s var(--ease); }
.ak-anahtar.on { color: var(--ink-strong); }
.ak-anahtar.on > span { background: var(--metal-1); }
.ak-anahtar.on > span::after { transform: translateX(14px); background: var(--ink-strong); }
.as2 { display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 11px; border-radius: 13px; cursor: pointer; font-family: inherit;
border: 1px dashed var(--line); background: transparent;
color: var(--ink-faint); font-size: 12.5px; width: 100%; }
/* Rol merdiveni — en üst katman en üstte dursun */
.rol-merdiven { display: flex; flex-direction: column-reverse; gap: 6px; }
.rm { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
border: 1px solid var(--line-2); background: var(--yuva); cursor: pointer;
font-family: inherit; text-align: left; width: 100%; }
.rm.on { border-color: var(--metal-2); background: var(--surface-2); }
.rm.oto { border-style: dashed; }
.rm-kat { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
background: var(--surface-3); color: var(--ink-dim); font-size: 10px; }
.rm.on .rm-kat { background: var(--metal-1); color: var(--ink-strong); }
.rm-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-ad b { font-size: 13px; color: var(--ink-strong); }
.rm-ad i { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.rm-tik { flex: 0 0 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
background: var(--surface-3); color: var(--ink-faint); }
.rm.on .rm-tik { background: var(--metal-2); color: #17150f; }
/* Ekran başlığı */
.bslk { margin: 2px 0 14px; }
.bslk b { display: block; font-family: var(--baslik); font-size: 19px;
color: var(--ink-strong); letter-spacing: -.2px; }
.bslk em { display: block; margin-top: 3px; font-style: normal; font-size: 12px;
color: var(--ink-faint); }
/* Kim ne yapabilir */
.yetki { display: flex; flex-direction: column; gap: 8px; }
.yt { padding: 9px 11px; border-radius: 13px; border: 1px solid var(--line-2);
background: var(--yuva); }
.yt b { display: block; font-size: 12.5px; color: var(--ink-strong); margin-bottom: 7px; }
.yt .cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.yt .cipler button { padding: 5px 10px; border-radius: 999px; font-size: 11px; cursor: pointer;
border: 1px solid var(--line); background: transparent;
color: var(--ink-faint); font-family: inherit; }
.yt .cipler button.on { background: var(--surface-2); border-color: var(--metal-2);
color: var(--ink-strong); }
/* Anladım kartı */
.ozet-bal { padding: 14px; border-radius: 16px; background: var(--yuva);
border: 1px solid var(--metal-1); }
.ozet-bal p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.ozet-bal p b { color: var(--ink-strong); }
.ozet-bal .satir { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-faint);
padding: 7px 0; border-top: 1px solid var(--line-2); }
.ozet-bal .satir u { text-decoration: none; color: var(--ink-soft); flex: 0 0 74px; }
.ozet-bal .satir span { flex: 1; min-width: 0; word-break: break-word; }
/* Künye alt adımlarında gövde kayar, düğmeler sabit durur. */
.akis.yapi.y-kunye .akis-alt { flex: 1 1 auto; min-height: 0; display: flex;
flex-direction: column; }
/* Anlat adımı: serbest metin kutusu akışın içinde. */
.ky-alan textarea {
width: 100%; box-sizing: border-box; resize: none;
font-family: inherit; font-size: 13px; line-height: 1.6;
padding: 11px 12px; border-radius: 13px;
border: 1px solid var(--line); background: var(--yuva); color: var(--ink);
}
.ky-alan textarea:focus { outline: none; border-color: var(--metal-1); }
.ky-not svg { vertical-align: -2px; margin-right: 4px; }
.ak-ust.kalip { margin-bottom: 4px; }
.ak-ozet { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.ak-ozet i { font-style: normal; color: var(--ink-dim); }
/* Kontrol ekranı: sayfa kartına dokununca künyesine gidilir. */
.yo.dokun { display: block; width: 100%; text-align: left; cursor: pointer;
font-family: inherit; }
.yo.dokun:active { transform: scale(.995); }
.yo.eksik { border-color: color-mix(in srgb, #d0a13c 55%, transparent); }
.yo b em { font-style: normal; font-size: 9px; letter-spacing: .1em;
text-transform: uppercase; margin-left: 7px; padding: 2px 7px;
border-radius: 999px; color: #f0d8a0;
background: color-mix(in srgb, #d0a13c 24%, transparent); }
.yo-kalip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.yo-kalip u { text-decoration: none; font-size: 9.5px; padding: 3px 8px;
border-radius: 999px; background: var(--surface-2); color: var(--ink-dim); }
/* ==========================================================================
YAPI AĞACI — modül ve sayfalar tek tuvalde
Yapı durağı doğrudan burayla açılır; bir sayfaya dokununca o sayfa
kökün yerine geçip kendi dallarını açar.
========================================================================== */
/* Görünümün içinde normal akışta durur: mutlak konumlandırınca üst çubuğun
altına giriyor, düğmeler alt çubuğun altında kalıyordu. */
.ag-ekran { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ag-yol { display: flex; align-items: center; gap: 7px; padding: 0 0 10px;
flex: 0 0 auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.ag-yol b { color: var(--ink-strong); font-weight: 600; overflow: hidden;
text-overflow: ellipsis; }
.ag-yol s { text-decoration: none; opacity: .4; }
.ag-rozet { margin-left: auto; font-size: 9.5px; padding: 3px 8px; border-radius: 999px;
background: var(--surface-2); color: var(--ink-dim); text-transform: none;
letter-spacing: 0; }
.ag-geri { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft);
display: grid; place-items: center; }
.ag-geri svg { transform: rotate(180deg); }
.ag-govde { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ag-alt { flex: 0 0 auto; display: flex; gap: 9px; padding: 12px 0 0; }
.ag-dug { flex: 1; min-width: 0; height: 46px; border-radius: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 7px;
border: 1px solid var(--line); background: var(--yuva); color: var(--ink-soft);
font-family: inherit; font-size: 13px; font-weight: 600; }
.ag-dug.ana { background: var(--red); border-color: var(--red); color: #fff; }
.ag-dug:disabled { opacity: .45; cursor: default; }
.ag-dug:active { transform: scale(.98); }
.tuval { position: relative; box-sizing: border-box; padding: 4px 0 20px; }
.tuval svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nd { position: absolute; box-sizing: border-box; border-radius: 14px; cursor: pointer;
border: 1px solid var(--line); background: var(--yuva); font-family: inherit;
text-align: left; padding: 9px 12px; display: flex; flex-direction: column;
justify-content: center; animation: ndGir .34s var(--ease) both; }
@keyframes ndGir { from { opacity: 0; transform: translateX(-10px) scale(.96); } }
.nd:active { transform: scale(.98); }
.nd b { font-size: 13px; color: var(--ink-strong); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.nd i { font-style: normal; font-size: 10px; color: var(--ink-faint); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd .nokta { position: absolute; right: 10px; top: 11px; width: 8px; min-width: 8px;
height: 8px; min-height: 8px; padding: 0; border-radius: 50%; display: block; }
.nd.kok { border-radius: 50%; padding: 0; align-items: center; justify-content: center;
background: #17150f; border: 1.5px solid var(--p1);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--p1) 12%, transparent); }
.nd.kok b { font-size: 15px; color: var(--p1); }
.nd.modul { background: linear-gradient(150deg,
color-mix(in srgb, var(--p1) 16%, var(--yuva)), var(--yuva));
border-color: color-mix(in srgb, var(--p1) 45%, transparent); }
.nd.secili { border-color: var(--p1);
box-shadow: 0 0 0 1px var(--p1), 0 8px 22px -12px var(--p1); }
.nd.tamam { border-color: color-mix(in srgb, var(--st-done-t, #3d9970) 50%, transparent); }
.nd.tamam .nokta { background: var(--st-done-t, #3d9970); }
.nd.eksik { border-color: color-mix(in srgb, var(--st-dev-t, #d0a13c) 50%, transparent); }
.nd.eksik .nokta { background: var(--st-dev-t, #d0a13c); animation: ndNabiz 1.8s ease-in-out infinite; }
@keyframes ndNabiz { 50% { opacity: .35; } }
.nd.hayalet { border-style: dashed; background: transparent; align-items: center;
justify-content: center; }
.nd.hayalet b { color: var(--ink-faint); font-weight: 500; }
.nd.hayalet svg { vertical-align: -2px; margin-right: 3px; }
.nd.dal { background: var(--surface-2); }
.nd.dal .rk { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
border-radius: 0 3px 3px 0; }
@media (prefers-reduced-motion: reduce) {
.nd { animation: none; }
.nd.eksik .nokta { animation: none; }
}
/* Dokunulmamış ama zorunlu olmayan dal: ne yeşil ne sarı. */
.nd.bos .nokta { background: var(--line-parlak); }
.ag-dug.guclu { background: var(--surface-2); border-color: var(--metal-2);
color: var(--ink-strong); }
.ag-dug.geri svg { transform: rotate(180deg); }
/* Dokunulmamış ama zorunlu olmayan dal: ne yeşil ne sarı. */
.nd.bos .nokta { background: var(--line-parlak); }
.ag-dug.guclu { background: var(--surface-2); border-color: var(--metal-2);
color: var(--ink-strong); }
.ag-dug.geri svg { transform: rotate(180deg); }
/* ---- Ağaç rayı: derinleştikçe sola kayar ---- */
/* Sütunlar birbirine göre ortalanır: ana düğüm çocuklarının tam hizasında
durur, ağaç böyle okunuyor. */
/* Ray sabit yükseklikte: içerik uzayınca sütun kendi içinde kayar, yoksa
bütün ağaç aşağı yukarı zıplıyordu. */
.ag-govde { overflow: hidden; }
.ag-ray { display: flex; align-items: center; height: 100%;
transition: transform .42s cubic-bezier(.22, .61, .36, 1); }
.sut { flex: 0 0 auto; box-sizing: border-box; position: relative; display: flex;
padding: 6px 0; max-height: 100%; }
/* Gövde çizgisi sütunun 12px içinde: tam kenarda olunca üstteki kartın
arkasında kalıp görünmüyordu. */
.sut.cizgili::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 26px;
width: 1px; background: var(--line-parlak); opacity: .85; }
.sut-ic { flex: 1; min-width: 0; padding: 0 0 0 14px; display: flex; flex-direction: column;
gap: 8px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: none; }
.sut-ic::-webkit-scrollbar { display: none; }
.sut.cizgili > .sut-ic { padding-left: 26px; }
.sut-ic.tek { justify-content: center; }
.sut.cizgili > .sut-ic.duzen { gap: 10px; padding-left: 24px; overflow-x: hidden; }
/* Düzenleyici sütunu ekranın boyunu alır: içerik uzayınca ağaç oynamaz. */
.sut.son { align-self: stretch; }
.sut:first-child .sut-ic { padding-left: 0; }
/* Ray içindeki düğümler artık akışta: mutlak konum yok. */
.ag-ray .nd { position: relative; left: auto; right: auto; top: auto;
flex: 0 0 auto; min-height: 52px; }
.ag-ray .nd.kok { width: 46px; height: 46px; min-height: 46px; align-self: center; }
.ag-ray .nd.hayalet { min-height: 44px; }
/* Düzenleyici sütunu */
.dz-bas { display: flex; align-items: center; gap: 10px; padding: 2px 0 2px; }
.dz-rk { width: 4px; align-self: stretch; min-height: 30px; border-radius: 3px;
background: var(--dr); }
.dz-yaz { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dz-yaz b { font-size: 15px; color: var(--ink-strong); }
.dz-yaz i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.dz-onizleme { flex: 0 0 170px; height: 170px; min-height: 170px; position: relative; border-radius: 14px;
border: 1px solid var(--line-2); background: var(--yuva-2); overflow: hidden; }
.dz-onizleme .onz-goz { position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center; overflow: hidden; }
.dz-onizleme .onz-goz > .o-app { max-width: 360px; flex: 0 0 auto;
transform-origin: center; transition: transform .16s var(--ease); }
.dz-onizleme .onk-not { display: none; }
.dz-govde { flex: 1 1 auto; min-height: 0; }
.dz-govde .kunye-kaydir { overflow: visible; }
.dz-govde .sohbet { display: none; }
.dz-govde .raf { margin: 0; padding: 6px 0; max-width: 100%; }
.dz-govde .ky-cipler, .dz-govde .kunye-kaydir { max-width: 100%; }
/* ---- Ağaç: oklu bağlantılar ---- */
.sut.cizgili .sut-ic > .nd,
.sut.cizgili .sut-ic > .dal-sil { position: relative; }
.sut.cizgili .sut-ic > .nd::before {
content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px;
background: var(--line-2);
}
.sut.cizgili .sut-ic > .nd::after {
content: ""; position: absolute; left: -5px; top: 50%; margin-top: -3.5px;
border: 3.5px solid transparent; border-left-color: var(--line-parlak);
border-right: 0;
}
.sut.cizgili .sut-ic > .nd.secili::before { background: var(--p1); }
.sut.cizgili .sut-ic > .nd.secili::after { border-left-color: var(--p1); }
.sut.cizgili .sut-ic > .nd.hayalet::before { background: transparent;
border-top: 1px dashed var(--line-2); }
.sut.cizgili .sut-ic > .nd.hayalet::after { border-left-color: var(--line-2); }
/* Tek düğümlü sütunda dikey gövde yok, yalnız ok. */
.sut.cizgili:has(.sut-ic.tek)::before { display: none; }
.sut.cizgili .sut-ic.tek > .nd::before { left: -24px; width: 21px; }
/* ---- Yol izi ---- */
.ag-yol { gap: 9px; }
.ag-geri { margin-left: 0; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 12px;
background: var(--surface-2); border-color: var(--line); }
.ag-geri svg { transform: rotate(180deg); }
.yol-iz { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px;
overflow-x: auto; scrollbar-width: none; }
.yol-iz::-webkit-scrollbar { display: none; }
.yol-iz s { text-decoration: none; color: var(--ink-dim); opacity: .5; display: grid;
place-items: center; flex: 0 0 auto; }
.yi { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid transparent; background: var(--surface-2); color: var(--ink-soft);
font-family: inherit; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yi.son { background: transparent; color: var(--ink-strong); font-weight: 600;
border-color: var(--line-2); }
.yi:disabled { cursor: default; }
/* Dal sütununun altındaki sessiz kaldır düğmesi */
.dal-sil { margin-top: 4px; align-self: flex-start; display: inline-flex; align-items: center;
gap: 6px; padding: 8px 11px; border-radius: 11px; cursor: pointer;
border: 1px dashed var(--line-2); background: transparent;
color: var(--ink-faint); font-family: inherit; font-size: 11.5px; }
.ag-dug.tek { flex: 1; }
/* Düzenleyicide yönerge baloncuğu görünsün: gizleyince ne yapılacağı
anlaşılmıyordu. */
.dz-govde .sohbet { display: flex; margin-bottom: 10px; }
.dz-govde .sohbet .av { display: none; }
.dz-govde .sohbet .bal { border-radius: 12px; font-size: 12.5px; }
/* ---- Kalıpların önizlemedeki karşılığı ---- */
.o-tbl.o-bakiyeli .o-r { gap: 8px; }
.o-tbl.o-bakiyeli .o-r em { font-style: normal; flex: 0 0 auto; font-size: 10px;
color: var(--o-metin3); font-family: "IBM Plex Mono", monospace; }
.o-tbl.o-bakiyeli .o-r.o-h em { font-size: 8.5px; letter-spacing: .04em; }
.o-r.o-alt span { padding-left: 14px; }
.o-r .o-chev { font-style: normal; display: inline-block; width: 10px; color: var(--o-metin3);
font-size: 9px; }
.o-bacak { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 10px 7px 22px;
background: color-mix(in srgb, var(--o-vurgu) 7%, transparent); }
.o-bacak span { font-size: 8.5px; padding: 2px 7px; border-radius: 999px;
background: var(--o-yuzey); color: var(--o-metin2);
border: 1px solid var(--o-cizgi); }
.o-satirlar { padding: 3px 10px 6px 22px;
background: color-mix(in srgb, var(--o-vurgu) 6%, transparent); }
.o-satirlar i { display: flex; justify-content: space-between; font-style: normal;
font-size: 9px; color: var(--o-metin2); padding: 2px 0; }
.o-satirlar i b { font-weight: 500; }
.o-satirlar i u { text-decoration: none; font-family: "IBM Plex Mono", monospace; }
.o-akisSerit { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.o-akisSerit span { font-size: 9px; padding: 3px 8px; border-radius: 999px;
background: var(--o-yuzey); border: 1px solid var(--o-cizgi);
color: var(--o-metin3); }
.o-akisSerit span.a { background: var(--o-vurgu-soft); color: var(--o-vurgu-ink);
border-color: color-mix(in srgb, var(--o-vurgu) 40%, transparent); }
.o-akisSerit em { font-style: normal; font-size: 9px; color: var(--o-metin3); opacity: .6; }
.o-grupBas.ic { font-size: 8.5px; padding: 5px 10px 3px; }
/* Boş önizleme: uydurma veri yerine yönlendirme */
.dz-onizleme.bos { display: grid; place-items: center; padding: 16px;
border-style: dashed; }
.dz-bos { display: flex; flex-direction: column; align-items: center; gap: 9px;
text-align: center; color: var(--ink-faint); max-width: 240px; }
.dz-bos i { font-style: normal; font-size: 12px; line-height: 1.5; }
.dz-ipucu { margin: -4px 0 0; text-align: center; font-size: 10.5px;
color: var(--ink-faint); }
/* Sütun seti kartı */
.kset { border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 10px;
margin-bottom: 8px; background: var(--surface-2); }
.kset-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.kset-ust b { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kset-ust button { width: 20px; height: 20px; display: grid; place-items: center;
border: 0; border-radius: 50%; cursor: pointer;
background: var(--yuva); color: var(--ink-faint); }
.kset .ak-degerler { margin-bottom: 0; }
.cip-sec .cs-alt { font-style: normal; font-size: 9.5px; color: var(--ink-faint);
margin-left: 5px; }
.cip-sec.on .cs-alt { color: var(--ink-soft); }
/* ==========================================================================
YAPI AĞACI — dikey
Tepede firma, altında oklarla modüller. Modül seçilince modül tepeye
çıkar, sayfaları altına dizilir, sayfaya dokununca künyesi dallanır.
========================================================================== */
.dk { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dk-yol { display: flex; align-items: center; gap: 6px; padding: 0 0 10px; flex: 0 0 auto;
overflow-x: auto; scrollbar-width: none; }
.dk-yol::-webkit-scrollbar { display: none; }
.dk-yol s { text-decoration: none; color: var(--ink-dim); opacity: .5; flex: 0 0 auto; }
.dk-yol .yi { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid transparent; background: var(--surface-2);
color: var(--ink-soft); font-family: inherit; font-size: 11px;
letter-spacing: .04em; text-transform: uppercase; max-width: 150px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-yol .yi.son { background: transparent; color: var(--ink-strong); font-weight: 600;
border-color: var(--line-2); }
.dk-yol .yi:disabled { cursor: default; }
.dk-govde { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding-bottom: 8px; }
.dk-alt { flex: 0 0 auto; display: flex; gap: 9px; padding: 10px 0 0; }
/* Firma kökü */
.kokk { display: flex; flex-direction: column; align-items: center; }
.kokk .halka { width: 62px; height: 62px; border-radius: 50%; display: grid;
place-items: center; overflow: hidden; background: #17150f;
border: 1.5px solid var(--p1);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--p1) 10%, transparent); }
.kokk .halka b { font-size: 19px; color: var(--p1); font-family: var(--yazi-baslik); }
.kokk .halka .mk-logo { width: 100%; height: 100%; border-radius: 50%; }
.kokk .fad { margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
/* Aşağı ok */
.inik { width: 1px; height: 22px; background: var(--line-parlak); margin: 8px auto 0;
position: relative; }
.inik::after { content: ""; position: absolute; left: 50%; bottom: -1px;
transform: translateX(-50%); border: 4px solid transparent;
border-top-color: var(--line-parlak); border-bottom: 0; }
/* Dikey gövde ve oklar */
.gvd { position: relative; margin: 6px 0 0 22px; padding-left: 20px;
border-left: 1px solid var(--line-parlak); }
.gvd > .knt::before, .gvd > .knt::after { content: ""; position: absolute; top: 26px; }
.gvd > .knt::before { left: -20px; width: 14px; height: 1px; background: var(--line-parlak); }
.gvd > .knt::after { left: -7px; margin-top: -3.5px; border: 3.5px solid transparent;
border-left-color: var(--line-parlak); border-right: 0; }
.knt { display: block; width: 100%; box-sizing: border-box; text-align: left;
font-family: inherit; border: 1px solid var(--line); background: var(--yuva);
border-radius: 15px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer;
position: relative; animation: ndGir .3s var(--ease) both; }
@keyframes ndGir { from { opacity: 0; transform: translateY(-6px); } }
.knt:active { transform: scale(.99); }
.knt b { display: block; font-size: 14.5px; color: var(--ink-strong); }
.knt i { display: block; font-style: normal; font-size: 11px; color: var(--ink-faint);
margin-top: 3px; }
.knt .rz { position: absolute; right: 13px; top: 15px; width: 8px; height: 8px;
border-radius: 50%; }
.knt.tamam { border-color: color-mix(in srgb, var(--st-done-t) 45%, transparent); }
.knt.tamam .rz { background: var(--st-done-t); }
.knt.eksik { border-color: color-mix(in srgb, var(--st-dev-t) 45%, transparent); }
.knt.eksik .rz { background: var(--st-dev-t); animation: ndNabiz 1.8s ease-in-out infinite; }
@keyframes ndNabiz { 50% { opacity: .35; } }
.knt.modul { background: linear-gradient(150deg,
color-mix(in srgb, var(--p1) 15%, var(--yuva)), var(--yuva));
border-color: color-mix(in srgb, var(--p1) 45%, transparent); }
.knt.modul.tepe { margin-bottom: 0; }
.knt.acik { border-color: var(--p1);
box-shadow: 0 0 0 1px var(--p1), 0 8px 20px -12px var(--p1); margin-bottom: 4px; }
.knt.hayalet { border-style: dashed; background: transparent; text-align: center; }
.knt.hayalet b { color: var(--ink-faint); font-weight: 500; }
.knt.hayalet i { color: var(--ink-dim); }
.knt.hayalet svg { vertical-align: -2px; margin-right: 4px; }
/* Sayfanın künye dalları */
.dal2 { margin: 2px 0 12px 18px; padding-left: 18px;
border-left: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.dal2 .d { position: relative; display: flex; align-items: center; gap: 9px;
padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line-2);
background: var(--surface-2); font-family: inherit; text-align: left;
cursor: pointer; animation: ndGir .26s var(--ease) both; }
.dal2 .d::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px;
height: 1px; background: var(--line-2); }
.dal2 .d::after { content: ""; position: absolute; left: -7px; top: 50%; margin-top: -3px;
border: 3px solid transparent; border-left-color: var(--line-2);
border-right: 0; }
.dal2 .rk { width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 3px; }
.dal2 .yz { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dal2 .yz b { font-size: 12.5px; color: var(--ink-strong); }
.dal2 .yz i { font-style: normal; font-size: 10px; color: var(--ink-faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dal2 .nk { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.dal2 .d.tamam .nk { background: var(--st-done-t); }
.dal2 .d.eksik .nk { background: var(--st-dev-t); animation: ndNabiz 1.8s ease-in-out infinite; }
.dal2 .d.bos .nk { background: var(--line-parlak); }
.dal2 .d.sil { border-style: dashed; background: transparent; justify-content: center; }
.dal2 .d.sil b { color: var(--ink-faint); font-weight: 500; }
.dal2 .d.sil svg { vertical-align: -1px; margin-right: 4px; }
/* Anlat ekranı */
.anl-kutu { width: 100%; box-sizing: border-box; min-height: 200px; resize: none;
font-family: inherit; font-size: 13.5px; line-height: 1.6; padding: 13px 14px;
border-radius: 15px; border: 1px solid var(--line); background: var(--yuva);
color: var(--ink); }
.anl-kutu:focus { outline: none; border-color: var(--metal-1); }
.anl-dug { display: flex; gap: 9px; margin-top: 11px; }
.anl-dug button, .anl-dug a { flex: 1; height: 48px; text-decoration: none; border-radius: 15px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600; display: flex;
align-items: center; justify-content: center; gap: 7px;
border: 1px solid var(--line); background: var(--yuva);
color: var(--ink-soft); }
.anl-dug a { color: var(--ink); }
.anl-dug button.ana { background: var(--surface-2); border-color: var(--metal-2);
color: var(--ink-strong); }
.anl-dug button:disabled { opacity: .45; cursor: default; }
.anl-not { margin-top: 14px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; }
/* Düzenleme ekranı */
.dk-govde > .dz-bas { padding-bottom: 10px; }
.dk-govde > .dz-onz { margin-bottom: 12px; }
/* ==========================================================================
NOT DEFTERİ — tepeden açılan geçici karalama
Hiçbir yere kaydedilmez; boyu alt kenarından çekilerek ayarlanır.
========================================================================== */
#notluk {
position: fixed; left: 0; right: 0; top: 0; z-index: 60;
display: flex; flex-direction: column;
height: 300px; box-sizing: border-box;
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0;
background: color-mix(in srgb, var(--surface) 92%, #000);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
#notluk.kapali { transform: translateY(-101%); opacity: 0; pointer-events: none; }
.nt-ust { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-bottom: 9px; }
.nt-ust b { font-size: 13px; color: var(--ink-strong); }
.nt-alt { flex: 1; font-size: 10px; color: var(--ink-faint); letter-spacing: .04em;
text-transform: uppercase; }
.nt-dug { padding: 6px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
font-size: 11px; border: 1px solid var(--line); background: var(--yuva);
color: var(--ink-soft); }
.nt-dug:active { transform: scale(.96); }
.nt-kapat { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
border-radius: 10px; border: 1px solid var(--line-2); background: transparent;
color: var(--ink-soft); }
.nt-kapat svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; }
#nt-metin {
flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none;
font-family: var(--yazi-kod); font-size: 13px; line-height: 1.6;
padding: 11px 12px; border-radius: 13px; border: 1px solid var(--line);
background: var(--yuva); color: var(--ink);
}
#nt-metin:focus { outline: none; border-color: var(--metal-1); }
/* Alt kenardan çekerek boyu ayarla */
.nt-tut { flex: 0 0 auto; height: 22px; display: grid; place-items: center;
cursor: ns-resize; touch-action: none; }
.nt-tut i { width: 46px; height: 4px; border-radius: 999px; background: var(--line-parlak); }
.nt-tut:active i { background: var(--metal-2); }
#notluk.tasima { transition: none; }
#btn-not { flex: 0 0 auto; }
#btn-not.acik { background: var(--surface-3); color: var(--ink-strong); }
/* Dar ekranda başlığı ezmesin. */
@media (max-width: 900px) {
#topbar #btn-not { width: 34px; height: 34px; }
#topbar #btn-not svg { width: 16px; height: 16px; }
#topbar { gap: 7px; }
}
/* İç içe geçen ağaç: modülün altındaki sayfalar bir kat daha girintili. */
.gvd.ic { margin: 2px 0 12px 18px; padding-left: 18px;
border-left: 1px dashed var(--line-2); }
.gvd.ic > .knt::before { left: -18px; width: 12px; background: var(--line-2); }
.gvd.ic > .knt::after { left: -7px; border-left-color: var(--line-2); }
.knt.sayfa { padding: 11px 13px; }
.knt.sayfa b { font-size: 13.5px; }
.knt.modul.acik { border-color: var(--p1);
box-shadow: 0 0 0 1px var(--p1), 0 8px 20px -12px var(--p1);
margin-bottom: 4px; }
.knt.hayalet.sil { padding: 9px 12px; }
.knt.hayalet.sil b { font-size: 12px; color: var(--ink-dim); }
/* Modül kuralları satırı */
.gvd.ic.kural { margin-bottom: 4px; }
.mk-kural { display: flex; align-items: center; gap: 11px; padding: 12px 13px;
border-radius: 14px; width: 100%; font-family: inherit; text-align: left;
cursor: pointer; margin-bottom: 9px; position: relative;
border: 1px solid color-mix(in srgb, #5b8def 30%, transparent);
background: color-mix(in srgb, #5b8def 8%, var(--yuva)); }
.mk-kural.eksik { border-color: color-mix(in srgb, var(--st-dev-t) 40%, transparent);
background: color-mix(in srgb, var(--st-dev-t) 8%, var(--yuva)); }
.mk-kural .ik { flex: 0 0 30px; height: 30px; border-radius: 10px; display: grid;
place-items: center; color: #8fb4f5;
background: color-mix(in srgb, #5b8def 18%, transparent); }
.mk-kural.eksik .ik { color: var(--st-dev-t);
background: color-mix(in srgb, var(--st-dev-t) 18%, transparent); }
.mk-kural .yz { flex: 1; min-width: 0; }
.mk-kural .yz b { display: block; font-size: 13.5px; color: var(--ink-strong); }
.mk-kural .yz i { display: block; font-style: normal; font-size: 11px;
color: var(--ink-faint); margin-top: 2px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.mk-kural .ok2 { color: var(--ink-dim); font-size: 16px; flex: 0 0 auto; }
/* Sayfanın üç sorusu */
.dal2 .d .yz i { white-space: normal; }
/* ==========================================================================
1 · FİRMA BİLGİLERİ — DASHBOARD
Tepede işletme görseli, altında aşama şeridi, sonra üç kart. Eski hâlinde
yedi ayrı kutu vardı; aynı bilgi tek ızgaraya sığıyor. Sınıfların hepsi
`fb-` önekli: `.as`, `.dk`, `.kisi` gibi adlar başka bileşenlerin.
========================================================================== */
:root{
--fb-kunye:#7d93b8;
--fb-kisi:#c4a05c;
--fb-teknik:#8fae4a;
}
/* ---------- Kartlar ---------- */
.fb-kart{
position:relative; overflow:hidden;
margin-bottom:10px; padding:11px 12px 12px;
border:1px solid var(--line); border-radius:var(--radius-lg);
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 2px 4px -2px rgba(0,0,0,.75),
0 16px 30px -22px rgba(0,0,0,.95),
inset 0 1px 0 var(--isik);
}
.fb-kart::before{
content:'';
position:absolute; top:-55%; left:-16%; width:58%; height:190%;
background:linear-gradient(101deg, rgba(255,255,255,.05), transparent 60%);
pointer-events:none;
}
.fb-ust{ position:relative; display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.fb-ik{
flex:0 0 28px;
width:28px; height:28px;
display:flex; align-items:center; justify-content:center;
border-radius:9px; color:var(--kr);
background:linear-gradient(180deg,
color-mix(in srgb, var(--kr) 22%, transparent),
color-mix(in srgb, var(--kr) 9%, transparent));
border:1px solid color-mix(in srgb, var(--kr) 32%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.fb-bas{
flex:1; min-width:0;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px;
color:var(--ink-strong);
}
.fb-kalem{
flex:0 0 26px;
width:26px; height:26px; padding:0;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line-3); border-radius:8px; cursor:pointer;
color:var(--ink-dim); background:var(--yuva);
transition:transform .16s var(--yay), color .16s var(--ease);
}
.fb-kalem:active{ transform:scale(.9); color:var(--ink-soft); }
/* ---------- Künye ızgarası ---------- */
.fb-kg{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }
/* Alan adı gibi uzun tek parça değerler iki sütuna sığmıyor, kesiliyordu. */
.fb-kg.tek{ grid-template-columns:1fr; }
.fb-s{ display:flex; align-items:center; gap:9px; min-width:0; padding:7px 0; }
.fb-si{
flex:0 0 22px;
width:22px; height:22px;
display:flex; align-items:center; justify-content:center;
border-radius:7px; color:var(--ki);
background:color-mix(in srgb, var(--ki) 13%, transparent);
}
.fb-syazi{ min-width:0; }
.fb-syazi i{
display:block; font-style:normal; line-height:1.3;
font-size:9px; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-dim);
}
.fb-syazi b{
display:block; line-height:1.35;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px;
color:var(--ink-strong);
}
.fb-syazi b.eksik{ color:var(--st-dev-t); font-weight:500; }
/* ---------- Takvim şeridi ----------
Künyenin dibindeki alt satır değil, kendi şeridi: "ne zaman" ayrı bir soru.
Ayrı kart açmaya değmiyor — iki tarih ve bir çubuktan ibaret. */
.fb-tks{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:10px;
margin-bottom:10px; padding:9px 12px;
border:1px solid var(--line); border-radius:var(--radius-lg);
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 2px 4px -2px rgba(0,0,0,.75),
0 16px 30px -22px rgba(0,0,0,.95),
inset 0 1px 0 var(--isik);
}
.fb-tks::before{
content:''; position:absolute; top:-55%; left:-16%; width:52%; height:190%;
background:linear-gradient(101deg, rgba(255,255,255,.05), transparent 60%);
pointer-events:none;
}
.fb-tsi{
position:relative; flex:0 0 26px;
width:26px; height:26px;
display:flex; align-items:center; justify-content:center;
border-radius:8px; color:#c8973f;
background:color-mix(in srgb, #c8973f 13%, transparent);
}
.fb-torta{ position:relative; flex:1; min-width:0; }
.fb-tray{
display:block; height:4px; border-radius:999px; overflow:hidden;
background:var(--bar-bos);
box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.fb-tray i{
display:block; height:100%; border-radius:999px;
background:linear-gradient(90deg, var(--metal-1), var(--metal-2));
}
.fb-tuc{
display:flex; justify-content:space-between; gap:10px; margin-top:5px;
font-family:var(--yazi-kod); font-size:9px; color:var(--ink-dim);
}
.fb-tuc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-tkalan{ position:relative; flex:0 0 auto; text-align:right; }
.fb-tkalan b{
display:block; line-height:1.1;
font-family:var(--yazi-baslik); font-weight:700; font-size:14px; color:var(--st-dev-t);
}
.fb-tkalan i{
font-style:normal; font-size:8.5px; letter-spacing:.07em;
text-transform:uppercase; color:var(--ink-dim);
}
.fb-tks.gecikti .fb-tkalan b{ color:var(--red-ink); }
.fb-tks.gecikti .fb-tsi{ color:var(--red-ink); background:var(--red-soft); }
/* Kart içi ayraç: aynı soruya cevap veren ama ayrı doğadaki iki öbeği
ayırıyor — müşteri tarafı / uygulama tarafı gibi. */
.fb-ayrac{
position:relative;
margin-top:10px; padding-top:10px;
border-top:1px solid var(--line-3);
}
.fb-et{
display:block; margin-bottom:7px;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
/* ---------- Yetkili ---------- */
.fb-kisi{ position:relative; display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fb-av{
flex:0 0 38px;
width:38px; height:38px;
display:flex; align-items:center; justify-content:center;
border-radius:11px;
font-family:var(--yazi-baslik); font-weight:700; font-size:13px; color:#fff;
background:linear-gradient(140deg, var(--p1), var(--p2));
box-shadow:0 8px 18px -10px var(--pk), inset 0 1px 0 rgba(255,255,255,.24);
}
.fb-kyz{ flex:1; min-width:0; }
.fb-kyz b{
display:block;
font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px;
color:var(--ink-strong);
}
.fb-kyz b.eksik{ color:var(--st-dev-t); font-weight:500; }
.fb-kyz i{
display:block; margin-top:1px; font-style:normal;
font-size:10px; line-height:1.45; color:var(--ink-dim);
}
/* ---------- Rozet sırası ----------
Bağlantılar, roller ve teknik alanlar hepsi bu sırada: ayrı kart açmaya
değmeyen tek satırlık bilgiler. */
.fb-cip{ position:relative; display:flex; flex-wrap:wrap; gap:6px; }
.fb-cp{
display:inline-flex; align-items:center; gap:6px;
max-width:100%; padding:6px 11px;
border:1px solid var(--line); border-radius:999px;
font-family:var(--yazi-govde); font-size:10.5px; text-align:left;
color:var(--ink-soft); text-decoration:none;
background:linear-gradient(180deg, var(--surface-2), var(--kart-alt));
box-shadow:inset 0 1px 0 var(--isik);
}
button.fb-cp{ cursor:pointer; transition:transform .16s var(--yay); }
button.fb-cp:active{ transform:scale(.94); }
.fb-cp svg{ flex:0 0 12px; width:12px; height:12px; color:var(--ci, var(--ink-faint)); }
.fb-cp b{
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-kod); font-weight:400; font-size:10px; color:var(--ink-strong);
}
.fb-cp b.eksik{ font-family:var(--yazi-govde); color:var(--st-dev-t); }
.fb-cp em{
font-style:normal;
font-family:var(--yazi-baslik); font-weight:700; font-size:11px;
color:var(--ci, var(--ink-strong));
}
.fb-kart .adim-not{ margin-top:10px; }
/* --------------------------------------------------------------------------
Firma düzenleme penceresi — sayfayla aynı kart dili
Alanlar `.fb-kart` içine giriyor: düzenlerken de sayfadaki üç kartı
görüyorsun. Gri kutular yerine ikon + etiket + alt çizgi.
-------------------------------------------------------------------------- */
.fbd-kart{ margin-bottom:8px; padding:10px 12px; }
.fbd-kart .fb-ust{ margin-bottom:8px; }
.fbd-say{ font-family:var(--yazi-kod); font-size:9.5px; color:var(--ink-dim); }
/* Yazılan alan */
.fbd-al{ position:relative; display:flex; align-items:center; gap:9px; padding:5px 0; cursor:text; }
.fbd-al + .fbd-al{ border-top:1px solid var(--line-3); }
.fbd-si{
flex:0 0 26px;
width:26px; height:26px;
display:flex; align-items:center; justify-content:center;
border-radius:8px; color:var(--ki);
background:color-mix(in srgb, var(--ki) 13%, transparent);
transition:box-shadow .16s var(--ease);
}
.fbd-yz{ position:relative; flex:1; min-width:0; }
.fbd-yz i{
display:block; font-style:normal; line-height:1.3;
font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
/* Kutu yok: yazı doğrudan çizginin üstünde duruyor. */
.fbd-yz input{
display:block; width:100%; height:26px; padding:0;
border:0; background:transparent;
color:var(--ink-strong);
font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px;
}
.fbd-yz input:focus{ outline:none; }
.fbd-yz input.mono{ font-family:var(--yazi-kod); font-weight:400; font-size:12.5px; }
.fbd-yz input::placeholder{
color:var(--metal-1); font-family:var(--yazi-govde); font-weight:400; font-size:12.5px;
}
/* Tarih seçicisinin yerleşik simgesi koyu zeminde okunsun. */
.fbd-yz input[type="date"]{ color-scheme:dark; }
.fbd-cizgi{
position:absolute; left:35px; right:0; bottom:2px;
height:1px; background:var(--line-3);
transition:background .16s var(--ease), height .16s var(--ease);
}
/* Nerede yazdığın belli olsun: odaklanınca çizgi ve simge alanın rengine döner. */
.fbd-al:focus-within .fbd-cizgi{
height:1.5px;
background:linear-gradient(90deg, var(--ki), transparent 70%);
}
.fbd-al:focus-within .fbd-si{ box-shadow:0 0 0 1px color-mix(in srgb, var(--ki) 40%, transparent); }
/* Seçim satırı */
.fbd-sec{ position:relative; padding:7px 0; }
.fbd-sec + .fbd-sec,
.fbd-al + .fbd-sec,
.fbd-sec + .fbd-al{ border-top:1px solid var(--line-3); }
.fbd-set{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fbd-set .fbd-si{ flex:0 0 22px; width:22px; height:22px; }
.fbd-set > span:last-child{
font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
.fbd-cipler{ display:flex; flex-wrap:wrap; gap:6px; padding-left:30px; }
.fbd-cp{
padding:6px 11px; border-radius:999px; cursor:pointer;
border:1px solid var(--line);
font-family:var(--yazi-govde); font-size:11.5px; color:var(--ink-soft);
background:linear-gradient(180deg, var(--surface-2), var(--kart-alt));
box-shadow:inset 0 1px 0 var(--isik);
transition:transform .16s var(--yay);
}
.fbd-cp:active{ transform:scale(.94); }
/* Seçili rozet metal, kırmızı değil: kırmızı yalnız Kaydet'te kalıyor. */
.fbd-cp.on{
border-color:transparent; font-weight:600; color:#12100e;
background:linear-gradient(180deg, var(--metal-2), #a29a94);
box-shadow:0 6px 14px -8px rgba(0,0,0,.9);
}
/* Kart dibindeki açıklama: uzun metin etiketin yanına sığmıyordu. */
.fbd-not{
position:relative; display:flex; gap:7px;
margin-top:9px; padding:8px 10px;
border:1px solid var(--line-3); border-radius:10px;
background:var(--yuva);
font-size:10.5px; line-height:1.6; color:var(--ink-dim);
}
.fbd-not svg{ flex:0 0 13px; width:13px; height:13px; margin-top:2px; }
/* --------------------------------------------------------------------------
Rol merdiveni — düzenleme penceresiyle aynı dil
Üç yerde kullanılıyor (teknik penceresi, yapı ağacı, sihirbaz); üçü de
tek görünüşe geçsin diye bileşenin kendisi değişti. Simgeler sayfadaki
rol rozetleriyle aynı: en geniş kalkan, en dar kilit, aradakiler kişi.
-------------------------------------------------------------------------- */
/* Katman sayısı seçici — dört eşit sütun, seçili olan dolmuyor, yalnız
sarı çerçeve ve parıltı alıyor (metal dolgu küçük ekranda "kapalı"
görünüyordu, mockup'taki gibi çerçeveli seçim daha net okunuyor). */
.rol-sayi{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:14px; }
.rol-sayi-cp{
padding:14px 4px; border-radius:var(--radius-lg); text-align:center;
border:1px solid var(--line); cursor:pointer;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px; color:var(--ink-strong);
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:inset 0 1px 0 var(--isik);
transition:transform .16s var(--yay);
}
.rol-sayi-cp:active{ transform:scale(.96); }
.rol-sayi-cp.on{
border-color:var(--st-dev-t); color:var(--st-dev-t);
box-shadow:0 0 0 1px var(--st-dev-t), 0 8px 18px -12px rgba(216,166,63,.6);
}
.rol-liste{ display:flex; flex-direction:column; gap:8px; }
/* Kart görünümü: eskiden ince, alt çizgili bir form satırıydı — mockup'taki
gibi kutulu, numara+ikon rozetli, "en dar/en geniş" pillli karta çevrildi. */
.rol-satir{
display:flex; align-items:center; gap:10px;
padding:10px 12px; cursor:text;
border:1px solid var(--line); border-radius:var(--radius-lg);
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
}
.rol-satir:focus-within{ border-color:var(--ki); box-shadow:0 0 0 1px var(--ki); }
.rol-no{
flex:0 0 28px; height:28px; border-radius:9px;
display:flex; align-items:center; justify-content:center;
font-family:var(--yazi-kod); font-size:11.5px; color:var(--ink-dim);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.rol-ik{
flex:0 0 28px; width:28px; height:28px; border-radius:9px;
display:flex; align-items:center; justify-content:center; color:var(--ki);
background:color-mix(in srgb, var(--ki) 15%, transparent);
}
.rol-orta{ flex:1; min-width:0; }
.rol-satir input{
display:block; width:100%; padding:0;
border:0; background:transparent;
color:var(--ink-strong);
font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px;
}
.rol-satir input:focus{ outline:none; background:transparent; }
.rol-satir input::placeholder{
color:var(--metal-1); font-family:var(--yazi-govde); font-weight:400; font-size:12.5px;
}
.rol-rozet{
flex:0 0 auto; padding:4px 9px; border-radius:999px;
font-size:9px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
color:var(--ki); background:color-mix(in srgb, var(--ki) 15%, transparent);
}
/* Düzenleme penceresinde de aynı ayraç. */
.fbd-ayrac{
position:relative;
margin-top:9px; padding-top:9px;
border-top:1px solid var(--line-3);
}
.fbd-et{
display:block; margin-bottom:7px;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
/* --------------------------------------------------------------------------
Kurulum — firma sayfasının Yer kartı içinde
Depo ve Claude Code adımları standartlar sayfasındaki araç kartlarının
aynısı (.std-arac / .sa-kart). Burada yalnız kart içine oturması için
gereken farklar var: eski kurulum sayfasında bu satırlar 37 piksel içeriden
başlıyordu, kartın içinde o girinti yersiz.
-------------------------------------------------------------------------- */
.fb-kart .std-arac{ margin-bottom:9px; }
.fb-kart .sa-kart{ padding:12px 11px 13px; gap:9px; }
.fb-kart .sa-ikon{ flex:0 0 36px; width:36px; height:36px; }
/* Depo adresi yokken ikinci kart basılamaz: adres olmadan Claude Code en son
kullanılan depoyu açıyor ve yanlış depoda çalışmaya başlanıyor. */
.sa-kart[disabled]{ cursor:default; }
/* Her iki adım da bitti: bağlantı çizgisi baştan sona yeşil. */
.std-arac.bitti .sa-bag i{ background:linear-gradient(90deg, var(--st-done), var(--st-done)); }
.std-arac.bitti .sa-bag em{ color:var(--st-done-t); }
/* Sırası gelmemiş künye satırı: sohbet adı, prompt panoya alınana kadar
soluk ve dokunulamaz — ortada adı verilecek bir sohbet yok. */
.fb-s.pasif{ opacity:.45; cursor:default; }
.fb-syazi b.bos{
font-family:var(--yazi-govde); font-weight:400; font-size:11.5px; color:var(--ink-dim);
}
/* Dokunulabilir künye satırı — modül adı gibi yerinde düzenlenenler. */
.fb-s.dokun{ cursor:pointer; }
.fb-s.dokun:active{ transform:scale(.99); }
.fb-s.dokun:focus-visible{ outline:2px solid var(--metal-1); outline-offset:2px; border-radius:8px; }
/* Kurulum şeridi Yer kartının içinde iki sıra: kurulum ve yayın. */
.fb-kurulum .std-arac + .fb-et{ display:block; }
.fb-kurulum .std-arac{ margin-bottom:0; }
/* Alan adı kaydı penceresi: Namecheap'e yazılacak dört satır, her birinin
kendi kopyala düğmesi. Değer okunur kalsın diye tek sütun. */
.ak-s{ display:flex; align-items:center; gap:9px; padding:8px 0; }
.ak-s + .ak-s{ border-top:1px solid var(--line-3); }
.ak-et{
flex:0 0 68px;
font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
.ak-dg{
flex:1; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:11.5px; color:var(--ink-strong);
}
.ak-kop{
flex:0 0 26px;
width:26px; height:26px; padding:0;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line-3); border-radius:8px; cursor:pointer;
color:var(--ink-dim); background:var(--yuva);
transition:transform .16s var(--yay), color .16s var(--ease);
}
.ak-kop:active{ transform:scale(.9); }
.ak-kop.oldu{ color:var(--st-done-t); border-color:rgba(69,163,123,.4); }
/* Pencerede kartın kendi gölgesi fazla: içerik zaten kutunun içinde. */
.modal-kutu .fb-kart{ margin-bottom:12px; box-shadow:inset 0 1px 0 var(--isik); }
.modal-kutu .sayfa-dug{ margin:0; }
.modal-kutu .fbd-not{ margin-top:10px; }
/* --------------------------------------------------------------------------
Boş kartın davet hâli
Sihirbaz tek soruya indi; kalan bilgiler burada, kart kart doldurularak
giriliyor. Kesik çerçeve "burası henüz boş" diyor, gerekçe niçin
sorulduğunu söylüyor — sebebini bilmeyen kullanıcı geçiştiriyor.
-------------------------------------------------------------------------- */
.fb-bos{ border-style:dashed; border-color:var(--line-2); padding-bottom:16px; }
/* Sırası gelmemiş kart soluk ama kilitli değil: sıra önerisi, yasak değil. */
.fb-bos.sonra{ opacity:.45; }
.fb-neden{
position:relative;
margin:0 0 11px;
font-size:11.5px; line-height:1.6; color:var(--ink-dim);
}
.fb-neden b{ color:var(--ink-soft); font-weight:600; }
.fb-doldur{
position:relative;
display:inline-flex; align-items:center; gap:7px;
height:38px; padding:0 16px;
border:0; border-radius:11px; cursor:pointer;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px; color:#fff;
background:linear-gradient(180deg, var(--red-acik), var(--red));
box-shadow:0 10px 22px -10px rgba(229,52,42,.8), inset 0 1px 0 rgba(255,255,255,.26);
transition:transform .16s var(--yay);
}
.fb-doldur:active{ transform:scale(.96); }
/* Sırası gelmemiş kartın düğmesi kırmızı değil: ekranda tek kırmızı eylem olsun. */
.fb-doldur.sonra{
color:var(--ink-dim);
background:linear-gradient(180deg, var(--surface-3), var(--kart-alt));
box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.fbd-say.tam{ color:var(--st-done-t); }
/* --------------------------------------------------------------------------
Marka bloğu — logo, renk ve işletme görseli
Markanın görünen yüzü tek ayracın altında. Tasarım görselleri (G1, G2…)
burada değil: onlar ChatGPT'ye tarif için gidiyor, markanın parçası değil.
-------------------------------------------------------------------------- */
.fb-marka{ position:relative; display:flex; align-items:center; gap:10px; }
.fb-logo{
flex:0 0 42px;
width:42px; height:42px; padding:0;
display:flex; align-items:center; justify-content:center;
border:1px dashed var(--line-2); border-radius:12px; cursor:pointer;
color:var(--ink-dim); background:var(--yuva);
background-size:cover; background-position:center;
transition:transform .16s var(--yay), border-color .16s var(--ease);
}
.fb-logo:active{ transform:scale(.95); }
.fb-logo.dolu{ border-style:solid; border-color:var(--line-3); }
.fb-myz{ flex:1; min-width:0; }
.fb-myz i{
display:block; font-style:normal; line-height:1.3;
font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
.fb-myz b{
display:block; line-height:1.35;
font-family:var(--yazi-baslik); font-weight:600; font-size:13px; color:var(--ink-strong);
}
.fb-myz b.eksik{ color:var(--st-dev-t); font-weight:500; }
/* İşletme görseli: proje kartının zemini olan G0. Dolu hâlde görselin
kendisi görünüyor, üstünde okunur bir etiket duruyor. */
.fb-gorsel{
position:relative; overflow:hidden;
display:block; width:100%; height:76px; margin-top:10px; padding:0;
border:1px dashed var(--line-2); border-radius:12px; cursor:pointer;
background:var(--yuva);
transition:transform .16s var(--yay);
}
.fb-gorsel:active{ transform:scale(.99); }
.fb-gorsel.dolu{ border-style:solid; border-color:var(--line-3); }
.fb-gorsel img{ width:100%; height:100%; object-fit:cover; display:block; }
.fb-gyz{
position:absolute; left:0; right:0; bottom:0; top:0;
display:flex; align-items:center; justify-content:center; gap:7px;
font-family:var(--yazi-baslik); font-weight:600; font-size:11.5px;
color:var(--ink-soft);
}
.fb-gorsel.dolu .fb-gyz{
top:auto; height:26px;
color:#fff;
background:linear-gradient(180deg, transparent, rgba(10,9,8,.82));
}
.fb-gyz svg{ width:13px; height:13px; }
/* --------------------------------------------------------------------------
Kurulum adımları — beş adım, kurulum sırasında
Boş adım şeritte küçük kart, dolan adım tam genişlikte ayrıntı kartı.
Üst taraf "yapılanlar", alt taraf "yapılacaklar".
-------------------------------------------------------------------------- */
/* Beş adım tek sayı: son kart yalnız kalınca satırın tamamını alıyor. */
.as5{
display:grid; grid-template-columns:1fr 20px 1fr;
row-gap:9px; align-items:stretch;
margin-bottom:9px;
}
.as5 > .tam{ grid-column:1 / -1; }
/* Satırlar arası iniş oku: bağlantı çizgisinin dikey karşılığı. */
.as-in{
grid-column:1 / -1;
display:flex; align-items:center; justify-content:center;
height:16px; color:var(--ink-dim);
}
.as-in svg{ width:13px; height:13px; transform:rotate(90deg); }
/* Dolu adımın başlığındaki tik. */
.fb-tik{
flex:0 0 22px;
width:22px; height:22px;
display:flex; align-items:center; justify-content:center;
border-radius:999px; color:#08150f;
background:linear-gradient(180deg, var(--st-done-t), var(--st-done));
}
.fb-tik svg{ width:12px; height:12px; stroke-width:3; }
/* Adım kartının altındaki tek satırlık açıklama. */
.fb-soru{
position:relative;
display:block; margin:-4px 0 10px;
font-size:11px; line-height:1.55; color:var(--ink-dim);
}
/* Aşama şeridindeki adım sayacı. */
.fb-ssay{ position:relative; font-size:10px; color:var(--ink-dim); }
/* Sırası gelmemiş adım basılamıyor: atlamalı doldurunca sonraki adımın
sorusu havada kalıyor ("nereye kuralım" için önce ne yaptığını bilmeli). */
.sa-kart[disabled]{ cursor:default; }
/* --------------------------------------------------------------------------
Adım başlığı — sayfanın tepesi
İşletme görselinin yerini aldı: o görsel marka kartının içinde zaten
duruyor. Ölçüsü proje künyesiyle (.pk) birebir aynı — iki sayfanın tek
farkı kartın içeriği olsun, düzeni değil.
-------------------------------------------------------------------------- */
.bs2{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:13px;
margin-bottom:11px; padding:14px;
border:1px solid color-mix(in srgb, var(--kr) 26%, var(--line));
border-radius:18px;
background:
radial-gradient(120% 140% at 12% 0%,
color-mix(in srgb, var(--kr) 15%, transparent), transparent 62%),
linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 3px 6px -3px rgba(0,0,0,.8),
0 30px 55px -28px rgba(0,0,0,.95),
inset 0 1px 0 rgba(255,255,255,.09);
}
.bs2::before{
content:''; position:absolute; top:-60%; left:-14%; width:56%; height:200%;
background:linear-gradient(101deg, rgba(255,255,255,.07), transparent 58%);
pointer-events:none;
}
.bs2-ik{
position:relative; flex:0 0 54px;
width:54px; height:54px;
display:flex; align-items:center; justify-content:center;
border-radius:16px; color:var(--kr);
background:linear-gradient(180deg,
color-mix(in srgb, var(--kr) 26%, transparent),
color-mix(in srgb, var(--kr) 10%, transparent));
border:1px solid color-mix(in srgb, var(--kr) 38%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
0 12px 26px -14px color-mix(in srgb, var(--kr) 70%, transparent);
}
.bs2-yz{ position:relative; flex:1; min-width:0; }
/* Üst satır: firma adı ve yanında aşama noktaları. */
.bs2-firma{ display:flex; align-items:center; gap:8px; min-width:0; }
.bs2-ad2{
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.11em; text-transform:uppercase; color:var(--ink-dim);
}
.bs2-ad{
display:block; margin-top:3px; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-baslik); font-weight:700; font-size:17px;
letter-spacing:-.015em; color:var(--ink-strong);
}
.bs2-nk{ flex:0 0 auto; display:flex; gap:4px; align-items:center; }
.bs2-nk i{
display:block; width:6px; height:6px; border-radius:999px;
background:var(--bar-bos); box-shadow:inset 0 0 0 1px var(--line-3);
}
.bs2-nk i.bitti{
background:linear-gradient(180deg, var(--st-done-t), var(--st-done));
box-shadow:none;
}
.bs2-nk i.su{
width:18px;
background:linear-gradient(90deg, var(--metal-1), var(--metal-2));
box-shadow:none;
}
/* Sağ sütun künyedeki yüzdeyle aynı yerde ve aynı ölçüde. */
.bs2-sag{ position:relative; flex:0 0 auto; text-align:right; }
.bs2-sag b{
display:block; line-height:1;
font-family:var(--yazi-baslik); font-weight:700; font-size:17px; color:var(--ink-soft);
}
.bs2-sag i{
display:block; margin-top:3px; font-style:normal;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
/* İnce kip — tasarım adım ekranı. O ekran kaydırılmıyor ve 84 piksellik kart
önizlemeyle seçim rafını sıkıştırıyordu: aynı kart, aynı renk, 56 piksel.
Karo aynı zamanda haritaya dönüş düğmesi. */
.bs2.ince{ padding:9px 12px; gap:10px; border-radius:15px; margin-bottom:9px; }
.bs2.ince .bs2-ik{
flex:0 0 38px; width:38px; height:38px; border-radius:12px;
padding:0; cursor:pointer; font-family:inherit;
}
.bs2.ince .bs2-ik:active{ transform:scale(.94); }
.bs2.ince .bs2-ad{ font-size:14px; margin-top:2px; }
.bs2.ince .bs2-sag b{ font-size:14px; }
/* --------------------------------------------------------------------------
Aşama ızgarası — yol haritası ve kurulum adımları
Üstte üç kart, ortada dirsek, altta üç kart. Zigzag merdivende kartlar
ilerledikçe yer değiştiriyordu; burada aşamalar hep aynı yerde duruyor ve
göz aradığını aynı köşede buluyor. `.ak-` öneki karar bileşenlerinin,
`.yol` da görsel ada haritasının — bu yüzden `.ya-`.
-------------------------------------------------------------------------- */
.ya-harita{ position:relative; }
.ya-satir{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
/* Aşama kartı: kare. Numara ve durum üstte, ad ve durum yazısı altta. */
.ya{
position:relative; overflow:hidden; min-width:0;
display:flex; flex-direction:column; justify-content:space-between;
aspect-ratio:1 / 1;
padding:11px 10px;
border:1px solid var(--line); border-radius:var(--radius-lg);
text-align:left; text-decoration:none; color:inherit;
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 2px 4px -2px rgba(0,0,0,.7),
0 18px 34px -22px rgba(0,0,0,.95),
inset 0 1px 0 var(--isik);
transition:transform .16s var(--yay);
}
.ya::before{
content:''; position:absolute; top:-55%; left:-16%; width:62%; height:190%;
background:linear-gradient(101deg, rgba(255,255,255,.05), transparent 60%);
pointer-events:none;
}
button.ya{ font-family:inherit; cursor:pointer; }
button.ya[disabled]{ cursor:default; }
a.ya:active, button.ya:not([disabled]):active{ transform:scale(.97); }
.ya-ust{
position:relative;
display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.ya-no{ white-space:nowrap; font-size:11px; color:var(--ink-dim); }
.ya-rozet{
display:inline-block; margin-left:6px; padding:2px 7px;
border-radius:999px; white-space:nowrap;
font-family:var(--yazi-kod); font-size:8px; letter-spacing:.05em;
color:#a9c3ee; background:rgba(91,141,239,.18);
box-shadow:inset 0 0 0 1px rgba(91,141,239,.4);
}
.ya-dur{
flex:0 0 24px;
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
border-radius:999px; color:var(--ink-dim);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.ya-yz{ position:relative; min-width:0; }
.ya-ad{
display:block; line-height:1.3;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px;
color:var(--ink-strong);
}
.ya-alt{
display:block; margin-top:3px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
.ya.bitti{ border-color:rgba(69,163,123,.30); }
.ya.bitti .ya-no,
.ya.bitti .ya-alt{ color:var(--st-done-t); }
.ya.bitti .ya-dur{
color:#08150f;
background:linear-gradient(180deg, var(--st-done-t), var(--st-done));
box-shadow:0 6px 14px -8px rgba(69,163,123,.6);
}
.ya.simdi{ border-color:var(--red-cizgi); }
.ya.simdi .ya-alt{ color:var(--red-ink); }
.ya.simdi .ya-dur{
color:#fff;
background:linear-gradient(180deg, var(--red-acik), var(--red));
box-shadow:0 8px 18px -8px rgba(229,52,42,.75);
}
/* Kilitli adım bağlantı değil: soluk, kesik çerçeve, dokunulmuyor. */
.ya.kilitli{ opacity:.45; border-style:dashed; cursor:default; }
/* Satırlar arası dirsek. Izgara sabit olduğu için ok da sabit —
zigzagdaki gibi kartların yerini ölçmeye gerek yok. */
.ya-bosluk{ position:relative; height:34px; }
.ya-ok{
position:absolute; inset:0; width:100%; height:100%;
fill:none; stroke:var(--line); stroke-width:1.5;
}
.ya-ok.gecti{ stroke:var(--st-done); }
.ya-ok .uc{ stroke:var(--line-2); }
.ya-ok.gecti .uc{ stroke:var(--st-done-t); }
/* --------------------------------------------------------------------------
Proje aşamaları — dikey liste (`.asr-`, "aşama satırı").
Kare ızgaranın yerini aldı: durak sayısı arttıkça ızgara sıkışıyordu,
dikey listede her satır aynı yükseklikte kalıyor. İkon her durağın kendi
PNG'si (ikon/asama/) — tek gri kaynak, rengi CSS mask ile veriliyor,
ayrı "biten" versiyonuna gerek yok. */
.asr-liste{ display:flex; flex-direction:column; gap:9px; }
.asr{
position:relative; display:flex; align-items:center; gap:12px;
min-width:0; padding:10px 12px;
border:1px solid var(--line); border-radius:var(--radius-lg);
text-align:left; text-decoration:none; color:inherit;
font-family:inherit; cursor:pointer;
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 2px 4px -2px rgba(0,0,0,.7), inset 0 1px 0 var(--isik);
}
a.asr:active{ transform:scale(.99); }
.asr.kilitli{ opacity:.5; cursor:default; }
/* Şimdiki durak bitmiş değil, o yüzden yeşil değil — "Geliştiriliyor"
durum rengiyle (sarı) aynı dili konuşuyor: sürüyor ama bitmedi. */
.asr.simdi{
border-color:var(--st-dev-t);
box-shadow:0 0 0 1px var(--st-dev-t), 0 10px 22px -14px rgba(216,166,63,.6),
inset 0 1px 0 var(--isik);
}
.asr-no{
flex:0 0 32px; height:32px; display:flex; align-items:center; justify-content:center;
border-radius:9px; font-size:11.5px; color:var(--ink-dim);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.asr.bitti .asr-no{ color:var(--st-done-t); box-shadow:inset 0 0 0 1px rgba(69,163,123,.35); }
.asr.simdi .asr-no{ color:var(--st-dev-t); box-shadow:inset 0 0 0 1px rgba(216,166,63,.35); }
.asr-ikon{
flex:0 0 44px; width:44px; height:44px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.asr-ikon-img{
width:24px; height:24px; background-color:var(--ink-dim);
-webkit-mask-image:var(--ik); mask-image:var(--ik);
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
}
.asr.bitti .asr-ikon-img{ background-color:var(--st-done-t); }
.asr.simdi .asr-ikon-img{ background-color:var(--st-dev-t); }
.asr-yz{ flex:1 1 auto; min-width:0; }
.asr-ad{
display:block; line-height:1.3;
font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px;
color:var(--ink-strong);
}
.asr-alt{
display:block; margin-top:2px; line-height:1.3;
font-size:11.5px; color:var(--ink-dim);
}
.asr-durum{
flex:0 0 28px; width:28px; height:28px;
display:flex; align-items:center; justify-content:center;
border-radius:999px; color:var(--ink-dim);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.asr.bitti .asr-durum{
color:#08150f;
background:linear-gradient(180deg, var(--st-done-t), var(--st-done));
box-shadow:0 6px 14px -8px rgba(69,163,123,.6);
}
.asr.simdi .asr-durum{
background:transparent; box-shadow:0 0 0 2px var(--st-dev-t);
}
.asr-chev{ flex:0 0 auto; color:var(--ink-dim); }
.asr.kilitli .asr-chev{ visibility:hidden; }
/* --------------------------------------------------------------------------
Proje künye kartı — yol haritasının tepesi
Aşama başlığıyla (.bs2) aynı ölçüde: iki sayfanın tek farkı kartın içeriği
olsun, düzeni değil. Aşamaya basınca bu kartın yerini o aşamanın kartı alıyor.
-------------------------------------------------------------------------- */
.pk{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:13px;
margin-bottom:11px; padding:14px;
border:1px solid var(--line); border-radius:18px;
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 3px 6px -3px rgba(0,0,0,.8),
0 30px 55px -28px rgba(0,0,0,.95),
inset 0 1px 0 rgba(255,255,255,.09);
}
.pk::before{
content:''; position:absolute; top:-60%; left:-14%; width:56%; height:200%;
background:linear-gradient(101deg, rgba(255,255,255,.07), transparent 58%);
pointer-events:none;
}
.pk-logo{
position:relative; flex:0 0 54px;
width:54px; height:54px;
display:flex; align-items:center; justify-content:center;
border-radius:16px; overflow:hidden;
background:linear-gradient(140deg, var(--surface-3), var(--kart-alt));
background-size:cover; background-position:center;
box-shadow:0 10px 22px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
.pk-logo .logo-harf{
font-family:var(--yazi-baslik); font-weight:700; font-size:18px; color:var(--ink-soft);
}
/* Logo inince harf gizleniyor. Yükleyici `.foto` dışındaki karolara
`dolu` sınıfını veriyor — kontrol ettim, `resimli` yalnız avatarda. */
.pk-logo.dolu .logo-harf{ opacity:0; }
.pk-yz{ position:relative; flex:1; min-width:0; }
.pk-ad{
display:block; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--yazi-baslik); font-weight:700; font-size:17px;
letter-spacing:-.015em; color:var(--ink-strong);
}
.pk-alt{
display:block; margin-top:3px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:10.5px; color:var(--ink-dim);
}
.pk-yuz{ position:relative; flex:0 0 auto; text-align:right; }
.pk-yuz b{
display:block; line-height:1;
font-family:var(--yazi-baslik); font-weight:700; font-size:17px; color:var(--ink-soft);
}
.pk-yuz i{
display:block; margin-top:3px; font-style:normal;
font-family:var(--yazi-kod); font-size:8.5px;
letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim);
}
/* --------------------------------------------------------------------------
Modül ağacı — üç kademe
Modüller → bir modülün sayfaları → bir sayfanın künyesi. Her kademe kendi
ekranı; hiyerarşiyi dikey çizgi ve girintiyle değil, tepedeki kartla
anlatıyoruz. Derinlik arttıkça girintili ağaç okunmaz oluyordu.
-------------------------------------------------------------------------- */
/* Satır kart: iki kelimelik başlık, bir satır özet. */
.ags{
position:relative;
display:flex; align-items:center; gap:10px; width:100%;
margin-bottom:9px; padding:11px 12px;
border:1px solid var(--line); border-radius:var(--radius-lg);
text-align:left; font-family:inherit; color:inherit; cursor:pointer;
background:linear-gradient(180deg, var(--kart-ust), var(--kart-alt));
box-shadow:0 2px 4px -2px rgba(0,0,0,.75), inset 0 1px 0 var(--isik);
transition:transform .16s var(--yay);
}
.ags:active{ transform:scale(.99); }
/* Eksik satır sarı çerçeveli: doldurulmamış olan göze çarpsın. */
.ags.eksik{ border-color:rgba(216,166,63,.32); }
.ags-ik{
flex:0 0 30px;
width:30px; height:30px;
display:flex; align-items:center; justify-content:center;
border-radius:9px; color:var(--ki, var(--ink-soft));
background:color-mix(in srgb, var(--ki, var(--ink-faint)) 14%, transparent);
}
.ags-yz{ flex:1; min-width:0; }
.ags-yz b{
display:block;
font-family:var(--yazi-baslik); font-weight:600; font-size:12.5px;
color:var(--ink-strong);
}
.ags-yz i{
display:block; margin-top:2px; font-style:normal;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:10.5px; color:var(--ink-dim);
}
.ags-ok{ flex:0 0 auto; display:flex; color:var(--ink-dim); }
/* Kaldırma satırı: kırmızı değil — kırmızı ana eyleme ait. */
.ags.sil{ border-style:dashed; color:var(--ink-dim); }
.ags.sil .ags-ik{ color:var(--ink-dim); background:var(--yuva); }
.ags.sil .ags-yz b{ color:var(--ink-soft); font-weight:500; }
/* Ekleme karesi: kesik çerçeve, artı işareti. */
.ya.kesik{ border-style:dashed; opacity:.72; }
.ya.kesik .ya-dur{ background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3); }
/* Ağaç kabuğunun kendi çerçevesi kalktı: kademeler zaten kartlardan oluşuyor,
dıştaki kart ikinci bir çerçeve ekliyordu. */
.dk-yol{ margin-bottom:10px; }
/* Sırası gelmemiş eksik kart: nötr çerçeve, sarı alt yazı. Kırmızı yalnız
sıradakinin — hepsi kırmızı olunca ekran uyarı tablosuna dönüyordu. */
.ya.eksik .ya-alt{ color:var(--st-dev-t); }
.ya.eksik .ya-dur{ color:var(--st-dev-t); }
/* --------------------------------------------------------------------------
Sayfa önizlemesi — kendi ekranı
Künye satırlarının altına küçük bir kutu koymak yerine tam ekran:
müşteriye gösterirken telefonu uzatabilmek lazım, minik kutuda hiçbir şey
okunmuyor.
-------------------------------------------------------------------------- */
.onz-cihaz{ display:flex; gap:6px; margin-bottom:10px; }
.onz-c{
padding:7px 13px; border-radius:999px; cursor:pointer;
border:1px solid var(--line);
font-family:inherit; font-size:11.5px; color:var(--ink-soft);
background:linear-gradient(180deg, var(--surface-2), var(--kart-alt));
box-shadow:inset 0 1px 0 var(--isik);
}
/* Seçili cihaz metal — kırmızı ana eyleme ait. */
.onz-c.sec{
border-color:transparent; font-weight:600; color:#12100e;
background:linear-gradient(180deg, var(--metal-2), #a29a94);
}
.onz-tam{
padding:12px;
border:1px solid var(--line); border-radius:var(--radius-lg);
background:var(--yuva-2, var(--yuva));
box-shadow:inset 0 1px 0 var(--isik);
}
/* Telefon kipinde önizleme daralıyor: gerçek en boy oranı korunsun. */
.onz-tam.telefon .onz-goz{ max-width:260px; margin:0 auto; }
/* --------------------------------------------------------------------------
Sayfa öbeği başlığı
Öbekleri Claude veriyor ("Raporlar", "Ayarlar"). Eski küçük gri etiket
yirmi sayfalık yığının içinde kayboluyordu: ad büyüdü, sayı rozete girdi,
sağa ince bir çizgi çekildi — öbeğin nerede başladığı bir bakışta belli.
-------------------------------------------------------------------------- */
.obk{
display:flex; align-items:center; gap:9px;
margin:16px 2px 9px;
}
.obk:first-child{ margin-top:2px; }
.obk-ad{
flex:0 0 auto;
font-family:var(--yazi-baslik); font-weight:600; font-size:13.5px;
letter-spacing:-.005em; color:var(--ink-strong);
}
.obk-say{
flex:0 0 auto;
min-width:20px; padding:2px 7px;
border-radius:999px; text-align:center;
font-size:10px; color:var(--ink-soft);
background:var(--yuva); box-shadow:inset 0 0 0 1px var(--line-3);
}
.obk-cizgi{
flex:1; min-width:0; height:1px;
background:linear-gradient(90deg, var(--line), transparent);
}