/* Geopus — AiPrise ağırlıklı, Sardine'den seçili eklemeler.
Renkler ve ölçüler RECON/design-dna.json'dan; hepsi canlı sayfadan ölçüldü. */
:root {
--murekkep: #060C1B;
--murekkep-2: #222E41;
--soluk: #4E5D73;
/* Küçük punto ikincil metinler için: beyazda 4,62, açık gride 4,34.
Eski var(--soluk-2) / var(--soluk-2) değerleri 2,4-2,7 veriyordu ve Lighthouse
erişilebilirlik denetiminde düşüyordu. */
--soluk-2: #5D6A7B;
--krem: #EDEBE8;
--acik: #F8F7F6;
--koyu: #0B0C14;
--kirmizi: #FF0A00; /* marka rengi — ZEMİN olarak kullanılır */
/* Aynı kırmızı METİN olarak beyaz üstünde 3,97 kontrast veriyor (eşik 4,5).
Marka rengi değişmiyor; yalnızca metin için koyulaştırılmış eşi var. */
--kirmizi-metin: #D00600; /* beyazda 5,66 · kremde 5,29 · pembede 4,82 */
/* Koyu zeminde tersi geçerli: koyulaştırılmış ton 3,45'e düşüyor,
marka kırmızısı ise 5,3 veriyor. Koyu bölümlerde bu kullanılır. */
--beyaz: #FFFFFF;
--cizgi: #E3E0DA;
--baslik: "Plus Jakarta Sans", system-ui, sans-serif;
--govde: "DM Sans", system-ui, sans-serif;
--mono: "DM Mono", ui-monospace, monospace;
--en: 1180px;
--bolum-bosluk: clamp(80px, 11vw, 150px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--govde);
color: var(--murekkep);
background: var(--beyaz);
font-size: 17px; /* 40+ okunurluğu: gövde ≥17px */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.kap { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 24px; }
/* ---------- tipografi ---------- */
h1, h2, h3 { font-family: var(--baslik); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h1 { font-size: clamp(40px, 6.2vw, 76px); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -0.015em; }
/* Sardine detayı: başlığın son satırı soluklaşır */
.solgun { color: #5A6980; }
/* Sardine detayı: mono bölüm etiketi, önünde elmas */
.etiket {
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--soluk);
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
}
.etiket::before { content: "◆"; color: var(--kirmizi-metin); font-size: 9px; }
.koyu-bolum .etiket { color: #8A97AA; }
.giris { font-size: 18px; color: var(--murekkep-2); max-width: 62ch; }
/* ---------- butonlar ---------- */
.dugme {
display: inline-flex; align-items: center; gap: 9px;
padding: 13px 26px; border-radius: 999px; border: 0;
font-family: var(--govde); font-size: 15.5px; font-weight: 500;
background: var(--murekkep); color: var(--beyaz);
cursor: pointer; text-decoration: none;
transition: transform .18s ease, opacity .18s ease;
}
.dugme:hover { transform: translateY(-1px); opacity: .92; }
.dugme.kirmizi { background: var(--kirmizi); }
.dugme.hayalet { background: transparent; color: var(--murekkep); border: 1px solid var(--cizgi); }
.koyu-bolum .dugme.hayalet { color: var(--beyaz); border-color: rgba(255,255,255,.22); }
/* ---------- nav ---------- */
/* ---- üst şerit: ölçüm sürüyor ---- */
.nav-serit { position: sticky; top: 0; z-index: 61; height: 28px; overflow: hidden;
display: flex; align-items: center; background: var(--murekkep); color: #E8EDF3; }
.ns-akis { display: flex; gap: 34px; white-space: nowrap; padding-left: 34px;
animation: ns-kay 42s linear infinite;
font-family: var(--mono); font-size: 10px; letter-spacing: .09em; }
/* İçerik iki kez yazılı; %50 kaydırınca dikişsiz döner ve şerit boş başlamaz. */
@keyframes ns-kay { to { transform: translateX(-50%); } }
.ns-akis span { display: inline-flex; align-items: center; gap: 7px; color: #A8B4C4; }
.ns-nabiz { width: 5px; height: 5px; border-radius: 50%; background: var(--kirmizi);
animation: ns-nabiz 1.6s ease-in-out infinite; }
@keyframes ns-nabiz { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
.ns-akis { animation: none; padding-left: 22px; }
.ns-nabiz { animation: none; }
}
nav {
position: sticky; top: 28px; z-index: 60;
background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--cizgi);
}
/* üç bölge: marka · plaka menü (ortada) · eylemler — hepsi aynı yükseklikte */
nav .kap { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: 22px; min-height: 62px; }
nav .kap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
a.marka, .marka { display: flex; align-items: center; gap: 10px; font-family: var(--baslik); font-weight: 800;
font-size: 20px; letter-spacing: -0.02em; color: var(--murekkep); text-decoration: none; }
a.marka:hover { opacity: .85; }
.marka img { width: 30px; height: 30px; }
.nav-menu { display: flex; gap: 6px; justify-content: center; }
/* plaka: numara + ad, hero'daki motor plakalarıyla aynı dil.
Eşit yükseklik ve eşit iç boşluk — genişlik metne göre değişir ama
ritim numara sütunuyla korunur. */
.nav-plaka { display: inline-flex; align-items: center; height: 38px;
padding: 0 14px 0 0; background: var(--beyaz);
border: 1px solid var(--cizgi); border-radius: 10px; text-decoration: none;
transition: border-color .16s ease, box-shadow .16s ease; }
.nav-plaka b { display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 100%; margin-right: 12px;
border-right: 1px solid var(--cizgi);
font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .1em;
color: var(--soluk-2); }
.nav-plaka span { font-family: var(--baslik); font-weight: 600; font-size: 13.5px;
letter-spacing: -.01em; color: var(--murekkep); white-space: nowrap; }
.nav-plaka:hover { border-color: #C4CFDC; box-shadow: 0 2px 10px rgba(6,12,27,.06); }
.nav-plaka.aktif { border-color: rgba(255,10,0,.35); background: #FFF8F7; }
.nav-plaka.aktif b { color: var(--kirmizi-metin); border-right-color: rgba(255,10,0,.2); }
.nav-menu a { color: var(--murekkep-2); text-decoration: none; font-size: 15.5px; }
.nav-menu a:hover { color: var(--murekkep); }
.nav-sag { display: flex; align-items: center; gap: 18px; }
/* ---------- hero (AiPrise: ortalanmış + pastel gradyan) ---------- */
.hero {
position: relative; overflow: hidden; text-align: center;
/* üst boşluk sticky nav yüksekliğini (68px) kapsar, başlık altında kalmaz */
padding: clamp(56px, 7vw, 92px) 0 clamp(60px, 7vw, 90px);
background:
radial-gradient(60% 70% at 18% 12%, rgba(255,10,0,.09), transparent 62%),
radial-gradient(55% 65% at 84% 20%, rgba(6,12,27,.10), transparent 60%),
linear-gradient(180deg, #FBF9F7 0%, var(--beyaz) 78%);
}
.hero h1 { max-width: 17ch; margin: 0 auto 22px; }
.hero .giris { margin: 0 auto 30px; text-align: center; }
.rozet {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
padding: 7px 8px 7px 14px; border-radius: 999px;
background: var(--beyaz); border: 1px solid var(--cizgi);
font-size: 13.5px; color: var(--murekkep-2);
}
.rozet b { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
background: var(--kirmizi); color: #fff; padding: 3px 9px; border-radius: 999px; font-weight: 500; }
/* e-posta formu — hero ve kapanışta aynı (Sardine kuralı) */
.form { display: flex; gap: 8px; max-width: 470px; margin: 0 auto; padding: 6px;
background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 999px; }
.form input { flex: 1; border: 0; outline: 0; padding: 0 18px; font-family: var(--govde);
font-size: 15.5px; background: transparent; color: var(--murekkep); }
.form input::placeholder { color: #93A0B2; }
.koyu-bolum .form { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.koyu-bolum .form input { color: var(--beyaz); }
/* hero altı motor kartları (AiPrise'ın KYB/KYC şeridi) */
.motorlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px; }
.motor {
padding: 20px 18px; border-radius: 16px; text-align: left;
border: 1px solid var(--cizgi); background: var(--beyaz);
}
.motor .ad { font-family: var(--baslik); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.motor .alt { font-size: 13.5px; color: var(--soluk); }
.motor:nth-child(1) { background: linear-gradient(160deg, #F4F1FF, #FDFCFF); }
.motor:nth-child(2) { background: linear-gradient(160deg, #FFF3EF, #FFFCFB); }
.motor:nth-child(3) { background: linear-gradient(160deg, #EFF6FF, #FBFDFF); }
.motor:nth-child(4) { background: linear-gradient(160deg, #F0FBF4, #FBFEFC); }
/* ---------- bölümler ---------- */
section { padding: var(--bolum-bosluk) 0; }
.krem-bolum { background: var(--krem); }
.acik-bolum { background: var(--acik); }
.koyu-bolum { background: var(--koyu); color: var(--beyaz); position: relative; overflow: hidden; }
.koyu-bolum h2, .koyu-bolum h3 { color: var(--beyaz); }
.koyu-bolum .giris { color: #AEB9C7; }
/* AiPrise'ın ışık patlaması — orada mor, burada kırmızı */
.koyu-bolum::before {
content: ""; position: absolute; left: -10%; top: -30%;
width: 70%; height: 120%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255,10,0,.30), rgba(255,10,0,.06) 55%, transparent 72%);
filter: blur(28px);
}
.koyu-bolum .kap { position: relative; z-index: 1; }
/* ---------- istatistik şeridi (AiPrise) ---------- */
.sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sayi .buyuk { font-family: var(--baslik); font-weight: 800; font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -0.035em; }
.sayi .kucuk { font-size: 14.5px; color: var(--soluk); margin-top: 4px; }
.koyu-bolum .sayi .kucuk { color: #94A2B4; }
/* ---------- sekmeli bölüm (AiPrise) ---------- */
.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.sekme {
padding: 9px 18px; border-radius: 999px; border: 1px solid var(--cizgi);
background: var(--beyaz); font-family: var(--govde); font-size: 14.5px;
color: var(--murekkep-2); cursor: pointer; transition: .16s;
}
.sekme[aria-selected="true"] { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }
.sekme-govde { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sekme-panel[hidden] { display: none; }
.madde { list-style: none; display: grid; gap: 13px; margin-top: 20px; }
.madde li { display: flex; gap: 11px; font-size: 16px; color: var(--murekkep-2); }
.madde li::before { content: "+"; color: var(--kirmizi-metin); font-weight: 700; }
/* ---------- bento (Sardine) ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kutu { padding: 30px; border-radius: 18px; background: var(--acik); border: 1px solid var(--cizgi); }
.kutu p { color: var(--murekkep-2); margin-top: 10px; font-size: 16px; }
/* Sardine detayı: kart içinde kart */
.ickart { margin-top: 20px; background: var(--beyaz); border: 1px solid var(--cizgi);
border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.ickart + .ickart { margin-top: 8px; }
.ickart b { display: block; font-family: var(--baslik); font-weight: 700; font-size: 15.5px; }
.ickart span { color: var(--soluk); font-size: 14px; }
/* ---------- kanıt / alıntı ---------- */
.kanit { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 16px; padding: 22px 24px; }
.kanit .ust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13.5px; color: var(--soluk); }
.kanit .motor-adi { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
background: var(--murekkep); color: #fff; padding: 4px 10px; border-radius: 5px; }
.kanit blockquote { border-left: 3px solid var(--kirmizi); padding: 4px 0 4px 16px; color: var(--murekkep-2); font-size: 16px; }
.kanit .kaynak { margin-top: 12px; font-size: 13.5px; color: var(--soluk); }
.koyu-bolum .kanit { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.koyu-bolum .kanit blockquote { color: #D3DBE5; }
.koyu-bolum .kanit .ust, .koyu-bolum .kanit .kaynak { color: #93A2B4; }
.koyu-bolum .kanit .motor-adi { background: var(--beyaz); color: var(--murekkep); }
/* ---------- footer (AiPrise: dev wordmark) ---------- */
footer { background: var(--koyu); color: #A9B5C4; padding-top: 74px; overflow: hidden; }
.f-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 46px; }
.f-baslik { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #6E7C8E; margin-bottom: 14px; }
.f-izgara a { display: block; color: #A9B5C4; text-decoration: none; font-size: 15px; margin-bottom: 9px; }
.f-izgara a:hover { color: var(--beyaz); }
.f-alt { border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0; font-size: 13.5px; color: #6E7C8E;
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dev-marka {
font-family: var(--baslik); font-weight: 800; letter-spacing: -0.045em;
font-size: clamp(80px, 19vw, 260px); line-height: .82; text-align: center;
color: rgba(255,255,255,.055); user-select: none; margin-bottom: -.14em; padding-top: 8px;
}
/* ---------- duyarlı ---------- */
@media (max-width: 900px) {
.motorlar, .sayilar { grid-template-columns: repeat(2, 1fr); }
.sekme-govde, .bento { grid-template-columns: 1fr; }
.f-izgara { grid-template-columns: 1fr 1fr; }
.nav-menu { display: none; }
}
@media (max-width: 520px) {
.motorlar, .sayilar, .f-izgara { grid-template-columns: 1fr; }
.form { flex-direction: column; border-radius: 18px; }
.form input { padding: 12px 14px; }
.form .dugme { justify-content: center; }
}
/* ============ çok sayfa eklemeleri ============ */
nav.kayik { box-shadow: 0 1px 18px rgba(6,12,27,.07); }
.marka-isaret { width: 30px; height: 30px; display: inline-flex; }
.marka-isaret svg { width: 100%; height: 100%; }
.marka.beyaz { color: #fff; margin-bottom: 14px; }
.nav-sag .ince { color: var(--murekkep-2); text-decoration: none; font-size: 15.5px; }
.nav-ac { display: none; background: none; border: 0; cursor: pointer; padding: 0;
width: 44px; height: 44px; align-items: center; justify-content: center;
flex-direction: column; gap: 5px; }
.nav-ac span { display: block; width: 20px; height: 2px; border-radius: 2px;
background: var(--murekkep); transition: transform .22s ease, opacity .18s ease; }
body.menu-acik .nav-ac span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-acik .nav-ac span:nth-child(2) { opacity: 0; }
body.menu-acik .nav-ac span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.kap.dar { max-width: 760px; }
.kap.orta { text-align: center; }
.giris.orta { margin-left: auto; margin-right: auto; text-align: center; }
.dugme.buyuk { padding: 15px 30px; font-size: 16px; }
.dugme.tam { width: 100%; justify-content: center; }
.dugme + .dugme { margin-left: 10px; }
.beyaz-kutu { background: var(--beyaz) !important; }
.kirmizi-yazi { color: var(--kirmizi-metin); }
.f-not { font-size: 14.5px; max-width: 30ch; }
.ic-hero { padding: clamp(58px,7vw,92px) 0 clamp(34px,4vw,50px); background: linear-gradient(180deg,#FBF9F7,var(--beyaz)); }
.ic-hero h1 { font-size: clamp(34px,4.8vw,58px); max-width: 20ch; }
.ic-hero .giris { margin-top: 18px; }
.canli-soru { font-family: var(--mono); font-size: 14px; color: var(--murekkep); padding: 14px 6px 4px; min-height: 42px; }
.vurgu-kutu { margin-top: 34px; padding: 22px 26px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.vurgu-kutu p { color: #C6D0DC; font-size: 16.5px; }
.vurgu-kutu.acik-vurgu { background: var(--acik); border-color: var(--cizgi); }
.vurgu-kutu.acik-vurgu p { color: var(--murekkep-2); }
.adimlar { display: grid; gap: 16px; }
.adim { display: grid; grid-template-columns: 78px 1fr; gap: 22px; align-items: start; padding: 26px 0; border-top: 1px solid var(--cizgi); }
.adim .no { font-family: var(--mono); font-size: 13px; color: var(--kirmizi-metin); letter-spacing: .1em; padding-top: 4px; grid-row: 1 / span 2; }
/* Izgara iki sutunlu, icerde uc oge var: paragraf numara sutununa dusup
metni dikey diziyordu. Baslik ve paragraf ikinci sutuna sabitlendi. */
.adim h3, .adim p, .adim .adim-gorsel { grid-column: 2; }
.adim p { color: var(--murekkep-2); margin-top: 8px; max-width: 66ch; }
.acik-kanit { background: var(--acik); }
.yok-not { color: var(--kirmizi-metin); font-size: 14px; display: block; margin-top: 6px; }
.eposta-onizleme { margin-top: 30px; border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; background: var(--beyaz); max-width: 640px; }
.ep-ust { padding: 13px 20px; background: var(--murekkep); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ep-govde { padding: 22px 24px; font-size: 15.5px; }
.ep-govde p { margin-bottom: 12px; }
.ep-ozet { background: var(--acik); border-left: 3px solid var(--kirmizi); padding: 12px 15px; color: var(--murekkep-2); }
.ep-degisim { margin: 16px 0; font-family: var(--mono); font-size: 13.5px; display: grid; gap: 7px; }
.ep-degisim .dus { color: var(--kirmizi-metin); font-weight: 700; }
.ep-degisim .cik { color: #157347; font-weight: 700; }
.ep-dugme { display: inline-block; background: var(--murekkep); color: #fff; padding: 9px 20px; border-radius: 999px; font-size: 14.5px; margin-top: 4px; }
.fiyat-izgara { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.fiyat-kart { padding: 30px 26px; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--beyaz); display: flex; flex-direction: column; }
.fiyat-kart.one-cikan { border-color: var(--murekkep); box-shadow: 0 16px 40px rgba(6,12,27,.09); position: relative; }
.fk-rozet { position: absolute; top: -12px; left: 26px; background: var(--kirmizi); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.fk-ad { font-family: var(--baslik); font-weight: 800; font-size: 21px; }
.fk-not { color: var(--soluk); font-size: 15px; margin-top: 4px; }
.fiyat-kart .madde { margin: 20px 0 26px; flex: 1; }
.fiyat-kart .madde li { font-size: 15.5px; }
.sinir-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.sinir { padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.04); }
.sinir p { color: #AEBAC8; margin-top: 9px; font-size: 15.5px; }
.iletisim-kutu { border: 1px solid var(--cizgi); border-radius: 20px; padding: 30px; background: var(--beyaz); }
.iletisim-kutu label { display: block; margin-bottom: 16px; font-size: 14.5px; color: var(--murekkep-2); }
.iletisim-kutu input, .iletisim-kutu textarea { width: 100%; margin-top: 7px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; font-family: var(--govde); font-size: 16px; color: var(--murekkep); background: var(--acik); }
.iletisim-kutu input:focus, .iletisim-kutu textarea:focus { outline: 2px solid var(--kirmizi); outline-offset: 1px; }
.form-not { margin-top: 16px; font-size: 14px; color: var(--soluk); }
.metin-sayfa h3 { margin: 26px 0 8px; }
.metin-sayfa p { color: var(--murekkep-2); margin-bottom: 10px; }
.metin-not { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--cizgi); font-size: 14.5px; color: var(--soluk); }
a.motor { text-decoration: none; color: inherit; display: block; }
@media (max-width: 900px) {
.fiyat-izgara, .sinir-liste { grid-template-columns: 1fr; }
.adim { grid-template-columns: 56px 1fr; gap: 14px; }
.nav-ac { display: block; }
.dugme + .dugme { margin-left: 0; margin-top: 10px; }
}
/* ---------- hero: motor plakaları ----------
Tasarım kitabı kart 14 (spec-label, SENKO/FIRE serisi) dili: sabit iskelet,
değişken renk. Her plaka aynı yapıda — mono kod + işaret + ad — ama markanın
kendi rengini taşıyor. Kabartma yüzey: üstten ışık, alttan gölge. */
.plakalar { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.plaka {
--renk: #1D1D1D;
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 15px 9px 11px; border-radius: 11px;
background: linear-gradient(150deg, #FFFFFF 0%, #F2EFEA 100%);
border: 1px solid rgba(6,12,27,.07);
box-shadow:
0 2px 4px rgba(6,12,27,.07),
0 6px 16px rgba(6,12,27,.05),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(6,12,27,.045);
transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.plaka:hover {
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(6,12,27,.09),
0 12px 26px rgba(6,12,27,.08),
inset 0 1px 0 rgba(255,255,255,.95);
}
/* mono teknik kod — kart 14'ün "jargon dokusu" */
/* İşaret maske ile boyanıyor: ![]()
içindeki SVG dış CSS'ten renk almaz,
maske alır. Böylece her plaka markasının rengini taşıyabiliyor. */
.pl-isaret {
width: 18px; height: 18px; display: inline-block; flex: 0 0 auto;
background: var(--renk);
-webkit-mask: var(--isaret) center / contain no-repeat;
mask: var(--isaret) center / contain no-repeat;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
.pl-ad { font-family: var(--baslik); font-weight: 700; font-size: 14.5px;
letter-spacing: -.01em; color: var(--murekkep);
text-shadow: 0 1px 0 rgba(255,255,255,.8); }
/* sabit yapı, değişken renk */
.plaka[data-marka="openai"] { --renk: #0D0D0D; --isaret: url("marka/openai.svg"); }
.plaka[data-marka="claude"] { --renk: #D97757; --isaret: url("marka/claude.svg"); }
.plaka[data-marka="gemini"] { --renk: #4285F4; --isaret: url("marka/googlegemini.svg"); }
.plaka[data-marka="grok"] { --renk: #0D0D0D; --isaret: url("marka/x.svg"); }
/* X isareti kare degil, biraz kucuk dursun — genislik PLAKAYA degil ikona verilir */
.plaka[data-marka="grok"] .pl-isaret { width: 16px; height: 16px; }
/* markanın rengi plakanın kenarına da hafifçe vursun */
.plaka[data-marka="claude"] { border-color: rgba(217,119,87,.28); }
.plaka[data-marka="gemini"] { border-color: rgba(66,133,244,.26); }
@media (max-width: 620px) {
.plakalar { gap: 8px; }
.plaka { padding: 8px 12px 8px 9px; gap: 7px; }
.pl-ad { font-size: 13.5px; }
}
/* ---------- hero: spec-label dokusu (kitap kart 14) ---------- */
/* Kareli ızgara kaldırıldı (Mesut: "kareli defter gibi duruyor").
Zemin yalnızca yumuşak gradyan. */
/* köşe künyeleri — okunmak için değil, doku için */
.hero-kunye {
position: absolute; top: 0; bottom: 0; width: 22px; z-index: 1;
display: flex; flex-direction: column; justify-content: center; gap: 28px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
text-transform: uppercase; color: var(--soluk); opacity: .34;
pointer-events: none; user-select: none;
}
.hero-kunye span { writing-mode: vertical-rl; white-space: nowrap; }
.hero-kunye.sol { left: 18px; }
.hero-kunye.sag { right: 18px; transform: rotate(180deg); }
/* başlıkta ince kabartma — plakalarla aynı ışık yönü */
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.9); }
/* canlı panel kabartma yüzeye çıktı */
.canli {
background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(242,239,234,.86));
border-color: rgba(6,12,27,.08);
box-shadow:
0 2px 5px rgba(6,12,27,.06),
0 14px 40px rgba(6,12,27,.07),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(6,12,27,.04);
}
@media (max-width: 900px) {
.hero-kunye { display: none; }
}
/* ---------- rapor sayfası: rapor çerçevesi (spec-label dili) ---------- */
.rapor-cerceve {
border: 1px solid var(--cizgi); border-radius: 18px; overflow: hidden;
background: var(--beyaz);
box-shadow: 0 2px 6px rgba(6,12,27,.05), 0 22px 60px rgba(6,12,27,.08);
}
.rc-ust {
display: flex; align-items: center; gap: 12px; padding: 14px 20px;
background: var(--murekkep); color: #fff;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
}
.rc-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--kirmizi); flex: 0 0 auto; }
.rc-tarih { margin-left: auto; opacity: .62; }
.rc-govde { padding: 26px; }
.rc-kartlar { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 30px; }
.rc-kart {
padding: 18px; border-radius: 13px; border: 1px solid var(--cizgi);
background: linear-gradient(150deg, #FFFFFF, #F7F5F1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(6,12,27,.04);
}
.rk-buyuk { font-family: var(--baslik); font-weight: 800; font-size: 34px; letter-spacing: -.035em; }
.rk-alt { font-size: 12.5px; color: var(--soluk); margin-top: 2px; }
.rk-cubuk { height: 4px; border-radius: 3px; background: #E7E3DC; margin-top: 12px; overflow: hidden; }
.rk-cubuk i { display: block; height: 100%; background: var(--murekkep); border-radius: 3px; }
.rk-cubuk i.kir { background: var(--kirmizi); }
.rc-bolum { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.rc-baslik { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
color: var(--soluk); margin-bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rc-not { text-transform: none; letter-spacing: 0; opacity: .75; font-size: 12px; }
.motor-satir { display: grid; grid-template-columns: 96px 1fr 56px; gap: 14px; align-items: center; padding: 7px 0; }
.motor-satir .mtr { font-family: var(--baslik); font-weight: 700; font-size: 14.5px; }
.motor-satir .bar { height: 9px; border-radius: 5px; background: #EDEAE4; overflow: hidden; }
.motor-satir .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--murekkep), #3A4C63); border-radius: 5px; }
.motor-satir .deg { font-family: var(--mono); font-size: 12.5px; color: var(--soluk); text-align: right; }
.rc-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-tablo th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--soluk); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--cizgi); }
.rc-tablo td { padding: 11px 10px; border-bottom: 1px solid #F0EDE7; color: var(--murekkep-2); }
.rc-tablo td:first-child { max-width: 320px; }
.rc-tablo th:not(:first-child), .rc-tablo td:not(:first-child) { text-align: center; white-space: nowrap; }
.rc-tablo b { font-family: var(--mono); font-size: 12.5px; padding: 3px 8px; border-radius: 5px; font-weight: 500; }
.rc-tablo b.ok { background: #E6F4EC; color: #157347; }
.rc-tablo b.orta { background: #FFF4E3; color: #A35B00; }
.rc-tablo b.yok { background: #FDE8E6; color: var(--kirmizi-metin); }
.rc-tablo tr.kritik td { background: #FFF7F6; font-weight: 500; }
@media (max-width: 900px) {
.rc-kartlar { grid-template-columns: repeat(2,1fr); }
.rc-govde { padding: 18px; }
.rc-tablo { font-size: 13px; }
.rc-tablo td:first-child { max-width: 150px; }
}
@media (max-width: 560px) {
.rc-kartlar { grid-template-columns: 1fr; }
.rc-tablo thead { display: none; }
.rc-tablo td:not(:first-child) { display: inline-block; }
.motor-satir { grid-template-columns: 74px 1fr 48px; gap: 10px; }
}
/* ---------- hero: ürün ekranı ----------
AiPrise/Sardine kurgusu: hero'nun altında gerçek arayüz, kadrajı taşıyor.
Dekor değil — içindeki ölçüm gerçekten dönüyor. */
.ekran {
margin: 54px auto -80px; max-width: 1000px; text-align: left;
border-radius: 18px 18px 0 0; overflow: hidden;
border: 1px solid rgba(6,12,27,.10); border-bottom: 0;
background: var(--beyaz);
box-shadow: 0 2px 6px rgba(6,12,27,.05), 0 34px 80px rgba(6,12,27,.14);
}
.ek-ust {
display: flex; align-items: center; gap: 11px; padding: 12px 18px;
background: var(--murekkep); color: #fff;
font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
}
.ek-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--kirmizi); flex: 0 0 auto; }
.ek-sag { margin-left: auto; opacity: .6; }
.ek-govde { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; padding: 18px; background: var(--acik); }
/* panel ekranın içine girdiği için kendi gölgesini bırakıyor */
.ekran .canli { margin-top: 0; background: var(--beyaz); box-shadow: none; border: 1px solid var(--cizgi); }
.ek-yan { display: flex; flex-direction: column; gap: 8px; }
.ey-baslik { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--soluk); margin-bottom: 2px; }
.ey-kart {
display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline;
padding: 10px 13px; border-radius: 11px; background: var(--beyaz); border: 1px solid var(--cizgi);
}
.ey-ad { font-size: 13px; color: var(--murekkep-2); }
.ey-deg { font-family: var(--baslik); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.ey-bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: #E9E5DE; overflow: hidden; }
.ey-bar i { display: block; height: 100%; background: var(--murekkep); border-radius: 3px; }
.ey-bar i.kir { background: var(--kirmizi); }
.ey-kanit {
margin-top: 2px; padding: 11px 13px; border-radius: 11px;
background: var(--beyaz); border: 1px solid var(--cizgi);
border-left: 3px solid var(--kirmizi);
font-size: 12.5px; color: var(--murekkep-2); line-height: 1.5;
}
.ey-etiket { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--soluk); margin-bottom: 4px; }
/* ekran kadrajı taştığı için hero'nun altını açıyoruz */
.hero { padding-bottom: 0; }
@media (max-width: 880px) {
.ek-govde { grid-template-columns: 1fr; }
.ekran { margin: 40px auto -60px; }
}
/* ---------- DENEME: klasör-sekme neo-brutalizm (kitap kart 20 — Ulvin) ----------
Klasör metaforu + düz doygun renk blokları + sert gölge + LCD tipografi.
Yalnızca bu bölümde; kurumsal dil bozulmasın diye yayılmadı. */
.dosya-bolum { background: var(--krem); }
.dosya-bolum h2 { color: var(--murekkep); }
.etiket-lcd { display: inline-block; margin-bottom: 16px; padding: 5px 11px;
background: #1A1A1A; color: #F7F7F7; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; }
.dosyalar { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 40px; align-items: start; }
.dosya { position: relative; display: block; text-decoration: none; color: inherit;
padding-top: 34px; transition: transform .16s cubic-bezier(.2,.9,.3,1.2); }
.dosya:hover { transform: translate(-3px,-3px); }
.dosya:hover .ds-govde { box-shadow: 9px 9px 0 rgba(6,12,27,.9); }
.ds-sekme { position: absolute; top: 0; left: 0; padding: 7px 16px 9px;
border: 2px solid var(--murekkep); border-bottom: 0; border-radius: 8px 8px 0 0;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
background: var(--dosya-sekme); color: var(--dosya-yazi); }
.ds-govde { display: block; padding: 20px 18px 18px; min-height: 210px;
border: 2px solid var(--murekkep); border-radius: 0 10px 10px 10px;
background: var(--dosya-renk); color: var(--dosya-yazi);
box-shadow: 6px 6px 0 var(--murekkep); transition: box-shadow .16s ease; }
.ds-baslik { display: block; font-family: var(--baslik); font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.ds-not { display: block; margin-top: 10px; font-size: 13.5px; opacity: .82; line-height: 1.45; }
.ds-deger { display: block; margin-top: 18px; padding-top: 12px; border-top: 2px solid currentColor;
font-family: var(--baslik); font-weight: 800; font-size: 26px; }
.ds-deger i { font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .1em;
opacity: .75; display: block; margin-top: 2px; font-weight: 400; }
.d-siyah { --dosya-renk: #DDE4EE; --dosya-sekme: #C7D2E0; --dosya-yazi: #101828; }
.d-hardal { --dosya-renk: #F2E3CB; --dosya-sekme: #E4D0B0; --dosya-yazi: #3B2E17; }
.d-yesil { --dosya-renk: #D6E7DC; --dosya-sekme: #BFD8C8; --dosya-yazi: #14301F; }
.d-magenta { --dosya-renk: #F6DAD6; --dosya-sekme: #EFC3BC; --dosya-yazi: #4A1712; }
.dosya-alt { display: flex; align-items: center; gap: 12px; margin-top: 26px;
font-family: var(--mono); font-size: 12.5px; color: #1A1A1A; }
.karalama { width: 64px; height: 22px; color: #BA2645; flex: 0 0 auto; }
@media (max-width: 1000px) { .dosyalar { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .dosyalar { grid-template-columns: 1fr; } }
/* ---------- kapanış bölümü ----------
Sorun: CTA ile footer aynı koyu renkteydi ve arada dev boşluk kalıyordu;
iki blok tek dev karanlık alan gibi okunuyordu. Kapanış daraltıldı,
içine güven şeridi kondu, footer'la arasına ince ayrım çizgisi girdi. */
.koyu-bolum.kapanis { padding: clamp(64px, 7vw, 96px) 0 clamp(56px, 6vw, 80px); }
.kapanis-serit {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
margin-top: 40px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.11);
font-size: 14px; color: #97A4B4;
}
.kapanis-serit b { font-family: var(--baslik); font-weight: 800; color: #fff;
font-size: 16px; margin-right: 5px; letter-spacing: -.02em; }
footer { border-top: 1px solid rgba(255,255,255,.09); padding-top: 58px; }
/* ---------- giriş ekranı (Kimola deseni: sol form + sağ dalgalı panel) ---------- */
.giris-ortu {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
padding: 20px; background: rgba(6,12,27,.55); backdrop-filter: blur(4px);
}
.giris-ortu[hidden] { display: none; }
.giris-kutu {
position: relative; width: min(940px, 100%); max-height: 92vh; overflow: auto;
display: grid; grid-template-columns: 1fr .82fr;
background: var(--beyaz); border-radius: 18px; overflow: hidden;
box-shadow: 0 30px 90px rgba(6,12,27,.35);
}
.giris-kapat {
position: absolute; top: 14px; right: 16px; z-index: 3;
width: 32px; height: 32px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.7); color: var(--murekkep);
font-size: 20px; line-height: 1; cursor: pointer;
}
.giris-kapat:hover { background: #fff; }
.giris-sol { padding: 46px 44px; }
.giris-baslik { font-family: var(--baslik); font-weight: 800; font-size: clamp(26px,3vw,34px);
letter-spacing: -.03em; line-height: 1.12; }
.giris-alt { color: var(--soluk); font-size: 15.5px; margin-top: 8px; margin-bottom: 26px; }
.giris-sol label { display: block; margin-bottom: 18px; font-size: 13.5px; color: var(--soluk); }
.giris-sol input {
width: 100%; margin-top: 7px; padding: 12px 2px; font-size: 16px;
font-family: var(--govde); color: var(--murekkep);
border: 0; border-bottom: 1px solid var(--cizgi); background: transparent;
}
.giris-sol input:focus { outline: 0; border-bottom-color: var(--kirmizi-metin); }
.giris-satir { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.giris-satir a { font-size: 13.5px; color: var(--soluk); text-decoration: none; }
.giris-satir a:hover { color: var(--kirmizi-metin); }
.giris-sag {
position: relative; color: #F4EFEA;
/* Tek koyu ton + köşede hafif kırmızı ışık. Önceki üç duraklı gradyan
metinle çakışıyordu (Mesut: "renkler oturmamış yazılarla"). */
background: #0B1120;
display: flex; align-items: center;
/* sol boşluk dalga genişliğinden GENİŞ: metin eğrinin üstüne binmez */
padding: 44px 34px 44px 104px;
overflow: hidden;
}
.giris-sag::after {
content: ""; position: absolute; right: -30%; bottom: -35%;
width: 70%; height: 80%; border-radius: 50%;
background: radial-gradient(circle, rgba(255,10,0,.34), transparent 68%);
filter: blur(42px); pointer-events: none;
}
/* dalgalı kenar — Kimola'daki formu ayıran eğri */
.giris-dalga { position: absolute; left: -1px; top: 0; height: 100%; width: 52px;
color: var(--beyaz); z-index: 2; }
.giris-sag-ic { position: relative; z-index: 1; }
.gs-plakalar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; max-width: 300px; }
.gs-plakalar .plaka {
background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14);
box-shadow: none; padding: 7px 12px 7px 10px; gap: 7px;
}
.gs-plakalar .pl-ad { color: #F4EFEA; font-size: 13px; text-shadow: none; }
.gs-plakalar .pl-isaret { filter: none; }
.gs-plakalar .plaka[data-marka="openai"] .pl-isaret,
.gs-plakalar .plaka[data-marka="grok"] .pl-isaret { background: #F4EFEA; }
.gs-slogan { font-family: var(--baslik); font-weight: 800; font-size: 21px;
line-height: 1.25; letter-spacing: -.02em; max-width: 16ch; color: #F2F5F9; }
.gs-not { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12);
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
color: #8494A8; max-width: 24ch; line-height: 1.9; }
@media (max-width: 780px) {
.giris-kutu { grid-template-columns: 1fr; }
.giris-sag { display: none; }
.giris-sol { padding: 38px 26px; }
}
/* ---- Ölçüm talebi sayfası (Kimola demo deseni: sol fayda / sağ form) ---- */
.talep-bolum { padding: 92px 0 96px; }
.talep-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.talep-sol .etiket { margin-bottom: 18px; }
.talep-baslik { font-family: var(--baslik); font-weight: 800; font-size: clamp(38px, 4.4vw, 56px);
line-height: 1.04; letter-spacing: -.035em; margin: 0 0 20px; }
.talep-sol .giris { font-size: 17px; line-height: 1.7; color: var(--gri); max-width: 46ch; }
.talep-liste { list-style: none; padding: 0; margin: 30px 0 0; }
.talep-liste li { position: relative; padding: 0 0 0 30px; margin-bottom: 13px;
font-size: 15.5px; line-height: 1.55; color: var(--murekkep); }
.talep-liste li::before {
content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px;
border-left: 2px solid var(--kirmizi); border-bottom: 2px solid var(--kirmizi);
transform: rotate(-45deg);
}
.talep-not { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cizgi);
font-size: 13.5px; line-height: 1.7; color: var(--gri); max-width: 44ch; }
.talep-not a { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
.talep-sag { background: #F4F6F9; border: 1px solid var(--cizgi); border-radius: 20px; padding: 34px 32px; }
.talep-form label { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 600;
letter-spacing: .01em; color: var(--murekkep); }
.talep-form input, .talep-form select, .talep-form textarea {
display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
font: inherit; font-size: 14.5px; font-weight: 400; color: var(--murekkep);
background: var(--beyaz); border: 1px solid #D8DEE7; border-radius: 10px;
transition: border-color .16s, box-shadow .16s;
}
.talep-form select { appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23566' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.talep-form textarea { resize: vertical; min-height: 76px; }
.talep-form input::placeholder, .talep-form textarea::placeholder { color: #9AA5B2; }
.talep-form input:focus, .talep-form select:focus, .talep-form textarea:focus {
outline: none; border-color: var(--kirmizi-metin); box-shadow: 0 0 0 3px rgba(255,10,0,.1); }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.talep-form .dugme.tam { margin-top: 8px; }
.talep-form .form-not { margin: 14px 0 0; font-size: 12px; line-height: 1.65; color: var(--gri); }
.talep-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 40px; }
.ts b { display: block; font-family: var(--baslik); font-weight: 800; font-size: 46px;
line-height: 1; letter-spacing: -.03em; color: var(--kirmizi-metin); }
.ts span { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--gri); }
@media (max-width: 900px) {
.talep-izgara { grid-template-columns: 1fr; gap: 40px; }
.talep-bolum { padding: 60px 0 64px; }
.talep-sayilar { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 620px) { .form-ikili { grid-template-columns: 1fr; gap: 0; } }
/* ---- Akış diyagramı: dört gerçek mini arayüz, akan kesikli ok ---- */
.akis-bolum { padding: 96px 0 100px; }
.akis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 54px; margin-top: 46px; }
.akis-adim { position: relative; display: grid; grid-template-rows: 214px auto auto; align-content: start; }
.akis-adim:not(:last-child)::before {
content: ""; position: absolute; top: 104px; right: -44px; width: 32px; height: 2px;
background-image: linear-gradient(90deg, var(--kirmizi) 0 5px, transparent 5px 10px);
background-size: 10px 2px; background-repeat: repeat-x;
animation: akis-kay 1.1s linear infinite;
}
.akis-adim:not(:last-child)::after {
content: ""; position: absolute; top: 100px; right: -48px;
border-left: 6px solid var(--kirmizi);
border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
@keyframes akis-kay { to { background-position-x: 10px; } }
.akis-ekran {
height: 202px; align-self: start; display: flex; flex-direction: column;
background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 16px;
overflow: hidden; box-shadow: 0 6px 22px rgba(6,12,27,.07);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.akis-adim.etkin .akis-ekran {
transform: translateY(-6px); border-color: rgba(255,10,0,.4);
box-shadow: 0 16px 36px rgba(6,12,27,.14);
}
.ae-ust { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: #F4F6F9;
border-bottom: 1px solid var(--cizgi); }
.ae-ust i { width: 7px; height: 7px; border-radius: 50%; background: #CFD6DF; flex: 0 0 auto; }
.ae-ust em { margin-left: 6px; font-family: var(--mono); font-style: normal;
font-size: 9.5px; letter-spacing: .06em; color: var(--soluk-2); overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; }
.ae-govde { flex: 1; padding: 12px 12px; min-height: 0; }
/* 1 — soru seti */
.ae-sorular { position: relative; }
.ae-sorular p { margin: 0 0 7px; font-family: var(--mono); font-size: 9.5px; line-height: 1.45;
color: var(--murekkep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-sorular p b { color: var(--kirmizi-metin); font-weight: 400; margin-right: 5px; }
.ae-sorular p.sol { color: var(--soluk-2); }
.ae-sorular p.sol b { color: #677385; }
.ae-imlec { position: absolute; left: 12px; bottom: 10px; width: 6px; height: 11px;
background: var(--kirmizi); opacity: 0; }
.akis-adim.etkin .ae-imlec { animation: imlec-yanip 0.85s steps(1) infinite; }
@keyframes imlec-yanip { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
/* 2 — dört motor */
.ae-motorlar { display: flex; flex-direction: column; justify-content: space-between; }
.ae-mt { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px;
background: #F5F7FA; font-family: var(--baslik); font-weight: 600; font-size: 11px;
color: var(--murekkep); transition: background .3s, box-shadow .3s; }
.ae-mt em { margin-left: auto; font-family: var(--mono); font-style: normal; font-size: 8.5px;
letter-spacing: .05em; color: var(--soluk-2); }
.ae-mt em.calisiyor { color: #D80800; }
.akis-adim.etkin .ae-mt { background: #EEF2F7; box-shadow: inset 0 0 0 1px rgba(6,12,27,.05); }
.akis-adim.etkin .ae-mt:nth-child(2) { transition-delay: .08s; }
.akis-adim.etkin .ae-mt:nth-child(3) { transition-delay: .16s; }
.akis-adim.etkin .ae-mt:nth-child(4) { transition-delay: .24s; }
.mt-isaret { width: 12px; height: 12px; flex: 0 0 auto; background: var(--renk);
-webkit-mask: var(--isaret) center / contain no-repeat;
mask: var(--isaret) center / contain no-repeat; }
.ae-mt[data-marka="openai"] { --renk: #0D0D0D; --isaret: url("marka/openai.svg"); }
.ae-mt[data-marka="claude"] { --renk: #D97757; --isaret: url("marka/claude.svg"); }
.ae-mt[data-marka="gemini"] { --renk: #4285F4; --isaret: url("marka/googlegemini.svg"); }
.ae-mt[data-marka="grok"] { --renk: #0D0D0D; --isaret: url("marka/x.svg"); }
.akis-adim.etkin .ae-mt[data-marka="gemini"] { background: rgba(255,10,0,.07);
box-shadow: inset 0 0 0 1px rgba(255,10,0,.22); }
/* 3 — çözümleme */
.ae-cozum { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.cz { display: grid; grid-template-columns: 56px 1fr 30px; align-items: center; gap: 7px; }
.cz label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .02em; color: var(--soluk-2);
white-space: nowrap; }
.cz u { font-family: var(--baslik); font-weight: 700; font-size: 11px; text-decoration: none;
text-align: right; color: var(--murekkep); }
.ae-bar { height: 7px; border-radius: 4px; background: #EDF0F4; overflow: hidden; }
.ae-bar span { display: block; height: 100%; border-radius: 4px; background: #C9D1DB;
transform: scaleX(.12); transform-origin: left;
transition: transform .65s cubic-bezier(.2,.8,.2,1), background .4s; }
.akis-adim.etkin .ae-bar span { transform: scaleX(1); background: var(--kirmizi); }
.akis-adim.etkin .cz:nth-child(2) .ae-bar span { transition-delay: .12s; }
.akis-adim.etkin .cz:nth-child(3) .ae-bar span { transition-delay: .24s; }
.cz-alt { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding-top: 9px;
border-top: 1px solid var(--cizgi);
font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--soluk-2); }
.cz-alt b { font-family: var(--baslik); font-size: 13px; color: var(--murekkep); }
.cz-rozet { margin-left: auto; padding: 2px 7px; border-radius: 5px; background: #F1F4F8;
font-size: 8.5px; color: var(--soluk-2); transition: background .3s, color .3s; }
.akis-adim.etkin .cz-rozet { background: rgba(255,10,0,.1); color: var(--kirmizi-metin); }
/* 4 — kanıtlı rapor */
.ae-rapor { position: relative; }
.rp-ust { display: flex; align-items: baseline; gap: 7px; }
.rp-ust b { font-family: var(--baslik); font-weight: 800; font-size: 28px; line-height: 1;
letter-spacing: -.03em; color: #677385; transition: color .45s; }
.akis-adim.etkin .rp-ust b { color: var(--murekkep); }
.rp-ust i { font-family: var(--mono); font-style: normal; font-size: 8.5px;
letter-spacing: .07em; color: var(--soluk-2); }
.ae-rapor blockquote { margin: 12px 0 0; padding-left: 9px; border-left: 2px solid #E3E7ED;
font-size: 10.5px; line-height: 1.5; color: #55606E; transition: border-color .4s; }
.akis-adim.etkin .ae-rapor blockquote { border-left-color: var(--kirmizi-metin); }
.ae-rapor cite { display: block; margin-top: 6px; font-family: var(--mono); font-style: normal;
font-size: 8.5px; letter-spacing: .05em; color: var(--soluk-2); }
.ae-muhur { position: absolute; right: 6px; bottom: 2px; width: 40px; height: 40px;
display: grid; place-items: center; border-radius: 50%;
border: 1.5px dashed #D3DAE3; font-family: var(--mono); font-size: 9px;
letter-spacing: .04em; color: var(--soluk-2);
transition: border-color .4s, color .4s, transform .5s; }
.akis-adim.etkin .ae-muhur { border-color: var(--kirmizi-metin); color: var(--kirmizi-metin); transform: rotate(-12deg); }
.akis-adim > b { display: block; margin-top: 16px; font-family: var(--baslik); font-weight: 700;
font-size: 17px; letter-spacing: -.015em; }
.akis-adim > span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--gri); }
@media (max-width: 980px) {
.akis { grid-template-columns: 1fr 1fr; gap: 40px 46px; }
.akis-adim:nth-child(2)::before, .akis-adim:nth-child(2)::after { display: none; }
.akis-adim:not(:last-child)::before { right: -36px; width: 24px; }
.akis-adim:not(:last-child)::after { right: -40px; }
}
@media (max-width: 620px) {
.akis { grid-template-columns: 1fr; gap: 30px; }
.akis-adim::before, .akis-adim::after { display: none !important; }
.akis-bolum { padding: 62px 0 66px; }
}
@media (prefers-reduced-motion: reduce) {
.akis-adim:not(:last-child)::before { animation: none; }
.akis-adim.etkin .ae-imlec { animation: none; opacity: 1; }
}
/* nav düğmeleri gövdedekilerden küçük durur */
.nav-sag { display: flex; align-items: center; gap: 8px; }
.nav-sag .dugme { display: inline-flex; align-items: center; height: 38px;
padding: 0 18px; font-size: 13.5px; border-radius: 10px; }
/* ---- nasıl çalışır: canlı ölçüm ızgarası ---- */
.olcum-izgara { margin-top: 44px; max-width: 760px;
background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 16px;
overflow: hidden; box-shadow: 0 10px 34px rgba(6,12,27,.07); }
.oi-ust { display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; background: #F4F6F9; border-bottom: 1px solid var(--cizgi); }
.oi-baslik { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--soluk-2); }
.oi-durum { display: flex; align-items: center; gap: 7px; font-family: var(--mono);
font-size: 10.5px; letter-spacing: .08em; color: var(--kirmizi-metin); }
.oi-durum i { width: 7px; height: 7px; border-radius: 50%; background: var(--kirmizi);
animation: oi-nabiz 1.4s ease-in-out infinite; }
@keyframes oi-nabiz { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.8) } }
.oi-govde { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 18px; }
.oi-etiketler { display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; }
.oi-mt { display: flex; align-items: center; gap: 7px; font-family: var(--baslik);
font-weight: 600; font-size: 12px; color: var(--murekkep); }
.oi-mt .mt-isaret { width: 13px; height: 13px; }
.oi-mt[data-marka="openai"] { --renk: #0D0D0D; --isaret: url("marka/openai.svg"); }
.oi-mt[data-marka="claude"] { --renk: #D97757; --isaret: url("marka/claude.svg"); }
.oi-mt[data-marka="gemini"] { --renk: #4285F4; --isaret: url("marka/googlegemini.svg"); }
.oi-mt[data-marka="grok"] { --renk: #0D0D0D; --isaret: url("marka/x.svg"); }
.oi-hucreler { display: grid; grid-template-columns: repeat(20, 1fr);
grid-template-rows: repeat(4, 1fr); gap: 4px; }
.oi-hucre { border-radius: 3px; background: #EDF0F4; transition: background .25s ease; }
.oi-hucre.dolu { background: var(--murekkep); }
.oi-hucre.simdi { background: var(--kirmizi); }
.oi-alt { display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; border-top: 1px solid var(--cizgi);
font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--soluk-2); }
.oi-alt b { font-family: var(--baslik); font-size: 13px; letter-spacing: 0; color: var(--murekkep); }
/* ---- adım görselleri ---- */
.adim-gorsel { margin-top: 18px; }
.ag-sorular { display: grid; gap: 8px; max-width: 480px; }
.agk { position: relative; padding: 11px 14px 11px 82px; border-radius: 10px;
background: #F5F7FA; border: 1px solid var(--cizgi);
font-family: var(--mono); font-size: 11.5px; color: var(--murekkep); }
.agk em { position: absolute; left: 12px; top: 11px; font-style: normal; font-size: 9px;
letter-spacing: .08em; text-transform: uppercase; color: var(--soluk-2); }
.agk.marka { background: rgba(255,10,0,.05); border-color: rgba(255,10,0,.2); }
.agk.marka em { color: var(--kirmizi-metin); }
.ag-motorlar { display: grid; grid-template-columns: repeat(2, minmax(0,220px)); gap: 8px; }
.agm { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
background: #F5F7FA; border: 1px solid var(--cizgi);
font-family: var(--baslik); font-weight: 600; font-size: 13px; color: var(--murekkep); }
.agm em { margin-left: auto; font-family: var(--mono); font-style: normal; font-size: 10px;
letter-spacing: .05em; color: var(--soluk-2); }
.agm .mt-isaret { width: 15px; height: 15px; }
.agm[data-marka="openai"] { --renk: #0D0D0D; --isaret: url("marka/openai.svg"); }
.agm[data-marka="claude"] { --renk: #D97757; --isaret: url("marka/claude.svg"); }
.agm[data-marka="gemini"] { --renk: #4285F4; --isaret: url("marka/googlegemini.svg"); }
.agm[data-marka="grok"] { --renk: #0D0D0D; --isaret: url("marka/x.svg"); }
.ag-tekrar { display: grid; grid-template-columns: repeat(3, minmax(0,150px)); gap: 8px; max-width: 480px; }
.agt { padding: 12px 14px; border-radius: 10px; background: #F5F7FA; border: 1px solid var(--cizgi); }
.agt em { display: block; font-family: var(--mono); font-style: normal; font-size: 9.5px;
letter-spacing: .07em; color: var(--soluk-2); margin-bottom: 7px; }
.agt b { font-family: var(--baslik); font-size: 14px; }
.agt-sira { float: right; font-family: var(--baslik); font-weight: 800; font-size: 14px; color: var(--kirmizi-metin); }
.agt.yok { background: rgba(255,10,0,.05); border-color: rgba(255,10,0,.22); }
.agt.yok b { color: var(--kirmizi-metin); }
.agt.yok .agt-sira { color: #66717F; }
.agt-not { grid-column: 1 / -1; margin: 2px 0 0; font-family: var(--mono);
font-size: 10.5px; letter-spacing: .04em; color: var(--soluk-2); }
.ag-cozum { max-width: 520px; }
.agc-metin { padding: 15px 17px; border-radius: 12px; background: #F5F7FA;
border: 1px solid var(--cizgi); border-left: 3px solid var(--murekkep);
font-size: 14px; line-height: 1.65; color: #414B57; }
.agc-metin mark { background: rgba(255,10,0,.13); color: var(--murekkep);
padding: 1px 3px; border-radius: 3px; }
.agc-metin u { text-decoration: none; box-shadow: inset 0 -6px 0 rgba(6,12,27,.08); }
.agc-etiketler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.agc-etiketler span { padding: 5px 11px; border-radius: 999px; background: var(--murekkep);
color: var(--krem); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.agc-etiketler span.pas { background: rgba(6,12,27,.07); color: var(--soluk-2); }
.ag-rapor { display: flex; gap: 12px; align-items: flex-start; }
.agr-sayfa { width: 132px; padding: 14px 13px; border-radius: 9px; background: var(--beyaz);
border: 1px solid var(--cizgi); box-shadow: 0 5px 16px rgba(6,12,27,.07); }
.agr-sayfa.ikinci { transform: translateY(12px) rotate(1.5deg); background: #FAFBFC; }
.agr-satir { display: block; height: 5px; border-radius: 3px; background: #E1E6EC; margin-bottom: 7px; }
.agr-satir.u1 { width: 88% } .agr-satir.u2 { width: 62% } .agr-satir.u3 { width: 44% }
.agr-oran { margin: 10px 0 9px; font-family: var(--baslik); font-weight: 800; font-size: 22px;
letter-spacing: -.03em; color: var(--kirmizi-metin); }
.agr-etiket { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 9px;
letter-spacing: .09em; text-transform: uppercase; color: var(--soluk-2); }
/* ---- çarpım görseli ---- */
.carpim { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.carpim i { font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--soluk-2); }
.cp { min-width: 68px; padding: 12px 14px; border-radius: 12px; background: var(--beyaz);
border: 1px solid var(--cizgi); text-align: center; }
.cp b { display: block; font-family: var(--baslik); font-weight: 800; font-size: 22px;
letter-spacing: -.03em; color: var(--murekkep); }
.cp span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9.5px;
letter-spacing: .06em; color: var(--soluk-2); }
.cp.sonuc { background: var(--murekkep); border-color: var(--murekkep); }
.cp.sonuc b { color: var(--beyaz); }
.cp.sonuc span { color: rgba(255,255,255,.6); }
@media (max-width: 720px) {
.oi-govde { grid-template-columns: 1fr; }
.oi-etiketler { grid-template-rows: none; grid-template-columns: repeat(2,1fr); }
.ag-motorlar, .ag-tekrar { grid-template-columns: 1fr 1fr; }
.agt-not { grid-column: 1 / -1; }
}
/* ---- ölçüm sayfası: altı ölçümün gösterge paneli ---- */
.gosterge { margin-top: 44px; background: var(--beyaz); border: 1px solid var(--cizgi);
border-radius: 16px; overflow: hidden; box-shadow: 0 12px 38px rgba(6,12,27,.08); }
.gs-ust { display: flex; align-items: center; justify-content: space-between;
padding: 13px 20px; background: #F4F6F9; border-bottom: 1px solid var(--cizgi);
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--soluk-2); }
.gs-ust em { font-style: normal; color: var(--soluk-2); }
.gs-izgara { display: grid; grid-template-columns: repeat(3, 1fr); }
.gsk { padding: 20px 20px 22px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.gsk:nth-child(3n) { border-right: 0; }
.gsk:nth-child(n+4) { border-bottom: 0; }
.gsk > span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
text-transform: uppercase; color: var(--soluk-2); }
.gsk > b { display: block; margin: 9px 0 12px; font-family: var(--baslik); font-weight: 800;
font-size: 30px; line-height: 1; letter-spacing: -.035em; color: var(--murekkep); }
.gsk > b.dusuk { color: var(--kirmizi-metin); }
.gs-bar { height: 7px; border-radius: 4px; background: #EDF0F4; overflow: hidden; }
.gs-bar i { display: block; height: 100%; border-radius: 4px; background: var(--kirmizi); }
.gs-bar i.gri { background: #66717F; }
.gs-nokta { display: flex; gap: 5px; }
.gs-nokta i { width: 100%; height: 7px; border-radius: 4px; background: #EDF0F4; }
.gs-nokta i.d { background: var(--kirmizi); }
.gs-ton { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: #EDF0F4; }
.gs-ton i.olumlu { background: #7FA98C; }
.gs-ton i.notr { background: #C3CCD7; }
.gs-ton i.olumsuz { background: var(--kirmizi); }
.gs-kaynak { display: flex; gap: 5px; }
.gs-kaynak i { width: 26px; height: 7px; border-radius: 4px; background: var(--murekkep); }
.gs-kaynak i.sol { background: #E1E6EC; }
/* ---- kategori / marka karşılaştırması ---- */
.karsilastir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.kr { padding: 20px; border-radius: 16px; background: var(--beyaz); border: 1px solid var(--cizgi);
box-shadow: 0 6px 22px rgba(6,12,27,.05); }
.kr-etiket { display: inline-block; padding: 4px 10px; border-radius: 999px;
background: rgba(6,12,27,.07); font-family: var(--mono); font-size: 9.5px;
letter-spacing: .09em; text-transform: uppercase; color: var(--soluk-2); }
.kr-etiket.kirmizi { background: rgba(255,10,0,.1); color: var(--kirmizi-metin); }
.kr-soru { margin: 13px 0 0; font-family: var(--baslik); font-weight: 700; font-size: 16px;
letter-spacing: -.015em; color: var(--murekkep); }
.kr-cevap { margin-top: 13px; padding: 14px 15px; border-radius: 11px; background: #F5F7FA;
border-left: 3px solid #D5DCE4; font-size: 13.5px; line-height: 1.75; color: #4C5763; }
.kr-cevap b { color: var(--soluk-2); font-weight: 600; }
.kr-cevap mark { background: rgba(255,10,0,.14); color: var(--murekkep); padding: 1px 3px; border-radius: 3px; }
.kr-sonuc { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cizgi);
font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--soluk-2); }
.kr-sonuc b { font-family: var(--baslik); font-size: 13px; letter-spacing: -.01em; color: var(--kirmizi-metin); }
/* ---- görünmediğiniz sorular tablosu (koyu bölüm) ---- */
.bosluk-tablo { margin-top: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
overflow: hidden; background: rgba(255,255,255,.03); }
.bt-satir { display: grid; grid-template-columns: 1fr repeat(4, 74px) 78px;
align-items: center; gap: 10px; padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,.09); }
.bt-satir:last-child { border-bottom: 0; }
.bt-satir > span { font-size: 14px; color: #E8EDF3; }
.bt-baslik { background: rgba(255,255,255,.05); }
.bt-baslik > span, .bt-baslik em, .bt-baslik u {
font-family: var(--mono); font-style: normal; text-decoration: none;
font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: #8E9CAC; }
.bt-baslik em, .bt-baslik u { text-align: center; }
.bt-satir i { justify-self: center; width: 22px; height: 22px; border-radius: 7px;
display: block; position: relative; }
.bt-satir i.var { background: rgba(127,169,140,.22); }
.bt-satir i.var::after { content: ""; position: absolute; left: 6px; top: 6px;
width: 9px; height: 5px; border-left: 2px solid #8FBB9C; border-bottom: 2px solid #8FBB9C;
transform: rotate(-45deg); }
.bt-satir i.yok { background: rgba(255,10,0,.16); }
.bt-satir i.yok::after, .bt-satir i.yok::before { content: ""; position: absolute;
left: 6px; top: 10px; width: 10px; height: 2px; background: #FF5A50; }
.bt-satir i.yok::after { transform: rotate(45deg); }
.bt-satir i.yok::before { transform: rotate(-45deg); }
.bt-satir u { text-decoration: none; text-align: center; font-family: var(--baslik);
font-weight: 700; font-size: 13.5px; color: #D6DEE7; }
.bt-satir u.sifir { color: var(--kirmizi); } /* koyu zemin */
@media (max-width: 900px) {
.gs-izgara { grid-template-columns: 1fr 1fr; }
.gsk:nth-child(3n) { border-right: 1px solid var(--cizgi); }
.gsk:nth-child(2n) { border-right: 0; }
.gsk:nth-child(n+4) { border-bottom: 1px solid var(--cizgi); }
.gsk:nth-child(n+5) { border-bottom: 0; }
.karsilastir { grid-template-columns: 1fr; }
.bt-satir { grid-template-columns: 1fr repeat(4, 40px) 62px; gap: 6px; padding: 12px 13px; }
.bt-satir > span { font-size: 12.5px; }
}
@media (max-width: 560px) {
.gs-izgara { grid-template-columns: 1fr; }
.gsk { border-right: 0 !important; border-bottom: 1px solid var(--cizgi) !important; }
.gsk:last-child { border-bottom: 0 !important; }
}
/* ---- mobil açılır menü ---- */
@media (max-width: 1120px) {
/* menü hamburgere düştüğünde orta sütun kalkar: marka solda, eylemler sağda */
nav .kap { grid-template-columns: auto 1fr auto; min-height: 56px; gap: 12px; }
nav .nav-sag { grid-column: 2; justify-self: end; }
.nav-ac { display: flex; }
.nav-menu {
display: block; position: fixed; left: 0; right: 0; top: 86px;
padding: 8px 22px 22px; background: var(--beyaz);
border-bottom: 1px solid var(--cizgi); box-shadow: 0 14px 30px rgba(6,12,27,.1);
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform .22s ease, opacity .22s ease; z-index: 60;
}
body.menu-acik .nav-menu { transform: none; opacity: 1; pointer-events: auto; }
.nav-plaka { display: flex; width: 100%; height: 52px; margin-bottom: 8px;
border-radius: 12px; }
.nav-plaka span { font-size: 16px; }
.nav-sag .dugme { min-height: 40px; padding: 10px 16px; }
body.menu-acik { overflow: hidden; }
}
/* Kırmızı düğme üzerinde beyaz yazı kontrastı 4,5:1 eşiğinin altındaydı;
zemin tonu koyulaştırıldı (denetim bulgusu). */
.dugme.kirmizi { background: #D80800; }
.dugme.kirmizi:hover { background: #BF0700; }
/* Mobilde nav sıkışıyordu: Giriş düğmesi açılır menünün içine iniyor,
üstte yalnızca birincil eylem kalıyor. */
.nav-giris-mobil { display: none; }
@media (max-width: 1120px) {
.nav-sag .dugme.sade { display: none; }
.nav-giris-mobil {
display: block; width: 100%; margin-top: 14px; padding: 13px 18px; min-height: 44px;
border: 1px solid var(--murekkep); border-radius: 999px; background: none;
font: inherit; font-size: 16px; font-weight: 600; color: var(--murekkep); cursor: pointer;
}
nav .kap { gap: 10px; }
.marka { font-size: 19px; }
}
/* tabloda üçüncü durum: ölçüm alınamadı (limit) — orana katılmaz */
.bt-satir i.veriyok { background: rgba(255,255,255,.07); }
.bt-satir i.veriyok::after { content: ""; position: absolute; left: 6px; top: 10px;
width: 10px; height: 2px; background: #6E7C8C; }
.bt-satir i.kismi { background: rgba(255,255,255,.1); }
.bt-satir i.kismi::after { content: ""; position: absolute; left: 9px; top: 6px;
width: 4px; height: 10px; border-radius: 2px; background: #A9B6C4; }
.bt-not { grid-column: 1 / -1; margin: 0; padding: 13px 18px;
border-top: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03);
font-family: var(--mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .02em;
color: #8E9CAC; }
/* form geri bildirimi */
.form-durum { margin: 12px 0 0; min-height: 1.2em; font-size: 13px; line-height: 1.6; color: var(--gri); }
.form-durum.tamam { color: #2E7D4F; font-weight: 600; }
.form-durum.uyari { color: var(--kirmizi-metin); }
.form-durum a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.talep-form button[disabled] { opacity: .6; cursor: default; }
/* ---- panel ve yönetim sayfaları (Pages Functions tarafından üretilir) ---- */
.panel-bolum { padding: 72px 0 96px; }
.panel-ust { display: flex; align-items: flex-start; justify-content: space-between;
gap: 20px; margin-bottom: 30px; }
.panel-baslik { font-family: var(--baslik); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.06; letter-spacing: -.03em; margin: 10px 0 0; }
.panel-not { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--gri); max-width: 62ch; }
.panel-not a, .panel-geri { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
.panel-geri { display: inline-block; margin-bottom: 18px; font-size: 13.5px; }
.panel-hata { margin: 14px 0 0; padding: 11px 14px; border-radius: 10px;
background: rgba(255,10,0,.08); border: 1px solid rgba(255,10,0,.22);
font-size: 13.5px; color: var(--kirmizi-metin); }
.panel-cikis { flex: 0 0 auto; padding: 8px 16px; border: 1px solid var(--cizgi);
border-radius: 999px; font-size: 13px; color: var(--gri); text-decoration: none; }
.panel-cikis:hover { color: var(--murekkep); border-color: var(--murekkep); }
.panel-giris { max-width: 420px; margin: 40px auto; padding: 32px;
background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 18px;
box-shadow: 0 10px 34px rgba(6,12,27,.07); }
.panel-giris .talep-form { margin-top: 22px; }
.panel-tablo { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 16px;
background: var(--beyaz); }
.panel-tablo table { width: 100%; border-collapse: collapse; min-width: 720px; }
.panel-tablo th { padding: 13px 18px; text-align: left; background: #F4F6F9;
border-bottom: 1px solid var(--cizgi); font-family: var(--mono); font-size: 9.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--soluk-2); font-weight: 400; }
.panel-tablo td { padding: 15px 18px; border-bottom: 1px solid var(--cizgi);
font-size: 14px; vertical-align: top; color: var(--murekkep); }
.panel-tablo tr:last-child td { border-bottom: 0; }
.panel-tablo td b { display: block; font-weight: 700; }
.panel-tablo td span { display: block; margin-top: 3px; font-size: 12px; color: var(--gri); }
.panel-tablo td a { color: var(--murekkep); }
.panel-tablo .serbest { color: var(--kirmizi-metin); font-family: var(--mono); font-size: 10px;
letter-spacing: .05em; }
.panel-tablo .artis { color: #2E7D4F; font-size: 12px; }
.panel-tablo .azalis { color: var(--kirmizi-metin); font-size: 12px; }
.dugme.kucuk { padding: 7px 14px; font-size: 13px; }
.rapor-govde { margin-top: 24px; padding: 26px; border: 1px solid var(--cizgi);
border-radius: 16px; background: var(--beyaz); }
.rapor-govde table { width: 100%; border-collapse: collapse; }
.rapor-govde th, .rapor-govde td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi);
text-align: left; font-size: 13.5px; }
@media (max-width: 620px) {
.panel-ust { flex-direction: column; }
.panel-giris { padding: 24px; margin: 20px auto; }
}
/* ---- metrik sözlüğü ---- */
.sozluk { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 34px;
background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; }
.sz { padding: 22px 24px; background: var(--beyaz); }
.sz b { display: block; font-family: var(--baslik); font-weight: 700; font-size: 16px;
letter-spacing: -.015em; color: var(--murekkep); }
.sz p { margin: 9px 0 0; font-size: 14px; line-height: 1.65; color: var(--gri); }
.sz u { text-decoration: none; box-shadow: inset 0 -7px 0 rgba(255,10,0,.12); }
@media (max-width: 820px) { .sozluk { grid-template-columns: 1fr; } }
/* ---- teklif süreci ---- */
.surec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.sr { padding: 22px 20px; background: var(--beyaz); border: 1px solid var(--cizgi);
border-radius: 14px; }
.sr span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--kirmizi-metin); }
.sr b { display: block; margin-top: 10px; font-family: var(--baslik); font-weight: 700;
font-size: 16px; letter-spacing: -.015em; }
.sr p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--gri); }
@media (max-width: 900px) { .surec { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .surec { grid-template-columns: 1fr; } }
/* motor kırılımında eksik veri çubuğu soluk turuncu-gri, dolu değil */
.motor-satir .bar i.kismi { background: repeating-linear-gradient(45deg,
#C9D1DB 0 6px, #E4E9EF 6px 12px); }
/* koyu bölümdeki sayı hunisi: çubuk uzunluğu 240 planlanana oranlı.
156 anılma → 6 önerilme uçurumu kırmızı kıymık olarak görünür. */
.sayi-bar { height: 4px; margin: 12px 0 10px; border-radius: 2px;
background: rgba(255,255,255,.1); overflow: hidden; max-width: 190px; }
.sayi-bar i { display: block; height: 100%; width: var(--w); border-radius: 2px;
background: #C9D4E0; transform: scaleX(0); transform-origin: left;
transition: transform .9s cubic-bezier(.2,.8,.2,1) .25s; }
.sayi-bar i.kiymik { background: var(--kirmizi); min-width: 5px; }
html.js .gir.acik .sayi-bar i, html:not(.js) .sayi-bar i { transform: scaleX(1); }
.sayi-nokta { display: flex; gap: 5px; margin: 12px 0 10px; max-width: 190px; }
.sayi-nokta i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.sayi-nokta i.d { background: var(--kirmizi); }
/* ---- rapor kartı: satıra tıkla, kanıt açılsın ---- */
.soru-satir { cursor: pointer; }
.soru-satir:hover td, .soru-satir:focus-visible td { background: rgba(6,12,27,.03); }
.soru-satir:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: -2px; }
.soru-satir td:first-child { position: relative; padding-left: 26px; }
.soru-satir td:first-child::before { content: ""; position: absolute; left: 10px; top: 50%;
width: 7px; height: 7px; margin-top: -5px;
border-right: 1.6px solid var(--soluk-2); border-bottom: 1.6px solid var(--soluk-2);
transform: rotate(-45deg); transition: transform .2s ease; }
.soru-satir.acik td:first-child::before { transform: rotate(45deg); }
.rc-tablo .veriyok { color: #66717F; font-weight: 400; }
.soru-detay td { padding: 0 14px 14px 26px !important; background: rgba(6,12,27,.025); }
.sd-ust { display: block; padding-top: 12px; font-family: var(--mono); font-size: 10px;
letter-spacing: .07em; text-transform: uppercase; color: var(--soluk-2); }
.soru-detay blockquote { margin: 8px 0 0; padding-left: 10px;
border-left: 2px solid var(--kirmizi); font-size: 13px; line-height: 1.65; color: #414B57; }
.soru-detay em { font-style: normal; color: var(--kirmizi-metin); }
.soru-detay.kritik-detay blockquote { border-left-color: var(--kirmizi-metin); }
.motor-not { margin: 12px 0 0; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .03em; line-height: 1.6; color: var(--soluk-2); }
/* ---- bulgudan aksiyona ---- */
.aks { padding: 34px 0 38px; border-top: 1px solid var(--cizgi); }
.aks:first-child { border-top: 0; padding-top: 8px; }
.aks-ust { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.aks-no { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
color: var(--kirmizi-metin); padding-top: 8px; }
.aks-ust h2 { margin: 0; font-family: var(--baslik); font-weight: 800;
font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.028em; }
.aks-veri { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
color: var(--gri); }
.aks-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; }
.ak { padding: 18px 16px; background: var(--beyaz); }
.ak b { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
text-transform: uppercase; color: var(--soluk-2); }
.ak p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--murekkep); }
.ak.uyari { background: #FCF7F6; }
.ak.uyari b { color: var(--kirmizi-metin); }
.ak.uyari p { color: #55606E; }
@media (max-width: 1080px) { .aks-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .aks-izgara { grid-template-columns: 1fr; } .aks-ust { gap: 12px; } }
/* ================= PANEL — light dashboard =================
Kimola'nın yapısı (sol kenar çubuğu, rapor içi sekmeler, halka grafikler)
beyaz zemine taşındı; renk ve tipografi sitenin kendi dilinde kalıyor. */
body.panel-koyu { background: #F4F6F9; color: var(--murekkep); }
body.panel-koyu > nav { display: none; }
.pn-kabuk { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
/* --- sol kenar çubuğu --- */
.pn-yan-menu { position: sticky; top: 0; align-self: start; height: 100vh;
display: flex; flex-direction: column; padding: 22px 16px;
background: var(--beyaz); border-right: 1px solid var(--cizgi); }
.pn-marka { display: flex; align-items: center; gap: 9px; padding: 0 8px 20px;
font-family: var(--baslik); font-weight: 800; font-size: 19px; letter-spacing: -.03em;
color: var(--murekkep); text-decoration: none; }
.pn-marka svg { width: 26px; height: 26px; flex: 0 0 auto; }
.pn-kurum { padding: 12px; margin-bottom: 16px; border-radius: 11px; background: #F4F6F9; }
.pn-kurum b { display: block; font-family: var(--baslik); font-weight: 700; font-size: 14px;
line-height: 1.3; color: var(--murekkep); }
.pn-kurum span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px;
letter-spacing: .05em; color: var(--gri); overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.pn-menu { display: grid; gap: 2px; }
.pn-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border-radius: 9px; font-size: 14px; color: #4C5763; text-decoration: none;
transition: background .15s, color .15s; }
.pn-menu a:hover { background: #F4F6F9; color: var(--murekkep); }
.pn-menu a.aktif { background: rgba(255,10,0,.08); color: var(--kirmizi-metin); font-weight: 600; }
.pn-menu a i { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
opacity: .45; flex: 0 0 auto; }
.pn-menu a.aktif i { opacity: 1; }
.pn-menu-baslik { padding: 18px 12px 7px; font-family: var(--mono); font-size: 9px;
letter-spacing: .12em; text-transform: uppercase; color: var(--soluk-2); }
.pn-yan-alt { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.cikis-form { margin: 0; }
button.panel-cikis, .panel-cikis { display: block; width: 100%; padding: 9px 12px;
border: 1px solid var(--cizgi); border-radius: 9px; background: none; cursor: pointer;
font: inherit; font-size: 13px; color: var(--gri); text-align: left; text-decoration: none; }
button.panel-cikis:hover, .panel-cikis:hover { color: var(--murekkep); border-color: var(--murekkep); }
/* --- ana alan --- */
.pn-ana { padding: 30px 34px 60px; min-width: 0; }
.panel-bolum { padding: 0; }
.pn-ust { display: flex; align-items: flex-start; justify-content: space-between;
gap: 20px; margin-bottom: 22px; }
.panel-baslik { font-family: var(--baslik); font-weight: 800;
font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.03em;
color: var(--murekkep); margin: 6px 0 0; }
.pk-kunye { margin: 8px 0 0; font-family: var(--mono); font-size: 11px;
letter-spacing: .05em; color: var(--gri); }
.panel-not { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--gri); }
.panel-not a { color: var(--murekkep); text-decoration: underline; text-underline-offset: 3px; }
.panel-geri { display: inline-block; margin-bottom: 14px; font-size: 13.5px;
color: var(--gri); text-decoration: none; }
.panel-geri:hover { color: var(--murekkep); }
/* --- rapor içi sekmeler --- */
.pn-sekme { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px;
background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px;
overflow-x: auto; }
.pn-sekme button { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 9px;
background: none; cursor: pointer; font: inherit; font-size: 13.5px; color: #55606E; }
.pn-sekme button:hover { background: #F4F6F9; }
.pn-sekme button.aktif { background: var(--murekkep); color: var(--beyaz); font-weight: 600; }
.pn-panel[hidden] { display: none; }
/* --- metrik kartları --- */
.pk-metrikler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pk-metrik { padding: 18px 20px; border-radius: 14px; background: var(--beyaz);
border: 1px solid var(--cizgi); }
.pk-metrik span { display: block; font-family: var(--mono); font-size: 9.5px;
letter-spacing: .09em; text-transform: uppercase; color: #8494A8; }
.pk-metrik b { display: block; margin-top: 8px; font-family: var(--baslik); font-weight: 800;
font-size: 32px; line-height: 1; letter-spacing: -.03em; color: var(--murekkep); }
.pk-metrik b.vurgu { color: var(--kirmizi-metin); }
.pk-fark { display: inline-block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; }
.pk-fark.iyi { color: #2E7D4F; } .pk-fark.kotu { color: var(--kirmizi-metin); }
.pk-fark.ayni { color: var(--soluk-2); }
/* --- yönetici özeti --- */
.pk-ozet { margin-top: 16px; padding: 22px 26px; border-radius: 14px;
background: var(--murekkep); color: #E8EDF3; }
.pk-ozet-etiket { display: block; font-family: var(--mono); font-size: 9.5px;
letter-spacing: .1em; text-transform: uppercase; color: #FF6A60; margin-bottom: 8px; }
.pk-ozet p { margin: 0; font-size: 15.5px; line-height: 1.7; }
/* --- ortak blok --- */
.pk-govde { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 16px;
align-items: start; }
.pk-blok { padding: 20px 22px; border-radius: 14px; background: var(--beyaz);
border: 1px solid var(--cizgi); margin-bottom: 16px; }
.pk-blok:last-child { margin-bottom: 0; }
.pk-blok h2 { margin: 0 0 14px; font-family: var(--baslik); font-weight: 700; font-size: 15px;
letter-spacing: -.01em; color: var(--murekkep); }
.pk-blok h2 em { font-style: normal; font-family: var(--mono); font-size: 9.5px;
letter-spacing: .05em; color: var(--gri); margin-left: 8px; }
.pk-ciftliste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pk-ciftliste .pk-blok { margin-bottom: 0; }
/* --- en iyi / en zayıf --- */
.pk-mini { display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; padding: 9px 0;
border-top: 1px solid var(--cizgi); }
.pk-mini:first-of-type { border-top: 0; }
.pk-mini-oran { font-family: var(--baslik); font-weight: 700; font-size: 14px;
color: var(--murekkep); }
.pk-mini.zayif .pk-mini-oran { color: var(--kirmizi-metin); }
.pk-mini-soru { font-size: 12.5px; line-height: 1.45; color: #55606E; }
.pk-mini-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px;
background: #EDF0F4; overflow: hidden; }
.pk-mini-bar i { display: block; height: 100%; border-radius: 2px; background: #6E7F94; }
.pk-mini.zayif .pk-mini-bar i { background: var(--kirmizi); }
/* --- soru tablosu --- */
.pk-tablo { overflow-x: auto; }
.pk-tablo table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pk-tablo th { padding: 9px 10px; text-align: left; font-family: var(--mono); font-size: 9px;
letter-spacing: .09em; text-transform: uppercase; color: #8494A8; font-weight: 400;
border-bottom: 1px solid var(--cizgi); }
.pk-tablo td { padding: 11px 10px; border-bottom: 1px solid var(--cizgi);
font-size: 13px; color: var(--murekkep); }
.pk-satir { cursor: pointer; }
.pk-satir:hover td, .pk-satir:focus-visible td { background: #F7F9FB; }
.pk-satir:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: -2px; }
.pk-soru { position: relative; padding-left: 24px !important; }
.pk-soru::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px;
margin-top: -4px; border-right: 1.5px solid var(--soluk-2); border-bottom: 1.5px solid var(--soluk-2);
transform: rotate(-45deg); transition: transform .2s ease; }
.pk-satir.acik .pk-soru::before { transform: rotate(45deg); }
.pk-tablo b { font-weight: 700; font-family: var(--mono); font-size: 11.5px;
padding: 2px 7px; border-radius: 5px; }
.pk-tablo b.ok { background: #E4F3E9; color: #2E7D4F; }
.pk-tablo b.orta { background: #FCF2DF; color: #946A16; }
.pk-tablo b.yok { background: #FDE9E7; color: var(--kirmizi-metin); }
.pk-tablo b.veriyok { background: none; color: #66717F; font-weight: 400; }
.pk-oran { font-family: var(--baslik); font-weight: 700; color: var(--murekkep); }
.pk-detay td { padding: 0 10px 14px 24px !important; background: #F7F9FB; }
.pk-detay-ust { display: block; padding-top: 11px; font-family: var(--mono); font-size: 9.5px;
letter-spacing: .07em; text-transform: uppercase; color: #8494A8; }
.pk-detay blockquote { margin: 7px 0 0; padding-left: 10px; border-left: 2px solid var(--kirmizi);
font-size: 13px; line-height: 1.65; color: #414B57; }
.pk-detay-yok { border-left-color: #C9D1DB !important; color: #8494A8 !important; }
/* --- kaynak listesi --- */
.pk-kaynak { display: grid; grid-template-columns: 1fr 64px 26px; align-items: center;
gap: 8px; padding: 7px 0; border-top: 1px solid var(--cizgi); }
.pk-kaynak:first-of-type { border-top: 0; }
.pk-kaynak-ad { font-family: var(--mono); font-size: 10.5px; color: #55606E;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-kaynak-bar { height: 4px; border-radius: 2px; background: #EDF0F4; overflow: hidden; }
.pk-kaynak-bar i { display: block; height: 100%; border-radius: 2px; background: #6E7F94; }
.pk-kaynak-sayi { font-family: var(--baslik); font-weight: 700; font-size: 12px;
text-align: right; color: var(--murekkep); }
.pk-yan-not { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--gri); }
.pk-yan-not a { color: var(--murekkep); }
.pk-kunye-liste div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
border-top: 1px solid var(--cizgi); }
.pk-kunye-liste div:first-child { border-top: 0; }
.pk-kunye-liste span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
text-transform: uppercase; color: var(--gri); }
.pk-kunye-liste b { font-size: 12.5px; color: var(--murekkep); }
/* --- halka grafik (Kimola'nın yüzdelik daireleri) --- */
.pn-halkalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px; }
.pn-halka { text-align: center; }
.pn-halka svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.pn-halka circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.pn-halka .iz { stroke: #EDF0F4; }
.pn-halka .dolgu { stroke: var(--murekkep); transition: stroke-dashoffset .8s ease; }
.pn-halka.vurgu .dolgu { stroke: var(--kirmizi); }
.pn-halka-deger { position: relative; display: inline-block; }
.pn-halka-deger span { position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--baslik); font-weight: 800; font-size: 22px; letter-spacing: -.03em;
color: var(--murekkep); }
.pn-halka-ad { margin-top: 10px; font-size: 13px; color: #55606E; }
/* --- tur listesi --- */
.pl-liste { display: grid; gap: 10px; }
.pl-satir { display: grid; align-items: center; gap: 16px; color: inherit;
grid-template-columns: 40px minmax(0,1fr) 110px 92px 92px 104px;
padding: 16px 18px; border-radius: 14px; text-decoration: none;
background: var(--beyaz); border: 1px solid var(--cizgi);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pl-satir:hover { border-color: #C9D4E0; box-shadow: 0 6px 20px rgba(6,12,27,.07);
transform: translateY(-1px); }
.pl-rozet { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
background: rgba(255,10,0,.1); color: var(--kirmizi-metin);
font-family: var(--baslik); font-weight: 800; font-size: 15px; }
.pl-ana { min-width: 0; }
.pl-ana b { display: block; font-family: var(--baslik); font-weight: 700; font-size: 16px;
letter-spacing: -.015em; color: var(--murekkep); }
.pl-ana em { display: block; margin-top: 4px; font-family: var(--mono); font-style: normal;
font-size: 10.5px; letter-spacing: .04em; color: var(--gri); }
.pl-satir, .pl-satir:visited { color: var(--murekkep); }
.pl-ana u { text-decoration: none; color: var(--kirmizi-metin); }
.pl-metrik i { display: block; font-family: var(--mono); font-style: normal; font-size: 9px;
letter-spacing: .08em; text-transform: uppercase; color: #8494A8; }
.pl-metrik b { display: block; margin-top: 4px; font-family: var(--baslik); font-weight: 700;
font-size: 19px; letter-spacing: -.02em; color: var(--murekkep); }
.pl-metrik b.vurgu { color: var(--kirmizi-metin); }
.pl-fark { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; }
.pl-fark.iyi { color: #2E7D4F; } .pl-fark.kotu { color: var(--kirmizi-metin); }
.pl-fark.ayni { color: var(--soluk-2); }
.pl-ac { text-align: right; font-size: 13px; color: var(--gri); font-weight: 500; }
.pl-satir:hover .pl-ac { color: var(--murekkep); }
/* --- nereden kaybediyorsunuz --- */
.pk-bosluk { border-color: rgba(255,10,0,.24); background: #FFFBFA; }
.pk-bosluk-not { margin: -6px 0 14px; font-size: 12.5px; line-height: 1.6; color: #55606E; }
.pk-bosluk-not b { color: var(--murekkep); }
.bs { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr);
gap: 14px; padding: 13px 0; border-top: 1px solid var(--cizgi); align-items: start; }
.bs:first-of-type { border-top: 0; }
.bs-sol b { display: block; font-size: 13.5px; line-height: 1.45; color: var(--murekkep);
font-weight: 600; }
.bs-oran { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 5px;
background: #FDE9E7; color: var(--kirmizi-metin);
font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.bs-kaynak span { display: block; font-family: var(--mono); font-size: 10.5px;
color: #55606E; padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-kaynak i { font-style: normal; color: var(--soluk-2); margin-left: 6px; }
.bs-yok { color: var(--soluk-2) !important; }
.bs-is { font-size: 12.5px; line-height: 1.5; color: #414B57; }
@media (max-width: 1080px) {
.pk-govde { grid-template-columns: 1fr; }
.pk-metrikler { grid-template-columns: 1fr 1fr; }
.pk-ciftliste { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.pn-kabuk { grid-template-columns: 1fr; }
.pn-yan-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
align-items: center; gap: 10px; padding: 14px 18px; border-right: 0;
border-bottom: 1px solid var(--cizgi); }
.pn-marka { padding: 0; }
.pn-kurum { margin: 0; padding: 8px 12px; }
.pn-menu { display: flex; gap: 4px; overflow-x: auto; }
.pn-menu-baslik { display: none; }
.pn-yan-alt { margin: 0 0 0 auto; padding: 0; border: 0; }
.pn-ana { padding: 22px 18px 48px; }
.pl-satir { grid-template-columns: 40px 1fr; gap: 10px 14px; }
.pl-ana, .pl-metrik:nth-of-type(1), .pl-ac { grid-column: 2; }
.pl-ac { text-align: left; }
}
@media (max-width: 780px) { .bs { grid-template-columns: 1fr; gap: 8px; } }
.giris-hata { margin: 0 0 14px; padding: 10px 13px; border-radius: 9px;
background: rgba(255,10,0,.08); border: 1px solid rgba(255,10,0,.24);
font-size: 13.5px; line-height: 1.5; color: var(--kirmizi-metin); }
/* ---- dokulu koyu bölüm: canvas zemin (QUARTR disiplini + Fable tekniği) ----
Tek aksan rengi kuralı: mürekkepten kırmızıya, üçüncü renk yok.
Doku sayfa dururken de yaşar; metin okunabilirliği perdeyle korunur. */
.koyu-bolum.dokulu { position: relative; isolation: isolate; }
.doku-tuval {
position: absolute; inset: 0; width: 100%; height: 100%;
display: block; z-index: -2; opacity: .85;
}
/* perde: canvas'ın üstünde, metnin altında — kontrast garantisi */
.koyu-bolum.dokulu::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(120% 80% at 22% 42%, transparent 0%, rgba(6,12,27,.72) 58%, rgba(6,12,27,.94) 100%),
linear-gradient(180deg, rgba(6,12,27,.55) 0%, rgba(6,12,27,.2) 30%, rgba(6,12,27,.75) 100%);
}
@media (prefers-reduced-motion: reduce) { .doku-tuval { opacity: .5; } }
/* ---- tanıtım filmi ---- */
.film-bolum { padding: 92px 0 96px; }
.film-izgara { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
gap: 44px; align-items: start; }
.film-sol h2 { margin: 0; font-family: var(--baslik); font-weight: 800;
font-size: clamp(28px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.035em; }
.film-giris { margin: 16px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--gri);
max-width: 42ch; }
/* anlar: filmin bölüm listesi — tıklayınca o saniyeden başlar */
.film-anlar { list-style: none; margin: 26px 0 0; padding: 0; }
.film-anlar li { border-top: 1px solid var(--cizgi); }
.film-anlar li:first-child { border-top: 0; }
.film-anlar button { display: grid; grid-template-columns: 58px 1fr; gap: 14px;
width: 100%; padding: 13px 8px 13px 0; border: 0; background: none; cursor: pointer;
text-align: left; font: inherit; transition: background .16s ease; }
.film-anlar button:hover { background: #F7F9FB; }
.film-anlar button:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 2px; }
.fa-saat { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
color: var(--kirmizi-metin); padding-top: 2px; }
.fa-metin b { display: block; font-family: var(--baslik); font-weight: 600; font-size: 14.5px;
line-height: 1.45; letter-spacing: -.01em; color: var(--murekkep); }
.fa-metin em { display: block; margin-top: 3px; font-family: var(--mono); font-style: normal;
font-size: 10.5px; letter-spacing: .04em; color: var(--gri); }
.film-anlar button.etkin { background: #F4F6F9; }
.film-anlar button.etkin .fa-metin b { color: var(--kirmizi-metin); }
.film { position: relative; border-radius: 18px; overflow: hidden;
background: var(--murekkep); box-shadow: 0 24px 60px rgba(6,12,27,.16);
aspect-ratio: 16 / 9; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-oynat {
position: absolute; inset: 0; width: 100%; height: 100%;
display: flex; align-items: flex-end; justify-content: flex-end;
gap: 14px; padding: 28px; border: 0; cursor: pointer;
background: linear-gradient(180deg, rgba(6,12,27,.12) 0%, rgba(6,12,27,.06) 45%, rgba(6,12,27,.72) 100%);
transition: background .25s ease;
}
.film-oynat:hover { background: linear-gradient(180deg, rgba(6,12,27,.2) 0%, rgba(6,12,27,.12) 45%, rgba(6,12,27,.8) 100%); }
.film-oynat[hidden] { display: none; }
.fo-ikon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
background: var(--kirmizi); position: relative;
box-shadow: 0 6px 22px rgba(255,10,0,.35); transition: transform .25s ease; }
.fo-ikon::after { content: ""; position: absolute; left: 22px; top: 50%;
margin-top: -9px; border-left: 15px solid #fff;
border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.film-oynat:hover .fo-ikon { transform: scale(1.06); }
.fo-yazi { font-family: var(--baslik); font-weight: 700; font-size: 17px;
color: var(--beyaz); text-align: right; letter-spacing: -.015em; order: -1;
text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.fo-yazi em { display: block; margin-top: 3px; font-family: var(--mono);
font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: .08em;
color: rgba(255,255,255,.75); }
@media (max-width: 980px) {
.film-izgara { grid-template-columns: 1fr; gap: 28px; }
.film-sol { order: -1; }
}
@media (max-width: 620px) {
.film-bolum { padding: 60px 0 64px; }
.film-anlar button { grid-template-columns: 50px 1fr; gap: 10px; }
.film-oynat { padding: 18px; gap: 11px; }
.fo-ikon { width: 46px; height: 46px; }
.fo-ikon::after { left: 18px; margin-top: -7px; border-left-width: 12px;
border-top-width: 7px; border-bottom-width: 7px; }
.fo-yazi { font-size: 15px; }
}
/* ---------- kıyas tablosu (ana sayfa) ----------
Cevap motorları kıyas tablolarını doğrudan alıntılıyor; bu yüzden gerçek
kullanılıyor, kutu yığını değil. Rakip marka adı YAZILMAZ —
karşı sütun "klasik SEO ve marka izleme araçları" diye jenerik anılır. */
.kiyas-bolum { padding: var(--bolum-bosluk) 0; }
.kiyas-sar { margin-top: 38px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kiyas { width: 100%; border-collapse: collapse; min-width: 720px;
font-size: 15.5px; line-height: 1.55; }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kiyas thead th { font-family: var(--mono); font-weight: 400; font-size: 11px;
letter-spacing: .1em; text-transform: uppercase; color: var(--soluk);
text-align: left; padding: 0 18px 12px; vertical-align: bottom; }
.kiyas thead th.ky-biz { color: var(--kirmizi-metin); font-weight: 500; }
.kiyas tbody th { font-family: var(--baslik); font-weight: 700; font-size: 15px;
letter-spacing: -.015em; text-align: left; padding: 18px; width: 18%;
color: var(--murekkep); vertical-align: top; }
.kiyas tbody td { padding: 18px; color: var(--murekkep-2); vertical-align: top; width: 41%; }
.kiyas tbody tr { border-top: 1px solid var(--cizgi); }
.kiyas tbody tr:last-child { border-bottom: 1px solid var(--cizgi); }
.kiyas td.ky-biz { background: #FBF9F8; color: var(--murekkep); font-weight: 500;
box-shadow: inset 2px 0 0 var(--kirmizi); }
.kiyas-not { margin-top: 22px; font-size: 15px; color: var(--soluk); max-width: 68ch; }
/* ---------- sessizlik bölümü (karar defteri) ---------- */
.sessiz-bolum { padding: var(--bolum-bosluk) 0; background: var(--murekkep); color: var(--beyaz); }
.sessiz-bolum h2 { color: var(--beyaz); }
.sessiz-bolum .solgun { color: rgba(255,255,255,.56); }
.sessiz-bolum .giris { color: rgba(255,255,255,.72); }
.sessiz-bolum .etiket { color: rgba(255,255,255,.6); }
.sessiz-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1px; margin-top: 42px; background: rgba(255,255,255,.12); }
.sessiz-izgara .sz { background: var(--murekkep); padding: 30px 26px 32px; }
.sessiz-izgara .sz-no { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
color: var(--kirmizi-metin); margin-bottom: 16px; }
.sessiz-bolum .sz b { display: block; color: var(--beyaz);
font-family: var(--baslik); font-weight: 700; font-size: 19px;
letter-spacing: -.025em; line-height: 1.2; }
.sessiz-izgara .sz p { margin-top: 12px; font-size: 15px; line-height: 1.65;
color: rgba(255,255,255,.72); }
/* ---------- veri akışı (paketler) ---------- */
.veri-bolum { padding: var(--bolum-bosluk) 0 0; }
.veri-izgara { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
gap: 52px; align-items: start; }
.veri-sol h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 14px; }
.veri-sag { min-width: 0; }
.veri-kod { min-width: 0; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden;
background: var(--murekkep); box-shadow: 0 20px 50px rgba(6,12,27,.14); }
.vk-ust { display: flex; align-items: center; gap: 7px; padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,.1); }
.vk-ust i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.vk-ust em { margin-left: 8px; font-family: var(--mono); font-style: normal;
font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.veri-kod pre { margin: 0; padding: 20px 22px 24px; overflow-x: auto; }
.veri-kod code { font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
color: #C9D4E4; white-space: pre; }
.veri-not { margin-top: 14px; font-size: 13.5px; color: var(--soluk); }
@media (max-width: 980px) {
.veri-izgara { grid-template-columns: minmax(0,1fr); gap: 34px; }
.sessiz-izgara { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
.kiyas { min-width: 620px; font-size: 14.5px; }
.kiyas tbody th, .kiyas tbody td { padding: 14px; }
.sz { padding: 24px 20px 26px; }
.veri-kod code { font-size: 11.5px; }
}
/* ---------- panel: kaynak türü kırılımı ----------
Siz ve Rakip satırları vurgulanır; turun hikâyesi o iki satırda. */
.pk-tur { display: grid; grid-template-columns: 96px 1fr 42px auto; align-items: center;
gap: 10px 12px; padding: 11px 0; border-top: 1px solid #EDF0F4; }
.pk-tur:first-of-type { border-top: 0; }
.pk-tur-ad { font-family: var(--baslik); font-weight: 700; font-size: 12.5px;
letter-spacing: -.01em; color: #55606E; }
.pk-tur-bar { height: 6px; border-radius: 3px; background: #EDF0F4; overflow: hidden; }
.pk-tur-bar i { display: block; height: 100%; border-radius: 3px; background: #8C9AAB; }
.pk-tur-pay { font-family: var(--baslik); font-weight: 800; font-size: 13px;
text-align: right; color: var(--murekkep); }
.pk-tur-ek { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: #8C97A5;
white-space: nowrap; }
.pk-tur-ornek { grid-column: 2 / -1; font-family: var(--mono); font-size: 10px;
color: #A3ACB8; margin-top: -4px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
.pk-tur.one .pk-tur-ad { color: var(--murekkep); }
.pk-tur.one .pk-tur-bar i { background: var(--kirmizi); }
@media (max-width: 620px) {
.pk-tur { grid-template-columns: 78px 1fr 40px; }
.pk-tur-ek { grid-column: 2 / -1; margin-top: -2px; }
}
/* ---------- kurumsal gereklilikler (kapsam sayfası) ----------
Satın alma ve uyum biriminin sorduğu sorular; SaaS'te olmayan,
kurumsal satışta ilk sorulan başlıklar. */
.gereklilik-bolum { padding: var(--bolum-bosluk) 0; background: var(--acik); }
.gereklilikler { margin-top: 40px; border-top: 1px solid var(--cizgi); }
.gr { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 0 20px;
padding: 26px 0; border-bottom: 1px solid var(--cizgi); align-items: start; }
.gr-no { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
color: var(--kirmizi-metin); padding-top: 4px; }
.gr b { grid-column: 2; display: block; font-family: var(--baslik); font-weight: 700;
font-size: 19px; letter-spacing: -.025em; line-height: 1.25; }
.gr p { grid-column: 2; margin-top: 10px; font-size: 16px; line-height: 1.7;
color: var(--murekkep-2); max-width: 74ch; }
.gr p b { display: inline; font-size: inherit; font-weight: 700; color: var(--murekkep); }
.fiyat-alt-not { margin-top: 26px; font-size: 15px; color: var(--soluk); max-width: 66ch; }
/* ---------- kaynak sahipliği (rapor sayfası, koyu zemin) ---------- */
.sahiplik { margin-top: 40px; }
.sh { display: grid; grid-template-columns: 150px minmax(0,1fr) 52px 150px;
align-items: center; gap: 16px; padding: 13px 0;
border-top: 1px solid rgba(255,255,255,.12); }
.sh:first-child { border-top: 0; }
.sh-ad { font-family: var(--baslik); font-weight: 700; font-size: 14.5px;
letter-spacing: -.015em; color: rgba(255,255,255,.66); }
.sh-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 4px; width: var(--w);
background: rgba(255,255,255,.34); }
.sh-pay { font-family: var(--baslik); font-weight: 800; font-size: 16px; text-align: right;
color: var(--beyaz); }
.sh-ek { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
color: rgba(255,255,255,.42); text-align: right; white-space: nowrap; }
.sh.one .sh-ad { color: var(--beyaz); }
.sh.one .sh-bar i { background: var(--kirmizi); }
.sahiplik-not { margin-top: 22px; font-size: 14.5px; line-height: 1.7;
color: rgba(255,255,255,.5); max-width: 74ch; }
@media (max-width: 720px) {
.gr { grid-template-columns: minmax(0,1fr); gap: 6px; }
.gr-no { padding-top: 0; }
.gr b, .gr p { grid-column: 1; }
.sh { grid-template-columns: minmax(0,1fr) 48px; gap: 4px 12px; }
.sh-bar { grid-column: 1 / -1; order: 3; }
.sh-ek { grid-column: 1 / -1; order: 4; text-align: left; }
}
/* ---------- SSS (ana sayfa) ----------
Şemadaki FAQPage'in görünür karşılığı. Yapısal veride olup sayfada
olmayan içerik uyumsuzluk sayılır; ikisi burada eşleşiyor. */
.sss-bolum { padding: var(--bolum-bosluk) 0; background: var(--acik); }
.sss { margin-top: 38px; border-top: 1px solid var(--cizgi); }
.ss { border-bottom: 1px solid var(--cizgi); }
.ss summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0;
position: relative; }
.ss summary::-webkit-details-marker { display: none; }
.ss summary h3 { display: inline; font-family: var(--baslik); font-weight: 700;
font-size: 18px; letter-spacing: -.02em; line-height: 1.35; }
.ss summary::after { content: ""; position: absolute; right: 6px; top: 27px;
width: 11px; height: 11px; border-right: 2px solid var(--soluk);
border-bottom: 2px solid var(--soluk); transform: rotate(45deg);
transition: transform .2s ease; }
.ss[open] summary::after { transform: rotate(-135deg); }
.ss summary:hover h3 { color: var(--kirmizi-metin); }
.ss summary:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: -2px; }
.ss p { padding: 0 40px 22px 0; margin-top: -4px; font-size: 16px; line-height: 1.7;
color: var(--murekkep-2); max-width: 76ch; }
.sss-alt { margin-top: 24px; font-size: 15px; color: var(--soluk); }
.bolum-basligi { font-size: clamp(28px, 3.2vw, 40px); }
.alt-baslik { font-family: var(--baslik); font-weight: 700; font-size: 19px;
letter-spacing: -.02em; }
/* onay rozeti: raporun künyesinde, soru setinin onaydan geçip geçmediği */
.pk-onay { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
padding: 5px 12px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .05em; background: #FFF4F3; color: #8A3A34; border: 1px solid #F6D9D6; }
.pk-onay::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #D08A84; }
.pk-onay.tam { background: #F1F7F2; color: #2F5C3A; border-color: #D6E7DA; }
.pk-onay.tam::before { background: #4C8A5E; }
/* Video oynatılamadığında görünen yedek metin — koyu film zemininde okunur
olmalı. Varsayılan tarayıcı stili mürekkep üstünde mürekkep veriyordu. */
.film-yedek { padding: 28px; color: var(--beyaz); font-size: 15.5px;
line-height: 1.6; }
.film-yedek a { color: var(--beyaz); text-decoration: underline; }
/* Koyu zeminlerde metin kırmızısı geri marka rengine döner — koyulaştırılmış
ton orada kontrastı DÜŞÜRÜYOR (3,45), marka rengi ise 5,3 veriyor. */
.koyu-bolum .kirmizi-yazi, .sessiz-izgara .sz-no, .koyu-bolum .sifir, .bt-satir .sifir, u.sifir,
.kapanis .kirmizi-yazi {
color: var(--kirmizi);
}