/* Modern görünüm — "karanlık arşiv" teması (esin: mosbyfiles.com yerleşim dili; kod özgün)
   Siyah zemin · dev kondanse başlık · renkli askılı-klasör bantları + kavisli sekmeler.
   Tümü body.modern altında — klasik görünüme dokunmaz. */

body.modern {
  --n-zemin: #161310;
  --n-bar: #0f0d0b;
  --n-serit: #3a2115;
  --n-krem: #f4efe4;
  --n-gri: #bdb6aa;
  --n-cizgi: #2b2723;
  --m-kagit: #fdfaf7;
  --m-murekkep: #191919;
  --m-gri: #787a7f;
  --m-cizgi: #ddd7cd;
  --m-mavi: #1e4bd7;
  --m-kirmizi: #bd2c2c;
  --m-dolgu: #f3efe8;
  --m-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --m-serif: 'Signifier', Cambria, Georgia, serif;
  --m-blok: Impact, 'Bahnschrift Condensed', 'Arial Narrow', 'Arial Black', sans-serif;
  background: var(--n-zemin);
  color: var(--n-krem);
}

/* ---------- üst bar / alt bar (karanlık arşiv odası) ---------- */
body.modern .ust {
  background: var(--n-bar);
  border-top: 6px solid var(--n-serit);
  border-bottom: 1px solid #262220;
  /* karanlık görünümün içerik sütunu daha geniş: marka onunla hizalanır */
  padding-left: max(32px, calc((100% - var(--hero-w)) / 2));
  padding-right: max(32px, calc((100% - var(--hero-w)) / 2));
}
body.modern .alt {
  padding-left: max(32px, calc((100% - var(--hero-w)) / 2));
  padding-right: max(32px, calc((100% - var(--hero-w)) / 2));
}
body.modern .marka {
  font-family: var(--m-serif);
  font-size: var(--yz-dev);
  letter-spacing: .01em;
  color: var(--n-krem);
}
body.modern .marka .nisay { color: var(--gun-rengi, #f2cf1d); }
body.modern .marka span { display: none; }
body.modern .tarih { color: var(--n-gri); }
body.modern .kisisel-link { color: var(--n-krem); border-bottom-color: var(--n-krem); }
body.modern .rozet-sayi { color: #f2cf1d; }
body.modern .alt { background: var(--n-bar); border-top: 1px solid #262220; color: var(--n-gri); }

.gorunum-dugme {
  border: 1px solid var(--cizgi);
  background: transparent;
  font-family: var(--mono);
  font-size: var(--yz-kucuk);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soluk);
  padding: 5px 10px;
  cursor: pointer;
}
.gorunum-dugme:hover { border-color: var(--murekkep); color: var(--murekkep); }
body.modern .gorunum-dugme { border: 1px solid #4a453f; color: var(--n-krem); font-family: var(--m-mono); }
body.modern .gorunum-dugme:hover { background: var(--n-krem); color: var(--n-bar); border-color: var(--n-krem); }

/* ---------- reveal animasyonları ---------- */
.m-maske { display: block; overflow: hidden; }
.m-maske > span { display: block; transform: translateY(115%); animation: m-kalk .8s cubic-bezier(.19, 1, .22, 1) forwards; }
@keyframes m-kalk { to { transform: translateY(0); } }
@keyframes m-belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.modern #app.gecis > * { animation: m-belir .5s cubic-bezier(.19, 1, .22, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .m-maske > span, body.modern #app.gecis > * { animation: none; transform: none; opacity: 1; }
}

/* ---------- ana sayfa: hero (günün kartları + sayım) ----------
   Üst bölgedeki her blok AYNI genişlikte ve aynı sol kenarda: --hero-w. */
/* Yazı boyu büyürken çerçeve sabit kalırsa sütunlar daralır ve her satır
   dörde beşe bölünür; ölçekle birlikte açılıyor, ekran yetmezse 96vw'de
   duruyor. Tek değişken olduğu için üst bantlarla kart ızgarası aynı
   kenarda kalmaya devam eder. */
body.modern { --hero-w: min(96vw, calc(1240px * var(--yz))); }
body.modern main { max-width: none; padding: 0; }
.m-hero { padding: 26px 40px 0; text-align: center; }
/* Beş kart: takvim yaprağı ve saat dar, üç metin kartı ikişer sütun.
   Satır 1 → yaprak · saat · söz | Satır 2 → argo · gereksiz bilgi */
.m-kartlar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: var(--hero-w);
  margin: 0 auto;
  text-align: left;
}
.m-kartlar > .m-kart:nth-child(n+3) { grid-column: span 2; }
/* tarihte bugün en altta, tam genişlikte; veri gelmezse kart silinir */
.m-kartlar > #tarihte-kart { grid-column: 1 / -1; }
.tarihte-yil {
  font-family: var(--m-mono);
  color: var(--gun-rengi, #f2cf1d);
  margin-right: 6px;
  font-weight: 600;
}
.tarihte-bekle { color: #6d665e; font-style: italic; }
.m-kaynak a { border-bottom: 1px solid currentColor; }

/* Claude'a not kutusu */
.komut-kutusu { max-width: var(--hero-w); margin: 24px auto 0; padding: 0; }
.komut-form { display: flex; gap: 10px; }
/* body.modern öneki şart: style.css'teki `.komut-form input:focus { background: var(--kagit) }`
   kuralı daha özgül olduğu için odaklanınca kutu BEYAZA dönüyor, krem yazı görünmez oluyordu
   (kullanıcı 2026-09-06: "ne yazdığımı göremeden yazıyorum"). Fon = site zemini, yazı beyaz. */
body.modern .komut-form input[type=text] {
  flex: 1;
  background: var(--n-zemin);
  border: 1px solid #3a3530;
  border-radius: 10px;
  color: #fff;
  caret-color: #fff;
  font-family: var(--sans);
  font-size: var(--yz-buyuk);
  padding: 12px 16px;
}
body.modern .komut-form input[type=text]::placeholder { color: #a49c90; }
body.modern .komut-form input[type=text]:focus {
  outline: none;
  border-color: var(--gun-rengi, #f2cf1d);
  background: var(--n-zemin);
  color: #fff;
}
/* Tarayıcının otomatik doldurma stili koyu kutuyu beyaza çeviriyor ve yazıyı
   okunmaz yapıyordu; background kuralı ezildiği için inset gölgeyle boyanır. */
body.modern input:-webkit-autofill,
body.modern input:-webkit-autofill:hover,
body.modern input:-webkit-autofill:focus,
body.modern textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--n-zemin) inset !important;
  box-shadow: 0 0 0 1000px var(--n-zemin) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  transition: background-color 99999s ease-in-out 0s;
}
/* aynı koruma diğer koyu kutular için (arama, görev ekle, kişisel ekle) */
body.modern #arama:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #221e1a inset !important; }
.komut-form button {
  background: var(--n-krem);
  color: #16130f;
  border: none;
  border-radius: 10px;
  font-family: var(--m-mono);
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 20px;
  cursor: pointer;
}
.komut-form button:hover { background: var(--gun-rengi, #f2cf1d); }
body.modern .komut-form .komut-mik {
  background: var(--n-zemin);
  border: 1px solid #3a3530;
  border-radius: 10px;
  color: var(--n-krem);
  padding: 0 14px;
}
body.modern .komut-form .komut-mik:hover { background: var(--n-zemin); border-color: var(--gun-rengi, #f2cf1d); color: var(--gun-rengi, #f2cf1d); }
body.modern .komut-form .komut-mik.dinliyor, body.modern .komut-form .komut-mik.dinliyor:hover {
  background: #bd2c2c; border-color: #bd2c2c; color: #fff;
}
.komut-liste { margin-top: 10px; text-align: left; }
.komut-satir {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--yz-normal);
  color: #b5aea2;
  padding: 4px 2px;
  border-bottom: 1px dotted #2b2723;
}
/* style.css'teki `.komut-metin{color:var(--murekkep)}` koyu zeminde koyu yazı veriyordu
   (kullanıcı 2026-09-06: "hâlâ okuyamıyorum") — modern'de beyaz. */
body.modern .komut-metin { flex: 1; color: #fff; }
body.modern .komut-satir { color: #d8d2c6; }
.komut-satir .gorev-islem { background: none; border: none; color: #a49c90; cursor: pointer; font-size: var(--yz-kucuk); }
.komut-satir .gorev-islem:hover { color: var(--n-krem); }
.m-kart { border: 1px solid #3a3530; padding: 14px 18px; }
.m-kart .m-gunluk-baslik { margin-bottom: 8px; }
.m-kart p { font-family: var(--m-serif); font-size: var(--yz-buyuk); line-height: 1.5; color: #d8d2c6; }
.m-kart b { font-weight: 400; color: var(--gun-rengi, #f2cf1d); }
.m-kaynak { font-family: var(--m-serif); font-style: italic; font-size: var(--yz-orta); color: #a49c90; margin-top: 8px; text-align: right; }

/* --- maarif takvimi yaprağı: koparılacak sayfa, üstte iki delik --- */
.m-yaprak-kart {
  position: relative;
  text-align: center;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m-yaprak-kart .m-gunluk-baslik { text-align: center; margin-bottom: 4px; }
.yaprak-delik {
  position: absolute; top: 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--n-siyah, #14110f); border: 1px solid #3a3530;
}
.yaprak-delik.sol { left: 16px; }
.yaprak-delik.sag { right: 16px; }
.yaprak-gun {
  font-family: var(--m-serif);
  font-size: calc(64px * var(--yz));
  line-height: 1;
  color: var(--gun-rengi, #f2cf1d);
  margin: 2px 0;
}
.yaprak-gunadi { font-family: var(--m-serif); font-size: var(--yz-buyuk); color: #d8d2c6; }
.yaprak-alt { font-family: var(--m-mono); font-size: var(--yz-mini); color: #a49c90; margin-top: 8px; letter-spacing: .04em; }

/* --- saat --- */
.m-saat-kart { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.m-saat-kart .m-gunluk-baslik, .m-saat-kart .m-kaynak { text-align: center; }
.m-saat {
  font-family: var(--m-mono);
  font-size: calc(40px * var(--yz));
  line-height: 1.1;
  color: #e8e2d6;
  font-variant-numeric: tabular-nums;
}
.m-saat i { font-style: normal; color: var(--gun-rengi, #f2cf1d); animation: saat-nabiz 2s steps(1, end) infinite; }
.m-saat span { font-size: .48em; color: #a49c90; margin-left: 4px; }
@keyframes saat-nabiz { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .m-saat i { animation: none; } }

/* --- paylaş + beğen --- */
.m-eylem { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 10px; position: relative; }
.m-eylem button {
  background: none; border: 1px solid #3a3530; color: #a49c90;
  padding: 5px 8px; cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.m-eylem button:hover { color: var(--n-krem); border-color: #5c554d; }
.m-eylem svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-eylem b { font-family: var(--m-mono); font-size: var(--yz-mini); line-height: 1; font-weight: 600; }
.m-eylem b:empty { display: none; }
.m-begen.basili { color: #d0212e; border-color: #d0212e; }
.m-begen.basili svg { fill: #d0212e; }
.m-begen.zipla svg { animation: begen-zipla .34s ease-out; }
@keyframes begen-zipla { 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .m-begen.zipla svg { animation: none; } }
.m-eylem-not { position: absolute; right: 0; bottom: 100%; margin-bottom: 4px; font-family: var(--m-mono); font-size: var(--yz-mini); font-style: normal; color: var(--gun-rengi, #f2cf1d); }
.almanak-link { max-width: var(--hero-w); margin: 8px auto 0; text-align: right; }
.almanak-link a {
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a49c90;
}
.almanak-link a:hover { color: var(--gun-rengi, #f2cf1d); }

/* ---------- almanak sayfası ---------- */
.almanak-sayfa { max-width: var(--hero-w); margin: 30px auto 70px; padding: 0 40px; text-align: left; }
body.modern .almanak-sayfa .kisisel-baslik { font-family: var(--m-serif); font-size: calc(clamp(36px, 5vw, 54px) * var(--yz)); margin-top: 10px; }
.almanak-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 20px 0 24px;
  font-family: var(--m-mono);
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.almanak-ok { color: var(--n-krem); }
.almanak-ok:hover { color: var(--gun-rengi, #f2cf1d); }
.almanak-ok.pasif { color: #4a453f; cursor: default; }
.almanak-tarih { color: #bdb6aa; }
.almanak-sayfa .m-kartlar { margin: 0; max-width: none; }
.almanak-not { font-family: var(--m-mono); font-size: var(--yz-kucuk); color: #a49c90; margin-top: 22px; }

/* sayım satırı — masanın tek bakışta nabzı (etiketler 1,5×, sayılar 2×) */
.m-sayim { font-family: var(--m-mono); font-size: var(--yz-dev); color: #b4ada1; margin-top: 22px; }
.m-sayim > span { animation-delay: .22s; }
.m-sayim b { font-weight: 600; font-size: calc(24px * var(--yz)); color: var(--n-krem); }
.m-sayim .m-yuzde-genel { color: var(--gun-rengi, #f2cf1d); }
.m-sayim .m-yuzde-baslik { color: #7fb2ff; }
.m-sayim i { font-style: normal; font-size: var(--yz-normal); color: #a49c90; letter-spacing: .06em; }
.m-sayim b { font-weight: 600; color: var(--n-krem); }

/* ---------- günlük yoğunluk + z raporu ---------- */
/* Günlük blok, kartlarla AYNI üç kolona oturur — dikey hizalar birebir. */
.m-gunluk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  max-width: var(--hero-w);
  margin: 34px auto 0;
  text-align: left;
}
.masa-alan { display: contents; }
.kilit-ortu { grid-column: 2 / 4; grid-row: 1; align-self: stretch; justify-self: stretch; z-index: 5; position: relative; }
/* Misafirde masanın yerinde tek bir kapak var; üç sütunluk ızgara onu
   sağa itip ortada boşluk bırakıyordu. İki eşit sütun: solda ısı haritası,
   sağda kapak — aynı yükseklikte, aralarında tek boşluk. */
body.misafir .m-gunluk { grid-template-columns: 1fr 1fr; gap: 22px; }
body.misafir .kilit-ortu { grid-column: 2; }
body.misafir .m-gunluk-sol,
body.misafir .kilit-ortu { border: 1px solid #2e2a26; padding: 18px 20px; }
body.misafir .kilit-ortu { justify-content: center; gap: 16px; padding-top: 18px; }
.m-seri {
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  color: #f2cf1d;
  margin-top: 8px;
  letter-spacing: .06em;
}

body.modern .odak-kutu { border: 1px solid #3a3530; padding: 0; background: transparent; }
body.modern .odak-satir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--yz-normal);
  padding: 5px 10px;
  border-bottom: 1px dotted #2b2723;
}
body.modern .odak-satir input[type=checkbox] { accent-color: #f2cf1d; }
body.modern .odak-metin { flex: 1; color: #d8d2c6; }
body.modern .odak-satir.tamamlandi .odak-metin { text-decoration: line-through; color: #a49c90; }
body.modern .odak-kutu .m-gunluk-baslik { padding: 0 10px; margin-top: 2px; }
body.modern .odak-kutu .z-bos { padding: 4px 10px 10px; }
body.modern .odak-sayi { color: #f2cf1d; }
.odak-hedef { font-size: var(--yz-mini); color: #a49c90; letter-spacing: .06em; margin-left: 6px; }
body.modern .odak-kutu .gorev-islem { color: #a49c90; background: none; border: none; cursor: pointer; font-size: var(--yz-kucuk); }
body.modern .odak-kutu .gorev-islem:hover { color: var(--n-krem); }

body.modern .yaklasan-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--hero-w);
  margin: 34px auto 0;
  padding: 0;
}
body.modern .yaklasan {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px 0;
  margin-right: 22px;
  font-size: var(--yz-orta);
  max-width: 460px;
  color: #b5aea2;
}
body.modern .yaklasan:hover span { text-decoration: underline; color: var(--n-krem); }
body.modern .yaklasan b { font-family: var(--m-mono); font-weight: 400; color: #f2cf1d; white-space: nowrap; }
body.modern .yaklasan.kritik b, body.modern .yaklasan.gecti b { color: #ff5a4e; font-weight: 700; }
body.modern .yaklasan.gecti { border-color: #ff5a4e; }
body.modern .yaklasan span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.modern .yaklasan i { font-style: normal; font-family: var(--m-mono); font-size: var(--yz-mini); color: #a49c90; text-transform: uppercase; white-space: nowrap; }

body.modern #arama { background: #221e1a; border: 1px solid #3a3530; color: var(--n-krem); }
body.modern #arama::placeholder { color: #a49c90; }
body.modern #arama:focus { border-color: var(--n-krem); background: #2a2520; }
body.modern #arama-sonuc { background: #221e1a; border-color: #4a453f; }
body.modern #arama-sonuc a { color: #d8d2c6; border-bottom-color: #2b2723; }
body.modern #arama-sonuc a:hover { background: #2e2823; }
body.modern #arama-sonuc i { color: #a49c90; }
.m-gunluk-baslik {
  font-family: var(--m-mono);
  font-size: var(--yz-mini);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a49c90;
  margin-bottom: 10px;
}
.m-isi { display: flex; gap: 3px; }
.m-isi-kolon { display: flex; flex-direction: column; gap: 3px; }
.m-isi i, .m-isi-lejant i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #262220;
  cursor: pointer;
  display: inline-block;
}
.m-isi i.bos { visibility: hidden; cursor: default; }
.m-isi .s1, .m-isi-lejant .s1 { background: #3a3115; }
.m-isi .s2, .m-isi-lejant .s2 { background: #6b5b1a; }
.m-isi .s3, .m-isi-lejant .s3 { background: #a8891c; }
.m-isi .s4, .m-isi-lejant .s4 { background: #f2cf1d; }
.m-isi i:hover { outline: 1px solid #a49c90; }
.m-isi i.secili-gun { outline: 1px solid var(--n-krem); }
.m-isi-lejant {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  font-family: var(--m-mono);
  font-size: var(--yz-mini);
  color: #a49c90;
}
.m-isi-lejant i { cursor: default; width: 11px; height: 11px; }
.m-isi-lejant i:first-of-type { margin-left: 6px; }

/* Z raporu, bugünün işleri gibi içerikle birlikte aşağı uzar — kaydırma çubuğu yok */
.m-zrapor { padding-right: 4px; }
.z-satir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--yz-orta);
  padding: 3px 0;
  border-bottom: 1px dotted #2b2723;
}
.z-zaman { font-family: var(--m-mono); font-size: var(--yz-kucuk); color: #a49c90; }
.z-isaret { color: #f2cf1d; font-family: var(--m-mono); }
.z-metin { flex: 1; color: #d8d2c6; font-family: var(--sans); }
.z-etiket {
  font-family: var(--m-mono);
  font-size: var(--yz-mini);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a49c90;
  white-space: nowrap;
}
.z-ekle .z-metin { color: #8f887c; }
.z-ekle .z-isaret { color: #a49c90; }
.z-bos { font-size: var(--yz-orta); color: #a49c90; font-style: italic; }
.z-alt { font-family: var(--m-mono); font-size: var(--yz-mini); color: #a49c90; margin-top: 8px; }

/* ---------- klasör bantları: her proje kendi renkli "yaprağı" ----------
   Bandın görünen rengi = öndeki (ilk) projenin klasör rengi.
   Arkadaki projelerin yalnız sekmesi taşar; üzerine gelince yaprağı
   kendi rengiyle arkadan hafifçe yükselir. */
/* bantlar da üst bloklarla aynı çerçevede — sayfa tek kolon disiplini */
.m-arsiv { max-width: var(--hero-w); margin: 84px auto 0; padding: 0; }
.m-bant {
  position: relative;
  height: var(--bant-h, 78px);
  transform: translateY(46px);
  animation: m-bant-gel .7s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.18s + var(--sira, 0) * .1s);
}
@keyframes m-bant-gel { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .m-bant { animation: none; transform: none; } }

.m-yaprak {
  position: absolute;
  inset: 0;
  z-index: var(--z, 1);
  background: var(--c, #444);
  border-radius: 8px 8px 0 0;
  transition: transform .28s cubic-bezier(.19, 1, .22, 1);
}
.m-yaprak:hover, .m-yaprak:focus-visible { transform: translateY(-11px); }
.m-yaprak.m-pasif .m-tab { opacity: .88; }

/* sekme: yaprağın tepesindeki kavisli omuzlu klasör dili */
.m-tab {
  position: absolute;
  top: -46px;
  left: var(--x, 58px);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  background: var(--c, #444);
  color: var(--ct, var(--n-krem));
  border-radius: 18px 18px 0 0;
  font-family: var(--m-serif);
  font-size: calc(21px * var(--yz));
  white-space: nowrap;
}
.m-tab::before, .m-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 17px;
  height: 17px;
}
.m-tab::before { left: -17px; background: radial-gradient(circle at 0 0, transparent 17px, var(--c, #444) 17px); }
.m-tab::after { right: -17px; background: radial-gradient(circle at 100% 0, transparent 17px, var(--c, #444) 17px); }
/* Klasör sekmesindeki tamamlama yüzdesi — kendi ölçeği var (Düzen modu >
   Yüzde puntosu). Genel yazı boyundan BAĞIMSIZ büyütülebilsin diye ayrı
   çarpan: --yz-yuzde. Varsayılan 1,3 (kullanıcı bunları büyük istiyor). */
.m-ftab-yuzde {
  font-family: var(--m-mono);
  font-size: calc(var(--yz-kucuk) * var(--yz-yuzde, 1.3));
  font-weight: 600;
  opacity: .95;
}

.m-bant-ad {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: none;
  font-family: var(--m-mono);
  font-size: var(--yz-normal);
  letter-spacing: .06em;
  color: var(--bant-yazi, rgba(255, 255, 255, .93));
  white-space: nowrap;
}
.m-bant-ad b { font-weight: 400; opacity: .7; margin-left: 14px; }
.m-bant-ad i { font-style: normal; margin-left: 12px; opacity: .8; }

/* ---------- düzen modu ---------- */
body.misafir .duzen-dugme { display: none; } /* düzen modu modern bantlara özgü */
body.duzen .m-tab { cursor: grab; outline: 1px dashed rgba(244, 239, 228, .5); outline-offset: 3px; }
body.duzen .m-tab:active { cursor: grabbing; }
body.duzen .m-yaprak:hover { transform: none; }
.ayar-panel {
  position: fixed;
  top: 76px;
  right: 18px;
  width: 300px;
  background: #221e1a;
  border: 1px solid #4a453f;
  border-top: 5px solid var(--gun-rengi, #f2cf1d);
  padding: 18px 20px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ayar-panel .ayar-ipucu { font-size: var(--yz-orta); color: #bdb6aa; line-height: 1.5; }
.ayar-panel .ayar-ipucu b { color: var(--n-krem); font-weight: 600; }
.ayar-panel label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #bdb6aa;
}
.ayar-panel select {
  background: #16130f;
  color: var(--n-krem);
  border: 1px solid #4a453f;
  font-size: var(--yz-orta);
  padding: 5px 8px;
  max-width: 170px;
}
.ayar-panel input[type=range] { width: 150px; accent-color: var(--gun-rengi, #f2cf1d); }
.ayar-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.renk-panel {
  position: fixed;
  top: 76px;
  right: 336px;
  width: 240px;
  background: #221e1a;
  border: 1px solid #4a453f;
  padding: 16px 18px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.renk-panel label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #bdb6aa;
}
.renk-panel input[type=color] { width: 46px; height: 28px; border: 1px solid #4a453f; background: none; cursor: pointer; }

.m-imza {
  padding: 46px 40px 40px;
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a49c90;
  text-align: center;
}

/* ---------- misafir modu (vitrin) ---------- */
body.misafir .masa-alan .odak-kutu,
body.misafir .masa-alan .m-zrapor {
  filter: blur(7px) saturate(.6);
  pointer-events: none;
  user-select: none;
}
.kilit-ortu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* metin yukarida dursun */
  gap: 18px;
  padding-top: 26px;
  font-family: var(--m-mono);
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-krem);
}
body.misafir .arama-kap, body.misafir .kisisel-link,
body.misafir .gorunum-dugme, body.misafir .misafir-link { display: none; }
.giris-link {
  font-family: var(--mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--cizgi);
  padding: 5px 10px;
  color: var(--soluk);
}
body.modern .giris-link { border-color: #4a453f; color: var(--n-krem, #f4efe4); font-family: var(--m-mono); }
body.modern .giris-link:hover { background: var(--n-krem); color: #16130f; }
.cikis-link { font-family: var(--mono); font-size: var(--yz-kucuk); color: var(--soluk); }
body.modern .cikis-link { font-family: var(--m-mono); color: #a49c90; }
.cikis-link:hover { text-decoration: underline; }
.misafir-link { color: var(--soluk); margin-left: 18px; font-size: var(--yz-orta); }
body.modern .alt .misafir-link { color: #a49c90; }
.misafir-link:hover { text-decoration: underline; }

.kilit-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  overflow-y: auto;          /* uzun kutu tasmasin */
  padding: 16px 12px;
}
.kilit-kutu {
  width: min(480px, calc(100vw - 32px));
  max-height: 92vh;
  overflow-y: auto;          /* ekrana sigmazsa kutunun kendisi kaysin */
  margin: auto;
  background: var(--n-bar, #0f0d0b);
  border: 1px solid #4a453f;
  border-top: 6px solid var(--gun-rengi, #f2cf1d);
  padding: 26px 30px;
  text-align: left;
}
.kilit-kutu p, .misafir-kilit-sayfa h2 {
  font-family: var(--m-serif);
  font-size: calc(21px * var(--yz));
  font-weight: 400;
  line-height: 1.45;
  color: var(--n-krem);
  margin: 6px 0 18px;
}
.kilit-butonlar { display: flex; gap: 12px; align-items: center; }
.kilit-giris {
  background: var(--n-krem);
  color: #16130f;
  font-family: var(--m-mono);
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 16px;
}
.kilit-giris:hover { background: var(--gun-rengi, #f2cf1d); }
.kilit-kapat {
  background: none;
  border: 1px solid #4a453f;
  color: #bdb6aa;
  font-family: var(--m-mono);
  font-size: var(--yz-orta);
  padding: 9px 14px;
  cursor: pointer;
}
.kilit-kapat:hover { border-color: var(--n-krem); color: var(--n-krem); }
.kilit-not { font-family: var(--m-mono); font-size: var(--yz-mini); color: #a49c90; margin-top: 16px; }
.misafir-kilit-sayfa { max-width: 720px; margin: 90px auto; padding: 0 30px; text-align: center; }
.misafir-kilit-sayfa .geri { color: #bdb6aa; }

/* ---------- iç sayfalar: proje renginde klasör çerçevesi içinde kâğıt ---------- */
body.modern .ic-sayfa {
  max-width: 1080px;
  margin: 30px auto 64px;
  padding: 36px 40px 52px;
  background: var(--m-kagit);
  color: var(--m-murekkep);
  border: 13px solid var(--prenk, #221d17);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

/* sağ kenar: aynı gruptaki kardeş dosyaların dikey sekmeleri */
body.modern .m-yan-tablar {
  position: fixed;
  right: 0;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 60;
}
.m-yan-tab {
  writing-mode: vertical-rl;
  background: var(--c, #444);
  color: var(--ct, #f4efe4);
  font-family: var(--m-serif);
  font-size: var(--yz-dev);
  padding: 24px 9px;
  border-radius: 12px 0 0 12px;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, .35);
  transition: transform .22s cubic-bezier(.19, 1, .22, 1);
  transform: translateX(4px);
}
.m-yan-tab:hover, .m-yan-tab:focus-visible, .m-yan-tab.secili { transform: translateX(-4px); }
.m-yan-tab.secili { outline: 1px solid rgba(255, 255, 255, .35); outline-offset: -4px; }
body.modern .geri { font-family: var(--m-mono); font-size: var(--yz-orta); text-transform: uppercase; letter-spacing: .06em; color: var(--m-gri); }
body.modern .geri:hover { color: var(--m-murekkep); }
body.modern .m-dosya-no { display: inline-block; font-family: var(--m-mono); font-size: var(--yz-kucuk); letter-spacing: .06em; text-transform: uppercase; color: var(--m-kirmizi); border: 1px solid var(--m-kirmizi); padding: 3px 9px; margin-bottom: 14px; transform: rotate(-1.6deg); }
body.modern .proje-baslik h1, body.modern .kisisel-baslik { font-family: var(--m-serif); font-size: calc(clamp(40px, 6vw, 64px) * var(--yz)); letter-spacing: -.02em; }
body.modern .ic-sayfa .rozet { font-family: var(--m-mono); }
body.modern .ic-sayfa .rozet.canli { color: var(--m-mavi); }
body.modern .ic-sayfa .rozet.canli::before { background: var(--m-mavi); }
body.modern .cetvel-dolu { background: var(--m-mavi); }
body.modern .cetvel-yuzde { font-family: var(--m-mono); color: var(--m-mavi); }
body.modern .proje-linkler a { color: var(--m-mavi); border-bottom-color: rgba(30, 75, 215, .25); }
body.modern .proje-linkler a:hover { border-bottom-color: var(--m-mavi); }

/* klasör sekmeleri (iç sayfa modülleri) */
body.modern .sekmeler { border-bottom: 2px solid var(--m-murekkep); gap: 6px; }
body.modern .sekme {
  font-family: var(--m-mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--m-dolgu);
  border: 1px solid var(--m-cizgi);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  padding: 10px 16px;
  margin-bottom: -2px;
  color: var(--m-gri);
}
body.modern .sekme.secili {
  background: var(--m-kagit);
  border-color: var(--m-murekkep);
  border-bottom: 2px solid var(--m-kagit);
  color: var(--m-murekkep);
  font-weight: 600;
}
body.modern .sekme .mini-yuzde { color: var(--m-mavi); }

/* kutular = dosya gömlekleri */
body.modern .kutu {
  background: #fff;
  border: 1px solid var(--m-murekkep);
  box-shadow: 4px 5px 0 rgba(25, 25, 25, .08);
}
body.modern .kutu h2 { font-family: var(--m-mono); letter-spacing: .06em; color: var(--m-murekkep); }
body.modern .kutu h2 .sayi { color: var(--m-mavi); }
body.modern .yapilan-liste li::before { color: var(--m-mavi); }
body.modern .oneri-liste li::before { color: var(--m-mavi); }
body.modern .gorev input[type=checkbox] { accent-color: var(--m-mavi); }
body.modern .oncelik.yuksek { color: var(--m-kirmizi); }
body.modern .gorev-islem:hover { color: var(--m-mavi); }
body.modern .gorev-islem.eklendi { color: var(--m-mavi); }
body.modern .gorev-ekle input[type=text], body.modern .kisisel-ekle input[type=text], body.modern .not-alani { background: var(--m-kagit); border-color: var(--m-cizgi); }
body.modern .gorev-ekle input[type=text]:focus, body.modern .kisisel-ekle input[type=text]:focus, body.modern .not-alani:focus { border-color: var(--m-mavi); background: #fff; }
body.modern .gorev-ekle button, body.modern .kisisel-ekle button { background: var(--m-murekkep); border-color: var(--m-murekkep); }
body.modern .gorev-ekle button:hover, body.modern .kisisel-ekle button:hover { background: var(--m-mavi); border-color: var(--m-mavi); }
body.modern .kaynak-etiket { color: var(--m-mavi); background: #e8edfb; font-family: var(--m-mono); }
body.modern .ic-sayfa .bos-not { color: var(--m-gri); }
body.modern .not-durum { font-family: var(--m-mono); }
body.modern .kisisel-aciklama { color: var(--m-gri); }

@media (max-width: 900px) {
  /* üst bar */
  body.modern .ust { padding: 14px 16px 12px; }
  body.modern .tarih { display: none; }
  .arama-kap { display: none; }

  /* hero + kartlar + masa */
  body.modern { overflow-x: hidden; }
  .m-hero { padding: 22px 14px 0; }
  .m-hero > * { min-width: 0; }
  .komut-kutusu { padding: 0 14px; margin-top: 16px; }
  .m-kartlar > .m-kart:nth-child(n+3) { grid-column: auto; }
  .m-kartlar, .m-gunluk {
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
  }
  .m-gunluk { gap: 24px; margin-top: 26px; }
  .m-kart { min-width: 0; }
  .m-kart p, .m-kaynak, .odak-kutu *, .m-zrapor *, .z-bos {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .m-gunluk > *, .masa-alan > * { min-width: 0; max-width: 100%; }
  .masa-alan { grid-template-columns: 1fr; gap: 24px; width: 100%; }
  .m-isi { overflow-x: auto; padding-bottom: 4px; }
  .kilit-ortu { font-size: var(--yz-mini); letter-spacing: .06em; padding: 0 14px; text-align: center; line-height: 1.8; }

  /* yaklaşanlar (yalnız ev sahibi görür) */
  body.modern .yaklasan-serit { padding: 0 16px; margin-top: 24px; flex-direction: column; gap: 2px; }
  body.modern .yaklasan { max-width: 100%; margin-right: 0; }

  /* bantlar: sekmeler kısaltmalı, üçü yan yana sığar */
  .m-arsiv { margin-top: 56px; padding: 0 10px; }
  .m-bant { height: 62px; }
  /* Sekme: ad kısalır ama YÜZDE HER ZAMAN GÖRÜNÜR. Eskiden yüzde
     gizleniyordu (dar ekranda ad sığsın diye); ilerlemeyi telefondan
     takip etmek adın son üç harfini görmekten değerli. Yüzde sabit
     genişlikte sağda durur, kısalan yalnız addır. */
  .m-tab {
    left: min(calc(10px + var(--tx, 0) * 32vw), 64vw);
    max-width: 34vw;
    height: 38px;
    top: -38px;
    padding: 0 10px;
    font-size: var(--yz-buyuk);
    line-height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }
  /* kısalan yalnız ad; yüzde daralmaz, kırpılmaz */
  .m-tab .m-tab-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-tab .m-ftab-yuzde { display: inline; flex: none; }
  .m-bant-ad { font-size: var(--yz-mini); right: 12px; letter-spacing: .04em; }
  .m-bant-ad b, .m-bant-ad i { display: none; }

  /* iç sayfa + kilit */
  body.modern .m-yan-tablar { display: none; }
  body.modern .ic-sayfa { margin: 12px 8px 36px; padding: 20px 16px 40px; border-width: 7px; }
  .misafir-kilit-sayfa { margin: 60px auto; }
  .kilit-kutu { padding: 20px 22px; }
  .m-imza { padding: 30px 16px 28px; }
}

/* ============================================================
   MİSAFİR — dosyanın içi: başlık açık, gerisi bulanık
   Misafir artık klasöre girebiliyor. Amaç "neyin var" sorusuna
   "bir şeyler var ama sana değil" cevabını görsel olarak vermek:
   dosya adı okunur, geri kalanı okunamaz. Asıl kilit sunucuda —
   misafire görev metni zaten gönderilmiyor; buradaki bulanıklık
   yalnız görgü kuralı, güvenlik katmanı değil.
   ============================================================ */
body.misafir-icerde .ic-sayfa > *:not(.geri):not(.proje-baslik):not(:has(.m-dosya-no)),
body.misafir-icerde .m-yan-tablar {
  filter: blur(7px);
  pointer-events: none;   /* sekmeler ve satırlar tıklanamaz */
  user-select: none;
  opacity: .7;
}
/* açık kalanlar: dosya numarası, başlık, durum rozeti, geri dönüş */
body.misafir-icerde .ic-sayfa .m-dosya-no,
body.misafir-icerde .ic-sayfa .proje-baslik,
body.misafir-icerde .ic-sayfa .proje-baslik h1,
body.misafir-icerde .ic-sayfa .geri {
  filter: none;
  opacity: 1;
  pointer-events: auto;
}
/* sekme şeridi ayrıca kilitli (içeriye :has desteklemeyen tarayıcı için) */
body.misafir-icerde .sekmeler,
body.misafir-icerde .proje-ozet,
body.misafir-icerde .proje-linkler {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  opacity: .7;
}
/* bulanık metin DOM'da duruyor — kopyalanmasın */
body.misafir-icerde .ic-sayfa { -webkit-user-select: none; user-select: none; }
body.misafir-icerde .ic-sayfa .geri { -webkit-user-select: auto; user-select: auto; position: relative; z-index: 3; }

/* ---------- dilek / şikâyet kutusu (kilit kutusunun içinde) ---------- */
.dilek-kutu { margin-top: 0; }
.dilek-form { border-top: 1px dashed #4a453f; margin-top: 14px; padding-top: 14px; }
.dilek-slogan { font-size: var(--yz-normal); color: #bdb6aa; line-height: 1.5; margin: 12px 0 10px; }
.dilek-form textarea, .dilek-form input[type=text] {
  width: 100%; background: #221e1a; border: 1px solid #3a3530; border-radius: 8px;
  color: var(--n-krem); font-family: var(--sans); font-size: var(--yz-normal);
  padding: 10px 12px; margin-bottom: 8px; resize: vertical;
}
.dilek-form textarea::placeholder, .dilek-form input::placeholder { color: #8d8579; }
.dilek-form textarea:focus, .dilek-form input:focus { outline: none; border-color: var(--gun-rengi, #f2cf1d); }
.dilek-web { position: absolute; left: -9999px; }   /* honeypot: insan görmez */
.dilek-gonder {
  background: var(--n-krem); color: #16130f; border: none; border-radius: 8px;
  font-family: var(--m-mono); font-size: var(--yz-kucuk); text-transform: uppercase;
  letter-spacing: .06em; padding: 9px 18px; cursor: pointer;
}
.dilek-gonder:hover { background: var(--gun-rengi, #f2cf1d); }
.dilek-gonder:disabled { opacity: .5; cursor: default; }
.dilek-durum { font-size: var(--yz-kucuk); color: #bdb6aa; min-height: 1.3em; margin-top: 8px; }

/* dışarıdan gelen dilek şeridi (yalnız ev sahibi görür) */
.dilek-serit {
  max-width: var(--hero-w); margin: 22px auto 0; padding: 12px 16px;
  border: 1px solid #4a453f; border-left: 3px solid var(--gun-rengi, #f2cf1d);
  font-size: var(--yz-normal); color: #d8d2c6; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
}
.dilek-serit b { color: var(--gun-rengi, #f2cf1d); font-family: var(--m-mono); }
.dilek-satir { flex: 1 1 100%; color: #bdb6aa; }
.dilek-satir i { font-style: normal; font-family: var(--m-mono); font-size: var(--yz-kucuk); color: #8d8579; margin-right: 8px; }
.dilek-satir u { text-decoration: none; color: #8d8579; font-size: var(--yz-kucuk); margin-left: 8px; }

/* ---------- tetris: kapalı kapıda oyalanma köşesi ---------- */
.tetris { margin-top: 16px; border-top: 1px dashed #4a453f; padding-top: 14px; }
.tetris-slogan { font-size: var(--yz-normal); color: #bdb6aa; line-height: 1.5; margin-bottom: 12px; }
.tetris-alan { display: flex; gap: 14px; align-items: stretch; }
#tetris-tuval { border: 1px solid #3a3530; border-radius: 4px; display: block; }
.tetris-yan { display: flex; flex-direction: column; gap: 8px; min-width: 74px; }
.tetris-kutu {
  border: 1px solid #3a3530; border-radius: 4px; padding: 6px 8px; text-align: center;
}
.tetris-kutu i {
  display: block; font-style: normal; font-family: var(--m-mono);
  font-size: var(--yz-mini); letter-spacing: .06em; text-transform: uppercase; color: #8d8579;
}
.tetris-kutu b { font-family: var(--m-mono); font-size: var(--yz-buyuk); color: var(--n-krem); }
#tetris-sonraki { display: block; margin: 2px auto 0; }
.tetris-bitti { border-color: var(--m-kirmizi, #bd2c2c); padding: 8px 6px; text-align: center; border: 1px solid var(--m-kirmizi, #bd2c2c); border-radius: 4px; }
.tetris-bitti b { display: block; font-family: var(--m-mono); color: var(--m-kirmizi, #bd2c2c); margin-bottom: 6px; font-size: var(--yz-normal); }
.tetris-yeni {
  background: var(--n-krem); color: #16130f; border: none; border-radius: 4px; cursor: pointer;
  font-family: var(--m-mono); font-size: var(--yz-mini); padding: 5px 8px; width: 100%;
}
.tetris-tuslar { display: none; gap: 6px; margin-top: 10px; }
.tetris-tuslar button {
  flex: 1; padding: 12px 0; font-size: var(--yz-buyuk);
  background: #221e1a; border: 1px solid #3a3530; border-radius: 6px; color: var(--n-krem); cursor: pointer;
}
.tetris-tuslar button:active { background: #3a3530; }
.tetris-not { font-size: var(--yz-mini); color: #8d8579; margin-top: 10px; font-family: var(--m-mono); }

/* dokunmatikte tuş takımı görünür, klavye ipucu gizlenir */
@media (hover: none), (max-width: 640px) {
  .tetris-tuslar { display: flex; }
  .tetris-not { display: none; }
  .tetris-alan { gap: 10px; }
  .tetris-yan { min-width: 62px; }
}

/* dilek kutusu: oyunun yanındaki boşlukta zarf düğmesi */
.dilek-zarf {
  flex: 1;                       /* yan sütunda kalan boşluğun tamamı */
  min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 6px; cursor: pointer;
  background: #221e1a; border: 1px solid #3a3530; border-radius: 4px; color: var(--n-krem);
}
.dilek-zarf:hover { border-color: var(--gun-rengi, #f2cf1d); color: var(--gun-rengi, #f2cf1d); }
.dilek-zarf svg {
  width: 46px; height: 31px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round;
}
.dilek-zarf i {
  font-style: normal; font-family: var(--m-mono); font-size: var(--yz-mini);
  letter-spacing: .04em; text-transform: lowercase; line-height: 1.35; text-align: center;
}

/* dar ekran: kutu kenarları daralsın, tuş takımı taşmasın */
@media (max-width: 520px) {
  .kilit-kutu { padding: 18px 12px; }
  .tetris-tuslar { gap: 4px; flex-wrap: wrap; }   /* sigmazsa alt satira insin */
  .tetris-tuslar button {
    min-width: 0; padding: 11px 0; font-size: var(--yz-normal);
  }
  .tetris-alan { gap: 8px; }
  .tetris-yan { min-width: 56px; }
  .tetris-kutu { padding: 5px 4px; }
}

/* misafir ana sayfasındaki iletişim zarfı (şeridin altında) */
.dilek-zarf-ana {
  flex: none;                    /* şeritte esnemesin */
  width: auto; min-width: 150px; min-height: 0;
  padding: 14px 22px;
}
.dilek-zarf-ana svg { width: 40px; height: 27px; }
.dilek-zarf-ana i { text-transform: uppercase; letter-spacing: .08em; font-size: var(--yz-kucuk); }
/* Misafir iskeleti: içerik sunucudan gelmediği için gizlenecek metin yok.
   Bu çubuklar boştur — bulanıklık kaldırılsa da altından bir şey çıkmaz. */
.iskelet-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.iskelet-liste li { height: 12px; width: var(--w, 80%); background: #2b2724; }
.kart-ozet.iskelet { display: grid; gap: 8px; margin: 10px 0; }
.kart-ozet.iskelet i { display: block; height: 9px; background: #2b2724; }
.kart-ozet.iskelet i:last-child { width: 62%; }
.misafir-iskelet .kutular { margin-top: 20px; }

.kilit-ortu-alt {
  font-family: var(--m-mono);
  font-size: var(--yz-mini);
  text-transform: none;
  letter-spacing: .02em;
  color: #a49c90;
  text-align: center;
  max-width: 34ch;
  line-height: 1.6;
}