/* ======================================================================
   Çalışmalar: gerçekçi masaüstü (masaustu.js, data/masaustu.js).
   Zemin kapı odasının rengi. Pencereler koyu çerçeve, içi kâğıt. Her işin kendi renkli karosu var, renkler kapı odasının
   kısık tonları (mor yok, ERP nötr). Açılışta "Çalışmalar" penceresi bütün işleri kartla gösterir; projeler görev
   çubuğuna sabit. Betik yoksa her şey alt alta okunur.
   ====================================================================== */
.mas { --zemin: #141210; --cerceve: #24211d; --cerceve2: #1b1916; --cizgi: rgba(255, 255, 255, .09); --acik: #f3efe7; --sonuk: #a39d93; --gorev: 48px; position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--acik); background: var(--zemin); }
.mas [hidden] { display: none !important; }
.mas:not([data-hazir]) { height: auto; overflow: visible; padding: 96px var(--pad) 24px; }
.mas:not([data-hazir]) .gorev, .mas:not([data-hazir]) .baslat { display: none; }
/* Duvar kâğıdı: odaya pencereden düşen ışık, ziyaretçinin kendi saatine göre (masaustu.js isikYak). Sabah solda alçak ve
   şeftali, öğlen tepede ve sıcak, akşam sağda turuncu, gece loş. Değerler betikten gelir; betik yoksa öğlen hâli.
   Geçiş dakikada bir ve yavaş: göz fark etmez, sayfa her açılışta günün saatinde olur. */
.mas__duvar {
  --isik: #3a3026; --isik2: #2a2119; --gx: 72%; --gy: 12%;
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 62% at var(--gx) var(--gy), var(--isik), transparent 70%), radial-gradient(90% 60% at 12% 110%, var(--isik2), transparent 70%), var(--zemin);
}

