/* ═══════════════════════════════════════════════════════════════════════
REHBERBOX — ORTAK TASARIM SİSTEMİ (kt-tema.css) v1.0
───────────────────────────────────────────────────────────────────────
Tek kaynak. Tüm ürünler (Tercih Robotu, Lise Tercih Robotu, Koçum Benim,
KütüphaneBul, ana site) bu dosyayı link'ler.
Kullanım:
data-kt-urun değerleri: tercih · lise · kocluk · kutuphane · kurumsal
Ürün aksanı sadece --kt-vurgu üçlüsünü değiştirir; kabuk aynı kalır.
KURAL: Yeni CSS'te sabit hex yazma. Bir renk gerekiyorsa önce buraya ekle.
ERİŞİLEBİLİRLİK: Buradaki tüm metin/zemin çiftleri WCAG AA (4.5:1) veya
üzeridir; oranlar yorumlarda yazılı. Bir renk değiştirirsen oranı yeniden
ölç — özellikle beyaz yazı taşıyan zeminleri.
═══════════════════════════════════════════════════════════════════════ */
/* ── FONTLAR ──────────────────────────────────────────────────────────
Gömülü, latin+latin-ext birleşik Türkçe alt kümeler. Dış bağlantı YOK
(Google Fonts çağrısı yok → daha hızlı, KVKK açısından da temiz).
Yol bu dosyaya görecelidir: /ortak/fontlar/
------------------------------------------------------------------- */
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap;
src:url('fontlar/sora-tr-600.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap;
src:url('fontlar/sora-tr-700.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap;
src:url('fontlar/sora-tr-800.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
src:url('fontlar/ibm-plex-sans-tr-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
src:url('fontlar/ibm-plex-sans-tr-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
src:url('fontlar/ibm-plex-sans-tr-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
src:url('fontlar/ibm-plex-sans-tr-700.woff2') format('woff2'); }
/* ═══════════════════════ 1. TOKEN'LAR ═══════════════════════════════ */
:root {
/* ── Marka ──────────────────────────────────────────────────────────
Yeşil logodan gelir. #49826d idi; beyaz yazı altında 4.47:1 ile AA
eşiğini KIL PAYI kaçırıyordu. #49816c'ye çekildi → 4.51:1. Gözle
ayırt edilemez, ama tüm butonlar artık AA. */
--kt-yesil: #49816c; /* 4.51:1 beyaz üstünde — AA */
--kt-yesil-koyu: #3a6a58; /* 6.21:1 — hover / basılı durum */
--kt-yesil-acik: #e6f0ec; /* yumuşak zemin, koyu yazı ile */
--kt-antrasit: #25272e; /* 14.91:1 — AAA */
--kt-antrasit-koyu:#1b1d23;
/* ── Yüzeyler ── */
--kt-zemin: #f4f5f6;
--kt-zemin-2: #eceef0;
--kt-kart: #ffffff;
--kt-cizgi: #e3e5e8;
--kt-cizgi-koyu: #cfd3d8;
/* ── Metin ── */
--kt-metin: #25272e; /* 13.66:1 zemin üstünde — AAA */
--kt-metin-soluk: #6b7078; /* 4.57:1 zemin üstünde — AA */
--kt-metin-ters: #ffffff;
/* ── Vurgu (ürün ezer — bkz. bölüm 2) ── */
--kt-vurgu: var(--kt-yesil);
--kt-vurgu-koyu: var(--kt-yesil-koyu);
--kt-vurgu-acik: var(--kt-yesil-acik);
/* ── Anlamsal ──────────────────────────────────────────────────────
"-zemin" tonları YUMUŞAK; üzerlerine daima koyu yazı gelir.
Düz tonlar beyaz yazı taşıyabilir (hepsi ≥4.5:1). */
--kt-basari: #2f7d5b; --kt-basari-zemin: #e7f3ec;
--kt-uyari: #9b6e15; --kt-uyari-zemin: #fbf2dd; /* 4.51:1 */
--kt-hata: #b3473b; --kt-hata-zemin: #fbe9e7;
--kt-bilgi: #2d6a9f; --kt-bilgi-zemin: #e6f1fb; /* 5.72:1 */
--kt-pasif: #9aa0a6;
/* ── Tipografi ── */
--kt-font-baslik: 'Sora','Segoe UI',sans-serif;
--kt-font-govde: 'IBM Plex Sans','Segoe UI',sans-serif;
--kt-font-mono: ui-monospace,'SF Mono',Menlo,'Courier New',monospace;
/* Akışkan ölçek — mobilde küçülür, geniş ekranda büyür. Ayrı
media query gerekmez. */
--kt-yazi-xs: .75rem;
--kt-yazi-s: .875rem;
--kt-yazi-m: 1rem;
--kt-yazi-l: 1.125rem;
--kt-yazi-xl: clamp(1.25rem, 1.10rem + 0.6vw, 1.50rem);
--kt-yazi-2xl: clamp(1.50rem, 1.20rem + 1.4vw, 2.25rem);
--kt-yazi-3xl: clamp(1.875rem, 1.30rem + 2.6vw, 3.00rem);
--kt-satir-sik: 1.25; /* başlıklar */
--kt-satir-normal: 1.55; /* gövde */
--kt-harf-baslik: -.015em;
/* ── Boşluk (4px tabanlı) ── */
--kt-b1: .25rem; --kt-b2: .5rem; --kt-b3: .75rem; --kt-b4: 1rem;
--kt-b5: 1.5rem; --kt-b6: 2rem; --kt-b7: 3rem; --kt-b8: 4rem;
/* ── Form ── */
--kt-yari: 12px;
--kt-yari-s: 8px;
--kt-yari-hap: 999px;
--kt-golge-s: 0 1px 3px rgba(37,39,46,.06);
--kt-golge-m: 0 1px 3px rgba(37,39,46,.06), 0 8px 20px -12px rgba(37,39,46,.22);
--kt-golge-l: 0 1px 3px rgba(37,39,46,.06), 0 20px 42px -24px rgba(37,39,46,.34);
--kt-gecis: 160ms cubic-bezier(.4,0,.2,1);
--kt-kap: 1120px; /* ortak içerik genişliği */
}
/* ═══════════════════════ 2. ÜRÜN AKSANLARI ══════════════════════════
Sadece vurgu üçlüsü değişir. Üst bar, tipografi, kart, buton formu
her üründe AYNI kalır — "aynı ailenin ürünü" hissini bu sağlar.
═══════════════════════════════════════════════════════════════════ */
[data-kt-urun="tercih"] { --kt-vurgu:#49816c; --kt-vurgu-koyu:#3a6a58; --kt-vurgu-acik:#e6f0ec; }
[data-kt-urun="lise"] { --kt-vurgu:#9b6e15; --kt-vurgu-koyu:#7d5810; --kt-vurgu-acik:#fbf2dd; }
[data-kt-urun="kocluk"] { --kt-vurgu:#1e3a5f; --kt-vurgu-koyu:#274b78; --kt-vurgu-acik:#e9f1fa; }
[data-kt-urun="kutuphane"] { --kt-vurgu:#9d6d17; --kt-vurgu-koyu:#7f5813; --kt-vurgu-acik:#f3ece0;
/* KütüphaneBul'un krem kimliği korunur — tek istisna, bilinçli. */
--kt-zemin:#faf6ee; --kt-zemin-2:#f3ece0; --kt-kart:#fffdf8; --kt-cizgi:#e4dccd; }
[data-kt-urun="kurumsal"] { --kt-vurgu:#49816c; --kt-vurgu-koyu:#3a6a58; --kt-vurgu-acik:#e6f0ec; }
/* ═══════════════════════ 3. KOYU TEMA (opt-in) ══════════════════════
BİLİNÇLİ OLARAK prefers-color-scheme'e bağlanmadı: mevcut ürünler
açık tema varsayımıyla yazıldı, otomatik açılsa bozulurlardı.
Açmak için:
Bir ürün sistem tercihine uymak isterse kendi dosyasında:
@media (prefers-color-scheme: dark){ :root{ ... } }
═══════════════════════════════════════════════════════════════════ */
[data-kt-tema="koyu"] {
--kt-zemin:#141619; --kt-zemin-2:#1b1d21; --kt-kart:#1e2126;
--kt-cizgi:#2c3037; --kt-cizgi-koyu:#3a3f47;
--kt-metin:#e9ebee; --kt-metin-soluk:#a2a8b0; --kt-metin-ters:#141619;
--kt-yesil:#6fae95; --kt-yesil-koyu:#8cc4ad; --kt-yesil-acik:#1f2f2a;
--kt-basari:#5fb98f; --kt-basari-zemin:#172a22;
--kt-uyari:#d0a13f; --kt-uyari-zemin:#2b2417;
--kt-hata:#e0776a; --kt-hata-zemin:#2e1d1a;
--kt-bilgi:#6ba6da; --kt-bilgi-zemin:#17242e;
--kt-golge-s:0 1px 3px rgba(0,0,0,.5);
--kt-golge-m:0 1px 3px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.8);
--kt-golge-l:0 1px 3px rgba(0,0,0,.5), 0 20px 42px -24px rgba(0,0,0,.9);
}
[data-kt-tema="koyu"][data-kt-urun="lise"],
[data-kt-tema="koyu"] [data-kt-urun="lise"] { --kt-vurgu:#d4a63f; --kt-vurgu-koyu:#e3bb63; --kt-vurgu-acik:#2b2417; }
[data-kt-tema="koyu"][data-kt-urun="kocluk"],
[data-kt-tema="koyu"] [data-kt-urun="kocluk"] { --kt-vurgu:#5aa2e8; --kt-vurgu-koyu:#7fb8ee; --kt-vurgu-acik:#16283c; }
[data-kt-tema="koyu"][data-kt-urun="kutuphane"],
[data-kt-tema="koyu"] [data-kt-urun="kutuphane"] { --kt-vurgu:#d4a63f; --kt-vurgu-koyu:#e3bb63; --kt-vurgu-acik:#2b2417;
--kt-zemin:#17150f; --kt-zemin-2:#1e1b14; --kt-kart:#211e17; --kt-cizgi:#332e23; }
/* ═══════════════════════ 4. TEMEL ═══════════════════════════════════
.kt sınıfı taşıyan kapsayıcıya uygulanır — mevcut sayfaların global
stilini ezmemek için body'ye değil sınıfa bağlı.
═══════════════════════════════════════════════════════════════════ */
.kt {
font-family: var(--kt-font-govde);
font-size: var(--kt-yazi-m);
line-height: var(--kt-satir-normal);
color: var(--kt-metin);
background: var(--kt-zemin);
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
.kt *, .kt *::before, .kt *::after { box-sizing: border-box; }
.kt h1, .kt h2, .kt h3, .kt h4 {
font-family: var(--kt-font-baslik);
line-height: var(--kt-satir-sik);
letter-spacing: var(--kt-harf-baslik);
margin: 0;
}
.kt h1 { font-size: var(--kt-yazi-3xl); font-weight: 800; }
.kt h2 { font-size: var(--kt-yazi-2xl); font-weight: 700; }
.kt h3 { font-size: var(--kt-yazi-xl); font-weight: 700; }
.kt h4 { font-size: var(--kt-yazi-l); font-weight: 600; }
.kt p { margin: 0; }
/* Vurgu rengi YALNIZCA çıplak metin bağlantılarına uygulanır.
Sınıf taşıyan bağlantılar (.kt-btn, kart, menü…) kendi rengini taşır.
:where() özgüllüğü sıfırlar → bu kural (0,1,0)'da kalır ve HER bileşen
kuralı onu rahatça ezer. Düz `.kt a` yazılsaydı (0,1,1) olur, buton
kuralını (0,1,0) ezer, birincil butonun yazısı kendi zeminiyle aynı
renge düşüp GÖRÜNMEZ olurdu. Footer'da da aynı tuzak var. */
.kt :where(a:not([class])) { color: var(--kt-vurgu); text-underline-offset: .18em; }
/* Klavye odağı — her yerde görünür olmalı. Fareyle tıklamada çıkmaz. */
.kt :focus-visible {
outline: 2px solid var(--kt-vurgu);
outline-offset: 2px;
border-radius: var(--kt-yari-s);
}
/* Hareket hassasiyeti olan kullanıcılar için animasyonları kes */
@media (prefers-reduced-motion: reduce) {
.kt *, .kt *::before, .kt *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
/* Klavyeyle gezenler için "içeriğe atla" — üst barın önüne konur */
.kt-atla {
position:absolute; left:-9999px; top:0; z-index:100;
padding:var(--kt-b2) var(--kt-b4); background:var(--kt-vurgu);
color:#fff; border-radius:0 0 var(--kt-yari-s) 0; font-weight:600;
}
.kt-atla:focus { left:0; }
/* ═══════════════════════ 5. BİLEŞENLER ══════════════════════════════ */
/* ── Kapsayıcı ── */
.kt-kap { width:100%; max-width:var(--kt-kap); margin-inline:auto; padding-inline:var(--kt-b4); }
/* ── Üst bar — ortak kabuk. Ürünler arası TEK fark vurgu rengidir. ── */
.kt-ustbar {
position:sticky; top:0; z-index:50;
display:flex; align-items:center; gap:var(--kt-b5);
min-height:60px; padding:0 var(--kt-b4);
background:var(--kt-kart);
border-bottom:1px solid var(--kt-cizgi);
}
.kt-ustbar__logo { display:flex; align-items:center; gap:var(--kt-b2); flex:0 0 auto; }
.kt-ustbar__logo img { height:26px; width:auto; display:block; }
.kt-ustbar__menu { display:flex; align-items:center; gap:var(--kt-b1); flex:1 1 auto;
overflow-x:auto; scrollbar-width:none; }
.kt-ustbar__menu::-webkit-scrollbar { display:none; }
.kt-ustbar__bag {
display:inline-flex; align-items:center; gap:var(--kt-b2);
padding:var(--kt-b2) var(--kt-b3); border-radius:var(--kt-yari-s);
font-size:var(--kt-yazi-s); font-weight:500; white-space:nowrap;
color:var(--kt-metin-soluk); text-decoration:none;
transition:background var(--kt-gecis), color var(--kt-gecis);
}
.kt-ustbar__bag:hover { background:var(--kt-zemin-2); color:var(--kt-metin); }
.kt-ustbar__bag[aria-current] { background:var(--kt-vurgu); color:#fff; }
/* ── Buton ──────────────────────────────────────────────────────────
Üç seviye. Bir ekranda YALNIZCA BİR tane --birincil bulunmalı;
iki eşit ağırlıklı birincil buton kullanıcıyı tereddütte bırakır. */
.kt-btn {
display:inline-flex; align-items:center; justify-content:center; gap:var(--kt-b2);
min-height:44px; /* dokunma hedefi — mobil */
padding:var(--kt-b3) var(--kt-b5);
font-family:var(--kt-font-govde); font-size:var(--kt-yazi-m); font-weight:600;
border:1px solid transparent; border-radius:var(--kt-yari-s);
cursor:pointer; text-decoration:none; white-space:nowrap;
transition:background var(--kt-gecis), border-color var(--kt-gecis), transform var(--kt-gecis);
}
.kt-btn:active { transform:translateY(1px); }
.kt-btn[disabled], .kt-btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }
/* .kt öneki bilinçli: kullanıldığında bağlantı
renk kurallarının önüne geçmesi için özgüllük gerekiyor. */
.kt .kt-btn--birincil, .kt-btn--birincil { background:var(--kt-vurgu); color:#fff; }
.kt .kt-btn--birincil:hover, .kt-btn--birincil:hover { background:var(--kt-vurgu-koyu); }
.kt .kt-btn--ikincil, .kt-btn--ikincil { background:var(--kt-kart); color:var(--kt-metin); border-color:var(--kt-cizgi-koyu); }
.kt .kt-btn--ikincil:hover, .kt-btn--ikincil:hover { border-color:var(--kt-vurgu); color:var(--kt-vurgu); }
.kt .kt-btn--sessiz, .kt-btn--sessiz { background:transparent; color:var(--kt-metin-soluk); }
.kt .kt-btn--sessiz:hover, .kt-btn--sessiz:hover { background:var(--kt-zemin-2); color:var(--kt-metin); }
.kt-btn--kucuk { min-height:36px; padding:var(--kt-b2) var(--kt-b3); font-size:var(--kt-yazi-s); }
/* ── Kart ── */
.kt-kart {
background:var(--kt-kart); border:1px solid var(--kt-cizgi);
border-radius:var(--kt-yari); padding:var(--kt-b5); box-shadow:var(--kt-golge-s);
}
.kt-kart--tiklanir { transition:box-shadow var(--kt-gecis), border-color var(--kt-gecis); }
.kt-kart--tiklanir:hover { box-shadow:var(--kt-golge-m); border-color:var(--kt-vurgu); }
/* ── Rozet / etiket ─────────────────────────────────────────────────
Yumuşak zemin + koyu yazı. Renk TEK BAŞINA anlam taşımamalı;
yanında daima metin olsun (renk körlüğü). */
.kt-rozet {
display:inline-flex; align-items:center; gap:var(--kt-b1);
padding:var(--kt-b1) var(--kt-b3); border-radius:var(--kt-yari-hap);
font-size:var(--kt-yazi-xs); font-weight:600; white-space:nowrap;
background:var(--kt-vurgu-acik); color:var(--kt-vurgu-koyu);
}
.kt-rozet--basari { background:var(--kt-basari-zemin); color:var(--kt-basari); }
.kt-rozet--uyari { background:var(--kt-uyari-zemin); color:var(--kt-uyari); }
.kt-rozet--hata { background:var(--kt-hata-zemin); color:var(--kt-hata); }
.kt-rozet--bilgi { background:var(--kt-bilgi-zemin); color:var(--kt-bilgi); }
.kt-rozet--notr { background:var(--kt-zemin-2); color:var(--kt-metin-soluk); }
/* ── Form alanı ── */
.kt-alan {
width:100%; min-height:44px; padding:var(--kt-b3) var(--kt-b4);
font-family:var(--kt-font-govde); font-size:var(--kt-yazi-m); color:var(--kt-metin);
background:var(--kt-kart); border:1px solid var(--kt-cizgi-koyu);
border-radius:var(--kt-yari-s); transition:border-color var(--kt-gecis);
}
.kt-alan::placeholder { color:var(--kt-metin-soluk); }
.kt-alan:hover { border-color:var(--kt-metin-soluk); }
/* ── Ürün ızgarası (ana sayfa vitrini) ── */
.kt-izgara {
display:grid; gap:var(--kt-b4);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
/* ── Bölüm aralığı ── */
.kt-bolum { padding-block:var(--kt-b7); }
.kt-bolum__ust { display:flex; flex-direction:column; gap:var(--kt-b2); margin-bottom:var(--kt-b5); }
.kt-bolum__etiket {
font-size:var(--kt-yazi-xs); font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--kt-vurgu);
}
.kt-bolum__aciklama { color:var(--kt-metin-soluk); max-width:60ch; }
/* ── Yardımcılar ── */
.kt-soluk { color:var(--kt-metin-soluk); }
.kt-vurgulu { color:var(--kt-vurgu); }
.kt-gizli { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }