/* portal.css — müşteri portalının tüm görünümü.
*
* TEK DOSYA ve SATIR İÇİ STİL YOK: CSP `style-src 'self'` diyor. Satır içi
* stile izin vermek, bir XSS'in sayfayı yeniden çizip sahte bir giriş formu
* bindirmesine kapı açardı. Aynı sebeple JS de yok — portal tamamen sunucu
* tarafında çiziliyor ve hiçbir etkileşim betiğe bağımlı değil.
*/
/* ===========================================================================
* MARKA BELİRTEÇLERİ — `site/index.html` VE `site/portal/portal.css` ARASINDA
* BİREBİR AYNI DURMAK ZORUNDA
* ---------------------------------------------------------------------------
* Müşteri tanıtım sayfasından portala geçiyor; iki ayrı renk ailesi görmek
* "yanlış yere geldim" hissi üretir ve kayıt adımında en pahalı his budur.
* Ölçüldü (2026-09-25): tanıtım petrol yeşili (#0d6155), portal maviydi
* (#2563eb) — üstelik bu dosyanın başlığı "renkler tanıtım sayfasının
* paletiyle aynı aileden" diyordu. Beyan doğruydu, kod değil.
*
* KAYNAK TANITIM SAYFASIDIR: marka orada tanımlı, portal ona uyuyor.
*
* BLOK İKİ DOSYADA KOPYA DURUYOR, paylaşılan bir dosyada DEĞİL — ve bu
* bilinçli: `portal.css`i `kur-portal.sh` kuruyor, `index.html` ayrı
* yükleniyor. Web kökünde ortak bir dosya, yalnız biri dağıtıldığında
* portalı STİLSİZ bırakırdı (CSP dış kaynağa da izin vermiyor, yani geri
* dönüşü yok). Kopyaların ayrışmasını `tests/test_portal_tasarim.php`
* ölçüyor: blok birebir aynı olmak zorunda.
* ======================================================================== */
:root {
--kagit: #ffffff;
--kagit-2: #f7f9fa;
--kagit-3: #eef2f4;
--metin: #15181c;
--metin-2: #545b64;
--metin-3: #7c848d;
--cizgi: #e3e8ea;
--marka: #0d6155;
--marka-2: #128574;
--marka-koyu: #0a4d44;
--marka-bg: #e8f2f0;
--uyari: #b3651a;
--uyari-bg: #fdf2e6;
--iyi: #157a4d;
--iyi-bg: #e7f4ee;
--kotu: #b3261e;
--kotu-bg: #fdecea;
--golge-1: 0 1px 2px rgba(20,30,35,.06), 0 1px 8px rgba(20,30,35,.04);
--golge-2: 0 2px 6px rgba(20,30,35,.07), 0 14px 34px rgba(20,30,35,.08);
--sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--r-sm: 7px;
--r: 10px;
--r-lg: 14px;
--r-pill: 999px;
}
/* === MARKA BELİRTEÇLERİ SONU ============================================ */
/* ALAN KENARI AYRI BİR BELİRTEÇ — ve bilerek paylaşılan bloğun DIŞINDA:
* yukarısı `index.html` ile BİREBİR aynı durmak zorunda, bu ise yalnız
* portalın form alanlarını ilgilendiriyor.
*
* `--cizgi` (#e3e8ea) kart ayıracı için doğru ama GİRDİ KENARI için fazla
* soluktu: alanın zemini de kartın zemini de `--kagit` (beyaz) olduğu için
* kutular neredeyse görünmüyordu — form, üstünde yazı olan boş bir alan
* gibi duruyordu. Alanların kenarı koyulaşıyor ve zemini hafif çukurlaşıyor. */
:root {
--cizgi-alan: #9eabb4; /* 2026-10-06: #c3ccd2 alanları hâlâ soluk gösteriyordu */
/* YÖNETİM KENAR ÇUBUĞU KENDİ YÜZEYİ.
* Kenar çubuğu içerikle AYNI beyazdaydı ve aralarındaki tek ayrım 1px'lik
* bir çizgiydi; ekran tek bir düz yüzey gibi görünüyordu, yani hiçbir şey
* hiçbir şeyi çerçevelemiyordu. Koyu bir yüzey, gezinmeyi içerikten
* AYIRIYOR ve sayfanın neresinde olunduğunu renk söylüyor.
* Tonlar tanıtım sayfasının terminal görselinden (#0b1917 / #132b27)
* geliyor — portal ile tanıtım aynı aileden görünsün. */
--kenar-zemin: #0d211d;
--kenar-zemin-2: #17332d;
--kenar-metin: #dbeae6;
--kenar-metin-2: #8aa8a1;
--kenar-cizgi: #1e3b35;
/* Koyu yüzeydeki vurgu (kayıt kartının rozeti ve işaretleri). `--marka-2`
* açık kipte #128574 — koyu zeminde soluk kalıyordu; iki kipte de aynı
* parlak ton, çünkü yüzey iki kipte de koyu. */
--kenar-vurgu: #56cdb6;
--kenar-vurgu-bg: #143a33;
--kenar-baslik: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--cizgi-alan: #56636e;
/* Karanlık kipte içerik zemini zaten koyu; kenar çubuğu ondan bir ton
* DAHA koyu olmalı, yoksa ayrım kaybolur. */
--kenar-zemin: #0b1a17;
--kenar-zemin-2: #142b26;
--kenar-cizgi: #1b332e;
}
}
/* Karanlık kip İŞLETİM SİSTEMİNİN tercihine bağlı. Kullanıcı seçmeli bir
* anahtar YOK, çünkü onu hatırlamak ya JS ya çerez ister: portalda JS yok
* (CSP kararı) ve oturum çerezine görünüm tercihi yazmak, oturumsuz
* sayfalarda (giriş, kayıt, doğrulama) hiç çalışmazdı.
*
* Tanıtım sayfasının karanlık kipi YOK: oradaki hero gradyanları ve elli
* kadar elle ayarlanmış inline SVG dolgusu açık zemine göre çizilmiş.
* Yarım bir karanlık kip, hiç olmamasından kötü görünürdü. */
@media (prefers-color-scheme: dark) {
:root {
--kagit: #161a1f;
--kagit-2: #1c2128;
--kagit-3: #232a32;
--metin: #e9edef;
--metin-2: #a7b0b8;
--metin-3: #7f8892;
--cizgi: #2b333c;
--marka: #3fb8a2;
--marka-2: #56cdb6;
--marka-koyu: #8fe3d1;
--marka-bg: #123029;
--uyari: #e0a35c;
--uyari-bg:#33240f;
--iyi: #4cc08a;
--iyi-bg: #10291f;
--kotu: #f08b82;
--kotu-bg: #331815;
--golge-1: 0 1px 2px rgba(0,0,0,.4);
--golge-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.35);
}
}
/* ---- Temel ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--kagit-2);
color: var(--metin);
font: 15px/1.65 var(--sans);
/* Kısa sayfalarda (giriş, doğrulama) alt bilgi ekranın ortasında asılı
* kalmasın: gövde büyüyor, alt bilgi dibe iniyor. */
min-height: 100vh;
display: flex;
flex-direction: column;
}
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-size: .86em; }
/* HİYERARŞİ ÖLÇÜLEBİLİR OLMALI. h1 ve h2 birbirine çok yakındı (1.7 / 1.05)
* ve h2 gövde metninden yalnız kalınlıkla ayrılıyordu; sayfa tek bir düz
* metin yığını gibi okunuyordu. Aradaki fark açıldı ve h2, bölüm başlığı
* olduğunu göstermek için üstünde daha çok boşluk taşıyor. */
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.022em; }
h2 {
font-size: 1.18rem; line-height: 1.3; margin: 34px 0 12px;
letter-spacing: -.015em; font-weight: 700;
}
/* Bölümün ilk başlığı sayfanın tepesinden itilmesin. */
.sayfa > h2:first-child { margin-top: 4px; }
/* Sekme kipinde ekranda HANGİ bölüm varsa o en üsttedir; başlığı sayfanın
* tepesinden 34px itmek, her sekmede boş bir şerit bırakıyordu. */
.sayfa.sekmeli .bolum > h2:first-child { margin-top: 4px; }
p { margin: 0 0 12px; }
/* ODAK HALKASI HER YERDE. Eskiden hiçbir öğede yoktu: klavyeyle gezen biri
* nerede olduğunu göremiyordu ve portal baştan sona form. `:focus-visible`
* kullanılıyor, yani fareyle tıklayanda halka çıkmıyor. */
:focus-visible {
outline: 2px solid var(--marka-2);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Klavye kullanıcısı üst çubuğu her sayfada yeniden geçmek zorunda kalmasın. */
.atla {
position: absolute; left: -9999px; top: 0; z-index: 10;
background: var(--marka); color: #fff; padding: 10px 16px;
border-radius: 0 0 var(--r-sm) 0;
}
.atla:focus { left: 0; text-decoration: none; }
/* ---- Üst çubuk --------------------------------------------------------- */
.ust {
display: flex; justify-content: space-between; align-items: center;
gap: 10px 20px; flex-wrap: wrap;
padding: 12px 20px;
background: var(--kagit);
border-bottom: 1px solid var(--cizgi);
}
/* MARKA KİLİDİ ORTAK DOSYADAN — `/logos/…-light.svg`, tanıtım sayfasıyla
* AYNI dosya. Kopyalanan bir marka zamanla ayrışır; renk belirteçlerinde tam
* bu yaşandı (bkz. bu dosyanın başlığı).
*
* AÇIK ZEMİN SÜRÜMÜ: portalın her yüzeyi açık. Verilen dosya koyu zemin için
* çizilmişti ("Sunucu" beyaz) ve beyaz kartın üstünde görünmezdi. */
.marka {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 700; color: var(--metin); font-size: 1.02rem;
letter-spacing: -.01em; white-space: nowrap;
}
.marka picture { display: block; }
.marka img { display: block; height: 32px; width: auto; }
.marka:hover { text-decoration: none; }
.marka span { font-weight: 400; color: var(--metin-3); }
.ust nav { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.ust nav > a:not(.dugme) { color: var(--metin-2); font-size: .93rem; font-weight: 600; }
.ust nav > a:not(.dugme):hover { color: var(--marka); text-decoration: none; }
.kisi {
color: var(--metin-3); font-size: .84rem;
padding-left: 14px; border-left: 1px solid var(--cizgi);
}
.cikis-form { margin: 0; display: flex; }
.baglanti-dugme {
background: none; border: none; color: var(--metin-2); cursor: pointer;
font: inherit; font-size: .93rem; font-weight: 600; padding: 0;
}
.baglanti-dugme:hover { color: var(--marka); text-decoration: underline; }
/* ---- YÖNETİCİ DÜZENİ: SOL MENÜ -----------------------------------------
* Yönetici iki ekranı sürekli açıp kapatıyor (üyeler ve yayın kanalı) ve üst
* çubuktaki iki bağlantı, sayfanın NEREDE durduğunu söylemiyordu. Kenar
* çubuğu hem konumu gösteriyor hem gezinmeyi tek tıka indiriyor.
*
* ÜYE TARAFINDA MENÜ YOK: orada tek sayfa var ve boş bir kenar çubuğu,
* olmayan bir derinlik iddia ederdi.
*
* JS YOK — portalda hiç yok (CSP kararı). Dar ekranda menü bir açılır panele
* değil, YATAY KAYAN bir şeride dönüşüyor: düğme gerektirmiyor.
* ======================================================================== */
body.yonetim {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
align-items: stretch;
}
body.yonetim .ana { display: flex; flex-direction: column; min-width: 0; }
.kenar {
background: var(--kenar-zemin);
border-right: 1px solid var(--kenar-cizgi);
padding: 20px 12px 16px;
display: flex; flex-direction: column; gap: 20px;
position: sticky; top: 0; height: 100vh;
}
/* KENAR ÇUBUĞUNDA YALNIZ KİLİT, ve daha büyük.
* "Yönetim" yazısı burada bilgi taşımıyordu: zaten yönetim düzenindesiniz ve
* menü bunu söylüyor. Kilit tek başına kalınca alan da ona ayrılabildi.
* Yükseklik 38px: 248px sütunda yan boşluklardan sonra ~208px kalıyor ve
* kilidin oranı (349:64, 2026-09-30 logosu) 38px'te ~207px genişlik veriyor.
* 44px'te taşıyordu — oran değişince bu sayı da değişmeli. Alt çizgi,
* marka alanını menüden ayırıyor. */
.kenar .marka {
padding: 2px 8px 18px;
margin-bottom: 2px;
border-bottom: 1px solid var(--kenar-cizgi);
}
.kenar .marka img { height: 38px; }
.kenar-nav { display: flex; flex-direction: column; gap: 4px; }
/* ETKİN ÖĞE SOL ŞERİTLE İŞARETLENİYOR, yalnız renkle değil: renk körlüğünde
* ve düşük kontrastlı ekranlarda tek başına renk güvenilir bir işaret değil.
* Şerit sözde elementle çiziliyor — DOM'a düğüm eklemiyor. */
.kenar-oge {
position: relative;
display: flex; align-items: center; gap: 11px;
padding: 10px 12px 10px 14px; border-radius: var(--r-sm);
color: var(--kenar-metin-2); font-size: .92rem; font-weight: 600;
border: 0;
}
.kenar-oge:hover { background: var(--kenar-zemin-2); color: var(--kenar-metin); text-decoration: none; }
.kenar-oge svg {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.kenar-oge.etkin { background: var(--kenar-zemin-2); color: #fff; }
.kenar-oge.etkin::before {
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--marka-2);
}
.kenar-alt {
margin-top: auto; padding-top: 16px; border-top: 1px solid var(--kenar-cizgi);
display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.kenar-alt .kisi {
padding-left: 14px; border-left: 0; color: var(--kenar-metin);
font-size: .86rem; font-weight: 600;
}
.kenar-alt .cikis-form { padding-left: 14px; }
.kenar-alt .baglanti-dugme { color: var(--kenar-metin-2); font-size: .86rem; }
.kenar-alt .baglanti-dugme:hover { color: var(--marka-2); }
/* İçeriğin üstündeki ince şerit: sayfa adı burada, her sayfa kendi
* başlığını yazmıyor (iki düzende iki başlık olurdu). */
.serit {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
padding: 18px 28px;
background: var(--kagit); border-bottom: 1px solid var(--cizgi);
position: sticky; top: 0; z-index: 5;
}
.serit h1 { margin: 0; font-size: 1.32rem; letter-spacing: -.02em; }
/* Sayfa açıklaması (2026-09-29): başlığın altında tek cümle, üç düzende de. */
.sayfa-aciklama { margin: 0 0 18px; color: var(--metin-2); font-size: .94rem; line-height: 1.5; }
.serit .sayfa-aciklama { margin: 3px 0 0; font-size: .86rem; }
.odak-aciklama { text-align: center; margin: 0 auto 18px; }
.serit-bag { font-size: .88rem; color: var(--metin-3); }
.serit-bag:hover { color: var(--marka); }
body.yonetim .govde { max-width: 1040px; margin: 0; padding: 28px; }
/* Menülü sayfada tavan kalkıyor — yoksa menü 1040px'in içinde sıkışır ve
* "sağ kenara dayalı" olmaz. İçeriğin ölçüsü ızgara sütunuyla korunuyor. */
body.yonetim .govde.icindekili { max-width: none; padding-right: 24px; }
body.yonetim .alt { max-width: none; margin: 0; padding: 20px 28px; }
/* DAR EKRAN: kenar çubuğu üstte yatay kayan bir şeride dönüşüyor. */
@media (max-width: 900px) {
body.yonetim { display: block; }
.kenar {
position: static; height: auto; flex-direction: row; align-items: center;
gap: 14px; padding: 12px 16px; overflow-x: auto;
border-right: 0; border-bottom: 1px solid var(--cizgi);
}
.kenar .marka { white-space: nowrap; }
.kenar-nav { flex-direction: row; gap: 6px; }
.kenar-oge { white-space: nowrap; padding: 8px 12px; }
.kenar-alt {
margin: 0 0 0 auto; padding: 0 0 0 14px;
border-top: 0; border-left: 1px solid var(--cizgi);
flex-direction: row; align-items: center; gap: 12px;
}
.serit { padding: 14px 16px; }
body.yonetim .govde, body.yonetim .alt { padding: 20px 16px; }
}
/* ---- Gövde ------------------------------------------------------------- */
/* `min-width:0` SAVUNMA AMAÇLI, ÖLÇÜLMÜŞ BİR ARIZANIN DÜZELTMESİ DEĞİL.
* Esnek düzende bir çocuk varsayılan olarak içeriğinden dar olamaz
* (`min-width:auto`); uzun bir `pre` satırı ileride sayfayı genişletebilir.
* Bugün taşma YOK — 500px ve 640px genişlikte ölçüldü
* (`document.scrollWidth == clientWidth`). */
.govde { width: 100%; max-width: 900px; margin: 0 auto; padding: 32px 20px 56px;
flex: 1; min-width: 0; }
/* TAM GENİŞLİK (2026-10-06, proje sahibinin isteği): 62ch sınırı kısa
* cümleleri bile ikiye bölüyordu. */
.aciklama { color: var(--metin-2); font-size: .95rem; }
/* ---- Kart -------------------------------------------------------------- */
.kart {
background: var(--kagit);
border: 1px solid var(--cizgi);
border-radius: var(--r);
box-shadow: var(--golge-1);
padding: 20px 22px;
margin: 14px 0 22px;
min-width: 0;
}
.kart-ust {
display: flex; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
align-items: center; margin-bottom: 14px;
}
.kart-ust h2 { margin: 0; }
.kart-kod { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
/* Lisans kodu — sayfanın taşıdığı TEK değer bu, öyle de görünmeli. */
.kod {
display: inline-block;
font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
letter-spacing: .1em;
color: var(--marka-koyu);
background: var(--marka-bg);
border: 1px dashed var(--marka);
border-radius: var(--r);
padding: 14px 18px;
word-break: break-all; overflow-wrap: anywhere; max-width: 100%;
user-select: all; /* tek tıkla tamamı seçilsin */
}
/* Lisans kodu bloğu: etiket + kod + kopyala + tek cümlelik açıklama.
* Etiket ŞART — kod tek başına dururken müşteri tablodaki öbür değerlerle
* (indirme anahtarı, IP) karıştırıyordu. */
.lisans-kod {
padding-bottom: 18px; margin-bottom: 6px;
border-bottom: 1px solid var(--cizgi);
}
.lisans-kod-etiket {
display: block; font-size: .78rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--metin-2); margin-bottom: 8px;
}
.lisans-kod-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lisans-kod-not { color: var(--metin-2); font-size: .88rem; margin: 10px 0 0; max-width: 62ch; }
/* Kopyala düğmesi. `hidden` ile basılıyor, `portal.js` açıyor: betik
* yüklenmezse işe yaramayan bir düğme ekranda kalmasın. */
.dugme.kopyala { padding: 8px 14px; font-size: .86rem; }
/* `.dugme`nin `display` bildirimi tarayıcının `[hidden]` kuralını eziyor. */
.dugme[hidden] { display: none; }
.dugme.kopyala.tamam { color: var(--iyi); border-color: var(--iyi); background: var(--iyi-bg); }
/* Üst boşluk pre'den sarmalayıcıya taşınıyor: düğmenin `top`u pre'nin
* kenarına göre ölçülsün. */
.kopyalanir { position: relative; margin-top: 9px; }
.adimlar .kopyalanir > pre { padding-right: 96px; margin-top: 0; }
.kopyalanir > .dugme.kopyala {
position: absolute; top: 8px; right: 8px;
padding: 5px 11px; font-size: .78rem; background: var(--kagit);
}
/* ---- Bilgi/hata kutusu -------------------------------------------------
* İÇİNE ELEMENT KOYMAYIN. `p_kutu()` metni kaçırıp tek bir metin düğümü
* olarak basıyor ve `tests/run-portal-tests.sh` hesap sayımı (enumeration)
* iddiasını `[^<]*
` deseniyle ölçüyor: iç içe bir
* element o deseni kırar ve kayıtlı/kayıtsız adres ayrımını gizleyen kapı
* sessizce ölçmez olur. İkon bu yüzden `::before` ile — sözde element
* DOM'a düğüm eklemez. */
.kutu {
border-radius: var(--r); padding: 13px 16px 13px 44px; margin: 16px 0;
font-size: .93rem; border: 1px solid; position: relative;
}
.kutu::before {
position: absolute; left: 16px; top: 13px;
font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.kutu.iyi { border-color: var(--iyi); background: var(--iyi-bg); color: var(--metin); }
.kutu.kotu { border-color: var(--kotu); background: var(--kotu-bg); color: var(--metin); }
.kutu.uyari { border-color: var(--uyari); background: var(--uyari-bg); color: var(--metin); }
.kutu.iyi::before { content: "✓"; color: var(--iyi); }
.kutu.kotu::before { content: "!"; color: var(--kotu); }
.kutu.uyari::before { content: "!"; color: var(--uyari); }
/* ---- Rozet ------------------------------------------------------------- */
.etiket {
display: inline-block; font-size: .76rem; font-weight: 700;
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid transparent; white-space: nowrap;
}
.etiket.iyi { color: var(--iyi); background: var(--iyi-bg); border-color: var(--iyi); }
.etiket.uyari { color: var(--uyari); background: var(--uyari-bg); border-color: var(--uyari); }
.etiket.kotu { color: var(--kotu); background: var(--kotu-bg); border-color: var(--kotu); }
/* ---- Bilgi tablosu ----------------------------------------------------- */
table.bilgi { width: 100%; border-collapse: collapse; font-size: .93rem; }
/* ETİKET SÜTUNU İLE DEĞER AYNI AĞIRLIKTAYDI: göz hangisinin soru hangisinin
* cevap olduğunu ayırmak için satır satır okumak zorundaydı. Etiket küçüldü
* ve sustu, değer öne çıktı. */
table.bilgi th {
text-align: left; color: var(--metin-3); font-weight: 600;
font-size: .8rem; letter-spacing: .02em;
width: 176px; padding: 11px 16px 11px 0; vertical-align: top;
border-bottom: 1px solid var(--cizgi);
}
table.bilgi td {
padding: 11px 0; border-bottom: 1px solid var(--cizgi); vertical-align: top;
color: var(--metin); font-weight: 500;
}
table.bilgi tr:last-child th, table.bilgi tr:last-child td { border-bottom: 0; }
table.bilgi small { color: var(--metin-3); }
/* ---- Form --------------------------------------------------------------
* `label` BLOK, GRID DEĞİL. Grid'ken her çocuk ayrı bir satır oluyordu:
* "Ad Soyad" bir satır, zorunluluk yıldızı ALT SATIR, ipucu metni onun da
* altı. Ölçüldü (ekran görüntüsüyle) — form üç kat uzun ve okunaksızdı. */
.form { display: grid; gap: 18px; max-width: 480px; margin: 22px 0; }
.form label { display: block; font-size: .92rem; font-weight: 600; }
.form small { font-weight: 400; color: var(--metin-3); margin-left: 6px; }
/* ALANLAR BELİRGİN. Kenar `--cizgi-alan` (kartın ayıracından koyu), zemin
* `--kagit-2` (kartın beyazından bir ton çukur) ve yükseklik artırıldı:
* tıklanacak yerin NEREDE BİTTİĞİ artık kenara bakmadan da belli.
* Odaklanınca zemin beyaza dönüyor — hangi alanda olunduğu ikinci bir
* işaretle daha söyleniyor (yalnız renkle değil, halka ile de). */
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=number], .form input[type=tel], .form select, .form textarea {
display: block; width: 100%; margin-top: 8px;
padding: 13px 14px;
border: 1.5px solid var(--cizgi-alan); border-radius: var(--r-sm);
/* BEYAZ ZEMİN + İÇ GÖLGE (2026-10-06): kartın üstünde `--kagit-2` zemin
* alanı kartla kaynaştırıyordu; alan artık kutu olduğu belli bir yüzey. */
background: var(--kagit); color: var(--metin);
box-shadow: inset 0 1px 2px rgba(15, 30, 28, .07);
font: inherit; font-size: 1rem;
transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--metin-3); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--metin-3); }
.form input:focus, .form select:focus, .form textarea:focus {
border-color: var(--marka); background: var(--kagit);
box-shadow: 0 0 0 3px var(--marka-bg); outline: none;
}
.form textarea { min-height: 120px; resize: vertical; }
.form .onay {
display: flex; gap: 11px; align-items: flex-start; font-weight: 400;
line-height: 1.5;
}
.form .onay input[type=checkbox] { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--marka); flex: none; }
.zorunlu { color: var(--kotu); margin-left: 2px; }
/* Tablo/kart altındaki eylem formları. */
.satir-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.satir-form input {
padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: var(--r-sm);
background: var(--kagit); color: var(--metin); font: inherit; font-size: .93rem;
}
.satir-form input:focus { border-color: var(--marka); box-shadow: 0 0 0 3px var(--marka-bg); outline: none; }
.satir-form small { color: var(--metin-3); font-size: .82rem; }
input.kisa { width: 96px; }
/* ---- Sayfa içi bölüm menüsü ("Bu sayfada") -------------------------------
* Sağda, sayfayla birlikte kaymayan (sticky) bir bağlantı listesi. Uzun
* sayfalarda bölümler ekranın altında kalıyordu ve kullanıcı ne olduğunu
* ancak kaydırarak öğreniyordu.
*
* JS YOK — olamaz da (CSP kararı). Çapa bağlantıları tarayıcının kendi işi;
* yumuşak kaydırma `scroll-behavior` ile, başlığın şeridin altında kalmaması
* `scroll-margin-top` ile çözülüyor. "Şu an buradasın" vurgusu için JS
* gerekirdi; onun yerine liste kısa ve bölüm adları ekranda birebir aynı
* sözcüklerle duruyor. */
.govde.icindekili {
display: grid;
/* İÇERİK ÖLÇÜSÜ SABİT, MENÜ SAĞ KENARDA. Aradaki boşluk ESNEK olan:
* ikisi arasına konan `1fr`, geniş ekranda menüyü ekranın sağına dayıyor,
* dar ekranda ise boşluk sıfıra inip ikisini yaklaştırıyor. Menüyü içerik
* sütununun hemen yanına koymak, geniş ekranda sayfanın ortasında asılı
* bırakıyordu — menü gibi değil, artık bir metin bloğu gibi duruyordu. */
grid-template-columns: minmax(0, 940px) 1fr auto;
gap: 0;
align-items: start;
/* `align-content: start` ŞART. Gövde esnek bir sütunun içinde büyüyor ve
* artan boşluk varsayılan olarak SATIRLARA dağıtılıyor: `` için ayrılan
* (yönetim düzeninde BOŞ olan) ilk satır esniyor ve içerik aşağı kayıyordu.
* Ölçüldü: aynı sayfada içerik kısaldığında `.sayfa` 90px'ten 147px'e
* iniyordu — yani sekme değiştirmek düzeni oynatıyordu. */
align-content: start;
}
.govde.icindekili > h1 { grid-column: 1 / -1; grid-row: 1; }
/* Açıklama başlıkla içerik arasında kendi satırında; içerik ve menü 3. satırda.
* Yönetim düzeninde başlık ve açıklama üst şeritte — 1. ve 2. satır boş
* kalıyor ve `align-content: start` sayesinde yükseklik almıyor. */
.govde.icindekili > .sayfa-aciklama { grid-column: 1 / -1; grid-row: 2; }
/* `flow-root`: İÇERİDEKİ KENAR BOŞLUĞU DIŞARI TAŞMASIN. Bölüm başlığının
* 34px'lik üst boşluğu sarmalayıcıdan dışarı sızıyor (margin collapse) ve
* ızgara satırının tamamını aşağı itiyordu — ölçüldü: `.sayfa` 34px aşağıda
* başlıyordu ve menü ile başlık hizası her sekmede kayıyordu. */
.govde.icindekili > .sayfa {
grid-column: 1; grid-row: 3; min-width: 0; display: flow-root;
}
/* MENÜ OLDUĞU BELLİ: kendi yüzeyi, kenarlığı ve başlığı var. Kenarlıksız bir
* bağlantı listesi, sayfanın devamı gibi okunuyordu. */
.icindekiler {
grid-column: 3; grid-row: 3;
position: sticky; top: 18px;
/* UZUN MENÜ EKRANI AŞMASIN: yapışkan bir öğe ekrandan uzunsa alt ucu hiç
* görünmez ve kaydırmakla da ulaşılamaz. */
max-height: calc(100vh - 110px); overflow-y: auto;
width: 232px;
display: flex; flex-direction: column; gap: 1px;
padding: 14px 12px;
background: var(--kagit);
border: 1px solid var(--cizgi);
border-radius: var(--r);
box-shadow: var(--golge-1);
}
.icindekiler-baslik {
font-size: .72rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--metin-3);
padding: 0 8px 8px; margin-bottom: 6px;
border-bottom: 1px solid var(--cizgi);
}
.icindekiler a {
color: var(--metin-2); font-size: .89rem; font-weight: 600;
padding: 7px 8px; line-height: 1.35; border-radius: var(--r-sm);
}
.icindekiler a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
/* Sayı, bağlantının sağ ucunda ve SUSKUN: gezinmeyi o yönetmiyor, yalnız
* "bakmaya değer mi" sorusunu tıklamadan yanıtlıyor. */
.menu-sayi {
font-size: .78rem; font-weight: 700; color: var(--metin-3);
font-variant-numeric: tabular-nums;
}
.icindekiler a.etkin .menu-sayi { color: var(--marka-koyu); }
.icindekiler a:hover {
color: var(--marka); background: var(--marka-bg); text-decoration: none;
}
/* Çapaya gidildiğinde başlık yapışkan şeridin ALTINDA kalmasın. */
.sayfa h2 { scroll-margin-top: 86px; }
html { scroll-behavior: smooth; }
/* SEKMELİ SAYFADA ANINDA. Sekme değiştirmek bir "bölüme kaydırma" değil,
* ekranı değiştirmek: yumuşak kaydırma, sayfanın bir ucundan öbürüne uzun bir
* animasyon çalıştırıyor ve kullanıcı yeni bölümü ancak animasyon bittiğinde
* görüyor. Ölçüldü: yumuşak kipte tıklama scrollY'yi 900'de bırakıyordu,
* anlık kipte 0'a indiriyor. */
html:has(.sayfa.sekmeli) { scroll-behavior: auto; }
/* Hareketi azaltma tercihi olan kullanıcıya yumuşak kaydırma dayatılmıyor. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ---- Sekme kipi: yalnız seçili bölüm görünür -----------------------------
* JS YOK. Bölümler `:target` ile açılıyor; hangisinin seçili olduğunu adres
* çubuğu söylüyor, yani geri tuşu ve bağlantı paylaşımı kendiliğinden
* çalışıyor.
*
* `:has()` DESTEKLENMEZSE HİÇBİR ŞEY GİZLENMİYOR ve bu bilinçli: tarayıcı
* geçersiz bir seçiciyi gördüğünde KURALIN TAMAMINI atıyor. Gizleme kuralı
* `:has()` içerdiği için eski bir tarayıcıda hiç uygulanmıyor ve sayfa eski
* hâline — tüm bölümler alt alta — dönüyor. Gizlemeyi `:has()`siz yazsaydık
* o tarayıcıda ilk açılışta EKRAN BOŞ kalırdı; bozuk bir sekme, sekmesiz bir
* sayfadan kötüdür.
*
* SEÇİM KONUMA GÖRE EŞLEŞİYOR, anahtara göre değil: CSS bir bağlantının
* `href`ini bir bölümün kimliğiyle karşılaştıramaz. Menüdeki n'inci bağlantı
* ile n'inci bölüm aynı sırada üretildiği için `nth-of-type` ikisini
* eşliyor — kural sayfadan bağımsız kalıyor. */
.sayfa.sekmeli:has(.bolum) .bolum { display: none; }
/* Hiçbiri seçilmemişken İLK bölüm açık. */
.sayfa.sekmeli:not(:has(.capa:target)) .bolum:nth-of-type(1) { display: block; }
/* ÇAPA SAYFANIN EN ÜSTÜNDE, sıfır yükseklikli. Bölümün kendisine kimlik
* verildiğinde, sayfa aşağı kaydırılmışken bir sekmeye tıklamak hiçbir
* kaydırma yapmıyordu: hedef bölüm ekranı zaten kestiği için tarayıcı onu
* "görünür" sayıyor ve yerinde bırakıyordu — kullanıcı yeni bölümün ortasına
* düşüyordu (ölçüldü: scrollY 900'de kalıyor, bölümün üstü -806).
*
* `scroll-margin-top` BİLEREK BÜYÜK: çapanın kaydırma kutusunu yukarı doğru
* genişletiyor, hedefin üstü eksiye düşüyor ve tarayıcı sayfanın EN TEPESİNE
* kaydırıyor. İstenen davranış buydu. */
.capa { display: block; height: 0; scroll-margin-top: 100vh; }
/* Çapa ile bölüm KONUMA göre eşleşiyor: ikisi de aynı bildirim dizisinden,
* aynı sırada üretiliyor. CSS bir `href`i bir kimlikle karşılaştıramıyor. */
.sayfa.sekmeli .capa:nth-of-type(1):target ~ .bolum:nth-of-type(1),
.sayfa.sekmeli .capa:nth-of-type(2):target ~ .bolum:nth-of-type(2),
.sayfa.sekmeli .capa:nth-of-type(3):target ~ .bolum:nth-of-type(3),
.sayfa.sekmeli .capa:nth-of-type(4):target ~ .bolum:nth-of-type(4),
.sayfa.sekmeli .capa:nth-of-type(5):target ~ .bolum:nth-of-type(5),
.sayfa.sekmeli .capa:nth-of-type(6):target ~ .bolum:nth-of-type(6) { display: block; }
/* Menüde seçili bağlantı. */
.icindekiler a.etkin,
/* VARSAYILAN-İLK KURALI YALNIZ SEKME KİPİNDE.
* Kural sekmeler için yazılmıştı ama menüsü olan HER sayfaya uyuyordu:
* süzgeç menüsünde `.capa` hiç yok, yani koşul her zaman doğru çıkıyor ve
* ilk bağlantı (Tümü) SÜREKLİ vurgulu kalıyordu — sunucunun işaretlediği
* gerçek süzgeçle birlikte İKİ satır birden yanıyordu. Ölçüldü:
* "Tümü=VURGULU | Onay bekleyen=VURGULU". */
.govde.icindekili:has(.sayfa.sekmeli):not(:has(.capa:target)) .icindekiler a:nth-of-type(1),
.govde.icindekili:has(.capa:nth-of-type(1):target) .icindekiler a:nth-of-type(1),
.govde.icindekili:has(.capa:nth-of-type(2):target) .icindekiler a:nth-of-type(2),
.govde.icindekili:has(.capa:nth-of-type(3):target) .icindekiler a:nth-of-type(3),
.govde.icindekili:has(.capa:nth-of-type(4):target) .icindekiler a:nth-of-type(4),
.govde.icindekili:has(.capa:nth-of-type(5):target) .icindekiler a:nth-of-type(5),
.govde.icindekili:has(.capa:nth-of-type(6):target) .icindekiler a:nth-of-type(6) {
background: var(--marka-bg); color: var(--marka-koyu);
box-shadow: inset 2px 0 0 var(--marka);
}
/* YAPIŞKAN ŞERİDİN ALTINDA YAPIŞIYOR.
*
* Menü `top: 18px`te yapışıyordu ama yönetim düzeninde üst şerit de yapışkan
* ve 0-62 arasını kaplıyor (`z-index: 5`). Ölçüldü: menü 18'de duruyor,
* başlığı 33-61 arasında — yani "BU SAYFADA" başlığı ŞERİDİN ALTINDA
* kalıyor. Kullanıcının gördüğü şey tam olarak buydu: aşağı inince başlık
* kayboluyor, bağlantılar kalıyor.
*
* Sade düzende üst çubuk YAPIŞKAN DEĞİL, bu yüzden kural yalnız yönetim
* düzeninde geçerli. */
body.yonetim .icindekiler { top: 80px; max-height: calc(100vh - 100px); }
/* SEKME KİPİNDE MENÜ BAŞLIĞIN ALTINDAN BAŞLIYOR: bölüm başlığıyla aynı
* hizada durduğunda ikisi tek bir satır gibi okunuyordu ve menü, başlığın
* devamı sanılıyordu. Değer başlığın satır kutusundan geliyor
* (1.18rem x 1.3 satır + üst boşluk). */
.govde.icindekili:has(.sayfa.sekmeli) .icindekiler { margin-top: 36px; }
/* DAR EKRANDA ÜSTE ALINIYOR, GİZLENMİYOR: telefonda sayfa daha da uzun, yani
* bölüm listesine ihtiyaç daha fazla. Yan yana iki bağlantı sığmadığı için
* sarılan bir şerit oluyor. */
@media (max-width: 900px) {
.govde.icindekili { display: block; }
.icindekiler {
position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 14px;
padding: 0 0 14px; border-left: 0; border-bottom: 1px solid var(--cizgi);
margin-bottom: 18px;
}
.icindekiler-baslik { width: 100%; margin-bottom: 2px; }
}
/* ---- Giriş / kayıt kartı ------------------------------------------------
* Bu sayfalar bir "yönetim ekranı" değil, TEK İŞLİ bir eşik. Geniş gövdenin
* ortasında sola yaslı duran bir form, sayfanın ne istediğini söylemiyordu.
* Kart ortalanıyor, dar tutuluyor ve odak tek yerde. */
.giris-kart {
max-width: 420px; margin: 8px auto 0;
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-2);
padding: 28px;
}
.sade .govde:has(.giris-kart) { display: grid; place-items: start center; }
/* ---- Odak düzeni (üst çubuksuz eşik sayfası) ---------------------------
* Üst çubuk giriş ekranında yalnız "Giriş" ve "Üye Ol" taşıyordu; kullanıcı
* zaten oradayken ikisi de işe yaramıyor, üstelik sayfanın tek işini
* gölgeliyordu. Çubuk kalktı; yerine kartın üstünde ortalanmış bir marka
* bağlantısı var — siteye dönüş yolu duruyor. */
body.odak .govde {
display: grid; place-items: center; align-content: center;
min-height: 100vh; min-height: 100svh;
padding-block: 40px;
}
.odak-marka { display: block; margin-bottom: 22px; }
.odak-marka img { display: block; height: 43px; width: auto; margin: 0 auto; }
.odak-marka:hover { opacity: .85; }
body.odak .giris-kart { margin-top: 0; }
body.odak .giris-kart h1 {
margin: 0 0 8px; font-size: 1.45rem; text-align: center;
}
.sade .govde > h1 { text-align: center; }
.giris-alt { color: var(--metin-2); font-size: .93rem; margin: 0 0 20px; text-align: center; }
.giris-kart .form { max-width: none; margin: 0; }
.giris-kart .form .dugme { width: 100%; }
.giris-baglar {
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin: 18px 0 0; font-size: .88rem;
}
/* ---- Kayıt kartı (iki sütun) --------------------------------------------
* Kayıt, müşterinin "neye imza atıyorum" diye durduğu adım. Tek sütunlu dar
* bir form bunu cevaplamıyor ve müşteriyi tanıtım sayfasına geri
* gönderiyordu. Solda ne kazanıldığı ve üç adım, sağda form: karar veren
* bilgi formun yanında. Sol panel kenar çubuğunun belirteçlerini kullanıyor —
* iki kipte de koyu, yani marka portalın içindeki yüzeyle aynı.
* Dar ekranda FORM ÖNCE: sayfaya gelen çoğunlukla zaten karar vermiş. */
.kayit-kart {
width: 100%; max-width: 980px;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-2);
overflow: hidden;
}
/* Gövdenin 900px tavanı iki sütuna dar geliyor; yalnız bu sayfada açılıyor. */
body.odak .govde:has(.kayit-kart) { max-width: 1040px; }
.kayit-tanitim {
position: relative;
background: var(--kenar-zemin); color: var(--kenar-metin);
padding: 40px 36px;
display: flex; flex-direction: column; gap: 22px;
}
/* İnce ızgara dokusu — sunucu/raf çağrışımı; yalnız CSS, görsel dosya yok. */
.kayit-tanitim::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--kenar-cizgi) 1px, transparent 1px),
linear-gradient(90deg, var(--kenar-cizgi) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: linear-gradient(160deg, black 0%, transparent 55%);
mask-image: linear-gradient(160deg, black 0%, transparent 55%);
opacity: .55;
}
.kayit-tanitim > * { position: relative; }
.kayit-rozet {
align-self: flex-start;
font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--kenar-vurgu); background: var(--kenar-vurgu-bg);
border: 1px solid var(--kenar-cizgi);
padding: 4px 11px; border-radius: var(--r-pill);
}
.kayit-tanitim h2 {
margin: 0; color: var(--kenar-baslik); font-size: 1.55rem; line-height: 1.25; letter-spacing: -.022em;
}
.kayit-tanitim p { margin: 0; color: var(--kenar-metin-2); font-size: .94rem; line-height: 1.6; }
.kayit-artilar { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kayit-artilar li {
position: relative; padding-left: 28px; font-size: .92rem; line-height: 1.5;
}
.kayit-artilar li::before {
content: "✓"; position: absolute; left: 0; top: 1px;
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center;
font-size: .7rem; font-weight: 700;
color: var(--kenar-zemin); background: var(--kenar-vurgu);
}
/* Üç adım: numaralı dikey zaman çizgisi. Sayaç CSS'ten, DOM'a düğüm yok. */
.kayit-adimlar {
list-style: none; margin: auto 0 0; padding: 22px 0 0;
border-top: 1px solid var(--kenar-cizgi);
counter-reset: adim; display: grid; gap: 16px;
}
.kayit-adimlar li {
counter-increment: adim; position: relative; padding-left: 44px;
display: flex; flex-direction: column; gap: 1px;
}
.kayit-adimlar li::before {
content: counter(adim);
position: absolute; left: 0; top: 0;
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
font-size: .82rem; font-weight: 700;
color: var(--kenar-metin); border: 1.5px solid var(--kenar-cizgi);
background: var(--kenar-zemin-2);
}
.kayit-adimlar li:not(:last-child)::after {
content: ""; position: absolute; left: 14.5px; top: 34px; bottom: -14px;
width: 1.5px; background: var(--kenar-cizgi);
}
.kayit-adimlar strong { color: var(--kenar-baslik); font-size: .92rem; font-weight: 600; }
.kayit-adimlar span { color: var(--kenar-metin-2); font-size: .84rem; }
.kayit-form { padding: 40px 40px 36px; min-width: 0; }
.kayit-form h1 { margin: 0 0 4px; font-size: 1.5rem; }
.kayit-alt { margin: 0 0 22px; color: var(--metin-2); font-size: .92rem; }
.kayit-form .form { max-width: none; margin: 0; gap: 16px; }
.kayit-form .form .dugme { width: 100%; margin-top: 4px; }
.kayit-form .form small { margin-left: 4px; font-size: .8rem; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-ipucu { margin: -6px 0 0; color: var(--metin-3); font-size: .82rem; }
.kayit-form .onay { font-size: .88rem; color: var(--metin-2); }
.kayit-tamam { text-align: center; padding: 24px 0 8px; }
.kayit-tamam svg {
width: 56px; height: 56px; padding: 14px; box-sizing: content-box;
border-radius: 50%; background: var(--marka-bg); color: var(--marka);
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px;
}
.kayit-tamam h1 { margin-bottom: 14px; }
.kayit-tamam .kutu { text-align: left; }
.kayit-not { color: var(--metin-3); font-size: .86rem; margin: 0 0 22px; }
@media (max-width: 860px) {
.kayit-kart { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.kayit-form { order: -1; padding: 28px 24px; }
.kayit-tanitim { padding: 28px 24px; }
.kayit-adimlar { margin-top: 0; }
}
@media (max-width: 480px) {
.form-ikili { grid-template-columns: minmax(0, 1fr); }
}
/* Google düğmesi: Google'ın marka kuralı beyaz zemin + gri kenar + resmi
* işaret istiyor; markanın kendi yeşiline boyamak kural ihlali olurdu. */
.dugme.google {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600;
}
.dugme.google:hover { background: #f7f8f8; border-color: #c9cdd1; color: #1f1f1f; }
.dugme.google .g-mark { width: 18px; height: 18px; flex: none; }
@media (prefers-color-scheme: dark) {
.dugme.google { background: #1f2329; color: #e9edef; border-color: #3a424b; }
.dugme.google:hover { background: #262c33; color: #e9edef; }
}
/* "ya da" ayracı: iki yol arasında görsel bir sınır. */
.ayrac {
display: flex; align-items: center; gap: 12px;
margin: 18px 0; color: var(--metin-3); font-size: .82rem;
}
.ayrac::before, .ayrac::after {
content: ""; flex: 1; height: 1px; background: var(--cizgi);
}
/* ---- Düğme ------------------------------------------------------------- */
.dugme {
display: inline-block;
background: var(--marka); color: #fff; border: 1px solid var(--marka);
border-radius: var(--r-sm); padding: 10px 18px;
font: inherit; font-weight: 700; font-size: .93rem;
cursor: pointer; text-align: center; white-space: nowrap;
transition: background .12s ease, border-color .12s ease;
}
.dugme:hover { background: var(--marka-2); border-color: var(--marka-2); text-decoration: none; color: #fff; }
.dugme.buyuk { padding: 13px 24px; font-size: 1rem; }
.dugme.ikincil {
background: transparent; color: var(--marka); border-color: var(--cizgi);
font-weight: 600;
}
.dugme.ikincil:hover { background: var(--marka-bg); border-color: var(--marka); color: var(--marka-koyu); }
.dugme.tehlike { background: var(--kotu); border-color: var(--kotu); }
.dugme.tehlike:hover { background: var(--kotu); border-color: var(--kotu); filter: brightness(1.08); }
/* Karanlık kipte marka rengi AÇIK bir yeşil; üstünde beyaz metin okunmaz. */
@media (prefers-color-scheme: dark) {
.dugme { color: #0a1f1b; }
.dugme:hover { color: #0a1f1b; }
.dugme.tehlike, .dugme.tehlike:hover { color: #2a0c09; }
}
/* ---- Kurulum adımları / listeler --------------------------------------- */
.adimlar { padding-left: 22px; margin: 0; }
.adimlar li { margin-bottom: 18px; min-width: 0; }
.adimlar li::marker { color: var(--marka); font-weight: 700; }
.adimlar pre, .kart > pre {
background: var(--kagit-3); border: 1px solid var(--cizgi);
border-radius: var(--r-sm); padding: 12px 14px;
overflow-x: auto; margin: 9px 0 0; max-width: 100%;
}
.liste { padding-left: 22px; margin: 0; }
.liste li { margin-bottom: 9px; }
/* ---- Lisans listesi: süzgeç formu, tablo, sayfalama --------------------
* Süzgeç bir GET formu (yonetim.php başlığında gerekçesi): alanlar esnek bir
* ızgarada, dar ekranda tek sütuna iniyor. Tablo kendi kabında yatay
* kayıyor — dokuz sütunu telefona sığdırmak için sütun gizlemek, "pasif mi"
* sorusunun cevabını gizlemek olurdu; sayfa ise hiçbir genişlikte yatay
* kaymıyor. */
.filtre-kutu {
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-1);
margin: 18px 0 14px;
}
.filtre-kutu > summary {
cursor: pointer; padding: 13px 18px; font-weight: 700; font-size: .95rem;
color: var(--metin); list-style: none; display: flex; align-items: center; gap: 10px;
}
.filtre-kutu > summary::-webkit-details-marker { display: none; }
.filtre-kutu > summary::before {
content: "▸"; color: var(--metin-3); transition: transform .15s;
}
.filtre-kutu[open] > summary::before { transform: rotate(90deg); }
.filtre-kutu[open] > summary { border-bottom: 1px solid var(--cizgi); }
.filtre-kutu .filtre { border: 0; box-shadow: none; margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.filtre {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 12px 14px; align-items: end;
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-1);
padding: 16px 18px; margin: 18px 0 14px;
}
.filtre label { display: block; font-size: .8rem; font-weight: 600; color: var(--metin-2); }
.filtre input, .filtre select {
display: block; width: 100%; margin-top: 6px; padding: 9px 10px;
border: 1.5px solid var(--cizgi-alan); border-radius: var(--r-sm);
background: var(--kagit-2); color: var(--metin); font: inherit; font-size: .92rem;
}
.filtre input:focus, .filtre select:focus {
border-color: var(--marka); background: var(--kagit);
box-shadow: 0 0 0 3px var(--marka-bg); outline: none;
}
.filtre .filtre-ara { grid-column: span 2; }
.filtre-dugmeler { display: flex; gap: 8px; align-items: center; }
.filtre-dugmeler .dugme { padding: 9px 16px; }
.tablo-ust { color: var(--metin-2); font-size: .9rem; margin: 0 0 10px; }
.tablo-sar {
overflow-x: auto; background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-1);
}
table.liste-tablo { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .9rem; }
table.liste-tablo th {
text-align: left; font-size: .76rem; font-weight: 700; letter-spacing: .03em;
color: var(--metin-3); background: var(--kagit-2);
padding: 11px 12px; border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
table.liste-tablo th a { color: inherit; }
table.liste-tablo th a:hover { color: var(--marka); text-decoration: none; }
table.liste-tablo th[aria-sort="ascending"],
table.liste-tablo th[aria-sort="descending"] { color: var(--marka); }
.sira-ok { margin-left: 5px; font-size: .68rem; }
table.liste-tablo td {
padding: 11px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top;
}
table.liste-tablo tbody tr:last-child td { border-bottom: 0; }
table.liste-tablo tbody tr:hover td { background: var(--kagit-2); }
table.liste-tablo small { display: block; color: var(--metin-3); font-size: .8rem; margin-top: 3px; }
table.liste-tablo .kod-hucre { font-family: var(--mono); font-size: .84rem; white-space: nowrap; }
table.liste-tablo .tarih-hucre { white-space: nowrap; }
table.liste-tablo .sag { text-align: right; white-space: nowrap; }
.dugme.kucuk { padding: 6px 12px; font-size: .84rem; }
.soluk { color: var(--metin-3); }
.uyari-metin { color: var(--uyari); font-weight: 600; }
.gizli {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.sayfalama { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 16px 0 0; }
.sayfalama a, .sayfalama span {
min-width: 36px; padding: 7px 11px; text-align: center; font-size: .88rem;
border: 1px solid var(--cizgi); border-radius: var(--r-sm); background: var(--kagit);
}
.sayfalama a:hover { border-color: var(--marka); text-decoration: none; }
.sayfalama .etkin { background: var(--marka); border-color: var(--marka); color: #fff; font-weight: 700; }
.sayfalama .pasif { color: var(--metin-3); }
.geri-bag { display: inline-block; margin: 16px 0 0; font-size: .92rem; font-weight: 600; }
/* ---- Alt bilgi --------------------------------------------------------- */
.alt {
width: 100%; max-width: 900px; margin: 0 auto;
padding: 20px; color: var(--metin-3); font-size: .85rem;
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
border-top: 1px solid var(--cizgi);
}
/* ---- Kabuksuz hata ekranları -------------------------------------------
* CSRF hatası, rol reddi, yapılandırma/veritabanı arızası ve yanlış metot:
* beş ekran da `exit()` ile basılıyordu ve TAMAMEN STİLSİZDİ — tarayıcının
* ham Times yazısıyla çıplak bir cümle. Müşterinin gördüğü en kötü an, tam
* da ürünün en bakımsız göründüğü an oluyordu. Bu ekranlar sayfa kabuğunu
* KULLANAMAZ (veritabanı kapalıyken ya da oturum doğrulanmadan çizilirler),
* bu yüzden kendi küçük düzenleri var. */
.hata-sayfasi { display: grid; place-items: center; padding: 60px 20px; flex: 1; }
.hata-kutu {
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r-lg); box-shadow: var(--golge-2);
padding: 32px; max-width: 520px; text-align: center;
}
.hata-kutu h1 { font-size: 1.25rem; margin-bottom: 10px; }
.hata-kutu p { color: var(--metin-2); margin-bottom: 20px; }
/* ---- Dar ekran ---------------------------------------------------------
* Eskiden hiç kırılma noktası yoktu: `table.bilgi`nin 170px sabit etiket
* sütunu telefonda değerleri iki harfe sıkıştırıyordu. */
@media (max-width: 640px) {
body { font-size: 14.5px; }
.govde { padding: 24px 16px 44px; }
h1 { font-size: 1.45rem; }
.kart { padding: 18px; border-radius: var(--r); }
.kod { font-size: 1.05rem; letter-spacing: .06em; padding: 12px 14px; }
/* Etiket-değer tablosu satır satır yığılıyor. */
table.bilgi, table.bilgi tbody, table.bilgi tr, table.bilgi th, table.bilgi td {
display: block; width: auto;
}
table.bilgi tr { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
table.bilgi tr:last-child { border-bottom: 0; }
table.bilgi th { border: 0; padding: 0 0 3px; font-size: .82rem; }
table.bilgi td { border: 0; padding: 0; }
.form { max-width: none; }
.satir-form { gap: 8px; }
.satir-form input, input.kisa { width: 100%; }
.satir-form .dugme { width: 100%; }
.filtre { grid-template-columns: 1fr; }
.filtre .filtre-ara { grid-column: auto; }
.kisi { padding-left: 0; border-left: 0; }
.alt { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ---- Hesabım → Kurulum: sunucu bilgileri formu ve yapay zekâ talimatı ----
* Form, süzgeç kutusunun (details) içinde; iç boşluk kutunun kenarından.
* Talimat uzun düz metin: yatay kaydırma yerine satır kırılıyor — müşteri
* okuyup kopyalamadan önce ne verdiğini görebilmeli. */
.kur-form-kutu .form { padding: 0 18px 18px; max-width: 520px; }
.kur-panel pre.kur-prompt {
background: var(--kagit-3); border: 1px solid var(--cizgi);
border-radius: var(--r-sm); padding: 12px 14px; margin: 9px 0 0;
white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
}
/* İç sekmeler (Yapay zekâ / Manuel): radyo + etiket, betiksiz. Radyo gizli
* ama klavyeyle erişilebilir (ok tuşları); odak halkası etikette. */
.kur-sekmeler { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 22px; }
.kur-rd { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kur-sekmeler > label {
cursor: pointer; padding: 10px 16px; font-weight: 600; font-size: .95rem;
color: var(--metin-2); border-bottom: 2px solid transparent;
}
.kur-sekmeler > label:hover { color: var(--marka); }
.kur-rd:checked + label { color: var(--marka); border-bottom-color: var(--marka); }
.kur-rd:focus-visible + label { outline: 2px solid var(--marka-2); outline-offset: 2px; border-radius: var(--r-sm); }
.kur-panel code.parmak-izi { overflow-wrap: anywhere; }
.kur-panel { display: none; flex-basis: 100%; min-width: 0; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.kur-rd-ai:checked ~ .kur-panel-ai, .kur-rd-el:checked ~ .kur-panel-el { display: block; }
@media (max-width: 560px) {
.kur-sekmeler > label { flex: 1 1 auto; text-align: center; padding: 10px 8px; }
}
/* ===========================================================================
* SOL MENÜ: ALT MENÜ VE DARALTMA (LIC-202, 2026-10-06)
* ---------------------------------------------------------------------------
* Sayfa bölümleri ("Bu sayfada") içeriğin sağında ayrı bir kutudaydı; iki
* gezinme iki ayrı yerdeydi. Artık sol menüde, sayfanın öğesinin altında
* ile açılıp kapanan bir alt menü. Menünün kendisi de bir düğmeyle
* simgelere daralıyor; tercih tarayıcıda hatırlanıyor (portal.js).
* ======================================================================== */
.kenar-daralt {
margin-top: auto;
display: flex; align-items: center; gap: 11px;
width: 100%; padding: 9px 12px 9px 14px; border-radius: var(--r-sm);
background: transparent; border: 0; font: inherit; font-size: .86rem; font-weight: 600;
color: var(--kenar-metin-2); cursor: pointer; text-align: left;
}
.kenar-daralt:hover { color: var(--kenar-metin); background: var(--kenar-zemin-2); }
.kenar-daralt[hidden] { display: none; }
/* Düğme alttaki boşluğu kendisi alıyor; kişi bilgisi onun hemen altında. */
.kenar:has(.kenar-daralt:not([hidden])) .kenar-alt { margin-top: 0; }
.kenar-daralt .ikon { width: 18px; height: 18px; }
.ikon {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.kenar-yazi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Alt menülü öğe: başlık bir bağlantı, yanındaki ok grubu açıp kapatıyor. */
.kenar-grup > summary { list-style: none; cursor: pointer; }
.kenar-grup > summary::-webkit-details-marker { display: none; }
.kenar-oge-sar { display: flex; align-items: center; border-radius: var(--r-sm); }
.kenar-oge-sar .kenar-oge { flex: 1; min-width: 0; }
.kenar-oge-sar:hover { background: var(--kenar-zemin-2); }
.kenar-oge-sar:hover .kenar-oge { background: transparent; }
.kenar-oge-sar.etkin { background: var(--kenar-zemin-2); }
.kenar-ok {
display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
color: var(--kenar-metin-2); border-radius: var(--r-sm);
}
.kenar-ok:hover { color: var(--kenar-metin); }
.kenar-ok .ikon { width: 15px; height: 15px; transition: transform .15s ease; }
.kenar-grup[open] .kenar-ok .ikon { transform: rotate(90deg); }
.kenar-alt-menu {
display: flex; flex-direction: column; gap: 1px;
margin: 4px 0 6px 25px; padding-left: 12px;
border-left: 1px solid var(--kenar-cizgi);
}
.kenar-alt-menu a {
display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
padding: 6px 10px; border-radius: var(--r-sm);
color: var(--kenar-metin-2); font-size: .86rem; font-weight: 600;
}
.kenar-alt-menu a:hover { color: var(--kenar-metin); background: var(--kenar-zemin-2); text-decoration: none; }
.kenar-alt-menu .menu-sayi { color: var(--kenar-metin-2); }
/* Seçili alt öğe: süzgeçte sunucu işaretliyor (`etkin`); sekme kipinde adres
* çubuğundaki çapa — n'inci bağlantı n'inci çapa (bkz. sekme kipi kuralları). */
.kenar-alt-menu a.etkin,
body:has(.sayfa.sekmeli):not(:has(.capa:target)) .kenar-alt-menu.sekmeli a:nth-of-type(1),
body:has(.capa:nth-of-type(1):target) .kenar-alt-menu.sekmeli a:nth-of-type(1),
body:has(.capa:nth-of-type(2):target) .kenar-alt-menu.sekmeli a:nth-of-type(2),
body:has(.capa:nth-of-type(3):target) .kenar-alt-menu.sekmeli a:nth-of-type(3),
body:has(.capa:nth-of-type(4):target) .kenar-alt-menu.sekmeli a:nth-of-type(4),
body:has(.capa:nth-of-type(5):target) .kenar-alt-menu.sekmeli a:nth-of-type(5),
body:has(.capa:nth-of-type(6):target) .kenar-alt-menu.sekmeli a:nth-of-type(6) {
color: #fff; background: var(--kenar-vurgu-bg);
box-shadow: inset 2px 0 0 var(--kenar-vurgu);
}
/* DARALTILMIŞ: yalnız simgeler. Alt menüler, yazılar ve alt bilgi gizli;
* her öğenin adı `title`da (fareyle üstüne gelince) duruyor. */
@media (min-width: 901px) {
body.yonetim.kenar-dar { grid-template-columns: 68px minmax(0, 1fr); }
body.kenar-dar .kenar { padding: 16px 10px; }
body.kenar-dar .kenar .marka,
body.kenar-dar .kenar-yazi,
body.kenar-dar .kenar-ok,
body.kenar-dar .kenar-alt-menu,
body.kenar-dar .kenar-alt { display: none; }
body.kenar-dar .kenar-oge,
body.kenar-dar .kenar-daralt { justify-content: center; padding: 10px; gap: 0; }
}
/* Dar ekranda menü zaten yatay şerit; daraltma düğmesi gereksiz. Alt menü
* şeridin içinde yan yana akıyor. */
@media (max-width: 900px) {
.kenar-daralt { display: none; }
.kenar-grup, .kenar-grup[open] { display: flex; align-items: center; }
.kenar-grup > summary { display: flex; }
.kenar-alt-menu { flex-direction: row; margin: 0 0 0 4px; padding-left: 8px; }
.kenar-alt-menu a { white-space: nowrap; }
}
/* ===========================================================================
* LİSANSLARIM — liste, yeni lisans, simge düğmeleri (LIC-202)
* ======================================================================== */
.liste-ust {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px 20px; flex-wrap: wrap; margin: 0 0 14px;
}
/* Özet satırı tek satır: `.aciklama`nın 62ch sınırı burada metni ikiye bölüyordu.
* Dar ekranda yine sarılıyor (taşma yerine). */
.liste-ust .aciklama { margin: 8px 0 0; max-width: none; flex: 1 1 auto; }
.liste-ust-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.sekme-serit {
display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px;
border-bottom: 1px solid var(--cizgi);
}
.sekme-serit a {
padding: 8px 14px; margin-bottom: -1px; font-weight: 600; font-size: .92rem;
color: var(--metin-2); border-bottom: 2px solid transparent;
}
.sekme-serit a:hover { color: var(--metin); text-decoration: none; }
/* Seçili sekme: n'inci bağlantı n'inci çapa; çapa yokken ilk bağlantı. */
.sayfa.sekmeli:not(:has(.capa:target)) .sekme-serit a:nth-of-type(1),
.sayfa.sekmeli:has(.capa:nth-of-type(1):target) .sekme-serit a:nth-of-type(1),
.sayfa.sekmeli:has(.capa:nth-of-type(2):target) .sekme-serit a:nth-of-type(2),
.sayfa.sekmeli:has(.capa:nth-of-type(3):target) .sekme-serit a:nth-of-type(3) {
color: var(--marka); border-bottom-color: var(--marka);
}
.dugme > .ikon { width: 16px; height: 16px; stroke-width: 2.2; vertical-align: -3px; margin-right: 3px; }
table.liste-tablo.lisans-tablo { min-width: 860px; }
.kod-satir { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.kod-kucuk { font-family: var(--mono); font-size: .8rem; color: var(--metin-2); letter-spacing: .02em; white-space: nowrap; }
.islemler { display: inline-flex; align-items: center; gap: 6px; }
.ikon-form { display: inline; margin: 0; }
.ikon-dugme {
display: inline-grid; place-items: center;
width: 32px; height: 32px; padding: 0;
border: 1px solid var(--cizgi); border-radius: var(--r-sm);
background: var(--kagit); color: var(--metin-2);
cursor: pointer; list-style: none;
transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ikon-dugme::-webkit-details-marker { display: none; }
.ikon-dugme .ikon { width: 17px; height: 17px; }
.ikon-dugme:hover { color: var(--marka-koyu); border-color: var(--marka); background: var(--marka-bg); text-decoration: none; }
.ikon-dugme.tehlike:hover { color: var(--kotu); border-color: var(--kotu); background: var(--kotu-bg); }
/* Soluk olan SİMGE, düğmenin kendisi değil: `opacity` ipucu baloncuğuna da
* miras kalıyor ve "neden silinemez" açıklaması silik okunuyordu. */
.ikon-dugme.pasif { cursor: not-allowed; border-color: var(--kagit-3); }
.ikon-dugme.pasif .ikon { opacity: .35; }
.ikon-dugme.pasif:hover { color: var(--metin-2); border-color: var(--cizgi); background: var(--kagit); }
.ikon-dugme[hidden] { display: none; }
.kod-satir .ikon-dugme { width: 26px; height: 26px; }
.kod-satir .ikon-dugme .ikon { width: 14px; height: 14px; }
.ikon-dugme.kopyala.tamam { color: var(--iyi); border-color: var(--iyi); background: var(--iyi-bg); }
/* Adlandırma: simgenin altında açılan küçük kart (betiksiz, ). */
.islem-kutu { position: relative; display: inline-block; }
.islem-kutu[open] > summary { color: var(--marka-koyu); border-color: var(--marka); background: var(--marka-bg); }
.islem-form {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
display: flex; gap: 8px; align-items: center;
padding: 10px; width: 300px;
background: var(--kagit); border: 1px solid var(--cizgi);
border-radius: var(--r); box-shadow: var(--golge-2);
}
.islem-form input[type="text"] {
flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: .88rem;
color: var(--metin); background: var(--kagit-2);
border: 1px solid var(--cizgi-alan); border-radius: var(--r-sm);
}
.liste li .ikon { width: 15px; height: 15px; vertical-align: -2px; }
.kart-baslik { margin-top: 0; }
.kart-baslik small { margin-left: 8px; font-weight: 500; }
/* ---- İpucu baloncuğu (LIC-202) --------------------------------------------
* Tarayıcının `title` ipucu geç çıkıyor, küçük ve soluk; simge düğmelerinin
* ne yaptığı ancak tahminle anlaşılıyordu. Baloncuk üstte, HEMEN, koyu zeminde.
* Sağa yaslı açılıyor: sağ kenardaki düğmelerde tablonun kaydırma kutusu
* ortalı bir baloncuğu kesiyordu. Renkler iki kipte de ters (metin/kağıt). */
[data-ipucu] { position: relative; }
[data-ipucu]::after,
[data-ipucu]::before {
position: absolute; pointer-events: none; opacity: 0;
transition: opacity .08s ease; z-index: 30;
}
[data-ipucu]::after {
content: attr(data-ipucu);
right: -4px; bottom: calc(100% + 9px);
padding: 6px 10px; border-radius: 6px;
background: var(--metin); color: var(--kagit);
font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
box-shadow: var(--golge-2);
}
[data-ipucu]::before {
content: ""; right: 11px; bottom: calc(100% + 4px);
border: 5px solid transparent; border-top-color: var(--metin); border-bottom: 0;
}
[data-ipucu]:hover::after, [data-ipucu]:hover::before,
[data-ipucu]:focus-visible::after, [data-ipucu]:focus-visible::before { opacity: 1; }
/* Açık adlandırma kutusunun üstüne binmesin. */
.islem-kutu[open] > [data-ipucu]::after, .islem-kutu[open] > [data-ipucu]::before { opacity: 0; }
/* ---- Modal (LIC-202) ------------------------------------------------------
*