/* ============================================================================
DGN — Bileşenler
----------------------------------------------------------------------------
KURALLAR (ihlal = kaskad savaşı):
1. Bileşen margin VERMEZ. Yalnız padding. Dış boşluk .flow/.section'dan.
(Tek istisna: bir bileşenin KENDİ iç parçaları — .hero__strip gibi.)
2. Maksimum specificity 0,2,0. ID yok, element+class yok, derin iniş yok.
3. Varyant = modifier class (.x--compact), inline style değil.
4. Ham renk/ölçü yazılmaz, yalnız token.
5. `[data-theme="dark"] .x {}` YASAK — eksikse token eksiktir.
========================================================================== */
@layer components {
/* === Butonlar ===========================================================
Köşeler keskin, yükseklik sabit. Birincil eylem yeşil; ikincil eylem
mürekkep dolgulu; üçüncül kılcal çerçeveli. Yeşil bir bölümün TEK asıl
eylemini işaretler — bir bölümde iki yeşil buton varsa biri fazladır. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
padding: var(--space-xs) var(--space-m);
border: 1px solid transparent;
border-radius: var(--radius-m);
font-family: var(--font-body);
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
transition: background-color .15s var(--ease), border-color .15s var(--ease),
color .15s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
background-color: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
}
.btn--primary:hover {
background-color: var(--brand-hover);
border-color: var(--brand-hover);
color: var(--on-brand);
}
.btn--deep {
background-color: var(--surface-deep);
border-color: var(--surface-deep);
color: var(--on-deep);
}
.btn--deep:hover {
background-color: var(--data);
border-color: var(--data);
color: #fff;
}
.btn--outline {
border-color: var(--rule-strong);
color: var(--ink);
background-color: transparent;
}
.btn--outline:hover { border-color: currentColor; color: var(--brand-deep); }
/* Sessiz eylem: kart/satır içindeki "detaylı bilgi" bağlantısı.
Ok işareti hover'da bir adım ilerler — yön bilgisi, süs değil. */
.btn--quiet {
padding-inline: 0;
color: var(--data);
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.btn--quiet:hover { color: var(--brand-deep); }
.btn--quiet .icon { transition: transform .15s var(--ease); }
.btn--quiet:hover .icon { transform: translateX(3px); }
.btn--lg { font-size: var(--step-0); padding: var(--space-s) var(--space-l); }
/* Başlık çubuğundaki eylem — eski siteden korunan biçim: tam yuvarlatılmış
hap, geniş harf aralığı, küçük punto. Sitenin geri kalanı keskin köşeli
olduğu için bu tek yuvarlak öğe DGN PLUS'ı ayrı bir ürün gibi işaretler.
Tek fark: eski sürüm yeşil üzerine BEYAZ yazıyordu (2,1:1 — okunmuyordu);
burada metin mürekkep rengi (7,9:1). */
.btn--pill {
padding: 0.55rem 1rem;
border-radius: 999px;
font-size: var(--step--2);
font-weight: 700;
letter-spacing: 0.08em;
/* Harf aralığı SON harften sonra da boşluk bırakır; metin optik olarak
sola kayar. Aynı miktarda girinti bunu dengeler. */
text-indent: 0.08em;
line-height: 1;
}
/* DGN PLUS ayrı bir ürün: yazısı beyaz. Yeşil üzerinde beyaz 2,3:1 verir,
bu yüzden metin kalın ve punto düşürülmedi. */
.btn--primary.btn--pill { color: #fff; }
.btn--primary.btn--pill:hover { color: #fff; }
/* === Etiket / bölüm başlığı ============================================= */
.eyebrow {
display: block;
font-family: var(--font-label);
font-size: var(--step--2);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
}
.eyebrow--brand { color: var(--brand-deep); }
.section-heading { --flow-space: var(--space-s); }
.section-heading p { color: var(--ink-2); font-size: var(--step-1); max-inline-size: 46ch; }
.icon { display: block; flex: none; }
/* === Site başlığı =======================================================
Kâğıt üzerinde kılcal bir çizgi. Kaydırınca yükseklik ve logo küçülür,
zemin matlaşır — sayfa içeriğini örtmesin. */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: var(--z-sticky);
background-color: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
border-block-end: 1px solid var(--rule);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-s); }
.site-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
min-block-size: var(--header-h);
transition: min-block-size .25s var(--ease);
}
/* Logo açılışta eski sitedeki boyutta (75px kare) durur, sayfa kaydırılınca
başlıkla birlikte küçülür — ilk karşılaşmada marka, sonrasında içerik
önde olur. */
.site-logo { display: flex; align-items: center; }
.site-logo img {
block-size: var(--logo-h, 4.5rem);
inline-size: auto;
transition: block-size .25s var(--ease);
}
.site-header[data-scrolled="true"] { --logo-h: 2.4rem; }
.site-header[data-scrolled="true"] .site-header__inner { min-block-size: 4rem; }
/* === Ana gezinti ======================================================== */
.site-nav__list {
display: flex;
align-items: center;
gap: var(--space-3xs);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
padding: var(--space-2xs) var(--space-xs);
color: var(--ink);
font-size: var(--step--1);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
border-radius: var(--radius-s);
}
.site-nav__link:hover { color: var(--brand-deep); }
/* Aktif sayfa altında 2px yeşil işaret — renk tek ayırt edici değil */
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="true"] { color: var(--ink); font-weight: 600; }
.site-nav__link[aria-current="page"]::after,
.site-nav__link[aria-current="true"]::after {
content: "";
position: absolute;
inset-inline: var(--space-xs);
inset-block-end: -2px;
block-size: 2px;
background-color: var(--brand);
}
/* Açılır menü — JS yokken :hover ile, JS varken aria-expanded ile */
.site-nav__item { position: relative; }
.site-nav__menu {
position: absolute;
inset-block-start: calc(100% + var(--space-2xs));
inset-inline-start: 0;
z-index: var(--z-nav);
min-inline-size: 15rem;
padding: var(--space-2xs);
margin: 0;
list-style: none;
background-color: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-m);
box-shadow: var(--shadow-m);
}
.site-nav__menu[hidden] { display: none; }
.site-nav__menu .site-nav__link { inline-size: 100%; }
.site-nav__menu .site-nav__link::after { content: none; }
/* --- Dar ekran gezintisi ------------------------------------------------
Hamburger yok. Başlık iki satırlı bir ızgaraya döner ve LOGO iki satırı
birden kaplar; menü logonun sağında, ikinci satırda durur. Böylece menü
kendiliğinden logonun bittiği hizadan başlar ve başlık tek bir blok gibi
okunur.
┌────────┬─────────────────────┐
│ │ TR EN RU ☾ │
│ LOGO ├─────────────────────┤
│ │ 4 ana başlık │
└────────┴─────────────────────┘
Alt menü taşıyan başlığa basınca çocukları tam genişlikte bir panel
olarak açılır (masaüstündeki menünün aynısı, konumu değişir). Davranış
zaten nav.js'te: aria-expanded + hidden. */
@media (max-width: 63.99em) {
.site-header__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--space-m); /* logodan sonra nefes payı */
row-gap: 0;
padding-block-end: 0;
}
/* Logo dar ekranda bir tık küçülür: iki satırı kaplamaya devam ediyor ama
yanındaki dört başlığa yer bırakıyor. */
.site-logo { grid-column: 1; grid-row: 1 / 3; }
.site-logo img { block-size: 3.75rem; }
.site-header__inner > .cluster { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.site-nav {
grid-column: 2;
grid-row: 2;
/* Sağ kenarda kabın dolgusuna kadar uzanır */
margin-inline-end: calc(var(--space-m) * -1);
border-block-start: 1px solid var(--rule);
}
.site-nav__list {
justify-content: space-between;
gap: 0;
padding-inline-end: var(--space-m);
}
.site-nav__list > li:first-child > .site-nav__link { padding-inline-start: 0; }
/* Dört başlık logodan arta kalan ~240px'e sığmalı: punto düşürülüp
yatay dolgu kaldırıldı. Dokunma hedefi yükseklikten geliyor (44px),
genişlikten değil. */
.site-nav__link {
min-block-size: 2.75rem;
padding-inline: var(--space-3xs);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0;
}
.site-nav__link[aria-current="page"]::after { inset-inline: 0 var(--space-2xs); }
/* Panel BAŞLIĞIN tamamının altına yaslanır; öğeye göre değil başlığa göre
konumlanması için öğenin position: relative'i burada iptal edilir. */
.site-nav__item { position: static; }
.site-nav__menu {
inset-inline: 0;
inset-block-start: 100%;
min-inline-size: 0;
padding: var(--space-2xs) var(--space-m) var(--space-s);
border: 0;
border-block-end: 1px solid var(--rule);
border-radius: 0;
}
.site-nav__menu .site-nav__link {
justify-content: flex-start;
padding-inline: 0;
font-size: var(--step--1);
font-weight: 500;
}
.site-nav__menu .site-nav__link[aria-current="page"]::after { content: none; }
}
/* === Dil / tema ========================================================= */
.lang-switch {
display: flex;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: 0.04em;
}
.lang-switch li + li { border-inline-start: 1px solid var(--rule); }
.lang-switch a {
display: block;
padding: var(--space-3xs) var(--space-2xs);
color: var(--ink-3);
text-decoration: none;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--brand-deep); font-weight: 700; }
/* Çerçevesiz: dil anahtarıyla aynı ağırlıkta bir kontrol, kutu değil.
Dokunma hedefi görünür alandan büyük tutulur (padding), böylece kutuyu
kaldırmak mobilde isabet alanını küçültmez. */
.theme-toggle {
display: inline-flex;
padding: var(--space-2xs);
border: 0;
border-radius: var(--radius-s);
background: transparent;
color: var(--ink-3);
}
.theme-toggle:hover { color: var(--ink); }
/* Buton, GEÇİLECEK temayı gösterir: açık temadayken ay, koyu temadayken güneş.
Token yasağının bilinçli istisnası — burada değişen renk değil, ikonun kendisi. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
}
/* ============================================================================
DGN — Ana sayfa hero
----------------------------------------------------------------------------
Fotoğraf artık metnin ardında değil ARDINDA VE ALTINDA: tüm giriş bölümünü
kaplıyor, metin onun üzerinde duruyor. Perde siyah bir örtü değil, soldan
ve alttan güçlenen yönlü bir geçiş — fotoğrafın sağdaki ışığı görünür
kalıyor, soldaki metin tam kontrast alıyor.
Bu bölüm her iki temada koyudur; bu yüzden token'lar .section--deep ile
aynı mantıkla yeniden bağlanır ve içindeki bileşenler (ölçü şeridi,
butonlar) koyu bağlamı kendiliğinden izler.
Hareket TEK SEFERLİK: fotoğraf yavaşça yerine oturur, yeşil bir tarama
çizgisi bir kez geçer, metin sırayla yükselir. Döngü yok — sürekli hareket
hem dikkat çalar hem "5 saniyeden uzun otomatik hareket" kuralına takılır.
Hareket tercihi kapalıysa 02-base.css hepsini durdurur.
========================================================================== */
@layer components {
.hero {
position: relative;
display: grid;
align-content: space-between;
gap: var(--space-2xl);
min-block-size: min(84svh, 44rem);
padding-block: var(--space-2xl) var(--space-l);
overflow: hidden;
isolation: isolate;
color: var(--on-deep);
--ink: var(--on-deep);
--ink-2: var(--on-deep-2);
--ink-3: var(--on-deep-2);
--rule: rgb(255 255 255 / 0.16);
--rule-strong: rgb(255 255 255 / 0.42);
--surface: rgb(255 255 255 / 0.07);
--surface-2: rgb(255 255 255 / 0.10);
--brand-deep: #9bd93e;
}
@media (min-width: 64em) {
.hero { padding-block: var(--space-3xl) var(--space-xl); }
}
/* --- Fotoğraf ve perde ------------------------------------------------- */
/* Katman sırası (arkadan öne):
-3 fotoğraf → -2 3B sahne → -1 perde → içerik
Perde en üstte olduğu için tek bir ayar hem fotoğrafı hem sahneyi
dengeliyor; metnin kontrastı sahnenin yoğunluğuna göre değişmiyor. */
.hero__media {
position: absolute;
inset: 0;
z-index: -3;
background-color: #0a100e;
}
.hero__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
animation: hero-media-in 1.6s var(--ease) both;
}
@keyframes hero-media-in {
from { opacity: 0; transform: scale(1.06); }
to { opacity: 1; transform: none; }
}
/* 3B ağ sahnesi. Boşken (WebGL yok / hareket kapalı / dar ekran) görünmez
kalır — canvas boş bir dikdörtgen olarak bile sayfaya girmez. */
.hero__canvas {
position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
opacity: 0;
transition: opacity 1.2s var(--ease);
}
.hero__canvas[data-ready="true"] { opacity: 1; }
/* Yönlü perde: solda metin için koyu, sağda fotoğraf ve sahne için açık */
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to top, rgb(8 13 11 / 0.92) 0%, rgb(8 13 11 / 0.45) 45%, rgb(8 13 11 / 0.30) 100%),
linear-gradient(to right, rgb(8 13 11 / 0.88) 0%, rgb(8 13 11 / 0.70) 55%, rgb(8 13 11 / 0.50) 100%);
pointer-events: none;
}
/* Tarama çizgisi: bir kez yukarıdan aşağı geçer, rack LED taraması gibi */
.hero__sweep {
position: absolute;
inset-inline: 0;
inset-block-start: 0;
z-index: -1;
block-size: 2px;
background: linear-gradient(to right, transparent, var(--brand), transparent);
opacity: 0;
animation: hero-sweep 2s var(--ease) .35s both;
pointer-events: none;
}
@keyframes hero-sweep {
0% { transform: translateY(0); opacity: 0; }
12% { opacity: .85; }
88% { opacity: .85; }
100% { transform: translateY(min(84svh, 44rem)); opacity: 0; }
}
/* --- İçerik ------------------------------------------------------------- */
.hero__head { display: grid; gap: var(--space-l); }
@media (min-width: 64em) {
.hero__head {
grid-template-columns: 7fr 5fr;
column-gap: var(--space-2xl);
/* Başlık kartın üst kenarıyla hizalanır: alta yaslandığında slogan
kutudan çok aşağıda kalıp iki kolon birbirinden kopuyordu. */
align-items: start;
}
}
.hero__title {
font-size: var(--step-6);
font-weight: 700;
letter-spacing: -0.03em;
max-inline-size: 16ch;
text-shadow: 0 1px 24px rgb(8 13 11 / 0.5);
}
.hero__lead {
color: var(--on-deep);
font-size: var(--step-1);
max-inline-size: 38ch;
}
/* Sloganın altındaki cümle. Serbest bir satır değil, tanımlı bir BLOK:
solunda altın bir kural çizgisi var (üstteki rozetle aynı renk) ve
kolonun genişliğini kullanıyor. Dar bırakıldığında sağında boşluk
kalıp başlığın altında asılı duruyordu.
Punto küçük kalır — başlıkla yarışmaz, ona bağlanır. */
.hero__tagline {
max-inline-size: 74ch;
padding-inline-start: var(--space-s);
border-inline-start: 2px solid var(--gold);
color: var(--on-deep);
font-size: var(--step--1);
line-height: 1.6;
letter-spacing: 0.01em;
text-wrap: pretty;
}
/* --- Hero hizmet kartları ----------------------------------------------
Kartlar aynı ızgara hücresinde üst üste durur: kapsayıcının yüksekliği
EN UZUN karta göre sabitlenir, böylece kart değişirken altındaki buton
satırı zıplamaz (mutlak konumlandırma bu yüksekliği veremezdi). */
.herocards { display: grid; gap: var(--space-m); }
/* Kayan kartlar destenin dışına taşmasın; kırpma kutunun köşeleriyle aynı */
/* KUTU burada: kenarlık, zemin ve bulanıklık desteye ait, karta değil.
Böylece geçiş sırasında çerçeve yerinde durur, kayan yalnız içerik olur.
Kartların hepsi aynı ızgara gözünde durduğu için destenin yüksekliği en
uzun karta göre sabitlenir; geçişte kutu boyutu da oynamaz. */
.herocards__stack {
display: grid;
overflow: hidden; /* kayan içerik kutunun dışına taşmaz */
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface);
backdrop-filter: blur(10px);
transition: border-color .15s var(--ease);
}
/* Deste alanı etkin kartla birebir örtüştüğü için kutunun üzerine gelmek
kartın üzerine gelmekle aynı şey; vurgu kenarlığı kutuda durur. */
.herocards__stack:hover { border-color: var(--brand); }
/* KART artık yalnız içerik: kendi zemini, kenarlığı, köşesi yok. */
.herocard {
grid-area: 1 / 1;
display: grid;
gap: var(--space-2xs);
align-content: start;
padding: var(--space-l);
color: inherit;
text-decoration: none;
opacity: 0;
visibility: hidden;
transition: opacity .5s var(--ease), visibility .5s;
}
.herocard[data-active] {
opacity: 1;
visibility: visible;
}
/* --- Kayarak geçiş -------------------------------------------------------
Mevcut kart sağa doğru çıkar, yeni kart soldan gelir; ikisi de aynı yönde
hareket eder, deste yana kayıyormuş gibi okunur.
Yalnız transform ve opacity animasyonu var — ikisi de yerleşim tetiklemez,
kart yüksekliği ve slogan hizası oynamaz.
Efekt YALNIZCA görsel. Kartların tamamı sunucudan basılı gelir; JS
çalışmazsa ilk kart yerinde durur. prefers-reduced-motion açıkken hiç
başlamaz (bkz. hero-cards.js). */
.herocard[data-active] { z-index: 1; }
/* Çıkan kart, kayışını tamamlayana kadar görünür kalır. */
.herocard[data-leaving] {
opacity: 1;
visibility: visible;
transition: none;
z-index: 0;
animation: herocard-slide-out .44s var(--ease) forwards;
}
.herocard[data-entering] {
transition: none;
animation: herocard-slide-in .44s var(--ease) forwards;
}
/* Kayış boyunca opaklık 1'de kalır — asıl hareket yer değiştirme, kart
kaybolmuyor, desteden dışarı çıkıyor. Yalnız son %15'te sönüyor: nitelik
kaldırıldığı anda animasyon dolgusu da kalkıyor, kart bir anda x=0'a
dönüyor. Opaklık orada 1 kalsaydı çıkmış kart yerine geri sıçrayıp yarım
saniye boyunca solarak görünürdü. */
@keyframes herocard-slide-out {
from { transform: translateX(0); opacity: 1; }
85% { opacity: 1; }
to { transform: translateX(112%); opacity: 0; }
}
@keyframes herocard-slide-in {
from { transform: translateX(-112%); opacity: 1; }
to { transform: translateX(0); opacity: 1; }
}
.herocard__eyebrow {
display: flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--brand-deep);
}
.herocard__title {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 700;
font-stretch: var(--width-display);
letter-spacing: var(--tracking-display);
line-height: var(--leading-snug);
color: var(--on-deep);
}
/* Açıklamalar farklı uzunlukta; üç satırda kırpılır ki kart yüksekliği
hizmetten hizmete zıplamasın. Tam metin kendi sayfasında. */
.herocard__desc {
color: var(--on-deep-2);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.herocard__go {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
margin-block-start: var(--space-2xs);
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--brand-deep);
}
.herocard__go .icon { transition: transform .15s var(--ease); }
.herocard:hover .herocard__go .icon { transform: translateX(4px); }
/* Noktalar kartın altında ortalanır; kutuyla aynı eksende dururlar */
.herocards__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-m);
}
.herocards__dots { display: flex; gap: var(--space-2xs); }
/* Görünen nokta küçük ama dokunma hedefi 44px: dolgu görünmez alanı büyütür */
.herocards__dot {
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
display: grid;
place-items: center;
background: none;
border: 0;
margin-inline-start: -0.9rem;
}
.herocards__dot:first-child { margin-inline-start: 0; }
.herocards__dot::before {
content: "";
inline-size: 0.5rem;
block-size: 0.5rem;
border-radius: 50%;
border: 1px solid var(--rule-strong);
transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.herocards__dot:hover::before { border-color: var(--brand); }
.herocards__dot[aria-selected="true"]::before {
background-color: var(--brand);
border-color: var(--brand);
}
/* Kıdem rozeti — raf etiketi mantığı: dolu yeşil hücrede rakam, kılcal
çerçeveli hücrede birim. Durum rozetinden (.badge) ayrı bir bileşen,
çünkü anlık bir durum değil kalıcı bir olgu bildiriyor: noktası yok,
rakamı tabular ve gövde yazısıyla değil başlık yazısıyla dizilmiş. */
/* Kıdem rozeti — raf etiketi mantığı: dolu hücrede rakam, kılcal çerçeveli
hücrede birim. Rengi ALTIN: yeşil bu sitede eylem ve "çalışıyor" demek;
kıdem ise bir eylem değil, kazanılmış bir nitelik. Ayrı bir renk aynı
zamanda rozeti yeşil CTA'lardan ve durum noktalarından ayırıyor. */
.yearbadge {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--gold);
border-radius: var(--radius-s);
overflow: hidden;
line-height: 1;
white-space: nowrap;
}
.yearbadge__num {
display: flex;
align-items: center;
padding: 0.3rem 0.45rem;
background-color: var(--gold);
color: var(--on-gold);
font-family: var(--font-display);
font-size: var(--step-0);
font-weight: 700;
font-stretch: var(--width-display);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.yearbadge__unit {
display: flex;
align-items: center;
padding-inline: 0.45rem;
background-color: color-mix(in srgb, var(--gold) 18%, transparent);
font-family: var(--font-label);
font-size: var(--step--2);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--gold);
}
/* --- Ölçü şeridi (imza) ------------------------------------------------
Föy başlığı: her hücre bir ölçü. Değer büyük ve tabular, etiket mono.
Hero'nun içinde cam bir panel olarak durur; token'lar hero bağlamından
geldiği için ayrı bir koyu varyant yazılmaz. */
.specstrip {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: var(--surface);
backdrop-filter: blur(10px);
border: 1px solid var(--rule);
border-radius: var(--radius-m);
}
@media (min-width: 40em) {
.specstrip { grid-template-columns: repeat(4, 1fr); }
}
.specstrip__cell {
display: flex;
flex-direction: column-reverse; /* değer üstte, etiket altta */
gap: var(--space-3xs);
padding: var(--space-m) var(--space-s);
border-inline-start: 1px solid var(--rule);
border-block-start: 1px solid var(--rule);
}
.specstrip__cell:nth-child(-n+2) { border-block-start: 0; }
.specstrip__cell:nth-child(odd) { border-inline-start: 0; }
@media (min-width: 40em) {
.specstrip__cell { border-block-start: 0; }
.specstrip__cell:nth-child(odd) { border-inline-start: 1px solid var(--rule); }
.specstrip__cell:first-child { border-inline-start: 0; }
}
@media (min-width: 64em) {
.specstrip__cell { padding: var(--space-m) var(--space-l); }
}
.specstrip dt {
display: flex;
align-items: center;
gap: var(--space-3xs);
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
font-weight: 500;
text-transform: uppercase;
color: var(--on-deep-2);
}
/* İkon etiketten bir tık daha soluk: sırayı ikon değil sayı yönetir.
Marka yeşili kullanılmadı — şerit bir DURUM paneli gibi okunuyor ve
renkli işaret orada "uyarı" anlamına kayıyor. */
.specstrip dt .icon {
flex: none;
opacity: .55;
}
.specstrip dd {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 700;
font-stretch: var(--width-display);
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--on-deep);
}
}
/* ============================================================================
DGN — "25 yıldır online" beyanı
----------------------------------------------------------------------------
Sayfanın tek iddia cümlesi; koyu bant üzerinde tek başına durur. Cümlenin
başındaki yeşil nokta sitenin başka yerlerinde de "çalışıyor" demek (ağ
rotasındaki kendi düğümümüz, stoktaki ürün rozeti) — aynı sözlükten bir
işaret, dekoratif bir benek değil. Bilerek yanıp sönmez: sürekli hareket
hem dikkat çalar hem de "5 saniyeden uzun otomatik hareket" kuralına takılır.
========================================================================== */
@layer components {
.statement { display: grid; gap: var(--space-l); }
@media (min-width: 64em) {
.statement {
grid-template-columns: 7fr 5fr;
column-gap: var(--space-2xl);
align-items: end;
}
}
.statement__line {
font-family: var(--font-display);
font-size: var(--step-5);
font-weight: 700;
font-stretch: var(--width-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
text-wrap: balance;
color: var(--ink);
}
.statement__note {
color: var(--ink-2);
font-size: var(--step-1);
max-inline-size: 42ch;
}
/* Durum LED'i: cümlenin başında, büyük harf yüksekliğinin ortasında */
.statement__live {
display: inline-block;
inline-size: 0.4em;
block-size: 0.4em;
margin-inline-end: 0.42em;
vertical-align: 0.2em;
border-radius: 50%;
background-color: var(--brand);
box-shadow: 0 0 0 0.14em color-mix(in srgb, var(--brand) 25%, transparent);
}
}
/* ============================================================================
DGN — Ağ rotası (imza öğesi)
----------------------------------------------------------------------------
Stok fotoğraf yerine DGN'in gerçekten ayırt edici varlığı: kendi ağı.
Düğümler kutulara değil bir HAT üzerine dizilir — Bursa'dan başlayıp
İstanbul üzerinden Sofya'ya uzanan gerçek coğrafi sıra. Dolu işaret kendi
veri merkezi, boş işaretler PoP'lar. Veri data/network.json'dan gelir;
ana sayfa ile veri merkezi sayfası aynı kaynağı kullanır.
========================================================================== */
@layer components {
/* margin YOK: components katmanı layout'tan sonra geldiği için buradaki bir
`margin: 0`, .flow'un kardeşler arası boşluğunu eziyor. Element
varsayılanı zaten 02-base.css'te sıfırlanmış durumda. */
.netroute { }
.netroute__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-s);
padding-block-end: var(--space-s);
}
/* Başlık bölümün 'sinde duruyorsa yalnız sayaç kalır */
.netroute__head--bare {
justify-content: flex-end;
padding-block-end: var(--space-2xs);
border-block-end: 1px solid var(--rule);
}
.netroute__title { font-size: var(--step-2); }
.netroute__count {
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
}
.netroute__line {
position: relative;
display: grid;
gap: var(--space-l);
list-style: none;
margin: 0;
padding: 0;
}
.netnode {
position: relative;
padding-inline-start: var(--space-l);
}
/* Dar ekran: hat dikey iner, düğümler solunda işaretli durur */
.netroute__line::before {
content: "";
position: absolute;
inset-block: 0.55rem;
inset-inline-start: 0.28rem;
inline-size: 1px;
background-color: var(--rule-strong);
}
.netnode__marker {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.35rem;
inline-size: 0.6rem;
block-size: 0.6rem;
border: 1px solid var(--rule-strong);
border-radius: 50%;
background-color: var(--paper);
}
.netnode--primary .netnode__marker {
border-color: var(--brand);
background-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.netnode__code {
display: block;
font-family: var(--font-label);
font-size: var(--step--1);
font-weight: 700;
color: var(--ink);
}
.netnode__city {
display: block;
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
}
/* compact modda peer adları yerine sayısı: düğümün ağırlığı görünür kalır */
.netnode__count {
display: inline-block;
margin-block-start: var(--space-2xs);
padding: 0.1rem var(--space-2xs);
border: 1px solid var(--rule);
border-radius: var(--radius-s);
background-color: var(--surface);
font-family: var(--font-label);
font-size: var(--step--2);
color: var(--ink-2);
}
.netnode__peers {
display: flex;
flex-wrap: wrap;
gap: var(--space-3xs) var(--space-2xs);
margin-block-start: var(--space-2xs);
padding: 0;
list-style: none;
font-family: var(--font-label);
font-size: var(--step--2);
color: var(--ink-2);
}
.netnode__peers li {
padding: 0.1rem var(--space-2xs);
border: 1px solid var(--rule);
border-radius: var(--radius-s);
background-color: var(--surface);
white-space: nowrap;
}
/* Geniş ekran: hat yatay uzanır, düğümler kolon olur */
@media (min-width: 64em) {
.netroute__line {
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--space-m);
padding-block-start: var(--space-s);
}
.netroute__line::before {
inset-block: auto;
inset-block-start: calc(var(--space-s) + 0.28rem);
inset-inline: 0.3rem 0.3rem;
inline-size: auto;
block-size: 1px;
}
.netnode { padding-inline-start: 0; padding-block-start: var(--space-l); }
.netnode__marker { inset-block-start: var(--space-s); }
/* Peer'lar kolonda alt alta: router'ın komşu tablosu gibi okunur,
sarmalanan etiket bulutu gibi değil */
/* compact modda peer adları yerine sayısı: düğümün ağırlığı görünür kalır */
.netnode__count {
display: inline-block;
margin-block-start: var(--space-2xs);
padding: 0.1rem var(--space-2xs);
border: 1px solid var(--rule);
border-radius: var(--radius-s);
background-color: var(--surface);
font-family: var(--font-label);
font-size: var(--step--2);
color: var(--ink-2);
}
.netnode__peers { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
}
}
/* ============================================================================
DGN — Hizmet dizini, kartlar, listeler
========================================================================== */
@layer components {
/* --- Hizmet dizini -----------------------------------------------------
Ana sayfada dört hizmet: eşit dar kolonlarda sıkışan kartlar yerine
tam genişlikte satırlar. Ad okunur boyutta, açıklama tek satırda nefes
alır, ok yönü gösterir. */
.servicelist { list-style: none; padding: 0; border-block-start: 1px solid var(--rule); }
.servicelist > li { border-block-end: 1px solid var(--rule); }
.servicerow {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: var(--space-s) var(--space-m);
padding: var(--space-m) var(--space-2xs);
color: inherit;
text-decoration: none;
transition: background-color .15s var(--ease), padding-inline .15s var(--ease);
}
.servicerow:hover {
background-color: var(--surface);
color: inherit;
}
/* Dar ekranda ikon solda tek kolon, metnin tamamı ikinci kolonda alt alta.
Açıkça yazılmazsa otomatik yerleşim açıklamayı ikon kolonuna düşürüyor. */
.servicerow__icon { grid-column: 1; grid-row: 1; color: var(--brand-deep); padding-block-start: 0.15rem; }
.servicerow__title,
.servicerow__desc,
.servicerow__go { grid-column: 2; }
.servicerow__title {
display: block;
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
font-stretch: var(--width-display);
letter-spacing: var(--tracking-display);
color: var(--ink);
}
.servicerow:hover .servicerow__title { color: var(--brand-deep); }
.servicerow__desc {
display: block;
margin-block-start: var(--space-3xs);
color: var(--ink-2);
max-inline-size: 62ch;
}
.servicerow__go {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
grid-column: 2;
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--data);
}
.servicerow__go .icon { transition: transform .15s var(--ease); }
.servicerow:hover .servicerow__go .icon { transform: translateX(4px); }
@media (min-width: 64em) {
.servicerow {
grid-template-columns: auto minmax(0, 22rem) minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-l);
padding-block: var(--space-l);
}
.servicerow__icon { grid-column: 1; grid-row: auto; }
.servicerow__title { grid-column: 2; }
.servicerow__desc { grid-column: 3; margin-block-start: 0; }
.servicerow__go { grid-column: 4; }
}
/* --- Kart --------------------------------------------------------------- */
.card {
display: flex;
flex-direction: column;
padding: var(--space-l);
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface);
}
/* Kart içindeki son eylem bağlantısı kartın altına yaslanır; farklı uzunlukta
metinlerde bağlantılar aynı hizada kalır. Bu bileşenin İÇ düzeni. */
.card > .btn:last-child { margin-block-start: auto; align-self: flex-start; }
.card--link { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.card--link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-m); }
.card__icon { color: var(--brand-deep); }
.card__title { font-size: var(--step-2); }
.card p { color: var(--ink-2); }
/* Numaralı/işaretli kart üstü ince yeşil kenar — yalnız vurgulu kartta */
.card--marked { border-block-start: 2px solid var(--brand); }
/* --- Madde listesi ------------------------------------------------------
İşaret kısa bir tire: onay simgesi her maddeyi "avantaj" ilan ediyordu,
oysa maddelerin çoğu yalnızca teknik bir olgu bildiriyor. */
.key-list { list-style: none; padding: 0; max-inline-size: 72ch; }
.key-list li {
position: relative;
padding-inline-start: var(--space-m);
color: var(--ink-2);
}
.key-list li + li { margin-block-start: var(--space-2xs); }
.key-list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.72em;
inline-size: 0.5rem;
block-size: 1px;
background-color: var(--brand);
}
/* --- Durum rozeti ------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
padding: 0.1rem var(--space-2xs);
border-radius: var(--radius-s);
font-family: var(--font-label);
font-size: var(--step--2);
font-weight: 500;
white-space: nowrap;
}
.badge::before {
content: "";
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: 50%;
background-color: currentColor;
}
.badge--ok { color: var(--ok); background-color: color-mix(in srgb, var(--brand) 14%, transparent); }
.badge--ask { color: var(--signal); background-color: color-mix(in srgb, var(--signal-fill) 18%, transparent); }
}
/* ============================================================================
DGN — Sayfa başlığı, breadcrumb, CTA
========================================================================== */
@layer components {
/* Alt sayfa başlığı: ince fotoğraf bandı, altında kâğıt üzerinde başlık.
Fotoğrafın üstüne siyah perde serip başlık basmak yerine ikisi ayrıldı —
fotoğraf da başlık da kendi işini tam yapıyor. */
/* Bant ham fotoğraf olarak bırakılmıyor: alt kenarı maskeyle sayfaya
karışıyor (sert kesim yerine geçiş), doygunluğu bir tık düşürülüp
kontrastı toplanıyor. Böylece farklı kaynaklardan gelen stok kareler
aynı tonda okunuyor ve başlıkla yarışmıyor.
Maske alt %38'i erittiği için bandın yüksekliği artırıldı. */
.page-hero__figure {
position: relative;
background-color: var(--paper);
isolation: isolate;
}
.page-hero__figure img {
inline-size: 100%;
block-size: var(--band-h);
object-fit: cover;
filter: saturate(.82) brightness(.94) contrast(1.05);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
}
/* Üstten inen ince mürekkep perdesi: başlığın oturduğu alanı sakinleştirir
ve yapışkan başlığın altındaki geçişi yumuşatır. */
.page-hero__figure::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgb(8 13 11 / 0.32) 0%, rgb(8 13 11 / 0) 55%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
}
.page-hero {
padding-block: var(--space-xl);
background-color: var(--paper);
}
/* Fotoğraflı sayfalarda başlık, bandın erimeye BAŞLADIĞI çizgiden itibaren
yer alır: bant ile başlık arasında ayrı bir boşluk kalmaz, ikisi tek blok
gibi okunur. Yukarı çekilen miktar bandın eriyen kuyruğu kadar — ölçü
--band-h ve --band-fade'den türetilir, elle yazılmış bir sayı yok.
Kural bitişik kardeşe bağlı: bandı olmayan sayfa yukarıdaki düz hâlde
kalır, yoksa başlık başlığın altına girerdi. */
.page-hero__figure + .page-hero {
position: relative; /* fotoğrafın üstünde boyanır */
margin-block-start: calc(var(--band-h) * (var(--band-fade) - 1));
/* Metnin ilk satırı bandın %86'sına gelir: orada maske %33'e inmiş olur.
12 sayfanın 12'sinde, iki temada da en kötü kontrast 5.2:1 ölçüldü. */
padding-block-start: calc(var(--band-h) * 0.28);
padding-block-end: var(--space-xl);
background-color: transparent; /* eriyen kuyruk başlığın ardında görünür */
}
/* Sayfa başlığı --step-5'te kalır (h1'in kendi basamağı). Buradan --step-4'e
indirildiğinde bölüm başlıklarıyla (h2 = --step-4) birebir aynı puntoya
düşüyor, sayfa başlığı ile içerik başlığı ayırt edilemiyordu. Ana sayfanın
tez cümlesi --step-6 olduğu için hiyerarşi hâlâ bozulmuyor:
ana hero > sayfa başlığı > bölüm başlığı.
Ölçü sınırı YOK: 20ch'te uzun başlıklar gereksiz yere kırılıyordu. */
.page-hero h1 { font-size: var(--step-5); }
/* === Breadcrumb ========================================================= */
.breadcrumb { border-block: 1px solid var(--rule); background-color: var(--surface); }
.breadcrumb__list {
display: flex;
flex-wrap: wrap; /* dar ekranda alt satıra iner */
gap: var(--space-3xs) var(--space-2xs);
list-style: none;
margin: 0;
padding-block: var(--space-xs);
padding-inline: 0;
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: 0.04em;
}
/* Dar ekranda yol kesiliyordu; kaydırma yerine sarma + bir tık küçük punto.
Uzun başlıklar (SUNUCU BARINDIRMA) burada da kırpılmadan okunur. */
@media (max-width: 63.99em) {
.breadcrumb__list { font-size: 0.66rem; letter-spacing: 0.02em; }
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.breadcrumb__list li + li::before { content: "/"; color: var(--rule-strong); }
.breadcrumb__list a { color: var(--ink-3); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--brand-deep); }
.breadcrumb__list [aria-current="page"] { color: var(--ink); }
/* === İletişim bandı =====================================================
Eski sitedeki bandın düzeni: tam genişlikte fotoğraf, üzerinde koyu perde,
sol üstte aşağı bakan üçgen işaret, sağda çerçeveli buton. Sayfayı bir
"durak" ile bitirmesi işe yarıyordu; geri alındı.
Perde eski sitedeki gibi tek düze koyu değil, hafif yönlü: metnin
bulunduğu sol taraf biraz daha koyu. Fotoğraf her iki temada aynı kalır. */
.ctaband {
position: relative;
display: grid;
align-items: center;
min-block-size: 15rem;
padding-block: var(--space-2xl);
overflow: hidden;
isolation: isolate;
color: #fff;
}
.ctaband__bg {
position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ctaband::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to right, rgb(18 20 18 / 0.90) 0%, rgb(18 20 18 / 0.82) 55%, rgb(18 20 18 / 0.72) 100%);
}
/* Sol üstteki üçgen: bandın başladığı yeri işaretler. Sol kenarı ALTINDAKİ
metinle aynı hizada durur — kabın iç kenarı hesaplanarak konumlanır,
ekran kenarına yapışmaz. */
/* Üçgen, ÜSTÜNDEKİ bölümün zeminiyle aynı renktedir: bant o bölümden bir
çentik almış gibi okunur. Renk komşu seçiciyle belirlenir, böylece hangi
bölüm bandın üstüne gelirse gelsin doğru rengi alır ve tema değişince
token'la birlikte döner. */
.ctaband { --mark: var(--paper); }
.section--surface + .ctaband { --mark: var(--surface); }
.section--sunken + .ctaband { --mark: var(--surface-sunken); }
.ctaband__mark {
position: absolute;
inset-block-start: 0;
inset-inline-start: max(var(--space-m), calc(50% - var(--container) / 2 + var(--space-m)));
z-index: 1;
inline-size: 4.5rem;
block-size: 2rem;
/* Koyu temada --ctaband-mark tanımlı (beyaz); açık temada tanımsız olduğu
için üstündeki bölümün zemini olan --mark'a düşer. */
background-color: var(--ctaband-mark, var(--mark));
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (min-width: 64em) {
.ctaband__mark {
inset-inline-start: max(var(--space-l), calc(50% - var(--container) / 2 + var(--space-l)));
inline-size: 5rem;
block-size: 2.25rem;
}
}
.ctaband__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
}
.ctaband__text {
margin: 0;
max-inline-size: 46ch;
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
font-stretch: var(--width-display);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-display);
color: #fff;
}
/* Fotoğraf üzerinde çerçeveli buton — dolu yeşil, hareketli zemin üzerinde
okunmayan bir leke bırakıyordu; beyaz çerçeve her karede duruyor. */
.btn--ghost {
border-color: rgb(255 255 255 / 0.7);
color: #fff;
background-color: transparent;
}
.btn--ghost:hover {
border-color: #fff;
background-color: #fff;
color: var(--surface-deep);
}
}
/* ============================================================================
DGN — Tablolar, fiyat kartları, sekmeler
========================================================================== */
@layer components {
.spec-table {
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface);
/* Sığmayan tablo KENDİ kutusunda kayar; sayfa gövdesi asla yatay kaymaz */
overflow-x: auto;
overflow-y: hidden;
}
.spec-table table { font-size: var(--step--1); }
.spec-table caption {
padding: var(--space-m) var(--space-m) var(--space-s);
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
font-stretch: var(--width-display);
letter-spacing: var(--tracking-display);
text-align: start;
color: var(--ink);
}
.spec-table th,
.spec-table td {
padding: var(--space-xs) var(--space-m);
border-block-end: 1px solid var(--rule);
}
.spec-table thead th {
font-family: var(--font-label);
font-size: var(--step--2);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
background-color: var(--surface-2);
border-block-end-color: var(--rule-strong);
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-block-end: 0; }
/* Atlamalı şerit: uzun satırlarda göz kaymasın diye. Vurgu kuralı bunun
ALTINDA durmalı — aynı özgüllükte olduğu için kazanan sıradaki sonuncu. */
.spec-table tbody tr:nth-child(even) { background-color: var(--table-stripe); }
.spec-table tbody tr:hover { background-color: var(--surface-2); }
.spec-table tbody th { font-weight: 600; color: var(--ink); }
/* Mono kolonlar teknik DEĞER taşır ama çoğu cümle uzunluğunda ("8GB DDR3
1333Mhz (10600E/12800E Modül)"). nowrap bunları tek satıra zorlayınca
tablo kabına sığmayıp yatay kaydırmaya düşüyordu; sarmalarına izin var.
Bölünemeyen uzun tekil ifadeler ("100Mbps/Unmetered") kolonu taşırmasın
diye kırılma noktası serbest bırakılır. Fiyat hücresi hariç: orada
"2.480 ₺" ikiye bölünmemeli, o kural aşağıda ayrı duruyor. */
.spec-table__num {
font-family: var(--font-label);
overflow-wrap: anywhere;
color: var(--ink-2);
}
.spec-table__price {
font-family: var(--font-label);
font-weight: 700;
white-space: nowrap;
color: var(--ink);
}
/* Dar ekran: aynı DOM, kart görünümü. Tablo semantiği korunur. */
@media (max-width: 63.99em) { /* < 1024px — 6 kolonlu spec tablosu tablette sığmıyor */
/* Kart görünümünde tablo yerleşim algoritması TAMAMEN devre dışı kalmalı:
yalnız satırları block yapmak yetmiyordu —
ve hâlâ
kolonların doğal genişliğini hesaplayıp elemanı ekrandan taşırıyor,
değerler sağdan kırpılıyordu. Kaydırma da bu yüzden kapatılır. */
.spec-table { overflow-x: visible; }
.spec-table table,
.spec-table tbody { display: block; inline-size: 100%; }
.spec-table caption { display: block; }
.spec-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.spec-table tbody tr {
display: block;
padding: var(--space-s) var(--space-m);
border-block-end: 1px solid var(--rule);
}
.spec-table tbody tr:last-child { border-block-end: 0; }
/* Satır başlığı kartın BAŞLIĞIDIR: tam genişlikte, solda, kendi ayırıcısıyla.
Değer hücreleriyle aynı flex/end kuralına sokulduğunda ürün adı sağa
yaslanıyor ve kart baştan sona sağa kaymış görünüyordu. */
.spec-table tbody th {
display: block;
inline-size: 100%;
border: 0;
padding: 0 0 var(--space-2xs);
margin-block-end: var(--space-2xs);
border-block-end: 1px solid var(--rule);
text-align: start;
text-wrap: balance;
}
/* Etiket solda, DEĞER sağda. space-between kullanılmıyor: fiyat hücresinde
üç öğe var (etiket, tutar, +KDV) ve space-between üçünü de birbirinden
ayırıp tutarı ortada bırakıyordu. Etiket auto boşlukla sola itilir,
kalan her şey sağda birlikte durur. */
.spec-table tbody td {
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: var(--space-2xs);
border: 0;
padding: var(--space-3xs) 0;
text-align: end;
}
/* Uzun değerler (100.000 Gbyte (100TB)) kırpılmak yerine sarsın */
.spec-table tbody td { white-space: normal; }
.spec-table__price { white-space: normal; }
.spec-table tbody td::before {
margin-inline-end: auto; /* etiketi sola iter */
text-align: start;
flex: none;
}
.spec-table tbody th { font-size: var(--step-0); }
.spec-table tbody td::before {
content: attr(data-label);
font-family: var(--font-label);
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--ink-3);
}
}
/* Tablet aralığı: kart görünümü açık ama satır 700px'e uzuyor; etiket solda,
değer sağda kalınca aradaki boşluk okumayı zorlaştırıyordu. Aynı kartlar
ızgaraya girer — kural gövdesi yukarıdakiyle ortak, burada yalnız yerleşim. */
@media (min-width: 40em) and (max-width: 63.99em) {
.spec-table tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: var(--space-s);
padding: var(--space-m);
}
.spec-table tbody tr,
.spec-table tbody tr:last-child,
.spec-table tbody tr:nth-child(even) {
padding: var(--space-s);
border: 1px solid var(--rule);
border-radius: var(--radius-s);
background-color: transparent; /* ızgarada şerit satranç deseni yapar */
}
}
/* --- Fiyat kartı -------------------------------------------------------- */
.price-card {
display: flex;
flex-direction: column;
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface);
overflow: hidden;
}
.price-card__head {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--space-s);
padding: var(--space-m);
border-block-end: 1px solid var(--rule);
}
.price-card__name { font-size: var(--step-1); }
.price-card__specs {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3xs) var(--space-m);
margin: 0;
padding: var(--space-m);
font-size: var(--step--1);
}
.price-card__specs dt {
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
.price-card__specs dd { margin: 0; font-family: var(--font-label); color: var(--ink-2); }
.price-card__foot {
display: flex;
align-items: baseline;
gap: var(--space-2xs);
margin-block-start: auto;
padding: var(--space-m);
border-block-start: 1px solid var(--rule);
background-color: var(--surface-2);
}
.price-card__price {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
/* KDV notu fiyatın yanında, ikincil */
.vat {
font-family: var(--font-body);
font-size: var(--step--2);
font-weight: 400;
color: var(--ink-3);
}
/* --- Sekme rayı ---
JS yokken sıradan bir çapa bağlantısı listesi; tabs.js yüklenince
role="tablist" + ok tuşu navigasyonuna yükseltilir. */
/* Dar ekranda sekme şeridi yana kaydırılır — parmakla sürüklemek doğal.
Geniş ekranda kaydırma çubuğu kötü bir çözüm: sürükleme yok, fareyle
kullanması zor. Orada şerit alt satıra sarar (aşağıda). */
.tabrail {
border-block-end: 1px solid var(--rule);
overflow-x: auto;
scrollbar-width: thin;
}
.tabrail__list {
display: flex;
gap: var(--space-m);
list-style: none;
margin: 0;
padding: 0;
}
/* Rusça etiketler Türkçe'nin ~1.4 katı yer kaplıyor: aynı dokuz sekme
1440px'lik ekranda bile 1602px istiyordu, altta kaydırma çubuğu
çıkıyordu. Geniş ekranda dikey yer bol, sarmak serbest. */
@media (min-width: 64em) {
.tabrail { overflow-x: visible; }
.tabrail__list { flex-wrap: wrap; row-gap: var(--space-3xs); }
}
.tabrail__link {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding-block: var(--space-xs);
border-block-end: 2px solid transparent;
color: var(--ink-3);
font-size: var(--step--1);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.tabrail__link:hover { color: var(--ink); }
.tabrail__link[aria-selected="true"] {
border-block-end-color: var(--brand);
color: var(--ink);
font-weight: 600;
}
.tabpanel[hidden] { display: none; }
/* Panel arası boşluk yalnız İKİSİ DE GÖRÜNÜRKEN gerekir — JS çalışmadığında
paneller alt alta dizilir, o zaman ayrılmaları gerekir. JS çalışırken tek
panel görünür; gizli kardeş kutu üretmese de seçiciyi tetiklediği için
görünen panel gereksiz bir üst boşluk alıyordu. Sonuç: ilk sekmenin
başlığı diğerlerinden 40px yukarıda duruyordu (ilk panelin öncesinde
panel değil nav var). :not([hidden]) ikisini de aynı hizaya getirir. */
.tabpanel:not([hidden]) + .tabpanel:not([hidden]) { margin-block-start: var(--space-2xl); }
}
/* ============================================================================
DGN — Akordiyon, hukuki metin
========================================================================== */
@layer components {
.accordion { border-block-start: 1px solid var(--rule); }
.accordion > details { border-block-end: 1px solid var(--rule); }
.accordion summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-m);
padding-block: var(--space-m);
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
font-stretch: var(--width-display);
cursor: pointer;
list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: "+";
font-family: var(--font-label);
font-size: var(--step-2);
font-weight: 400;
color: var(--brand-deep);
line-height: 1;
}
.accordion details[open] summary::after { content: "\2212"; }
.accordion summary:hover { color: var(--brand-deep); }
.accordion__body {
padding-block-end: var(--space-m);
color: var(--ink-2);
max-inline-size: 68ch;
}
/* Uzun hukuki metin: okunabilir ritim, numaralı bölümler */
.legal { --flow-space: var(--space-s); max-inline-size: 68ch; }
.legal h3 {
margin-block-start: var(--space-xl);
font-size: var(--step-2);
}
.legal h3:first-child { margin-block-start: 0; }
.legal p { color: var(--ink-2); }
.legal strong { color: var(--ink); }
.legal ul { color: var(--ink-2); padding-inline-start: var(--space-m); }
.legal li + li { margin-block-start: var(--space-3xs); }
}
/* ============================================================================
DGN — İletişim: form, bilgi listesi, harita
========================================================================== */
@layer components {
.field { display: grid; gap: var(--space-3xs); }
.field label {
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
}
.field input,
.field textarea {
padding: var(--space-xs);
border: 1px solid var(--rule-strong);
border-radius: var(--radius-m);
background-color: var(--surface);
color: var(--ink);
font-size: var(--step-0);
}
.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--brand); }
.field textarea { resize: vertical; }
/* Form artık .contact kartının içinde; ikinci bir çerçeve kutu içinde
kutu yapıyordu. */
.contact-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
}
/* --- Künye paneli ------------------------------------------------------
Eski kurumsal sayfasının yeşil çerçeveli bilgi kutuları geri alındı; o
çerçeve şirket künyesini sayfanın geri kalanından ayıran iyi bir işaretti.
Tek fark: çerçeve tam marka yeşili değil, yüzeye karıştırılmış yumuşak
bir yeşil — yeşil bu sitede eylem rengi olduğu için tam güçte bir çerçeve
butonlarla yarışırdı. Köşeler ve tipografi yeni dilden. */
.infopanel {
display: grid;
gap: var(--space-l);
padding: var(--space-l);
border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--surface));
border-radius: var(--radius-m);
background-color: var(--surface);
}
@media (min-width: 40em) {
.infopanel { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
}
@media (min-width: 64em) {
.infopanel { padding: var(--space-xl); column-gap: var(--space-2xl); }
}
.infopanel dt {
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ink-3);
}
.infopanel dd {
margin: 0;
margin-block-start: var(--space-3xs);
color: var(--ink);
text-wrap: pretty;
}
/* Kayıt numaraları makine değeridir */
.infopanel dd.text-data { font-family: var(--font-label); font-size: var(--step--1); }
/* --- İletişim kartı ----------------------------------------------------
Eski tasarımın en iyi fikri korundu: iletişim bilgileri düz bir liste
değil, BİNANIN fotoğrafı üzerinde duruyor — adres soyut bir satır değil,
gidilecek gerçek bir yer. Yeni dilde yeniden kuruldu: keskin köşe, kılcal
ayırıcı, mono etiket; eski sürümün yuvarlak kutuları ve ortalanmış
yığını yerine sola hizalı künye düzeni. */
.contact {
display: grid;
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface);
overflow: hidden;
}
@media (min-width: 64em) {
.contact { grid-template-columns: 5fr 7fr; }
}
.contact__panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--space-l);
min-block-size: 22rem;
padding: var(--space-l);
isolation: isolate;
color: var(--on-deep);
}
.contact__panel img {
position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
/* Perde: fotoğrafın üstündeki metin her koşulda okunur kalsın */
.contact__panel::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom,
rgb(19 26 24 / 0.45) 0%,
rgb(19 26 24 / 0.78) 55%,
rgb(19 26 24 / 0.92) 100%);
}
.contact__details { display: grid; gap: var(--space-s); margin: 0; }
.contact__details > div { padding-block-start: var(--space-s); border-block-start: 1px solid rgb(255 255 255 / 0.18); }
.contact__details > div:first-child { padding-block-start: 0; border-block-start: 0; }
.contact__details dt {
display: flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-label);
font-size: var(--step--2);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--brand);
}
.contact__details dd {
margin: 0;
margin-block-start: var(--space-3xs);
font-size: var(--step-1);
color: var(--on-deep);
}
.contact__details a { color: var(--on-deep); text-decoration-color: rgb(255 255 255 / 0.4); }
.contact__details a:hover { color: var(--brand); }
.contact__body { padding: var(--space-l); }
@media (min-width: 64em) {
.contact__body { padding: var(--space-xl); }
}
/* Kısa alanlar ikişerli, uzun alanlar tam genişlikte — eski formun
iki kolonlu yerleşimi, yeni alan stilleriyle. */
.form-grid { display: grid; gap: var(--space-m); }
@media (min-width: 40em) {
.form-grid { grid-template-columns: 1fr 1fr; }
.form-grid > .field--wide { grid-column: 1 / -1; }
}
/* Harita artık bir OpenStreetMap iframe'i (Google Maps JS'inin yerine).
iframe'in kendi çerçevesi kaldırılır; kenar bizim kılcal çizgimiz. */
.contact-map {
display: block;
inline-size: 100%;
block-size: 26rem;
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background-color: var(--surface-2);
}
.notice {
padding: var(--space-m);
border: 1px solid var(--rule);
border-inline-start: 3px solid var(--brand);
border-radius: var(--radius-m);
background-color: var(--surface);
}
.notice p { margin: 0; color: var(--ink-2); }
}
/* ============================================================================
DGN — Altbilgi ve çerez bandı
========================================================================== */
@layer components {
/* Altbilgi kurumsal yeşil. Renkler token'dan gelir: açık temada tam marka
yeşili + mürekkep metin, koyu temada koyultulmuş yeşil + beyaz metin
(bkz. 01-tokens.css). Yeşili sabit tutup metni beyaza çevirmek 2,3:1
verirdi; eski sitedeki okunmayan altbilginin sebebi buydu. */
.site-footer {
padding-block: var(--space-2xl) var(--space-l);
background-color: var(--footer-bg);
color: var(--on-footer);
font-size: var(--step--1);
--rule: var(--footer-rule);
}
.site-footer__title {
font-family: var(--font-label);
font-size: var(--step--2);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--on-footer);
padding-block-end: var(--space-s);
margin-block-end: var(--space-s);
border-block-end: 1px solid var(--rule);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* Altbilgideki listelerin hepsi dikey; satır arası tek kuraldan gelir. */
.site-footer ul li + li { margin-block-start: var(--space-2xs); }
/* Sosyal hesaplar: her satırda ikon + kullanıcı adı. İkonun optik merkezi
yazının x-yüksekliğine oturur (align-items:center); baseline hizalaması
kare ikonu yazıdan yukarıda bırakıyordu. */
.site-footer__social a {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
.site-footer__social .icon {
flex: none; /* dar ekranda ikon ezilmesin */
opacity: .85;
}
.site-footer__social a:hover .icon { opacity: 1; }
.site-footer a {
color: var(--on-footer);
text-decoration: none;
font-weight: 500;
transition: opacity .15s var(--ease);
}
.site-footer a:hover { opacity: 1; color: var(--on-footer); text-decoration: underline; }
.site-footer__address {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
}
/* Bayrak 3:2 oranında; kare kutuda basılınca üstte-altta boşluk kalıp
yazıdan yukarıda duruyordu. Genişlik verilir, yükseklik orandan gelir. */
.site-footer__address .icon {
inline-size: 1.15rem;
/* Yükseklik AÇIKÇA 3:2 oranından: block-size:auto olduğunda tarayıcı
svg'nin height niteliğini (kare) kullanıp bayrağı kutu içinde
ortalıyor, bu da yazıya göre yukarıda duruyormuş gibi gösteriyordu. */
block-size: calc(1.15rem * 2 / 3);
border-radius: 1px;
}
.site-footer__bottom {
margin-block-start: var(--space-2xl);
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--rule);
font-family: var(--font-label);
font-size: var(--step--2);
color: var(--on-footer);
opacity: .9;
}
@media (max-width: 63.99em) {
/* Telif ve adres alt alta; her biri kendi satırında tam görünür */
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.site-footer__address { font-size: 0.62rem; }
}
/* === GDPR bandı ========================================================= */
.gdpr {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--z-banner);
padding: var(--space-m);
/* Çentikli/gestür çubuklu ekranlarda bant sistem alanının altında kalmasın */
padding-block-end: calc(var(--space-m) + env(safe-area-inset-bottom));
background-color: var(--surface);
border-block-start: 1px solid var(--rule-strong);
box-shadow: var(--shadow-l);
font-size: var(--step--1);
}
.gdpr[hidden] { display: none; }
.gdpr__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
}
.gdpr p { margin: 0; color: var(--ink-2); max-inline-size: 70ch; }
}