/* Duvar kâğıdı: Yıldızlı Gece'den esinlenen, gece.js'in çizdiği tuval. Betik yoksa altta ışıklı koyu duvar kalır. */
.mas__gece { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Simgeler ---------- */
.mas__simgeler { position: absolute; z-index: 2; left: 10px; top: 76px; bottom: calc(var(--gorev) + 8px); display: grid; grid-auto-flow: column; grid-auto-columns: 96px; grid-template-rows: repeat(auto-fill, 92px); gap: 2px; margin: 0; padding: 0; list-style: none; }
.simge { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; height: 90px; padding: 6px 3px; color: var(--acik); font: 400 12px/1.2 "Inter", sans-serif; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); background: none; border: 1px solid transparent; border-radius: 5px; cursor: default; }
.simge:hover { background: rgba(255, 255, 255, .08); }
.simge.secili { background: rgba(226, 192, 109, .18); border-color: rgba(226, 192, 109, .4); }
.simge:focus-visible { outline: 1px solid var(--acik); outline-offset: -1px; }
.simge span { display: -webkit-box; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.simge .ik { width: 44px; height: 44px; flex: none; }
.ik { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.ik__c { fill: none; stroke: #efe7d8; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; }
.ik__c .v { stroke: #d9b866; }
.ik__c circle.v { fill: #d9b866; stroke: none; }
/* Renkli karo: rengi şablondan (color), çizgi üstünde açık; açık karoda koyu. */
.ik--kare .ik__c { stroke: rgba(255, 255, 255, .93); stroke-width: 2.100; }
.ik--kare .ik__c .v { stroke: #fff; }
.ik--kare .ik__c circle.v { fill: #fff; }
.ik--acik .ik__c, .ik--acik .ik__c .v { stroke: #2a2118; }
.ik--acik .ik__c circle.v { fill: #2a2118; }
.ik--ben { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.simge .ik--ben { width: 40px; height: 40px; margin: 2px; }
/* Projeler geniş ekranda görev çubuğunda; masaüstünde yalnız telefonda (ana ekran). */
.simge-tel { display: none; }
.ik--belge .ik__c { stroke: #6b6862; stroke-width: 1.600; }
.mas__ipucu { position: absolute; z-index: 5; padding: 5px 9px; color: #121110; font: 500 12px/1.2 "Inter", sans-serif; white-space: nowrap; background: var(--acik); border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); pointer-events: none; }

/* ---------- Pencere ---------- */
.pen { position: absolute; z-index: 10; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--cerceve2); border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px rgba(0, 0, 0, .45); outline: none; }
.pen.etkin { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 26px 60px rgba(0, 0, 0, .65); }
.pen.buyuk { border-radius: 0; }
.mas:not([data-hazir]) .pen { position: static; margin-bottom: 24px; }
.pen__ust { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding-left: 11px; font: 400 12.500px/1 "Inter", sans-serif; color: var(--sonuk); background: var(--cerceve2); user-select: none; touch-action: none; }
.pen.etkin .pen__ust { color: var(--acik); background: var(--cerceve); }
.pen__ust .ik { width: 18px; height: 18px; filter: none; }
.pen__ust b { overflow: hidden; font-weight: 400; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
/* Proje sayfası ve sitesi başlık çubuğunda; ayrı adres satırı yer kaplıyordu. */
.pen__baglar { display: flex; gap: 14px; margin-left: auto; padding-left: 12px; }
.pen__dugmeler { display: flex; height: 100%; margin-left: auto; }
.pen__baglar + .pen__dugmeler { margin-left: 10px; }
.pen__dugmeler button { position: relative; width: 44px; height: 100%; padding: 0; color: inherit; background: none; border: 0; cursor: default; }
.pen__dugmeler button:hover { background: rgba(255, 255, 255, .1); }
.pen__dugmeler button[data-k="kapat"]:hover { color: #fff; background: #b3361c; }
.pen__dugmeler button:focus-visible { outline: 1px solid var(--acik); outline-offset: -2px; }
.pen__dugmeler svg { display: block; width: 10px; height: 10px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1; }
.pen__bag { color: var(--acik); font-size: 12px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pen__bag:hover { color: #e2c06d; }
.pen__bag:focus-visible { outline: 1px solid var(--acik); outline-offset: 2px; }
.pen__govde { flex: 1; display: grid; grid-template-columns: 166px minmax(0, 1fr); min-height: 0; }
.pen__dosyalar { display: flex; flex-direction: column; gap: 1px; padding: 6px; overflow-y: auto; background: var(--cerceve2); }
.pen__dosyalar button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 0 7px; width: 100%; padding: 6px 7px; color: var(--acik); font: 400 12.500px/1.25 "Inter", sans-serif; text-align: left; background: none; border: 0; border-radius: 4px; cursor: default; }
.pen__dosyalar button:hover { background: rgba(255, 255, 255, .07); }
.pen__dosyalar button[aria-pressed="true"] { background: rgba(255, 255, 255, .13); }
.pen__dosyalar button:focus-visible { outline: 1px solid var(--acik); outline-offset: -1px; }
.pen__dosyalar small { grid-column: 2; color: var(--sonuk); font-size: 11px; }
/* Vaka sayfası pencerenin en görünür bağlantısı (Meyrem: "mutlaka"): dosya listesinin altında, hangi dosya açık olursa olsun durur. */
.pen__vaka { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 8px 8px 14px; color: #121110; font: 700 14.500px/1.2 "Inter", sans-serif; background: var(--hot); border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(255, 77, 28, .75); transition: background .2s, transform .3s var(--ease); }
.pen__vaka span { display: grid; flex: none; place-items: center; width: 30px; height: 30px; color: #fff; font-size: 15px; background: #121110; border-radius: 50%; transition: transform .3s var(--ease); }
.pen__vaka:hover { background: #ff6a3f; transform: translateY(-2px); }
.pen__vaka:hover span { transform: translateX(2px); }
.pen__vaka:focus-visible { outline: 2px solid #e2c06d; outline-offset: 2px; }
/* Dosya türü simgesi: tek renk, çizgi. Türü veriden okunur. */
.dt { grid-row: span 2; width: 16px; height: 18px; border: 1.200px solid var(--sonuk); border-radius: 2px; }
[data-cins="Görüntü"] .dt { height: 14px; background: linear-gradient(135deg, transparent 58%, var(--sonuk) 58% 66%, transparent 66%); }
[data-cins="Çalışan örnek"] .dt { width: 16px; height: 14px; border-top-width: 4px; }
[data-cins="Bilgi"] .dt { border-radius: 50%; height: 16px; }
[data-cins="Çizim"] .dt { height: 14px; border-style: dashed; }
[data-cins="Klasör"] .dt { height: 13px; margin-top: 3px; border-radius: 1px 3px 2px 2px; box-shadow: -1.200px -3px 0 -1.200px var(--sonuk); }
.pen__on { min-width: 0; min-height: 0; overflow: auto; color: #121110; background: #f4f2ed; }
.pen > .pen__on { flex: 1; }
.pen__on > section { display: flex; flex-direction: column; min-height: 100%; }
.pen__durum { flex: none; position: relative; height: 24px; padding: 0 11px; color: var(--sonuk); font-size: 11px; line-height: 24px; background: var(--cerceve); border-top: 1px solid var(--cizgi); }
.pen__kose { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 55%, var(--sonuk) 55% 60%, transparent 60% 72%, var(--sonuk) 72% 77%, transparent 77%); }
.pen.buyuk .pen__kose { display: none; }

/* Pencere içerikleri */
/* Hakkında: üstte işin renginde kapak (ikon ve ad), altta solda metin, pay, künye kutuları ve teknoloji etiketleri; sağda
   klasördeki öteki dosyalara kısayol. Eskiden tek sütun metin ve altında boşluktu. */
.hak { flex: 1; display: flex; flex-direction: column; }
.hak__kapak { position: relative; display: flex; align-items: flex-end; gap: 16px; padding: clamp(22px, 5vh, 46px) clamp(20px, 3vw, 40px) 18px; overflow: hidden; color: #121110; background: color-mix(in srgb, var(--renk, #ff4d1c) 22%, #f4f2ed); border-bottom: 1px solid color-mix(in srgb, var(--renk, #ff4d1c) 35%, #ddd9d0); }
.hak__kapak > .ik:first-child { flex: none; width: 64px; height: 64px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22)); }
.hak__kapak .mono { margin: 0; color: #4c4a45; font-size: 13px; }
.hak h2 { margin: 4px 0 0; font: 800 clamp(32px, 3.6vw, 54px)/.95 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; }
.hak__ic { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: clamp(18px, 3vw, 36px); align-items: start; padding: clamp(18px, 3vh, 30px) clamp(20px, 3vw, 40px) 28px; }
.hak__metin { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.55; }
.hak__rol { display: grid; gap: 2px; margin: 16px 0 0; padding: 12px 16px; font-size: 15px; background: #fff; border-left: 3px solid var(--renk, #ff4d1c); border-radius: 0 6px 6px 0; }
.hak__rol b { color: #6b6862; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.hak__kunye { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 0; }
.hak__kunye div { padding: 10px 12px; background: #fff; border: 1px solid #e3e0d9; border-radius: 8px; }
.hak__kunye dt { color: #6b6862; font-size: 11.500px; }
.hak__kunye dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
.hak__kunye a { color: inherit; text-underline-offset: 3px; }
.hak__etiket { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.hak__etiket li { padding: 4px 10px; font: 500 12.500px/1.3 "Mono", monospace; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; box-shadow: inset 3px 0 0 var(--renk, #ff4d1c); }
.hak__git p { margin: 0 0 6px; color: #6b6862; font-size: 12px; }
.hak__git ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hak__git button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 0 8px; width: 100%; padding: 7px 8px; font: 500 13.500px/1.25 "Inter", sans-serif; text-align: left; background: #fff; border: 1px solid #e3e0d9; border-radius: 7px; cursor: pointer; transition: border-color .2s, transform .25s var(--ease); }
.hak__git button:hover { border-color: #121110; transform: translateX(3px); }
.hak__git button:focus-visible { outline: 2px solid #121110; outline-offset: 1px; }
.hak__git small { grid-column: 2; color: #6b6862; font-size: 11px; font-weight: 400; }
.hak__git .dt { border-color: #6b6862; }
.hak__git [data-cins="Görüntü"] .dt { background: linear-gradient(135deg, transparent 58%, #6b6862 58% 66%, transparent 66%); }
.hak__vaka { display: block; margin-top: 12px; padding: 10px 12px; color: #fff; font-size: 13.500px; font-weight: 500; text-decoration: none; background: #121110; border-radius: 7px; }
.hak__vaka:hover { background: #3a352f; }
/* Görüntü izleyici: ekran alanın ortasına sığar, altında yazısı ve aynı işin öteki ekranları. Eskiden ekran üste
   yaslanıyor, altında boş koyu alan kalıyordu (Meyrem: "üstte görsel altta boşluk"). */
.pen__gor { flex: 1; margin: 0; display: flex; flex-direction: column; background: #2a2622; }
.pen__alan { position: relative; flex: 1; min-height: 240px; }
.pen__alan img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.pen__gor figcaption { padding: 10px 14px; font-size: 13.500px; line-height: 1.4; background: #f4f2ed; border-top: 1px solid #ddd9d0; }
.pen__gor--tel .pen__alan img { inset: auto; left: 50%; top: 50%; width: auto; height: auto; max-width: calc(100% - 28px); max-height: calc(100% - 28px); border: 5px solid #17120e; border-radius: 22px; transform: translate(-50%, -50%); }
.pen__serit { flex: none; display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; background: #211e1a; scrollbar-width: thin; }
.pen__serit button { flex: none; width: 92px; height: 56px; padding: 0; overflow: hidden; background: #3a352f; border: 2px solid transparent; border-radius: 6px; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.pen__gor--tel .pen__serit button { width: 44px; height: 70px; }
.pen__serit button:hover { opacity: .9; }
.pen__serit button[aria-current] { border-color: #e2c06d; opacity: 1; }
.pen__serit button:focus-visible { outline: 2px solid #f3efe7; outline-offset: 1px; }
.pen__serit img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Özellikler: numaralı kartlar, işin renginde ince üst çizgi; görünür olunca sırayla yükselir. */
.ozl { flex: 1; padding: clamp(20px, 4vh, 36px) clamp(18px, 3vw, 36px) 28px; }
.ozl__bas .mono { margin: 0; color: #6b6862; font-size: 12.500px; }
.ozl__bas h2 { margin: 6px 0 0; font: 800 clamp(28px, 3vw, 42px)/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; }
.ozl__bas > p:last-child:not(.mono) { max-width: 58ch; margin: 8px 0 0; color: #4c4a45; font-size: 15px; line-height: 1.5; }
.ozl__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ozl__liste li { position: relative; display: flex; flex-direction: column; padding: 14px 16px 16px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); animation: ozlGel .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ozl__liste li::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; background: var(--renk, #ff4d1c); border-radius: 0 0 3px 3px; }
.ozl__liste li:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); }
.ozl__liste .mono, .akis .mono { color: color-mix(in srgb, var(--renk, #ff4d1c) 70%, #121110); font-size: 12.500px; font-weight: 600; }
.ozl__liste b, .akis b { margin-top: 8px; font: 700 17px/1.2 "Bricolage", sans-serif; font-stretch: 92%; letter-spacing: -0.01em; }
.ozl__liste p, .akis p { margin: 6px 0 0; color: #4c4a45; font-size: 14px; line-height: 1.5; }
@keyframes ozlGel { from { opacity: 0; transform: translateY(10px); } }
/* Aday değerlendirme akışı: kartlar yan yana, aralarında ok; dar pencerede alt alta. */
.akis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: akis; }
.akis li { position: relative; display: flex; flex-direction: column; padding: 14px 14px 16px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); animation: ozlGel .5s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.akis li:last-child { color: #fff; background: #2f4d7e; }
.akis li:last-child p, .akis li:last-child .mono { color: rgba(255, 255, 255, .78); }
.akis li + li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 20px; height: 2px; background: #a39d93; }
.akis li + li::after { content: ""; position: absolute; left: -10px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border: solid #a39d93; border-width: 2px 2px 0 0; transform: rotate(45deg); }
/* Çevrimdışı Notlar: uygulamanın koyu ana ekranı telefon çerçevesinde; seçili süzgeç beyaz zeminde siyah yazı
   (gerçek ekranda bu yazı beyazdı, okunmuyordu). */
.pen__serit:has(button:only-child) { display: none; }
.pen__on:has(.ntl) { container-type: size; }
.ntl { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px clamp(24px, 7cqw, 64px); padding: 12px 20px; background: #2a2622; }
/* Telefonun boyu pencereden gelir, eni 9:19,5 oranından; içindeki her ölçü em olduğu için pencereyle birlikte büyür. */
.ntl__tel { --boy: clamp(400px, 100cqh - 24px, 640px); position: relative; flex: none; box-sizing: border-box; width: calc(var(--boy) * 9 / 19.5); height: var(--boy); padding: 5px; color: #f2f2f2; font: 400 clamp(12px, var(--boy) * .0285, 14.5px)/1.35 "Inter", sans-serif; background: #15120f; border: 1px solid #453d34; border-radius: 2.7em; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); }
.ntl__tel::before, .ntl__tel::after { content: ""; position: absolute; right: -3px; width: 2px; background: #453d34; border-radius: 0 2px 2px 0; }
.ntl__tel::before { top: 20%; height: 7%; }
.ntl__tel::after { top: 30%; height: 13%; }
.ntl__ekran { position: relative; display: flex; flex-direction: column; gap: .7em; height: 100%; padding: 2em .85em 0; overflow: hidden; box-sizing: border-box; background: #000; border-radius: 2.35em; }
.ntl__ekran::before { content: ""; position: absolute; top: .65em; left: 50%; width: .62em; height: .62em; margin-left: -.31em; background: #17171a; border-radius: 50%; box-shadow: inset 0 0 0 1px #2c2c30; }
.ntl__ust { display: flex; flex: none; align-items: center; justify-content: space-between; }
.ntl__logo { position: relative; font: italic 300 1.8em/1 "Inter", sans-serif; letter-spacing: -0.02em; }
.ntl__logo::after { content: ""; position: absolute; left: 0; right: -.35em; bottom: -.2em; height: .2em; border-bottom: 1.500px solid #f2f2f2; border-radius: 0 0 60% 40%; }
.ntl svg { flex: none; width: 1.3em; height: 1.3em; fill: none; stroke: #c9c9c9; stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
.ntl__ara { display: flex; flex: none; align-items: center; gap: .5em; padding: .55em .75em; background: #141414; border: 1px solid #2a2a2a; border-radius: .9em; }
.ntl__ara input { flex: 1; width: 100%; min-width: 0; padding: 0; color: #f2f2f2; font: inherit; background: none; border: 0; outline: none; }
.ntl__ara input::placeholder { color: #8a8a8a; }
.ntl__ara:focus-within { border-color: #8a8a8a; }
.ntl__suz { display: flex; flex: none; flex-wrap: wrap; gap: .35em; }
.ntl__suz button { flex: none; padding: .38em .62em; color: #e6e6e6; font: 500 .84em/1.2 "Inter", sans-serif; background: #111; border: 1px solid #333; border-radius: 99px; cursor: pointer; }
.ntl__suz button[aria-pressed="true"] { color: #000; background: #fff; border-color: #fff; }
.ntl__suz button:focus-visible { outline: 2px solid #e2c06d; outline-offset: 1px; }
.ntl__liste { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6em; padding-bottom: 7em; overflow-y: auto; scrollbar-width: none; }
.ntl__liste > * { flex: none; }
.ntl__bas { margin: .25em 0 0; font-weight: 600; font-size: 1.04em; }
.ntl__bas span { display: inline-block; min-width: 1.5em; padding: 0 .4em; color: #cfcfcf; font-size: .8em; text-align: center; background: #222; border-radius: 99px; }
.ntl__kart { padding: .8em .85em; background: linear-gradient(#161616, #0c0c0c); border: 1px solid #262626; border-radius: 1.1em; animation: ozlGel .35s var(--ease) both; }
.ntl__kart h4 { display: flex; align-items: center; gap: .4em; margin: 0; font-size: 1em; font-weight: 600; }
.ntl__kart p { margin: .45em 0 0; color: #c9c9c9; font-size: .93em; }
.ntl__madde { display: grid; gap: .25em; margin: .45em 0 0; padding: 0; list-style: none; color: #c9c9c9; font-size: .93em; }
.ntl__madde li::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; border: 1.300px solid #8a8a8a; border-radius: .22em; vertical-align: -.05em; }
.ntl__madde li.bitti { color: #7a7a7a; text-decoration: line-through; }
.ntl__madde li.bitti::before { background: #c9c9c9; border-color: #c9c9c9; }
.ntl__daha { display: block; margin-top: .35em; color: #8a8a8a; font-size: .84em; }
.ntl .ntl__tarih { display: flex; align-items: center; justify-content: space-between; color: #777; font-size: .84em; }
.ntl__ik { display: inline-block; flex: none; width: .78em; height: .78em; }
.ntl__ik--sabit { background: #f2f2f2; clip-path: polygon(20% 0, 80% 0, 70% 45%, 95% 65%, 55% 65%, 50% 100%, 45% 65%, 5% 65%, 30% 45%); }
.ntl__ik--yildiz { background: #f2f2f2; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.ntl__bos { color: #8a8a8a; text-align: center; }
.ntl__fab { position: absolute; right: .85em; bottom: 4.3em; display: grid; place-items: center; width: 2.6em; height: 2.6em; color: #000; font-size: 1.15em; font-weight: 500; line-height: 1; background: #fff; border-radius: .85em; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.ntl__alt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; padding: .6em .3em 1.15em; color: #8a8a8a; font-size: .84em; background: #0b0b0b; border-top: 1px solid #1e1e1e; }
.ntl__alt .on { padding: .2em .7em; color: #f2f2f2; background: #222; border-radius: 99px; }
.ntl__alt::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: .4em; height: 3px; background: #6e6e6e; border-radius: 99px; }
.ntl__yan { flex: 0 1 340px; min-width: 240px; color: #e9e5dd; }
.ntl__yan h3 { margin: 0 0 10px; font: 800 clamp(28px, 6cqw, 38px)/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; }
.ntl__on { margin: 0 0 16px; color: #d8d2c7; font-size: 15px; line-height: 1.45; }
.ntl__kural { margin: 0 0 14px; }
.ntl__kural div { padding: 9px 0; border-top: 1px solid #453d34; }
.ntl__kural dt { margin-bottom: 2px; color: #e2c06d; font: 600 12.5px/1.3 "Inter", sans-serif; }
.ntl__kural dd { margin: 0; color: #cfc9bf; font-size: 14px; line-height: 1.4; }
.ntl__git { display: block; margin: 0 0 14px; padding: 0; color: #f2ede3; font: 600 14px/1.3 "Inter", sans-serif; background: none; border: 0; border-bottom: 1px solid #e2c06d; cursor: pointer; transition: color .2s; }
.ntl__git:hover { color: #e2c06d; }
.ntl__git:focus-visible { outline: 2px solid #e2c06d; outline-offset: 3px; }
.ntl__yan .ornek__not { margin: 0; color: #a39d93; }
/* Kısa pencerede (1280×640) yan yazı telefondan uzun kalıyordu; kaydırma açılmasın diye sıkışır. */
@container (max-height: 450px) { .ntl__yan h3 { font-size: 30px; } .ntl__kural div { padding: 6px 0; } }
/* Beyaz tahta: uygulamanın ekranı, pencereye yayılmış. Telefon çerçevesi yok, çünkü çizim için alan gerekiyor. */
.pen__on:has(.tht) { container-type: size; }
.tht { flex: none; display: flex; flex-direction: column; height: 100cqh; color: #f2f2f2; font: 400 13px/1.3 "Inter", sans-serif; background: #000; }
.tht svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
.tht button { font: inherit; cursor: pointer; }
.tht button:focus-visible, .tht input:focus-visible { outline: 2px solid #e2c06d; outline-offset: 2px; }
.tht__ust { display: flex; flex: none; align-items: center; gap: 2px; padding: 7px 10px 7px 14px; }
.tht__ad { display: grid; margin-right: auto; }
.tht__ad b { font-size: 14.500px; font-weight: 600; }
.tht__ad small { color: #8a8a8a; font-size: 11.500px; }
.tht__ik { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #e6e6e6; background: none; border: 0; border-radius: 10px; transition: background .15s; }
.tht__ik:hover:not(:disabled) { background: #222; }
.tht__ik:disabled { color: #555; cursor: default; }
.tht__ik[aria-pressed="true"] { color: #000; background: #f2f2f2; }
.tht__alan { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f3efe6; }
.tht__alan canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; outline: 0; touch-action: none; }
.tht__alan canvas[data-imlec="el"] { cursor: grab; }
.tht__alan canvas[data-imlec="el"]:active { cursor: grabbing; }
.tht__alan canvas[data-imlec="silgi"] { cursor: cell; }
.tht__ipucu { position: absolute; left: 50%; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 6px 12px; color: #f2f2f2; font-size: 12.500px; white-space: nowrap; background: rgba(0, 0, 0, .72); border-radius: 99px; transform: translateX(-50%); pointer-events: none; transition: opacity .4s; }
.tht__ipucu.gitti { opacity: 0; }
.tht__arac { flex: none; padding: 9px 12px 10px; border-top: 1px solid #222; }
.tht__araclar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tht__araclar button { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; color: #cfcfcf; background: none; border: 1px solid #333; border-radius: 99px; transition: background .15s, color .15s; }
.tht__araclar button:hover { background: #1a1a1a; }
.tht__araclar button[aria-pressed="true"] { color: #000; font-weight: 600; background: #f2f2f2; border-color: #f2f2f2; }
.tht__stil { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 9px; transition: opacity .2s; }
.tht__stil[inert] { opacity: .3; }
.tht__kalin { display: flex; flex: 1; align-items: center; gap: 10px; max-width: 240px; }
.tht__kalin input { flex: 1; min-width: 0; margin: 0; accent-color: #f2f2f2; cursor: pointer; }
.tht__kalin i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; }
.tht__kalin i::before { content: ""; width: var(--k, 4px); height: var(--k, 4px); background: var(--r, #ff5252); border-radius: 50%; }
.tht__renk { display: flex; flex: none; gap: 9px; }
.tht__renk button { width: 26px; height: 26px; padding: 0; background: var(--r); border: 1px solid #555; border-radius: 50%; transition: box-shadow .15s; }
.tht__renk button[aria-pressed="true"] { box-shadow: 0 0 0 2px #000, 0 0 0 4px #f2f2f2; }

/* Hesaplar: sitenin ve sosyal medyanın kartları; ikon karosu işin renginde. */
.hsp { flex: 1; padding: clamp(20px, 4vh, 36px) clamp(18px, 3vw, 36px) 28px; }
.hsp__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.hsp__liste li { animation: ozlGel .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.hsp__liste a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: #121110; text-decoration: none; background: #fff; border: 1px solid #e3e0d9; border-radius: 12px; transition: border-color .2s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.hsp__liste a:hover { border-color: #121110; transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .4); }
.hsp__liste a:focus-visible { outline: 2px solid #121110; outline-offset: 2px; }
.hsp__ik { flex: none; width: 44px; height: 44px; padding: 10px; fill: none; stroke: #121110; stroke-width: 1.600; stroke-linecap: round; stroke-linejoin: round; background: var(--renk, #ffc845); border-radius: 11px; }
.hsp__ik .d { fill: #121110; }
.hsp__liste span { display: grid; gap: 2px; min-width: 0; }
.hsp__liste small { color: #6b6862; font-size: 12px; }
.hsp__liste b { overflow: hidden; font-size: 15.500px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hsp__liste i { margin-left: auto; color: #6b6862; font-style: normal; transition: transform .3s var(--ease); }
.hsp__liste a:hover i { color: #121110; transform: translate(2px, -2px); }

/* Deepfake fikri ve Akıllı Ev simülasyonu: koyu zeminde tuval, yanında kısa açıklama. */
.goz, .ev { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(16px, 2.4vw, 28px); align-items: center; padding: 18px clamp(16px, 2.4vw, 28px); color: #e9e5dd; background: #141210; }
.goz__tuval { display: block; width: 100%; height: min(420px, 62vh); }
/* Ev: çizim pencerenin tam genişliğinde, bilgiler altında iki sütun (Meyrem: "daha renkli"; dar sütunda yazılar biniyordu). */
/* Kaydırma olmasın (Meyrem): pencerenin yüksekliği ölçülür (container), çizim kalan yeri doldurur, şerit altta sabit. */
.pen__on:has(.ev) { container-type: size; }
.ev { flex: none; height: 100cqh; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 10px; padding-block: 12px; }
.ev__tuval { display: block; width: 100%; height: 100%; min-height: 0; }
.ev__yan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "not olay" "bas olay" "olcu durum" "sinir durum"; gap: 4px 24px; align-items: start; }
.ev__yan > .ornek__not { grid-area: not; margin: 0; }
.ev__yan > h3 { grid-area: bas; margin: 0 0 2px; font-size: 20px; }
.ev__yan .ev__olcu dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev__yan .ev__olcu dd { font-size: 13.500px; white-space: nowrap; }
.ev__yan .ev__olcu div { padding: 6px 9px; }
.ev__yan .ev__durum { min-height: 0; margin: 0; font-size: 13.500px; }
.ev__yan .ev__olcu { grid-area: olcu; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.ev__sinir { grid-area: sinir; margin: 8px 0 0; }
.ev__olay { grid-area: olay; margin: 0; }
.ev__durum { grid-area: durum; }
.goz__yan h3, .ev__yan h3 { margin: 0 0 8px; font: 800 26px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.goz__yan p:not(.ornek__not), .ev__durum { margin: 0 0 10px; color: #cfc9bf; font-size: 14.500px; line-height: 1.5; }
.goz .ornek__not, .ev .ornek__not { color: #a39d93; }
.ev__olcu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.ev__olcu div { padding: 8px 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; }
.ev__olcu dt { color: #a39d93; font-size: 11.500px; }
.ev__olcu dd { margin: 2px 0 0; font: 600 15px/1.2 "Mono", monospace; }
.ev__sinir { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #a39d93; font-size: 12px; }
.ev__sinir i { position: relative; flex: 1; height: 8px; background: rgba(255, 255, 255, .08); border-radius: 99px; }
.ev__sinir i::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #f3efe7; opacity: .6; }
.ev__sinir b { display: block; height: 100%; width: 10%; background: #7f9d86; border-radius: inherit; transition: width .6s var(--ease), background .3s; }
.ev__sinir b.asti { background: #c4623a; }
.ev__olay { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ev__olay button { padding: 7px 12px; color: #f3efe7; font: 500 13px/1.2 "Inter", sans-serif; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; cursor: pointer; }
.ev__olay button:hover { border-color: #f3efe7; }
.ev__olay button:focus-visible { outline: 2px solid #e2c06d; outline-offset: 1px; }
.ev__durum { min-height: 4.5em; }
@media (max-width: 900px) { .goz, .ev { grid-template-columns: minmax(0, 1fr); } .goz__tuval { height: 52svh; } .ev__yan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "not" "bas" "olcu" "sinir" "olay" "durum"; } .ev__yan .ev__olcu { grid-template-columns: 1fr 1fr; } .pen__on:has(.ev) { container-type: normal; } .ev { height: auto; } .ev__tuval { height: auto; aspect-ratio: 16 / 10; } }

/* Labirent haritaları: solda harita, sağda adı ve görülen karo türleri. */
.svy { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px clamp(16px, 2.4vw, 28px) 18px; background: #f4f2ed; }
.svy__sec { display: flex; flex-wrap: wrap; gap: 5px; }
.svy__sec button { padding: 6px 11px; font: 400 12.500px/1.2 "Inter", sans-serif; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.svy__sec button:hover { border-color: #ff4d1c; }
.svy__sec button[aria-selected="true"] { color: #fff; background: #121110; border-color: #121110; }
.svy__sec button:focus-visible { outline: 2px solid #ff4d1c; outline-offset: 1px; }
.svy__gor { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; margin: 0; }
.svy__gor svg { display: block; width: 100%; max-height: 52vh; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); animation: ozlGel .45s var(--ease) both; }
.svy__gor .mono { margin: 0; color: #6b6862; font-size: 12.500px; }
.svy__gor h3 { margin: 4px 0 6px; font: 800 28px/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; }
.svy__gor figcaption > p:not(.mono) { margin: 0; color: #4c4a45; font-size: 14.500px; line-height: 1.45; }
.svy__gor ul { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.500px; }
.svy__gor li { display: flex; align-items: center; gap: 9px; }
.svy__gor li i { flex: none; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.svy__not { margin: 0; color: #6b6862; font-size: 12px; }
.pen__cizim { flex: 1; display: grid; place-items: center; padding: 20px; }
.pen__cizim svg { display: block; width: min(100%, 560px); height: auto; background: #fff; border-radius: 10px; }
.kagit { width: min(100% - 32px, 620px); margin: 18px auto; padding: clamp(20px, 4vh, 36px) clamp(20px, 3vw, 38px); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.kagit h2 { margin: 0 0 14px; font: 800 26px/1.05 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.kagit p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.kagit dl { margin: 0; }
.kagit dt { margin-top: 14px; font-weight: 600; font-size: 15px; }
.kagit dd { margin: 3px 0 0; color: #4c4a45; font-size: 14.500px; line-height: 1.5; }
.kagit__not { color: #6b6862; font-size: 12.500px !important; }
.pen__dene { flex: 1; display: grid; place-items: center; padding: 18px; }
.pen__dene .dene { width: min(100%, 560px); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.pen__oyun { flex: 1; display: flex; flex-direction: column; min-height: 100%; background: #100a0d; }
.pen__sahne { position: relative; flex: 1; min-height: 340px; }
.pen__oyun p { margin: 0; padding: 8px 12px; color: #a79f97; font-size: 12.500px; }

/* ---------- Görev çubuğu ---------- */
.gorev { position: absolute; z-index: 900; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; height: var(--gorev); background: rgba(30, 27, 24, .92); backdrop-filter: blur(18px); border-top: 1px solid var(--cizgi); }
.gorev__orta { display: flex; align-items: center; gap: 3px; height: 100%; }
.gorev button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: none; border: 0; border-radius: 5px; cursor: default; }
.gorev button:hover { background: rgba(255, 255, 255, .09); }
.gorev button:focus-visible { outline: 1px solid var(--acik); outline-offset: -1px; }
.gorev button.etkin { background: rgba(255, 255, 255, .12); }
.gorev [data-gorev].acik::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 6px; height: 3px; background: var(--sonuk); border-radius: 2px; transform: translateX(-50%); }
.gorev button.etkin::after { width: 16px; background: #e2c06d; }
.gorev__ayrac { width: 1px; height: 24px; margin: 0 5px; background: var(--cizgi); }
.gorev .ik { width: 28px; height: 28px; filter: none; transition: transform .2s var(--spring, ease); }
.gorev [data-gorev]:hover .ik { transform: translateY(-2px); }
.gorev__baslat img { display: block; width: 28px; height: 28px; border-radius: 7px; }
.gorev__sag { position: absolute; right: 8px; display: flex; align-items: center; gap: 12px; color: var(--acik); font: 400 12px/1.25 "Inter", sans-serif; text-align: right; }
.gorev__ag { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.500; stroke-linecap: round; }
.gorev__ag.yok { opacity: .35; }
.gorev__saat { display: block; }

/* ---------- Başlat menüsü ---------- */
.baslat { position: absolute; z-index: 950; left: 50%; bottom: calc(var(--gorev) + 10px); width: min(560px, calc(100% - 20px)); max-height: calc(100% - var(--gorev) - 90px); display: flex; flex-direction: column; overflow: hidden; color: var(--acik); background: rgba(36, 32, 28, .97); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); transform: translateX(-50%); }
.baslat__ara { flex: none; margin: 18px 22px 12px; padding: 9px 13px; color: var(--acik); font: 400 14px/1.2 "Inter", sans-serif; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; outline: none; }
.baslat__ara:focus { border-color: #e2c06d; }
.baslat__ara::placeholder { color: var(--sonuk); }
.baslat ul { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 2px; margin: 0; padding: 4px 18px 14px; overflow-y: auto; list-style: none; }
.baslat ul button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 9px 3px; color: var(--acik); font: 400 12px/1.2 "Inter", sans-serif; background: none; border: 0; border-radius: 5px; cursor: default; }
.baslat ul button:hover, .baslat ul button:focus-visible { background: rgba(255, 255, 255, .09); outline: none; }
.baslat ul .ik { width: 34px; height: 34px; filter: none; }
.baslat__alt { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 22px; font-size: 13px; background: rgba(0, 0, 0, .22); border-top: 1px solid var(--cizgi); }
.baslat__ben { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--acik); }
.baslat__ben img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.baslat__alt a:hover { color: #e2c06d; }
.baslat__alt a:focus-visible { outline: 1px solid var(--acik); outline-offset: 2px; }

/* ---------- Telefon: ana ekran. Simge ızgarası, dokununca uygulama tam ekran açılır. ---------- */
@media (max-width: 900px) {
  html.mas-acik { overflow: hidden; }
  .mas { height: auto; min-height: 100svh; padding: 84px 12px calc(var(--gorev) + 20px); overflow: visible; isolation: auto; }
  .simge-tel { display: block; }
  .gorev [data-gorev], .gorev__ayrac { display: none; }
  .pen__baglar { gap: 10px; padding-left: 8px; }
  .mas__simgeler { position: relative; left: auto; top: auto; bottom: auto; display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: 8px 0; }
  .simge { width: 100%; height: auto; min-height: 92px; }
  .simge .ik { width: 50px; height: 50px; }
  .simge.secili { background: none; border-color: transparent; }
  .mas__ipucu { display: none; }
  .pen { position: fixed !important; inset: 0 !important; z-index: 1000 !important; width: auto !important; height: auto !important; border-radius: 0; }
  .pen__ust { height: 46px; font-size: 15px; }
  .pen__dugmeler [data-k="kucult"], .pen__dugmeler [data-k="buyut"] { display: none; }
  .pen__dugmeler button { width: 52px; }
  .pen__dugmeler svg { width: 14px; height: 14px; }
  .pen__govde { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pen__dosyalar { flex-direction: row; gap: 4px; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .pen__dosyalar button { flex: none; width: auto; display: block; padding: 8px 12px; white-space: nowrap; background: rgba(255, 255, 255, .06); border-radius: 99px; }
  .pen__dosyalar small, .dt { display: none; }
  .pen__vaka { order: -1; margin-top: 0; padding: 4px 4px 4px 13px; white-space: nowrap; border-radius: 99px; }
  .pen__vaka span { width: 26px; height: 26px; }
  .pen__kose { display: none; }
  .gorev { position: fixed; z-index: 30; }
  .baslat { position: fixed; z-index: 31; max-height: 72svh; }
  .pen__dene { padding: 12px; }
}

/* ---------- Telefon ana ekranının başlığı ---------- */
.mas__telbas { display: none; }
@media (max-width: 900px) {
  .mas__telbas { display: block; position: relative; z-index: 2; margin: 0 0 22px; font-size: clamp(50px, 15vw, 96px); color: rgba(243, 239, 231, .92); }
  .mas__telbas span { padding-bottom: .24em; margin-bottom: -.1em; }
}

/* ---------- Çalışmalar penceresi: bütün işler bir bakışta ---------- */
.isler { padding: clamp(22px, 4vh, 40px) clamp(20px, 3vw, 44px) 32px; }
.isler__bas { margin: 0; font: 800 clamp(34px, 4vw, 60px)/.95 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; }
.isler__alt { max-width: 56ch; margin: 10px 0 0; color: #6b6862; font-size: 15.500px; line-height: 1.5; }
.isler__ara { margin: 28px 0 12px; color: #6b6862; font: 500 12.500px/1 "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.isler__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px 16px; margin: 0; padding: 0; list-style: none; }
.isler__liste--buyuk { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kart { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; color: #121110; font: 400 13px/1.35 "Inter", sans-serif; text-align: left; background: none; border: 0; cursor: pointer; }
.kart b { margin-top: 8px; font-size: 15px; font-weight: 600; }
.kart__tur { color: #6b6862; }
.kart__kapak { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--renk); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.kart:hover .kart__kapak, .kart:focus-visible .kart__kapak { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 14px 26px -12px rgba(0, 0, 0, .45); }
.kart:focus-visible { outline: none; }
.kart:focus-visible .kart__kapak { outline: 2px solid #121110; outline-offset: 3px; }
.kart__kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Telefon ekranı kapakta cihaz gibi: üstten kırpılır, rengin ortasında. */
.kart__kapak--tel img { position: static; width: 46%; height: auto; margin-top: 14%; align-self: start; border: 4px solid #17120e; border-radius: 16px 16px 0 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.kart__ik { width: 38%; max-width: 92px; height: auto; transition: transform .5s var(--spring, ease); }
.kart:hover .kart__ik { transform: scale(1.08) rotate(-3deg); }
.kart__ik .ik__c { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
.kart__ik .ik__c .v { stroke: #fff; }
.kart__ik .ik__c circle.v { fill: #fff; }
.kart__kapak--acik .kart__ik .ik__c, .kart__kapak--acik .kart__ik .ik__c .v { stroke: #2a2118; }
.kart__kapak--acik .kart__ik .ik__c circle.v { fill: #2a2118; }
.kart__dene { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px 4px 20px; color: #121110; font: 500 11.500px/1 "Inter", sans-serif; font-style: normal; background: rgba(251, 250, 247, .94); border-radius: 99px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.kart__dene::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #3f9b5a; border-radius: 50%; box-shadow: 0 0 0 3px rgba(63, 155, 90, .2); }

/* ---------- Birlikte çalışalım penceresi (eski dev kapanış) ----------
   Solda ana renkte büyük çağrı, sağda gerçek yollar. Ana renk burada büyük blok: sitenin kapanış rengi. */
.ilet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr); }
.ilet__sol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 5vh, 52px) clamp(22px, 3.4vw, 48px); overflow: hidden; color: #121110; background: #ff4d1c; }
/* Arkada ince ses dalgası: "sinyal" İşbirliği sayfasının fikri; yavaş kayar. */
.ilet__sol::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: repeating-radial-gradient(circle at 85% 0, transparent 0 22px, rgba(18, 17, 16, .09) 22px 23px); animation: iletDalga 9s linear infinite; }
@keyframes iletDalga { to { transform: translateY(23px); } }
.ilet__sol > * { position: relative; }
.ilet__ust { margin: 0; font-size: 13px; font-weight: 500; }
.ilet__ust::before { content: ""; display: inline-block; width: 26px; height: 2px; margin: 0 10px 4px 0; background: #121110; vertical-align: middle; }
.ilet__buyuk { display: block; margin: 12px 0 0; color: #121110; font: 800 clamp(48px, 6vw, 96px)/.88 "Bricolage", sans-serif; font-stretch: 84%; letter-spacing: -0.04em; text-decoration: none; }
.ilet__buyuk span { display: inline-block; }
.ilet__buyuk span + span { color: #fbfaf7; transition: transform .4s var(--ease); }
.ilet__buyuk:hover span + span { transform: translateX(8px); }
.ilet__buyuk:focus-visible { outline: 2px solid #121110; outline-offset: 6px; }
.ilet__yazi { max-width: 40ch; margin: 18px 0 0; font-size: 16px; line-height: 1.5; }
.ilet__alan { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.ilet__alan li { padding: 5px 11px; font-size: 13px; border: 1.500px solid rgba(18, 17, 16, .55); border-radius: 99px; }
.ilet__sag { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(20px, 4vh, 40px) clamp(16px, 2.4vw, 30px); }
.ilet__kart { display: grid; gap: 3px; width: 100%; padding: 13px 15px; color: #121110; font: inherit; text-align: left; text-decoration: none; background: #fff; border: 1px solid #e3e0d9; border-radius: 10px; cursor: pointer; transition: border-color .2s, transform .3s var(--ease); }
a.ilet__kart:hover, button.ilet__kart:hover { border-color: #121110; transform: translateX(4px); }
.ilet__kart:focus-visible { outline: 2px solid #121110; outline-offset: 2px; }
.ilet__kart small { color: #6b6862; font-size: 12px; }
.ilet__kart b { overflow-wrap: anywhere; font-size: 15.500px; font-weight: 600; }
.ilet__kart > span { color: #4c4a45; font-size: 13px; line-height: 1.4; }
.ilet__kart--ana { color: #fbfaf7; background: #121110; border-color: #121110; }
.ilet__kart--ana small, .ilet__kart--ana > span { color: #a39d93; }
.ilet__kart--ana b span { display: inline-block; color: #ff4d1c; transition: transform .3s var(--ease); }
.ilet__kart--ana:hover b span { transform: translateX(5px); }
.ilet__dug { display: flex; gap: 6px; margin-top: 6px; }
.ilet__dug a, .ilet__dug button { padding: 5px 12px; color: #121110; font: 500 12.500px/1.2 "Inter", sans-serif; text-decoration: none; background: #f4f2ed; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.ilet__dug a:hover, .ilet__dug button:hover { border-color: #121110; }
.ilet__dug button.tamam { color: #2f5a3c; background: #dfe9e1; border-color: #9cc3a6; }
.ilet__alt { margin: 8px 0 0; color: #6b6862; font-size: 12px; }

/* ---------- Profil penceresi (Hakkımda simgesi) ---------- */
.ben__ust { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 24px); padding: clamp(22px, 4vh, 40px) clamp(20px, 3vw, 40px) 20px; color: #f3efe7; background: radial-gradient(80% 140% at 85% 0, #3a3026, #141210 70%); }
.ben__foto { flex: none; width: clamp(84px, 11vw, 124px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px #f3efe7, 0 0 0 7px rgba(255, 77, 28, .7); }
.ben__ust .mono { margin: 0; color: #e2c06d; font-size: 13px; }
.ben__ust h2 { margin: 4px 0 6px; font: 800 clamp(34px, 4vw, 58px)/.92 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; }
.ben__okul { margin: 0; color: #a39d93; font-size: 14px; line-height: 1.4; }
.ben__ic { padding: clamp(18px, 3vh, 28px) clamp(20px, 3vw, 40px) 26px; }
.ben__yazi { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.55; }
.ben__ic h3 { margin: 22px 0 10px; color: #6b6862; font: 500 12.500px/1 "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ben__alan { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ben__alan li { display: grid; gap: 3px; padding: 11px 13px; background: #fff; border-radius: 8px; box-shadow: inset 3px 0 0 #ff4d1c, 0 1px 3px rgba(0, 0, 0, .08); }
.ben__alan b { font-size: 14.500px; font-weight: 600; }
.ben__alan .mono { color: #6b6862; font-size: 12px; }
.ben__yol { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 18px; list-style: none; }
.ben__yol::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: #e3e0d9; }
.ben__yol > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
.ben__yol > li::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; background: #f4f2ed; border: 2px solid #ff4d1c; border-radius: 50%; }
.ben__yol > li > b { color: #ff4d1c; font-size: 14px; }
.ben__yol span { font-weight: 600; font-size: 14.500px; }
.ben__yol ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; padding: 0; list-style: none; }
.ben__yol ul li { padding: 2px 8px; color: #4c4a45; font-size: 12.500px; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; }
.ben__dug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.ben__dug a, .ben__dug button { padding: 9px 15px; color: #121110; font: 500 14px/1.2 "Inter", sans-serif; text-decoration: none; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.ben__dug a:hover, .ben__dug button:hover { border-color: #121110; }
.ben__dug .ben__ana { color: #fff; background: #ff4d1c; border-color: #ff4d1c; }
.ben__dug .ben__ana span { display: inline-block; transition: transform .3s var(--ease); }
.ben__dug .ben__ana:hover { color: #fff; border-color: #ff4d1c; }
.ben__dug .ben__ana:hover span { transform: translateX(4px); }
.ben__dug :focus-visible { outline: 2px solid #121110; outline-offset: 2px; }

/* ---------- GitHub penceresi ---------- */
.gh { padding: clamp(20px, 4vh, 36px) clamp(18px, 3vw, 36px) 28px; }
.gh__ust { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #e3e0d9; }
.gh__foto { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px #e3e0d9; }
.gh__ust h2 { margin: 0; font: 800 28px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.03em; }
.gh__ust .mono { margin: 4px 0 0; color: #6b6862; font-size: 14px; }
.gh__ac { margin-left: auto; padding: 8px 14px; color: #fff; font-size: 13.500px; font-weight: 500; text-decoration: none; background: #121110; border-radius: 7px; }
.gh__ac:hover { background: #3a352f; }
.gh__not { max-width: 64ch; margin: 16px 0 12px; color: #4c4a45; font-size: 14.500px; line-height: 1.5; }
.gh__depolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gh__depolar > li { display: flex; flex-direction: column; padding: 14px 16px; background: #fff; border: 1px solid #e3e0d9; border-radius: 8px; animation: ozlGel .5s var(--ease) both; }
.gh__depolar > li:nth-child(2) { animation-delay: 80ms; }
.gh__depo { display: flex; align-items: center; gap: 8px; font-size: 14.500px; }
.gh__depo svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #6b6862; stroke-width: 1.200; stroke-linejoin: round; }
.gh__depo a { overflow: hidden; color: #2f4d7e; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.gh__depo a:hover { text-decoration: underline; }
.gh__depo span { flex: none; margin-left: auto; padding: 1px 8px; color: #6b6862; font-size: 11.500px; border: 1px solid #e3e0d9; border-radius: 99px; }
.gh__depolar p { flex: 1; margin: 10px 0 12px; color: #4c4a45; font-size: 13.500px; line-height: 1.5; }
.gh__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: #6b6862; font-size: 12.500px; }
.gh__alt .mono { font-size: 11.500px; }
.gh__dil i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background: #3572a5; border-radius: 50%; vertical-align: -1px; }
.gh__alt button { margin-left: auto; padding: 5px 11px; font: 500 12px/1.2 "Inter", sans-serif; background: #f4f2ed; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.gh__alt button:hover { border-color: #121110; }

/* ---------- Çalışan örnekler: ortak ---------- */
.ornek__not { margin: 0 0 12px; color: #6b6862; font: 400 12px/1.35 "Inter", sans-serif; }
.ornek__not::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; background: #3f9b5a; border-radius: 50%; }
.mdl button, .rol button, .net button, .net input, .odm button, .odm input, .ady button, .ady input { font: inherit; color: inherit; }

/* ERP: modül aboneliği. Solda firmanın gördüğü uygulama menüsü, sağda abonelik anahtarları. Nötr: renk yok. */
.mdl { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100%; font-size: 14px; }
.mdl__uyg { display: flex; flex-direction: column; padding: 16px 12px; color: #e9e5dd; background: #23201c; }
.mdl__firma { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 600; }
.mdl__firma i { width: 22px; height: 22px; background: linear-gradient(135deg, #f3efe7, #a39d93); border-radius: 6px; }
.mdl__uyg ul { flex: 1; margin: 0; padding: 0; list-style: none; }
.mdl__uyg li { padding: 7px 10px; border-radius: 6px; }
.mdl__uyg li:first-child { background: rgba(255, 255, 255, .1); }
.mdl__uyg li.yeni { animation: mdlYeni .6s var(--ease) both; }
@keyframes mdlYeni { from { opacity: 0; transform: translateX(-10px); background: rgba(255, 255, 255, .25); } }
.mdl__api { margin: 12px 0 0; color: #8f897f; font-size: 11px; line-height: 1.5; }
.mdl__sag { padding: 18px clamp(16px, 2.4vw, 28px); }
.mdl__sag h3 { margin: 0; font: 800 26px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.mdl__sag > p:not(.ornek__not) { max-width: 52ch; margin: 8px 0 14px; color: #4c4a45; line-height: 1.45; }
.mdl__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mdl__anahtar { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 1px 10px; width: 100%; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid #e3e0d9; border-radius: 8px; cursor: pointer; transition: border-color .2s; }
.mdl__anahtar:hover { border-color: #a39d93; }
.mdl__anahtar:focus-visible { outline: 2px solid #121110; outline-offset: 2px; }
.mdl__anahtar i { grid-row: span 2; position: relative; width: 34px; height: 20px; background: #d6d2ca; border-radius: 99px; transition: background .25s; }
.mdl__anahtar i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .3s var(--spring, ease); }
.mdl__anahtar[aria-checked="true"] i { background: #121110; }
.mdl__anahtar[aria-checked="true"] i::after { transform: translateX(14px); }
.mdl__anahtar b { font-weight: 600; }
.mdl__anahtar small { color: #6b6862; font-size: 12px; }
.mdl__durum { display: block; min-height: 2.8em; margin-top: 14px; padding: 10px 12px; color: #121110; background: #ebe7df; border-radius: 6px; line-height: 1.4; }

/* Koçluk: beş rol. Her rolün kendi rengi; solda o rolün gördüğü menü, sağda menü sayısı ve ne yaptığı. */
.rol { flex: 1; padding: 18px clamp(16px, 2.4vw, 28px); }
.rol__sekme { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rol__sekme button { padding: 8px 14px; font-size: 13.500px; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.rol__sekme button:hover { border-color: var(--r); }
.rol__sekme button[aria-selected="true"] { color: #fff; background: var(--r); border-color: var(--r); }
.rol__sekme button:focus-visible { outline: 2px solid #121110; outline-offset: 2px; }
.rol__panel { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: start; }
.rol__menu { overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.rol__menu b { display: block; padding: 10px 14px; color: #fff; font-size: 13px; font-weight: 600; background: var(--r); }
.rol__menu ol { margin: 0; padding: 6px; list-style: none; }
.rol__menu li { position: relative; padding: 5px 8px 5px 24px; font-size: 13px; border-radius: 5px; animation: rolGel .45s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
.rol__menu li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--r); border-radius: 2px; opacity: .7; }
.rol__menu li:first-child { background: color-mix(in srgb, var(--r) 14%, transparent); }
@keyframes rolGel { from { opacity: 0; transform: translateY(6px); } }
.rol__sayi { display: flex; align-items: baseline; gap: 8px; margin: 0; color: #6b6862; }
.rol__sayi b { color: var(--r); font: 800 clamp(64px, 8vw, 112px)/.85 "Bricolage", sans-serif; font-stretch: 84%; letter-spacing: -0.04em; }
.rol__yazi h3 { margin: 14px 0 6px; font: 800 26px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.rol__yazi p:last-child { max-width: 44ch; margin: 0; font-size: 15px; line-height: 1.5; }

/* Koçluk: modül haritası. */
.harita { flex: 1; padding: 20px clamp(16px, 2.4vw, 28px); }
.harita h3 { margin: 0; font: 800 26px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.harita > p { max-width: 56ch; margin: 8px 0 16px; color: #4c4a45; line-height: 1.45; }
.harita__gruplar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.harita section { padding: 12px; background: #fff; border-top: 4px solid var(--r); border-radius: 4px 4px 8px 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.harita h4 { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 14px; }
.harita h4 small { color: var(--r); font: 600 13px/1 "Mono", monospace; }
.harita ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.harita li { padding: 3px 8px; font-size: 12.500px; background: color-mix(in srgb, var(--r) 13%, #fff); border-radius: 99px; }

/* Koçluk: deneme neti. Her dersin altında doğru, yanlış, boş oranı renkli çubuk. */
.net { flex: 1; padding: 18px clamp(16px, 2.4vw, 28px); font-size: 14px; }
.net__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.net__tur { display: inline-flex; padding: 3px; background: #e7e3db; border-radius: 99px; }
.net__tur button { padding: 7px 14px; font-size: 13.500px; background: none; border: 0; border-radius: 99px; cursor: pointer; }
.net__tur button[aria-pressed="true"] { color: #fff; background: #7a1c1a; }
.net__tur button:focus-visible { outline: 2px solid #121110; outline-offset: 1px; }
.net__kural { margin: 0; color: #4c4a45; }
.net__tablo { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.net__tablo th, .net__tablo td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #ece9e3; }
.net__tablo thead th { color: #6b6862; font-size: 12px; font-weight: 500; }
.net__tablo tbody th { font-weight: 500; }
.net__tablo tbody th small { display: block; color: #6b6862; font-size: 11.500px; font-weight: 400; }
.net__tablo input { width: 58px; padding: 5px 6px; font-family: "Mono", monospace; font-size: 13px; background: #f7f5f1; border: 1px solid #ddd8cf; border-radius: 5px; }
.net__tablo input:focus { outline: 2px solid #7a1c1a; outline-offset: 0; }
.net__bos { color: #6b6862; font-family: "Mono", monospace; }
.net__n, #netToplam { font: 600 14px/1 "Mono", monospace; }
#netToplam { color: #7a1c1a; font-size: 18px; }
.net__tablo tfoot th, .net__tablo tfoot td { border-bottom: 0; }
#netAlt { color: #6b6862; font-size: 12.500px; }
.net__cubuk { display: block; height: 4px; margin-top: 5px; background: linear-gradient(90deg, #7f9d86 0 calc(var(--d) * 100%), #c4623a 0 calc((var(--d) + var(--y)) * 100%), #e3e0d9 0); border-radius: 2px; }
.net__dip { max-width: 70ch; margin: 12px 0 0; color: #6b6862; font-size: 12.500px; line-height: 1.45; }

/* Ödeme takibi: eski uygulamanın yeniden çizilmiş hâli (Meyrem: birebir aynısı değil, daha güzel hâli). */
.odm { flex: 1; display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100%; font-size: 14px; background: #f7f5f0; }
.odm__yan { grid-row: span 2; display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; background: #fff; border-right: 1px solid #e8e4dc; }
.odm__logo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 6px 14px; }
.odm__logo b { white-space: nowrap; }
.odm__logo b { font: 800 19px/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.02em; }
.odm__logo b::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; background: #c9a24b; border-radius: 3px; transform: rotate(45deg); }
.odm__logo small { color: #6b6862; font-size: 11px; }
.odm__baslik { margin: 0 6px 4px; color: #6b6862; font-size: 11.500px; }
.odm__dersler { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.odm__dersler button, .odm__cop { display: grid; width: 100%; padding: 8px 10px; text-align: left; background: none; border: 0; border-radius: 7px; cursor: pointer; }
.odm__dersler button:hover, .odm__cop:hover { background: #f3efe6; }
.odm__dersler button[aria-pressed="true"] { background: #f5ead0; box-shadow: inset 3px 0 0 #c9a24b; }
.odm__dersler b { font-weight: 600; font-size: 13.500px; }
.odm__dersler small { color: #6b6862; font-size: 11.500px; }
.odm__cop { display: flex; justify-content: space-between; margin-top: auto; color: #4c4a45; font-size: 13px; }
.odm__cop[aria-pressed="true"] { background: #ece7dd; }
.odm__cop span { min-width: 20px; padding: 1px 6px; text-align: center; font: 500 11.500px/1.4 "Mono", monospace; background: #e7e2d8; border-radius: 99px; }
.odm button:focus-visible, .odm input:focus-visible { outline: 2px solid #121110; outline-offset: 1px; }
.odm__ana { min-width: 0; padding: 16px clamp(14px, 2vw, 24px) 10px; overflow-x: auto; }
.odm__bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.odm__bas h3 { margin: 0; font: 800 24px/1.05 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.odm__bas p { margin: 4px 0 0; color: #6b6862; font-size: 13px; }
.odm__sil { flex: none; padding: 6px 11px; color: #8a3416; font-size: 12.500px; background: none; border: 1px solid #ecc9bb; border-radius: 99px; cursor: pointer; }
.odm__sil:hover:not(:disabled) { background: #f7ddd2; }
.odm__sil:disabled { opacity: .4; cursor: default; }
.odm__ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; padding: 12px 14px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.odm__ozet small { display: block; color: #6b6862; font-size: 11.500px; }
.odm__ozet b { font: 600 clamp(15px, 1.5vw, 19px)/1.2 "Mono", monospace; }
.odm__ozet div:nth-child(2) b { color: #3c6b4a; }
.odm__cubuk { grid-column: 1 / -1; height: 6px; overflow: hidden; background: #efe9dc; border-radius: 99px; }
.odm__cubuk i { display: block; height: 100%; background: linear-gradient(90deg, #c9a24b, #7f9d86); border-radius: inherit; transition: width .6s var(--ease); }
.odm__suz { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.odm__suz button { padding: 5px 11px; font-size: 12.500px; background: #fff; border: 1px solid #e3e0d9; border-radius: 99px; cursor: pointer; }
.odm__suz button[aria-pressed="true"] { color: #fff; background: #121110; border-color: #121110; }
.odm__suz span { font-family: "Mono", monospace; opacity: .7; }
.odm__tablo { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.odm__tablo th, .odm__tablo td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid #f0ece5; }
.odm__tablo thead th { color: #6b6862; font-size: 11.500px; font-weight: 500; }
.odm__tablo tbody th { font-weight: 500; }
.odm__tablo td { font-family: "Mono", monospace; font-size: 12.500px; }
.odm__ind { color: #6b6862; }
.odm__durum { display: inline-block; padding: 3px 9px; font: 500 11.500px/1.2 "Inter", sans-serif; border-radius: 99px; }
.odm__durum--odendi { color: #2f5a3c; background: #dfe9e1; }
.odm__durum--kismi { color: #6b4e00; background: #fff0c4; }
.odm__durum--odenmedi { color: #8a3416; background: #f7ddd2; }
.odm__islem { width: 1%; text-align: right !important; }
.odm .odm__al { padding: 5px 11px; color: #fff; font: 500 12px/1.2 "Inter", sans-serif; background: #121110; border: 0; border-radius: 6px; cursor: pointer; }
.odm .odm__al:hover { background: #3a352f; }
.odm__form { display: flex; gap: 4px; }
.odm__form input { width: 82px; padding: 4px 7px; font: 500 12.500px/1.2 "Mono", monospace; border: 1px solid #c9a24b; border-radius: 5px; }
.odm__form input[aria-invalid="true"] { background: #fbeee8; border-color: #c4623a; }
.odm .odm__form button { padding: 4px 9px; color: #fff; font-size: 12px; background: #3c6b4a; border: 0; border-radius: 5px; cursor: pointer; }
.odm .odm__form .odm__vaz { color: #4c4a45; background: #ece7dd; }
.odm__copkutusu ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.odm__copkutusu li:not(.odm__bos) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.odm__copkutusu small { grid-column: 1; color: #6b6862; font-size: 12px; }
.odm__copkutusu .odm__al { grid-row: 1 / 3; grid-column: 2; }
.odm__bos { color: #6b6862; font-size: 13px; }
.odm__gecmis { grid-column: 2; padding: 4px clamp(14px, 2vw, 24px) 16px; }
.odm__gecmis h4 { margin: 0 0 6px; color: #6b6862; font-size: 11.500px; font-weight: 500; }
.odm__gecmis ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.odm__gecmis li:not(.odm__bos) { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 13px; background: #fff; border-radius: 6px; animation: rolGel .35s var(--ease) both; }
.odm__gecmis time { color: #6b6862; font-size: 11.500px; }
.odm__gecmis li button { margin-left: auto; padding: 2px 8px; font-size: 12px; background: none; border: 1px solid #ddd8cf; border-radius: 99px; cursor: pointer; }

/* Aday değerlendirme: solda aday listesi, sağda kart; renkli durum noktası, klavyeyle karar. */
.ady { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px clamp(14px, 2vw, 24px); font-size: 14px; background: #eef0f2; }
.ady__ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ady__ilerleme { display: flex; align-items: center; gap: 8px; margin: 0; color: #4c4a45; font-size: 13px; }
.ady__ilerleme b { color: #121110; font: 600 15px/1 "Mono", monospace; }
.ady__ilerleme i { width: 110px; height: 6px; overflow: hidden; background: #d9dde2; border-radius: 99px; }
.ady__ilerleme span { display: block; height: 100%; background: #2f4d7e; border-radius: inherit; transition: width .4s var(--ease); }
.ady__suz { display: flex; flex-wrap: wrap; gap: 4px; }
.ady__suz button { padding: 5px 10px; font-size: 12.500px; background: #fff; border: 1px solid #d9dde2; border-radius: 99px; cursor: pointer; }
.ady__suz button[aria-pressed="true"] { color: #fff; background: #2f4d7e; border-color: #2f4d7e; }
.ady button:focus-visible, .ady input:focus-visible { outline: 2px solid #2f4d7e; outline-offset: 1px; }
.ady__ic { flex: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
.ady__liste { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ady__liste button { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 0 9px; width: 100%; padding: 9px 10px; text-align: left; background: #fff; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.ady__liste button[aria-current="true"] { border-color: #2f4d7e; box-shadow: 0 2px 8px rgba(47, 77, 126, .18); }
.ady__liste b { font-weight: 600; font-size: 13.500px; }
.ady__liste small { grid-column: 2; overflow: hidden; color: #6b6862; font-size: 11.500px; white-space: nowrap; text-overflow: ellipsis; }
.ady__nokta { grid-row: span 2; width: 10px; height: 10px; background: #c3c8cf; border-radius: 50%; }
.ady__nokta--olur { background: #3f9b5a; }
.ady__nokta--belki { background: #e0a526; }
.ady__nokta--elendi { background: #c4623a; }
.ady__bos { padding: 8px; color: #6b6862; font-size: 13px; }
.ady__kart { padding: 16px 18px; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.ady__kart header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ady__kart h3 { margin: 0; font: 800 24px/1.05 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.025em; }
.ady__durum { padding: 4px 10px; color: #4c4a45; font-size: 12px; font-weight: 500; background: #eceef1; border-radius: 99px; }
.ady__durum--olur { color: #2f5a3c; background: #dfe9e1; }
.ady__durum--belki { color: #6b4e00; background: #fff0c4; }
.ady__durum--elendi { color: #8a3416; background: #f7ddd2; }
.ady__cevap { margin: 12px 0 0; }
.ady__cevap dt { margin-top: 10px; color: #6b6862; font-size: 12px; }
.ady__cevap dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.ady__oneri { margin-top: 14px; padding: 10px 12px; background: #f0f3f8; border-left: 3px solid #2f4d7e; border-radius: 0 8px 8px 0; }
.ady__oneri p { margin: 0; }
.ady__oneri small { display: block; color: #6b6862; font-size: 11.500px; }
.ady__oneri b { font-size: 13.500px; font-weight: 500; }
.ady__oneri ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.ady__oneri li { padding: 2px 8px; color: #2f4d7e; font-size: 12px; background: #fff; border: 1px solid #c9d3e3; border-radius: 99px; }
.ady__karar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ady__karar button { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; font-size: 13.500px; background: #fff; border: 1px solid #d9dde2; border-radius: 8px; cursor: pointer; }
.ady__karar kbd { display: grid; place-items: center; width: 20px; height: 20px; font: 500 11.500px/1 "Mono", monospace; background: #eceef1; border-radius: 4px; }
.ady__karar [data-karar="Olur"][aria-pressed="true"] { color: #fff; background: #3f9b5a; border-color: #3f9b5a; }
.ady__karar [data-karar="Düşünülebilir"][aria-pressed="true"] { background: #f5c451; border-color: #e0a526; }
.ady__karar [data-karar="Elendi"][aria-pressed="true"] { color: #fff; background: #c4623a; border-color: #c4623a; }
.ady__karar [aria-pressed="true"] kbd { background: rgba(255, 255, 255, .3); }
.ady__puan { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #4c4a45; font-size: 13px; }
.ady__puan input { flex: 1; max-width: 220px; accent-color: #2f4d7e; }
.ady__puan output { color: #121110; font-family: "Mono", monospace; }

@media (max-width: 900px) {
  .isler { padding: 20px 16px 28px; }
  .isler__liste, .isler__liste--buyuk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .kart b { font-size: 14px; }
  .kart__tur { font-size: 12px; }
  .mdl, .odm, .ady__ic, .rol__panel { grid-template-columns: minmax(0, 1fr); }
  .mdl__uyg { order: 2; }
  .odm__yan { grid-row: auto; border-right: 0; border-bottom: 1px solid #e8e4dc; }
  .odm__dersler { display: flex; overflow-x: auto; }
  .odm__dersler button { width: max-content; }
  .odm__cop { margin-top: 4px; }
  .odm__ana { overflow-x: auto; }
  .odm__gecmis { grid-column: 1; }
  .ady__liste { display: flex; overflow-x: auto; }
  .ady__liste li { flex: none; width: 170px; }
  .net__tablo th, .net__tablo td { padding: 6px; }
  .net__tablo input { width: 48px; }
  .hak__ic, .ilet, .svy__gor { grid-template-columns: minmax(0, 1fr); }
  .hak__kapak > .ik:first-child { width: 52px; height: 52px; }
  .akis { grid-auto-flow: row; gap: 22px; }
  .akis li + li::before { left: 50%; top: -18px; width: 2px; height: 14px; }
  .akis li + li::after { left: 50%; top: -10px; margin: 0 0 0 -3px; transform: rotate(135deg); }
  .ilet__sol { min-height: 52svh; }
  .pen__alan { min-height: 46svh; }
  .gh__ust { flex-wrap: wrap; }
  .gh__ac { margin-left: 0; }
}