/*
* Advenway Windsurf Koşulları — KARŞILAŞTIRMA (HUB) SAYFASI
* Tasarım kaynağı: Claude Design projesi 5f238544 → "Windsurf Koşulları.dc.html"
*
* 🔄 Araç AÇIK temadan KOYU TABANLI ALMAŞIK BANDA geçti. Sayfa kenardan
* kenara uzanan bantlardan oluşuyor:
* hero (koyu) → filtre çubuğu (krem, yapışkan) → Bugün Türkiye'de (krem) →
* Harita (koyu) → Spot kartları (krem2) → Yerel bilgi + katkı (koyu) →
* Uyarı + Sayıların Arkasında (krem) → İlgili araçlar (koyu)
* Bant zemini `.band--*` sınıfında, İÇERİK RENKLERİ ÖZEL ÖZELLİKLERDE. Krem
* bantlar yalnız `--ink/--ink2/--line/--card` dörtlüsünü yeniden tanımlıyor;
* bileşen kuralları (kart, çubuk, sayı hücresi) TEK sürümde kalıyor.
* ⛔ Bileşene doğrudan renk yazma — bandın içinde yanlış zemine düşer.
*
* 🔑 KÖK SINIF `.advws-h`, `.advws` DEĞİL. adv-ws.css'teki ~4700 satırın
* tamamı `.advws` ön ekiyle yazılmış; kök adı değişince o kuralların HİÇBİRİ
* burada eşleşmiyor. Bu dosya temiz bir zemine kuruluyor: özgüllük yarışı
* yok, `!important` yok. Spot sayfası hâlâ `.advws` — ona dokunulmadı.
* ⛔ Köke `advws` sınıfını EKLEME: eski dosyanın tamamı geri gelir.
*
* YAZI TİPİ: tasarım Archivo + IBM Plex Mono kullanıyordu; ikisi de sitede
* YÜKLÜ DEĞİL. `advenway-fonts` handle'ı tek istekte Newsreader + **Space
* Grotesk** + **JetBrains Mono** getiriyor; gövde Space Grotesk, sayılar
* JetBrains Mono. ⚠️ Yüklü olmayan bir aile yazmak sessiz geri düşüş demek —
* dördüncü aile indirilmiyor (Kayak Koşulları'nda alınan kararın aynısı).
*
* ⚠️ TÜRKÇE SATIR ARALIĞI. Tasarımın h1'i `text-transform:uppercase` +
* `line-height:1.06` idi. Türkçe büyük harfte `Ş/Ç` tabanın altına, `Ğ/İ/Ö/Ü`
* tepenin üstüne taşıyor; ikisi alt alta gelirse mürekkep çakışıyor (ölçülmüş
* eşik 1,10). Başlık BÜYÜK HARFE ÇEVRİLMİYOR (sitede CheerUp'ın büyük harf
* zorlaması da bilerek kapatılmıştı) ve aralık 1.02'de tutuluyor.
* ⛔ `.hero-baslik`e uppercase ekleme.
*
* ⚠️ KONTRAST: koyu zeminde (#0B2431) ikincil tonların hepsi 4,5 üstünde —
* rgba(238,244,244,.62) ≈ 6,3 · .72 ≈ 7,7 · .8 ≈ 8,8 · #7FD7DE ≈ 9,9.
* Krem zeminde (#F7F6F3) #5C6772 ≈ 5,0 · #4D5B66 ≈ 6,5 · #0A666D ≈ 6,3.
* ⛔ Bu tonları "biraz açalım" diye kaydırma, ölçülerek seçildiler.
*/
.advws-h {
/* ---- KOYU BANT (varsayılan) ---- */
--bg: #0B2431;
--bg2: #071B23; /* harita kutusu, form alanı */
--card: rgba(238, 244, 244, .055);
--line: rgba(127, 215, 222, .2);
--line2: rgba(238, 244, 244, .16);
--ink: #EEF4F4;
--ink2: rgba(238, 244, 244, .8);
--ink3: rgba(238, 244, 244, .72);
--ink4: rgba(238, 244, 244, .62);
/* ---- MARKA ---- teal ailesi, tasarımın kendi paleti */
--acik: #7FD7DE; /* koyu zeminde vurgu */
--ana: #17A2A6; /* dolu düğme, ince şerit */
--koyu: #0A666D; /* krem zeminde vurgu */
--koyu2: #0D4C5C;
--koyu3: #10344A;
/* ---- UYGUNLUK ---- üç kademe, üç ad (bkz. advws_uygunluk_kademe) */
--iyi: #2FBF71;
--sinir: #E0A32E;
--kotu: #C8703A;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--ink);
background: var(--bg);
font-size: 16px;
line-height: 1.55;
text-wrap: pretty;
}
.advws-h *,
.advws-h *::before,
.advws-h *::after { box-sizing: border-box; }
/* ---- KREM BANTLAR — aynı bileşenler, başka zemin ----
Yalnız TOKEN yeniden tanımlanıyor; hiçbir bileşen kuralı kopyalanmıyor. */
.advws-h .band--cream,
.advws-h .band--cream2,
.advws-h .cubuk {
--card: #FFFFFF;
--line: #D9D6CC;
--line2: #ECEAE3;
--ink: #0C1A24;
--ink2: #4D5B66;
--ink3: #5C6772;
--ink4: #5C6772;
--acik: var(--koyu);
color: var(--ink);
}
.advws-h .band--cream { background: #F7F6F3; --bg: #F7F6F3; }
.advws-h .band--cream2 { background: #FDF7F1; --bg: #FDF7F1; }
.advws-h .cubuk { background: rgba(247, 246, 243, .96); --bg: #F7F6F3; }
/* ---------------------------------------------------------------
* BANT VE SARMALAYICI
*
* ⛔ `width:100vw` + `margin-left:calc(50% - 50vw)` HİLESİ YOK. Kayak
* aracında iki kez bozdu: 100vw kaydırma çubuğunu sayıyor (yatay taşma)
* ve `50%` aracın kendi genişliğinin yarısı, ekranın değil.
* ✅ ÇALIŞAN YOL: adv-ws.js `tamGenislik()` gerçek sol boşluğu ve
* `clientWidth`i ölçüp iki özel özelliğe yazıyor, sonra sınıfı KÖKE
* veriyor — sekiz bant birden tam genişliğe çıkıyor. Betik çalışmazsa
* sınıf hiç eklenmiyor: araç tema sütununda kalır, dar ama BOZUK DEĞİL.
* ------------------------------------------------------------- */
.advws-h.tam-genislik {
width: var(--advws-genis);
margin-left: calc(-1 * var(--advws-sol));
margin-right: 0;
overflow-x: clip; /* hero degradeleri bandın dışına taşmasın */
}
.advws-h .band { padding: 64px 5vw; }
.advws-h .band--hero { padding: 22px 5vw 44px; }
.advws-h .band--araclar { padding-bottom: 76px; }
.advws-h .wrap { max-width: 1240px; margin: 0 auto; }
/* ---------------------------------------------------------------
* TİPOGRAFİ VE ORTAK PARÇALAR
* ------------------------------------------------------------- */
.advws-h p { margin: 0 0 14px; }
.advws-h p:last-child { margin-bottom: 0; }
.advws-h .bolum-et,
.advws-h .cubuk-et,
.advws-h .podyum-et,
.advws-h .sayi-et,
.advws-h .advws-cip,
.advws-h .advws-liste-baslik span,
.advws-h .arac-ust,
.advws-h .advws-bos-et {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 500;
}
.advws-h .bolum-et { color: var(--acik); }
.advws-h .bolum-ust {
display: flex; flex-wrap: wrap; gap: 8px 20px;
align-items: baseline; justify-content: space-between;
margin: 0 0 20px;
}
.advws-h .bolum-ust--cizgi { padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.advws-h .bolum-ust h2 { margin: 0; }
/* İkonlar metnin rengini alıyor (currentColor), boyları satıra oturuyor. */
.advws-h .advws-ikon {
width: 1.05em; height: 1.05em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
vertical-align: -.16em;
}
/* 🚨 `[hidden]` ÖZNİTELİĞİNİ GERİ KAZAN.
* Tarayıcının `[hidden] { display:none }` kuralı UA katmanında; yazdığımız
* `.advws-h .podyum-set { display:grid }` (0,2,0) onu EZİYOR ve JS gizlese
* bile 12 podyum/sayı sürümünün hepsi ekranda kalıyor. Bu kural (0,3,0)
* onları geri kapatıyor.
* ⛔ Silme — hata sessiz: sayfa "çalışıyor" ama on iki kombinasyon alt alta
* basılı görünür. (`.advws-veri[hidden]` için ayrı kural aşağıda, kart
* bölümünde.) */
.advws-h [data-hub-blok][hidden] { display: none; }
/* ---------------------------------------------------------------
* HERO
* ------------------------------------------------------------- */
.advws-h .band--hero {
position: relative; isolation: isolate;
background: linear-gradient(172deg, #051016 0%, #0B2431 58%, #071720 100%);
}
.advws-h .hero-akis,
.advws-h .hero-isik {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
width: 100%; height: 100%; display: block;
}
.advws-h .hero-isik {
background:
radial-gradient(100% 70% at 8% 0%, rgba(23, 162, 166, .22), transparent 58%),
linear-gradient(180deg, transparent 55%, rgba(5, 16, 22, .75) 100%);
}
.advws-h .band--hero .wrap { position: relative; z-index: 1; }
.advws-h .kirinti {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink4);
}
.advws-h .kirinti a { color: var(--ink4); }
.advws-h .kirinti a:hover { color: var(--acik); }
.advws-h .kirinti-son { color: var(--acik); }
.advws-h .hero-ic { margin-top: 36px; }
.advws-h .rozet {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border: 1px solid rgba(127, 215, 222, .38); border-radius: 999px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--acik);
}
.advws-h .hero-baslik {
margin: 20px 0 0;
/* Archivo Black tek ağırlıklı bir aile: 400 zaten "black". `bold` yazmak
tarayıcıya YAPAY kalınlaştırma yaptırır ve harfler bulanır. */
font-family: 'Archivo Black', 'Space Grotesk', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: clamp(38px, 7.6vw, 96px);
line-height: 1.06; /* Türkçe gerekçesi dosya başında */
letter-spacing: -.035em;
text-wrap: balance;
padding-bottom: .06em; /* Ş/Ç çengeli kesilmesin */
/* ⛔ `text-transform: uppercase` YOK — sayfa dili `tr` olduğu için tarayıcı
"Windsurf"ün i'sini İ yapıyordu. Büyük harfe PHP çeviriyor
(advws_buyuk_harf), sözcük sözcük doğru kuralla. */
}
.advws-h .hero-baslik span { color: var(--acik); }
.advws-h .herogrid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 24px; margin-top: 24px; align-items: end;
}
.advws-h .hero-tanim {
margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--ink2);
}
.advws-h .hero-tanim strong { color: var(--ink); font-weight: 600; }
.advws-h .herokunye {
display: flex; flex-wrap: wrap; gap: 8px 24px;
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink4);
}
.advws-h .herokunye-tarih {
display: inline-flex; align-items: center; gap: 7px; color: var(--acik);
}
/* Paylaşım — temanın araç başlığından taşındı, tasarımın rozet diliyle. */
.advws-h .hero-paylas {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px;
}
.advws-h .hero-paylas-et {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink4); margin-right: 2px;
}
.advws-h .hero-paylas a {
display: grid; place-items: center; width: 30px; height: 30px;
border: 1px solid var(--line); border-radius: 999px; color: var(--ink3);
font-family: var(--mono); font-size: 12px; font-weight: 500;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.advws-h .hero-paylas a:hover { background: var(--ana); border-color: var(--ana); color: #041418; }
/* ---- PODYUM ---- gün + seviyenin en iyi üçü */
.advws-h .podyum {
margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line2);
}
.advws-h .podyum-ust {
display: flex; flex-wrap: wrap; gap: 10px;
align-items: baseline; justify-content: space-between;
}
.advws-h .podyum-et { color: var(--acik); letter-spacing: .16em; }
.advws-h .podyum-tum {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink3);
}
.advws-h .podyum-tum:hover { color: var(--acik); }
.advws-h .podyum-set {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: 12px; margin-top: 14px;
}
.advws-h .podyum-yok { grid-column: 1 / -1; color: var(--ink3); font-size: 14px; }
.advws-h .pod {
display: block; padding: 16px 18px 14px; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-radius: 4px;
transition: border-color .2s ease, background .2s ease;
}
.advws-h .pod:hover { border-color: var(--acik); background: rgba(127, 215, 222, .12); }
/* Birinci sıra ayrı bir zemin alıyor: podyum üç eşit kart değil, bir cevap. */
.advws-h .pod--bir { background: rgba(23, 162, 166, .16); border-color: rgba(127, 215, 222, .5); }
.advws-h .pod-ust { display: flex; align-items: baseline; gap: 10px; }
.advws-h .pod-no { font-family: var(--mono); font-size: 12px; color: var(--acik); }
.advws-h .pod-ad { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.advws-h .pod-orta { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; }
.advws-h .pod-sayi {
font-family: var(--mono); font-size: 46px; font-weight: 600;
line-height: .9; letter-spacing: -.03em; color: var(--acik);
}
.advws-h .pod-birim {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink3); padding-bottom: 3px; line-height: 1.3;
}
.advws-h .pod-pencere { margin-left: auto; text-align: right; padding-bottom: 2px; }
.advws-h .pod-pencere-et {
display: block; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
}
.advws-h .pod-pencere-deger { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; }
.advws-h .pod-alt {
display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 11px;
border-top: 1px solid rgba(127, 215, 222, .2); font-size: 13px; color: var(--ink3);
}
.advws-h .pod-durum { font-weight: 600; }
.advws-h .pod--cokiyi .pod-durum,
.advws-h .pod--iyi .pod-durum { color: var(--acik); }
.advws-h .pod--sinirda .pod-durum { color: #F0C675; }
.advws-h .pod--zayif .pod-durum,
.advws-h .pod--uygunsuz .pod-durum { color: #F0B98E; }
.advws-h .pod--yok .pod-durum { color: var(--ink4); }
.advws-h .pod-detay { margin-left: auto; font-family: var(--mono); font-size: 12px; }
/* ---------------------------------------------------------------
* FİLTRE ÇUBUĞU — yapışkan
*
* ⚠️ Tema başlığı yapışkan DEĞİL (ölçüldü), bu yüzden `top:0` güvenli.
* Bir gün olursa buradaki tek sayı değişir.
* ------------------------------------------------------------- */
.advws-h .cubuk {
position: sticky; top: 0; z-index: 30;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.advws-h .cubuk-ic {
display: flex; flex-wrap: wrap; align-items: stretch;
padding: 9px 5vw; max-width: calc(1240px + 10vw);
}
.advws-h .cubuk-grup { padding: 4px 18px; border-left: 1px solid var(--line2); }
.advws-h .cubuk-grup:first-child { padding-left: 0; border-left: 0; }
.advws-h .cubuk-grup--son { padding-right: 0; margin-left: auto; }
.advws-h .cubuk-et {
display: flex; align-items: center; gap: 6px;
color: var(--ink3); margin-bottom: 6px; letter-spacing: .14em; font-size: 9.5px;
}
.advws-h .advws-gunler,
.advws-h .advws-seviye,
.advws-h .advws-gorunum { display: flex; gap: 4px; }
.advws-h .advws-gun,
.advws-h .advws-sv,
.advws-h .advws-gor {
padding: 7px 12px; border: 1px solid #C6C3B8; background: #FFFFFF; color: var(--ink);
border-radius: 2px; font: inherit; font-size: 13px; font-weight: 600;
line-height: 1.25; cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.advws-h .advws-gun:hover,
.advws-h .advws-sv:hover,
.advws-h .advws-gor:hover { border-color: var(--koyu); }
.advws-h .advws-gun.on,
.advws-h .advws-sv.on,
.advws-h .advws-gor.on { background: #0B2431; border-color: #0B2431; color: #EEF4F4; }
.advws-h .advws-sirala {
padding: 7px 10px; border: 1px solid #C6C3B8; background: #FFFFFF;
border-radius: 2px; font: inherit; font-size: 13px; font-weight: 600;
color: var(--ink); max-width: 180px;
}
/* ---------------------------------------------------------------
* BUGÜN TÜRKİYE'DE — dört sayı
* ------------------------------------------------------------- */
.advws-h .sayilar {
background: var(--card); border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.advws-h .sayi-set {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.advws-h .sayi-hucre { padding: 18px 20px; border-left: 1px solid var(--line2); border-top: 3px solid var(--ana); }
.advws-h .sayi-hucre:first-child { border-left: 0; }
.advws-h .sayi-hucre--2 { border-top-color: var(--koyu); }
.advws-h .sayi-hucre--3 { border-top-color: var(--koyu2); }
.advws-h .sayi-hucre--4 { border-top-color: var(--koyu3); }
.advws-h .sayi-et { color: var(--ink3); }
.advws-h .sayi-deger {
margin-top: 9px; font-family: var(--mono);
font-size: clamp(26px, 3vw, 36px); font-weight: 600;
letter-spacing: -.03em; line-height: 1.05; white-space: nowrap;
}
.advws-h .sayi-alt { margin-top: 7px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
/* JS iki yere de yazıyor: "Bugün · Orta seviye" (sayı bandı) ve
"12 spot · 4 uygun · 3 sınırda" (kart bandı başlığı). */
.advws-h .advws-sayim-filtre { font-size: 13.5px; color: var(--ink3); }
/* Kart bandının başlığındaki alt satır İKİ sınıf taşıyor: `bolum-et`
(mono, camgöbeği, küçük) ve `advws-sayim-filtre` (JS'in yazdığı yer).
İkisi aynı özgüllükte olduğu için `advws-sayim-filtre` mono görünümü
eziyordu; bu kural (0,3,0) tasarımın etiketini geri veriyor. */
.advws-h .bolum-et.advws-sayim-filtre { font-size: 10.5px; color: var(--acik); }
.advws-h .advws-sayim-toplam {
font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink3);
}
/* ---------------------------------------------------------------
* HARİTA BANDI
* ------------------------------------------------------------- */
.advws-h .harita-grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 1000px) {
/* Harita sağdaki cevaptan geniş: 4/3'lük kutu eşit sütunda kareye yakın
kalıyor ve Türkiye kıyısı sığmıyordu. */
.advws-h .harita-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
}
.advws-h .advws-lejant {
display: flex; flex-wrap: wrap; gap: 12px;
font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink3);
}
.advws-h .advws-lej::before {
content: ''; display: inline-block; width: 8px; height: 8px;
border-radius: 999px; margin-right: 5px; background: currentColor;
}
.advws-h .advws-lej-iyi::before { background: var(--iyi); }
.advws-h .advws-lej-sinir::before { background: var(--sinir); }
.advws-h .advws-lej-kuv::before { background: var(--kotu); }
.advws-h .harita-kutu {
position: relative; margin-top: 4px; aspect-ratio: 4 / 3;
background: var(--bg2); border: 1px solid var(--line);
border-radius: 3px; overflow: hidden;
}
.advws-h .advws-genel-harita { position: absolute; inset: 0; }
/* Leaflet denetimleri koyu zeminde: beyaz kutular bandı deliyordu. */
#advws-hub .leaflet-control-zoom a {
background: #0F2A38; color: #EEF4F4; border-color: rgba(127, 215, 222, .25);
}
#advws-hub .leaflet-control-attribution {
background: rgba(7, 27, 35, .8); color: rgba(238, 244, 244, .7);
}
#advws-hub .leaflet-control-attribution a { color: var(--acik); }
.advws-h .harita-not { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink3); }
.advws-h .harita-yan { display: grid; gap: 16px; align-content: start; }
.advws-h .advws-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.advws-h .advws-cip {
padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px;
background: rgba(127, 215, 222, .08); color: var(--ink2);
}
.advws-h .advws-cip:empty { display: none; }
.advws-h .advws-cip-iyi { color: var(--acik); border-color: rgba(127, 215, 222, .45); }
.advws-h .advws-cip-sifir { color: #F0B98E; border-color: rgba(200, 112, 58, .5); background: rgba(200, 112, 58, .12); }
/* Boş durum: "bugün uygun spot yok" cevabı. JS gösterip gizliyor. */
.advws-h .advws-bos-durum {
padding: 16px 18px; background: rgba(127, 215, 222, .08);
border: 1px solid var(--line); border-left: 3px solid var(--ana); border-radius: 3px;
}
.advws-h .advws-bos-ust { display: flex; gap: 10px; align-items: flex-start; }
.advws-h .advws-bos-ikon { width: 20px; height: 20px; color: var(--acik); margin-top: .15em; }
.advws-h .advws-bos-ana { margin: 0; font-size: 15px; line-height: 1.5; }
.advws-h .advws-bos-alt { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.advws-h .advws-bos-et { display: block; color: var(--ink3); }
.advws-h .advws-bos-cevap { margin: 5px 0 0; font-size: 15px; }
.advws-h .advws-bos-link { color: var(--acik); text-decoration: underline; text-underline-offset: 3px; }
.advws-h .advws-kalan {
display: inline-block; margin-top: 6px; font-family: var(--mono);
font-size: 12.5px; color: var(--acik);
}
.advws-h .sirala-not { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink3); }
.advws-h .uyari-serit {
padding: 15px 17px; background: rgba(224, 163, 46, .12);
border-left: 2px solid var(--sinir); font-size: 13.5px; line-height: 1.55; color: var(--ink2);
}
.advws-h .uyari-serit strong { color: var(--ink); font-weight: 700; }
/* ---------------------------------------------------------------
* SPOT KARTLARI
*
* İKİ DÜZEN, TEK İŞARETLEME. Kart bir ızgara; "Detaylı"da alanlar beş satıra,
* "Kompakt"ta tek satıra diziliyor. Hangi düzenin geçerli olduğunu KÖKTEKİ
* `advws-genis` sınıfı söylüyor (adv-ws.js sirala() içinde çeviriyor).
*
* 🔑 `.advws-veri` DISPLAY:CONTENTS. Kart içeriği 12 ayrı `.advws-veri`
* bloğunda duruyor (gün × seviye) ve yalnız biri görünür. `display:contents`
* sayesinde görünen bloğun ÇOCUKLARI doğrudan kartın ızgarasına yerleşiyor —
* uygunluk rozeti başlık satırının sağına çıkabiliyor.
* ⚠️ ALTTAKİ `[hidden]` KURALI SİLİNMESİN: `display:contents` `hidden`
* özniteliğini ezer ve 12 kombinasyon birden açılır.
* ------------------------------------------------------------- */
.advws-h .advws-liste-baslik { display: none; }
.advws-h.advws-genis .advws-liste-baslik { display: none; }
.advws-h .advws-liste { display: grid; gap: 8px; }
.advws-h.advws-genis .advws-liste {
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
gap: 14px;
}
.advws-h .advws-kart {
display: grid; align-content: start;
background: var(--card); border: 1px solid var(--line);
border-top: 3px solid var(--line); border-radius: 4px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.advws-h .advws-kart:hover { border-color: var(--koyu); }
.advws-h .advws-kart-secili { border-color: var(--koyu); box-shadow: 0 10px 28px rgba(11, 36, 49, .14); }
/* Üst şeridin rengi uygunluk kademesinden geliyor. */
.advws-h .advws-kart[data-kademe="cokiyi"],
.advws-h .advws-kart[data-kademe="iyi"] { border-top-color: var(--koyu); }
.advws-h .advws-kart[data-kademe="sinirda"] { border-top-color: #C07F10; }
.advws-h .advws-kart[data-kademe="zayif"],
.advws-h .advws-kart[data-kademe="uygunsuz"]{ border-top-color: #A94F18; }
.advws-h .advws-veri { display: contents; }
.advws-h .advws-veri[hidden] { display: none; }
/* ---- DETAYLI: tasarımın kart düzeni ----
*
* Şablondaki yerleşim:
* 01 Ad ............................ [Uygun]
* İL · İLÇE ................. Orta seviye için
* 18 kt / ortalama ................ HAMLE / 21 kt
* ▮▮▮▮▮▮▮▮▮▮▮▮▮ (saatlik şerit)
* 08:00 ——— [Uygun 14:00–18:00] ——— 20:00
* UYGUN SAAT YÖN DALGA
* 14:00–18:00 K ↑ 0,4 m
* Hamle farkı makul; pencere içinde düzenli basma bekleniyor.
* ( SPOTU İNCELE → )
*
* 🔑 DÖRT SÜTUN: ilk sütun sıra numarası (24px), kalan üçü eşit. Alt satırdaki
* üç ölçü tam o üç sütuna oturuyor; "Uygun saat" değeri uzun olduğu için ilk
* iki sütunu birden kaplıyor (tasarımda da öyle duruyor).
*
* 🧩 HAMLE SAĞ ÜSTTE AMA DOM'DA ALTTA. `.advws-ikincil` üç ölçüyü hamle · yön ·
* dalga sırasıyla basıyor ve adv-ws.js o SIRAYA göre okuyor (özeti kopyala,
* harita balonu). Burada `display: contents` verilip üç çocuk ayrı alanlara
* dağıtılıyor — DOM'a dokunmadan tasarımın yerleşimi çıkıyor.
* ⛔ `display: contents`i kaldırırsan hamle yeniden alt satıra düşer.
*/
.advws-h.advws-genis .advws-kart {
grid-template-columns: 24px repeat(3, minmax(0, 1fr));
grid-template-areas:
"no ad ad durum"
"ruz ruz ruz hamle"
"seri seri seri seri"
"saat saat yon dalga"
"not not not not"
"alt alt alt alt";
padding: 16px 18px 15px;
row-gap: 13px;
column-gap: 10px;
}
.advws-h.advws-genis .advws-sira { grid-area: no; }
.advws-h.advws-genis .advws-kart-kimlik { grid-area: ad; }
.advws-h.advws-genis .advws-sonuc { grid-area: durum; }
.advws-h.advws-genis .advws-ruzgar-blok { grid-area: ruz; }
.advws-h.advws-genis .advws-gunluk { grid-area: seri; }
.advws-h.advws-genis .advws-saat-blok { grid-area: saat; }
.advws-h.advws-genis .advws-not { grid-area: not; }
.advws-h.advws-genis .advws-kart-alt { grid-area: alt; }
.advws-h.advws-genis .advws-ikincil { display: contents; }
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) { grid-area: hamle; }
.advws-h.advws-genis .advws-ikincil > span:nth-child(2) { grid-area: yon; }
.advws-h.advws-genis .advws-ikincil > span:nth-child(3) { grid-area: dalga; }
/* İskelet ve "veri yok" kendi alanı olmayan iki durum: gövdeyi kaplasınlar. */
.advws-h.advws-genis .advws-iskelet-kap { grid-column: 1 / -1; grid-row: 2 / 6; }
.advws-h.advws-genis .advws-yok { grid-column: 1 / -1; grid-row: 2; }
/* ---- KOMPAKT: tek satırlık tarama ---- */
.advws-h:not(.advws-genis) .advws-kart {
/* ⚠️ SON SÜTUN SABİT (190px), `auto` DEĞİL. `auto` iken kartın işlem
sütunu içeriğine göre 363 px'e çıkıyor, sütun başlığındaki "İŞLEM"
kelimesi ise 39 px kalıyordu; aradaki fark iki esnek sütuna dağılıp
başlıkla satırları HİZASIZ bırakıyordu (canlıda ölçüldü, 9 Eyl 2026).
⛔ Bu değeri değiştirirsen `.advws-liste-baslik`teki eşini de değiştir —
iki tanım aynı olmak zorunda. */
grid-template-columns: 24px minmax(120px, 1.7fr) 104px 78px 112px minmax(150px, 1.5fr) 190px;
grid-template-areas: "no ad durum ruz saat ikin alt";
align-items: center;
padding: 11px 16px;
column-gap: 14px;
border-top-width: 1px;
border-left: 3px solid var(--line);
}
.advws-h:not(.advws-genis) .advws-kart[data-kademe="cokiyi"],
.advws-h:not(.advws-genis) .advws-kart[data-kademe="iyi"] { border-left-color: var(--koyu); }
.advws-h:not(.advws-genis) .advws-kart[data-kademe="sinirda"] { border-left-color: #C07F10; }
.advws-h:not(.advws-genis) .advws-kart[data-kademe="zayif"],
.advws-h:not(.advws-genis) .advws-kart[data-kademe="uygunsuz"]{ border-left-color: #A94F18; }
.advws-h:not(.advws-genis) .advws-sira { grid-area: no; }
.advws-h:not(.advws-genis) .advws-kart-kimlik { grid-area: ad; }
.advws-h:not(.advws-genis) .advws-sonuc { grid-area: durum; }
.advws-h:not(.advws-genis) .advws-ruzgar-blok { grid-area: ruz; }
.advws-h:not(.advws-genis) .advws-saat-blok { grid-area: saat; }
.advws-h:not(.advws-genis) .advws-ikincil { grid-area: ikin; font-size: 12.5px; }
.advws-h:not(.advws-genis) .advws-kart-alt { grid-area: alt; }
.advws-h:not(.advws-genis) .advws-gunluk { display: none; }
.advws-h:not(.advws-genis) .advws-not { display: none; }
.advws-h:not(.advws-genis) .advws-sonuc-neden { display: none; }
.advws-h:not(.advws-genis) .advws-iskelet-kap { grid-column: 3 / -1; }
.advws-h:not(.advws-genis) .advws-yok { grid-column: 3 / -1; margin: 0; }
.advws-h:not(.advws-genis) .advws-buyuk-sayi { font-size: 22px; }
.advws-h:not(.advws-genis) .advws-buyuk-not { display: none; }
.advws-h:not(.advws-genis) .advws-ikincil i { display: none; }
/* Kompakt görünümde sütun başlığı geri geliyor — 7 sütun, kartla aynı ölçü. */
.advws-h:not(.advws-genis) .advws-liste-baslik {
display: grid;
/* ⚠️ Track listesi yukarıdaki kartla BİREBİR AYNI olmak zorunda. */
grid-template-columns: 24px minmax(120px, 1.7fr) 104px 78px 112px minmax(150px, 1.5fr) 190px;
column-gap: 14px; padding: 0 16px 8px 19px; color: var(--ink3);
}
/* ---- Kart parçaları ---- */
.advws-h .advws-sira {
font-family: var(--mono); font-size: 11.5px; color: var(--ink3); align-self: start; padding-top: 4px;
}
.advws-h .advws-kart-kimlik { min-width: 0; }
.advws-h .advws-ad { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.advws-h:not(.advws-genis) .advws-ad { font-size: 15.5px; }
.advws-h .advws-ad-link { color: var(--ink); }
.advws-h .advws-ad-link:hover { color: var(--koyu); }
.advws-h .advws-yer {
margin-top: 3px; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
/* Uygunluk rozeti + gerekçe */
.advws-h .advws-sonuc { text-align: right; white-space: nowrap; }
.advws-h .advws-sonuc-hap {
display: inline-block; padding: 4px 9px; border-radius: 2px;
font-size: 11.5px; font-weight: 700; background: #ECEAE3; color: var(--ink);
}
.advws-h .advws-uyg-cokiyi .advws-sonuc-hap,
.advws-h .advws-uyg-iyi .advws-sonuc-hap { background: #E0F5E8; color: #0D5C31; }
.advws-h .advws-uyg-sinirda .advws-sonuc-hap { background: #FCEFD8; color: #7D5205; }
.advws-h .advws-uyg-zayif .advws-sonuc-hap,
.advws-h .advws-uyg-uygunsuz .advws-sonuc-hap{ background: #F7E3D3; color: #7D3A13; }
.advws-h .advws-sonuc-neden {
display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink3);
white-space: normal; max-width: 22ch; margin-left: auto;
}
/* Büyük rüzgâr sayısı */
.advws-h .advws-ruzgar-blok { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.advws-h .advws-buyuk { display: flex; align-items: baseline; gap: 5px; }
.advws-h .advws-buyuk-sayi {
font-family: var(--mono); font-size: clamp(40px, 5vw, 58px); font-weight: 600;
line-height: .86; letter-spacing: -.045em;
}
.advws-h .advws-buyuk-birim,
.advws-h .advws-buyuk-not {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink3);
}
.advws-h .advws-buyuk-not { padding-bottom: 3px; }
/* ---- ÜÇ ÖLÇÜ: etiket üstte, değer altta ----
Tasarımın alt satırı (UYGUN SAAT / YÖN / DALGA) ve sağ üstteki HAMLE aynı
bileşen: mono küçük etiket + kalın değer. `.advws-saat-blok` ile
`.advws-ikincil > span` bu yüzden tek kuralda toplanıyor. */
.advws-h .advws-saat-blok { min-width: 0; }
.advws-h .advws-saat-blok i,
.advws-h .advws-ikincil i {
font-style: normal; font-family: var(--mono); font-size: 10px;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
}
.advws-h .advws-saat-blok b { font-size: 15px; font-weight: 600; }
.advws-h .advws-sonuc-yok { color: #A94F18; }
.advws-h.advws-genis .advws-saat-blok i,
.advws-h.advws-genis .advws-ikincil > span > i { display: block; }
/* ⚠️ `inline-block`, `block` DEĞİL. Yön hücresinde `K`nın hemen
ardında ok ``i geliyor; blok yapılınca ok alt satıra düşüyor ve
tasarımdaki "K ↑" ikiye bölünüyordu. */
.advws-h.advws-genis .advws-saat-blok b,
.advws-h.advws-genis .advws-ikincil > span > b { display: inline-block; margin-top: 5px; font-size: 15px; font-weight: 600; }
.advws-h.advws-genis .advws-saat-blok,
.advws-h.advws-genis .advws-ikincil > span {
display: block; min-width: 0; padding-top: 13px; border-top: 1px solid var(--line2);
}
/* Hamle sağ üstte: ölçü satırının parçası değil, büyük sayının karşılığı —
çizgisi yok, sağa yaslı. Hamle farkı yüksekse rengi uyarıya döner
(sınıfı PHP basıyor, kaynağı rüzgâr profili). */
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) {
padding-top: 0; border-top: 0; text-align: right; align-self: end;
}
.advws-h .advws-hamle-yuksek b { color: #A94F18; }
/* Tasarımın alt satırında ikon yok; kompakt taramada duruyorlar. */
.advws-h.advws-genis .advws-ikincil .advws-ikon { display: none; }
.advws-h .advws-ikincil { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink2); }
.advws-h .advws-ikincil span { display: inline-flex; align-items: baseline; gap: 5px; }
.advws-h .advws-ikincil b { font-weight: 600; }
.advws-h .advws-ikincil .advws-ikon { color: var(--ink3); }
.advws-h .advws-ok { display: inline-block; margin-left: 5px; transform: rotate(calc(var(--a) + 180deg)); color: var(--koyu); }
/* ---- SAATLİK ŞERİT + EKSEN ----
13 çubuk, 08:00–20:00. Renkler advws_serit_kart()'ın verdiği dört sınıftan;
eşikleri değiştirirsen orayı da güncelle. */
.advws-h .advws-gunluk { position: relative; }
.advws-h .advws-serit { display: flex; gap: 2px; height: 14px; }
.advws-h .advws-sc { flex: 1; border-radius: 1px; background: #E4E2DA; }
.advws-h .advws-sc-orta { background: #C9D3D4; }
.advws-h .advws-sc-uygun { background: var(--ana); }
.advws-h .advws-sc-guclu { background: var(--koyu); }
.advws-h .advws-gunluk-eksen {
display: flex; align-items: center; gap: 10px; margin-top: 8px;
font-family: var(--mono); font-size: 10.5px; color: var(--ink3);
}
/* İnce çizgiler sözde ögeyle: 08:00 ——— [çip] ——— 20:00 */
.advws-h .advws-gunluk-eksen > span:first-child,
.advws-h .advws-gunluk-eksen > span:last-child {
display: flex; align-items: center; gap: 10px; flex: 1;
}
.advws-h .advws-gunluk-eksen > span:first-child::after,
.advws-h .advws-gunluk-eksen > span:last-child::before {
content: ''; flex: 1; height: 1px; background: var(--line2);
}
.advws-h .advws-pen-cip {
flex: none; padding: 3px 8px; border-radius: 2px; letter-spacing: .04em;
font-weight: 600; background: #E0F5E8; color: #0D5C31; white-space: nowrap;
}
.advws-h .advws-pen-yok { background: #F7E3D3; color: #7D3A13; }
/* Kart altındaki tek cümle */
.advws-h .advws-not { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.advws-h .advws-yok { color: var(--ink3); font-size: 14px; }
/* Kart altı */
.advws-h .advws-kart-alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.advws-h .advws-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
border: 1px solid var(--koyu); border-radius: 999px; background: transparent; color: var(--koyu);
font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.advws-h .advws-btn:hover { background: var(--koyu); color: #FFFFFF; }
.advws-h .advws-menu { position: relative; }
.advws-h .advws-menu-ac {
width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 999px;
background: transparent; color: var(--ink3); cursor: pointer; font-size: 15px; line-height: 1;
}
.advws-h .advws-menu-ic {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 168px;
display: grid; padding: 6px; background: #FFFFFF; border: 1px solid var(--line);
border-radius: 4px; box-shadow: 0 12px 28px rgba(11, 36, 49, .16);
}
.advws-h .advws-menu-ic[hidden] { display: none; }
.advws-h .advws-menu-ic a,
.advws-h .advws-menu-ic button {
padding: 8px 10px; border: 0; background: transparent; color: var(--ink);
font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; border-radius: 3px;
}
.advws-h .advws-menu-ic a:hover,
.advws-h .advws-menu-ic button:hover { background: #F1FAFA; color: var(--koyu); }
.advws-h .advws-gnc {
margin-left: auto; padding: 4px 9px; border-radius: 2px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
background: #FCEFD8; color: #7D5205;
}
.advws-h .advws-gnc--hata { background: #F7E3D3; color: #7D3A13; }
/* Yükleniyor iskeleti — kartın kendi şekli korunuyor, düzen kaymıyor. */
.advws-h .advws-iskelet-kap { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.advws-h .advws-iskelet {
display: block; border-radius: 2px;
background: linear-gradient(90deg, rgba(11, 36, 49, .06) 0%, rgba(11, 36, 49, .13) 50%, rgba(11, 36, 49, .06) 100%);
background-size: 320px 100%;
animation: advws-h-parilti 1.5s linear infinite;
}
@keyframes advws-h-parilti { from { background-position: -320px 0; } to { background-position: 320px 0; } }
.advws-h .advws-hata {
margin: 0; padding: 12px 5vw; background: #F7E3D3; color: #7D3A13; font-size: 14px;
}
.advws-h .advws-hata[hidden] { display: none; }
/* ---------------------------------------------------------------
* YEREL BİLGİ + KATKI FORMU (koyu bant)
* ------------------------------------------------------------- */
.advws-h .advws-katki {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 30px; align-items: start;
}
.advws-h .advws-katki h2 { margin: 0 0 14px; }
.advws-h .advws-katki-metin p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.62; color: var(--ink2); }
.advws-h .advws-katki-metin strong { color: var(--ink); font-weight: 600; }
.advws-h .advws-katki-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.advws-h .advws-katki-liste li {
padding: 12px 15px; background: rgba(127, 215, 222, .08);
border-left: 2px solid var(--ana); font-size: 14px; line-height: 1.5; color: var(--ink2);
}
.advws-h .advws-katki-liste strong { color: var(--ink); font-weight: 700; }
.advws-h .advws-katki-ac {
background: rgba(5, 16, 22, .55); border: 1px solid var(--line);
border-radius: 4px; padding: 20px 22px;
}
.advws-h .advws-katki-ac > summary {
cursor: pointer; font-size: 17px; font-weight: 700; list-style: none;
}
.advws-h .advws-katki-ac > summary::-webkit-details-marker { display: none; }
.advws-h .advws-katki-ac > summary::after { content: ' +'; color: var(--acik); }
.advws-h .advws-katki-ac[open] > summary::after { content: ' –'; }
.advws-h .advws-katki-form { display: grid; gap: 12px; margin-top: 16px; }
.advws-h .advws-form-satir {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px;
}
.advws-h .advws-katki-form label { display: grid; gap: 5px; }
.advws-h .advws-katki-form label > span {
font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink3);
}
.advws-h .advws-katki-form input,
.advws-h .advws-katki-form select,
.advws-h .advws-katki-form textarea {
padding: 10px; background: var(--bg2); color: var(--ink);
border: 1px solid rgba(127, 215, 222, .25); border-radius: 2px;
font: inherit; font-size: 14px; width: 100%;
}
.advws-h .advws-katki-form textarea { resize: vertical; }
.advws-h .advws-katki-form input:focus,
.advws-h .advws-katki-form select:focus,
.advws-h .advws-katki-form textarea:focus { outline: 2px solid var(--acik); outline-offset: 1px; }
.advws-h .advws-katki-btn {
padding: 13px; background: var(--ana); color: #041418; border: 0; border-radius: 3px;
font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
}
.advws-h .advws-katki-btn:hover { background: var(--acik); }
.advws-h .advws-form-not { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink4); }
.advws-h .advws-katki-hata { color: #F0B98E; font-size: 13.5px; }
.advws-h .advws-katki-ok {
grid-column: 1 / -1; padding: 18px 20px; background: rgba(47, 191, 113, .12);
border-left: 3px solid var(--iyi); font-size: 15px;
}
/* Bot tuzağı — insanlar görmez. */
.advws-h .advws-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------------------------------------------------------------
* UYARI + SAYILARIN ARKASINDA (krem bant)
* ------------------------------------------------------------- */
.advws-h .advws-uyari { display: grid; gap: 16px; }
.advws-h .advws-uyari-ana {
margin: 0; padding: 16px 18px; background: #FFF6E6;
border: 1px solid #F0DCB4; border-radius: 3px; font-size: 14.5px; line-height: 1.6;
}
.advws-h .advws-uyari-ana strong { font-weight: 700; }
.advws-h .advws-tazelik {
padding: 16px 18px; background: #FCEFD8; border-left: 3px solid var(--sinir); border-radius: 3px;
}
.advws-h .advws-tazelik--hata { background: #F7E3D3; border-left-color: #A94F18; }
.advws-h .advws-tazelik-band { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.advws-h .advws-tazelik-nokta {
display: grid; place-items: center; width: 20px; height: 20px;
border-radius: 999px; background: var(--sinir); color: #241703; font-size: 12px; font-weight: 700;
}
.advws-h .advws-tazelik--hata .advws-tazelik-nokta { background: #A94F18; color: #FDF1E6; }
.advws-h .advws-tazelik-etiket,
.advws-h .advws-tazelik-damga {
font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.advws-h .advws-tazelik-ana { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.advws-h .advws-tazelik-metin { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.advws-h .advws-tazelik-btn {
display: inline-block; margin-top: 12px; padding: 8px 14px;
border: 1px solid var(--ink); border-radius: 999px; color: var(--ink);
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600;
}
.advws-h .advws-tazelik-btn:hover { background: var(--ink); color: #F7F6F3; }
.advws-h .yontem { margin-top: 44px; }
.advws-h .yontem-liste { display: grid; gap: 5px; }
/* Satırlar teal ailesinde koyulaşan bir merdiven: sıra rastgele değil, en
temel uyarıdan (bu bir tahmindir) kaynak künyesine iniyor. */
.advws-h .yontem-satir {
display: grid; grid-template-columns: 52px minmax(0, 250px) minmax(0, 1fr);
gap: 20px; align-items: start; padding: 22px 20px;
border-left: 4px solid var(--ana);
background: linear-gradient(90deg, rgba(23, 162, 166, .1), rgba(23, 162, 166, .012) 55%, transparent);
}
.advws-h .yontem-satir--2 { border-left-color: #12868C; background: linear-gradient(90deg, rgba(18, 134, 140, .085), rgba(18, 134, 140, .012) 55%, transparent); }
.advws-h .yontem-satir--3 { border-left-color: var(--koyu); background: linear-gradient(90deg, rgba(10, 102, 109, .085), rgba(10, 102, 109, .012) 55%, transparent); }
.advws-h .yontem-satir--4 { border-left-color: var(--koyu2); background: linear-gradient(90deg, rgba(13, 76, 92, .09), rgba(13, 76, 92, .014) 55%, transparent); }
.advws-h .yontem-satir--5 { border-left-color: var(--koyu3); background: linear-gradient(90deg, rgba(16, 52, 74, .09), rgba(16, 52, 74, .014) 55%, transparent); }
.advws-h .yontem-satir--6 { border-left-color: #0C1A24; background: linear-gradient(90deg, rgba(12, 26, 36, .09), rgba(12, 26, 36, .014) 55%, transparent); }
.advws-h .yontem-ikon {
display: grid; place-items: center; width: 44px; height: 44px;
border-radius: 3px; background: rgba(23, 162, 166, .14); color: var(--koyu);
}
.advws-h .yontem-ikon .advws-ikon { width: 22px; height: 22px; }
.advws-h .yontem-satir h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.advws-h .yontem-satir p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink2); max-width: 64ch; }
.advws-h .yontem-satir p strong { color: var(--ink); font-weight: 700; }
.advws-h .yontem-satir a { color: var(--koyu); text-decoration: underline; text-underline-offset: 3px; }
/* ---------------------------------------------------------------
* İLGİLİ ARAÇLAR
* ------------------------------------------------------------- */
.advws-h .band--araclar { background: linear-gradient(172deg, #0B2431 0%, #071720 100%); }
.advws-h .band--araclar .bolum-ust--cizgi { border-bottom-color: var(--line); }
.advws-h .araclar-tum {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
border: 1px solid rgba(127, 215, 222, .45); border-radius: 999px;
background: rgba(127, 215, 222, .1); color: var(--acik);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; font-weight: 600;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.advws-h .araclar-tum:hover { background: var(--ana); border-color: var(--ana); color: #041418; }
.advws-h .araclar-izgara {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px;
}
.advws-h .arac-kart {
display: block; padding: 20px; color: var(--ink);
background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ana);
border-radius: 3px; transition: background .2s ease, border-color .2s ease;
}
.advws-h .arac-kart--2 { border-top-color: var(--koyu); }
.advws-h .arac-kart--3 { border-top-color: var(--koyu3); }
.advws-h .arac-kart:hover { background: rgba(127, 215, 222, .14); border-color: var(--acik); }
.advws-h .arac-ust { display: block; color: var(--ink3); }
.advws-h .arac-ad { display: block; margin-top: 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.advws-h .arac-metin { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
/* ---------------------------------------------------------------
* HARİTA KATMANI — işaretler, yer adları, balon
*
* 🚨 BURAYA 1.76.2'DE TAŞINDI, SİLME. Bu kurallar adv-ws.css'te duruyordu
* ve hub o dosyayı artık HİÇ yüklemiyor (gerekçesi eklentinin ana dosyasında).
* Taşınmasaydı harita işaretleri Leaflet'in çıplak div'leri olarak kalırdı:
* renk yok, numara yok, balon biçimsiz.
*
* ⚠️ BALON RENKLERİ TOKEN DEĞİL, SABİT. Balon Leaflet'in BEYAZ kutusunun
* içinde açılıyor ama DOM'da koyu bandın altında duruyor; `var(--ink)`
* kullanmak beyaz üstüne beyaz yazı demek olurdu.
* ------------------------------------------------------------- */
/* 🚨 LEAFLET DENETİMLERİ `#advws-hub` ÖZGÜLLÜĞÜYLE EZİLİYOR.
Leaflet'in kendi kuralı `.leaflet-container .leaflet-control-attribution`
(0,2,0); bizimki `.advws-h .leaflet-control-attribution` da (0,2,0) —
BERABERE. leaflet.css sayfaya TEMBEL yükleniyor, yani bizden SONRA
geliyor ve beraberliği o kazanıyordu: zemin beyaz kalıp yazı açık
renkte basılıyor, atıf satırı okunmuyordu (canlıda ölçüldü, kontrast
1,15). Kimlik seçicisi yarışı bitiriyor.
⛔ Bu bloktaki `#advws-hub`ları `.advws-h`e çevirme. */
.advws-h .advws-pin-sar,
.advws-h .advws-yer-sar { background: none; border: 0; }
.advws-h .advws-pin {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid #071B23;
background: #7C93AB;
box-shadow: 0 1px 4px rgba(4, 20, 24, .45);
cursor: pointer;
transition: transform .12s ease;
}
.advws-h .advws-pin:hover { transform: scale(1.2); }
/* Kart üzerine gelince işaret büyür — bağ çift yönlü. */
.advws-h .advws-pin-etkin {
transform: scale(1.45); z-index: 500;
filter: drop-shadow(0 2px 5px rgba(4, 20, 24, .5));
}
/* Renk sınıfları KADEME sözlüğünden (cokiyi/iyi/sinirda/zayif/uygunsuz/yok);
kartlardaki üç ada birebir karşılık gelir. */
.advws-h .advws-pin-cokiyi,
.advws-h .advws-pin-iyi { background: var(--iyi); }
.advws-h .advws-pin-sinirda,
.advws-h .advws-pin-zayif { background: var(--sinir); }
.advws-h .advws-pin-uygunsuz { background: var(--kotu); }
.advws-h .advws-pin-yok { background: #7C93AB; }
.advws-h .advws-pin-no {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 11px; font-weight: 700; color: #041418;
pointer-events: none;
}
/* Kendi Türkçe yer adlarımız — altlık etiketsiz servis ediliyor. */
.advws-h .advws-yer-et {
position: absolute; transform: translate(-50%, -50%);
white-space: nowrap; pointer-events: none;
font-size: 11.5px; font-weight: 600; color: #4D5B66;
text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 3px #FFFFFF;
}
.advws-h .advws-yer-et.dis {
font-size: 10px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; opacity: .5;
}
.advws-h .advws-yer-et.deniz {
font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
font-style: italic; opacity: .5; color: #0A666D;
}
.advws-h .advws-yer-et.ada { font-size: 10px; opacity: .78; }
/* Balon — Leaflet'in beyaz kutusu, koyu metin. */
#advws-hub .leaflet-popup-content { margin: 11px 13px; }
#advws-hub .leaflet-container { font: inherit; }
.advws-h .advws-balon {
display: flex; flex-direction: column; gap: 3px;
min-width: 190px; font-size: 13px; color: #0C1A24;
}
.advws-h .advws-balon-ust {
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: #5C6772;
}
.advws-h .advws-balon strong { font-size: 15.5px; color: #0C1A24; line-height: 1.25; }
.advws-h .advws-balon-yer { font-size: 11.5px; color: #5C6772; }
.advws-h .advws-balon-olcu {
display: flex; align-items: center; gap: 16px;
margin: 7px 0 5px; padding: 8px 0;
border-top: 1px solid #ECEAE3; border-bottom: 1px solid #ECEAE3;
}
.advws-h .advws-balon-sayi {
display: inline-flex; align-items: baseline; gap: 3px;
font-family: var(--mono); font-size: 24px; font-weight: 600; color: #0C1A24;
}
.advws-h .advws-balon-sayi i { font-style: normal; font-size: 12px; font-weight: 600; color: #5C6772; }
.advws-h .advws-balon-yon { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #5C6772; }
.advws-h .advws-balon-yon b { color: #0C1A24; font-size: 13.5px; }
.advws-h .advws-balon-yon .advws-ok { font-size: 17px; color: #0A666D; }
.advws-h .advws-balon-hamle,
.advws-h .advws-balon-saat { font-size: 12px; color: #5C6772; }
.advws-h .advws-balon-saat b { color: #0C1A24; }
.advws-h .advws-balon-durum { font-size: 12.5px; font-weight: 700; }
.advws-h .advws-uyg-cokiyi.advws-balon-durum,
.advws-h .advws-uyg-iyi.advws-balon-durum { color: #0D5C31; }
.advws-h .advws-uyg-sinirda.advws-balon-durum { color: #7D5205; }
.advws-h .advws-uyg-zayif.advws-balon-durum,
.advws-h .advws-uyg-uygunsuz.advws-balon-durum{ color: #7D3A13; }
.advws-h .advws-balon-link {
margin-top: 5px; font-family: var(--mono); font-size: 11px;
letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #0A666D;
}
.advws-h .advws-balon-link:hover { text-decoration: underline; }
/* Rüzgâr alanı denetimi tasarımda yok. */
#advws-hub .leaflet-velocity-control { display: none; }
/* Katman seçici — Leaflet'in varsayılanı koyu bantta parlıyordu. */
#advws-hub .leaflet-control-layers {
border: 1px solid rgba(127, 215, 222, .25); border-radius: 3px;
background: #0F2A38; color: #EEF4F4; box-shadow: 0 2px 8px rgba(4, 20, 24, .4);
padding: 4px 2px;
}
#advws-hub .leaflet-control-layers-list { font-size: 12.5px; }
#advws-hub .leaflet-control-layers label {
display: flex; align-items: center; gap: 6px;
padding: 4px 9px; margin: 0; font-weight: 600; cursor: pointer;
}
#advws-hub .leaflet-control-layers label small { font-weight: 400; color: rgba(238, 244, 244, .7); }
#advws-hub .leaflet-control-layers input { margin: 0; accent-color: var(--ana); }
/* Veri hiç yüklenmemişse basılan kutu. */
.advws-h .advws-bos {
padding: 18px 20px; background: #FFF6E6; border: 1px solid #F0DCB4;
border-radius: 3px; color: #0C1A24; font-size: 14.5px;
}
/* ---------------------------------------------------------------
* ŞABLONA HİZALAMA — 1.77.0
* Kullanıcının tasarım/canlı karşılaştırmasından çıkan düzeltmeler.
* ------------------------------------------------------------- */
/* 1) GÜN DÜĞMESİ TEK SATIR — tasarımda "Bugün 20.8" yan yana; bizde tarih
alt satıra düşüyordu ve düğme iki kat yükseliyordu. */
.advws-h .advws-gun { display: inline-flex; align-items: baseline; gap: 6px; text-align: left; }
.advws-h .advws-gun-tarih { font-family: var(--mono); font-size: 11px; font-weight: 400; opacity: .68; }
/* 2) SEVİYE NOTU BAŞLIK YANINDA — `bolum-ust` varsayılanı iki ucu ayırıyor
(`space-between`); tasarımda cümle başlığın hemen sağında duruyor. */
.advws-h .bolum-ust--yan { justify-content: flex-start; gap: 6px 18px; align-items: baseline; }
.advws-h .seviye-notlar { flex: 1 1 320px; min-width: 0; }
.advws-h .advws-seviye-not { display: none; margin: 0; }
.advws-h[data-seviye="baslangic"] .advws-seviye-not[data-for="baslangic"],
.advws-h[data-seviye="orta"] .advws-seviye-not[data-for="orta"],
.advws-h[data-seviye="deneyimli"] .advws-seviye-not[data-for="deneyimli"] {
display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink3);
}
.advws-h .advws-seviye-not strong { color: var(--ink2); font-weight: 700; }
/* 3) EN YAKIN UYGUN GÜN — haritanın yanındaki rozetli üç satır. */
.advws-h .yakin-kutu { display: grid; gap: 10px; }
.advws-h .yakin-set { display: grid; gap: 10px; }
.advws-h .yakin-set:empty { display: none; }
.advws-h .yakin {
display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: var(--ink);
background: rgba(238, 244, 244, .05); border: 1px solid var(--line);
border-left: 3px solid var(--ana); border-radius: 3px;
transition: background .2s ease;
}
.advws-h .yakin:hover { background: rgba(127, 215, 222, .12); }
.advws-h .yakin-ic { min-width: 0; }
.advws-h .yakin-gun {
display: block; font-family: var(--mono); font-size: 10px;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
}
.advws-h .yakin-ad { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; }
.advws-h .yakin-saat {
margin-left: auto; font-family: var(--mono); font-size: 15px;
font-weight: 600; color: var(--acik); white-space: nowrap;
}
/* 4) LİSTE ÜSTÜ — "UYGUN VE SINIRDA · 5 SPOT" + gün/seviye satırı. */
.advws-h .liste-ust {
display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 20px 0 12px;
}
.advws-h .liste-ust h3 { margin: 0; letter-spacing: .16em; }
.advws-h .liste-not { font-size: 13px; color: var(--ink2); }
/* 5) KATLANAN "UYGUN DEĞİL" GRUBU
Kartlar tek kapta; ayrım `order` ile. Şerit 2, uygun/sınırda 1,
uygun değil 3. ⛔ `display:none` kullanılan kartlar DOM'da kalıyor —
sıralama, harita renkleri ve sayım onların veri özniteliklerini okuyor. */
.advws-h .advws-liste > .advws-kart { order: 1; }
.advws-h .advws-liste > .ikincil-bar { order: 2; grid-column: 1 / -1; }
.advws-h .advws-liste > .advws-kart[data-kademe="zayif"],
.advws-h .advws-liste > .advws-kart[data-kademe="uygunsuz"],
.advws-h .advws-liste > .advws-kart[data-kademe="yok"] { order: 3; display: none; }
.advws-h.advws-ikincil-acik .advws-liste > .advws-kart[data-kademe="zayif"],
.advws-h.advws-ikincil-acik .advws-liste > .advws-kart[data-kademe="uygunsuz"],
.advws-h.advws-ikincil-acik .advws-liste > .advws-kart[data-kademe="yok"] { display: grid; }
.advws-h .ikincil-bar {
display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
margin-top: 16px; padding: 14px 18px;
background: #7D3A13; color: #FDF1E6; border-radius: 3px;
}
.advws-h .ikincil-bar[hidden] { display: none; }
.advws-h .ikincil-baslik {
margin: 0; font-family: var(--mono); font-size: 11.5px;
letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.advws-h .ikincil-not { font-size: 13px; color: rgba(253, 241, 230, .85); }
.advws-h .ikincil-btn {
margin-left: auto; padding: 7px 13px; border: 1px solid rgba(253, 241, 230, .5);
background: transparent; color: #FDF1E6; border-radius: 2px;
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.advws-h .ikincil-btn:hover { background: #FDF1E6; color: #7D3A13; }
/* 6) DÜĞME RENGİ DURUMDAN GELİYOR
Tasarımda "Spotu incele" düğmesi kartın uygunluk rengini taşıyor:
uygun yeşil, sınırda amber, uygun değil kiremit. Tek bir camgöbeği
düğme, "uygun değil" kartında yanlış bir söz veriyordu. */
.advws-h .advws-btn-ana { background: #ECEAE3; border-color: #C6C3B8; color: var(--ink); }
.advws-h .advws-btn-ana:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.advws-h .advws-kart[data-kademe="cokiyi"] .advws-btn-ana,
.advws-h .advws-kart[data-kademe="iyi"] .advws-btn-ana { background: #E0F5E8; border-color: #0A666D; color: #0D5C31; }
.advws-h .advws-kart[data-kademe="cokiyi"] .advws-btn-ana:hover,
.advws-h .advws-kart[data-kademe="iyi"] .advws-btn-ana:hover { background: #0A666D; border-color: #0A666D; color: #FFFFFF; }
.advws-h .advws-kart[data-kademe="sinirda"] .advws-btn-ana { background: #FCEFD8; border-color: #C07F10; color: #7D5205; }
.advws-h .advws-kart[data-kademe="sinirda"] .advws-btn-ana:hover { background: #C07F10; border-color: #C07F10; color: #FFFFFF; }
.advws-h .advws-kart[data-kademe="zayif"] .advws-btn-ana,
.advws-h .advws-kart[data-kademe="uygunsuz"] .advws-btn-ana { background: #F7E3D3; border-color: #A94F18; color: #7D3A13; }
.advws-h .advws-kart[data-kademe="zayif"] .advws-btn-ana:hover,
.advws-h .advws-kart[data-kademe="uygunsuz"] .advws-btn-ana:hover { background: #A94F18; border-color: #A94F18; color: #FFFFFF; }
/* İlk kart: zemin ve düğme DOLU — ama yine kendi kademesinin renginde. */
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="cokiyi"],
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="iyi"] { background: #F4FBFB; border-color: #0A666D; }
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="sinirda"] { background: #FFFAEF; border-color: #C07F10; }
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="zayif"],
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="uygunsuz"]{ background: #FDF7F1; border-color: #A94F18; }
.advws-h.advws-genis .advws-kart[data-sira="1"] { box-shadow: 0 10px 26px rgba(11, 36, 49, .12); }
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="cokiyi"] .advws-btn-ana,
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="iyi"] .advws-btn-ana { background: #0A666D; color: #FFFFFF; }
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="sinirda"] .advws-btn-ana { background: #C07F10; color: #FFFFFF; }
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="zayif"] .advws-btn-ana,
.advws-h.advws-genis .advws-kart[data-sira="1"][data-kademe="uygunsuz"] .advws-btn-ana{ background: #A94F18; color: #FFFFFF; }
/* 7) KART ALTI HİZASI — düğme ile üç nokta menüsü aynı eksende dursun.
`.advws-menu` blok olduğu için düğmeden birkaç piksel aşağı kayıyordu. */
.advws-h .advws-kart-alt { align-items: center; }
.advws-h .advws-menu { display: inline-flex; align-items: center; }
/* ---------------------------------------------------------------
* ŞABLONA HİZALAMA — İKİNCİ TUR (1.78.0)
* ------------------------------------------------------------- */
/* 1) DÜĞMENİN ALT KENARI SİLİK GÖRÜNÜYORDU.
* Sebep KESİRLİ YÜKSEKLİK: `line-height: 1.55` × 11,5 px = 17,825 px →
* düğme 34,8125 px oluyor ve 1 px'lik alt kenar yarım piksele düşüp
* soluk çiziliyordu (canlıda ölçüldü). Artık tam sayı:
* 16 (satır) + 9+9 (dolgu) + 2 (kenar) = 36 px.
* `nowrap` da şart: dar sütunda "Spotu incele →" iki satıra bölünüp
* yüksekliği yine kesirli yapıyordu. */
.advws-h .advws-btn {
padding: 9px 15px;
line-height: 16px;
white-space: nowrap;
}
.advws-h .advws-btn span { font-size: 13px; line-height: 16px; }
.advws-h:not(.advws-genis) .advws-btn { padding: 7px 12px; font-size: 10.5px; }
/* 2) HARİTA İLE YANINDAKİ SÜTUN EŞİT GENİŞLİKTE.
* 1,4fr/1fr iken sağ sütun 491 px kalıyordu ve tasarımda ÜÇ satır olan
* güvenlik uyarısı bizde DÖRT satıra çıkıyordu (canlıda ölçüldü).
* Tasarımda iki sütun eşit. */
@media (min-width: 1000px) {
.advws-h .harita-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
}
/* 3) BÜYÜK SAYININ YANI: "KT" ile "ortalama" ALT ALTA.
* Tasarımda sayının sağında iki satırlık küçük bir sütun var; bizde
* ikisi yan yana tek satırdaydı. `.advws-buyuk` display:contents olunca
* üç parça tek ızgaraya giriyor ve DOM'a dokunmadan istiflenebiliyor. */
.advws-h.advws-genis .advws-ruzgar-blok {
display: grid;
grid-template-columns: auto auto;
grid-template-areas:
"sayi birim"
"sayi not";
justify-content: start;
align-items: center;
column-gap: 8px;
row-gap: 1px;
}
.advws-h.advws-genis .advws-buyuk { display: contents; }
.advws-h.advws-genis .advws-buyuk-sayi { grid-area: sayi; }
.advws-h.advws-genis .advws-buyuk-birim { grid-area: birim; align-self: end; padding-bottom: 0; }
.advws-h.advws-genis .advws-buyuk-not { grid-area: not; align-self: start; padding-bottom: 0; }
/* 4) "HAMLE 21 KT" TEK SATIRDA, YAN YANA.
* Diğer üç ölçüde etiket üstte / değer altta duruyor; tasarımda hamle
* öyle DEĞİL — sayının karşısında normal bir cümle gibi yazılı. */
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) {
display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
padding-top: 0; border-top: 0; align-self: end; text-align: right;
}
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) > i {
display: inline; margin: 0; font-family: inherit; font-size: 13.5px;
letter-spacing: 0; text-transform: none; color: var(--ink2);
}
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) > b {
display: inline; margin-top: 0; font-size: 13.5px; font-weight: 700;
}
/* 5) KATKI BÖLÜMÜNÜN TİPOGRAFİSİ — tasarımdaki ölçüler.
* Başlık temanın `.adv-prose h2` kuralına düşüp 31 px serif ölçüsünde
* kalıyordu (canlıda ölçüldü); listedeki turuncu kare de temanın madde
* imi (`li::before`, oklch turuncu 7×7) — bizim tasarımda yok. */
.advws-h .advws-katki-metin p { font-size: 15.5px; line-height: 1.62; }
.advws-h .advws-katki-liste li { padding: 13px 15px; font-size: 14px; line-height: 1.5; }
/* ---------------------------------------------------------------
* KART İÇİ SATIRLARIN AYNI HİZADA DURMASI (1.79.0)
*
* 🚨 SORUN: kartların KUTUSU eşitti (ızgara satırı hepsini aynı yüksekliğe
* çekiyor) ama İÇİ değildi. Uygunluk gerekçesi bir kartta iki satıra çıkınca
* ("Deneyimli seviye için") başlık satırı 18 px büyüyor ve altındaki her şey
* — büyük sayı, şerit, üç ölçü, cümle, düğme — o kadar aşağı kayıyordu.
* Canlıda ölçüldü: iki komşu kartın düğmeleri 3634 px'e karşı 3616 px.
*
* ✅ İKİ AYAKLI ÇÖZÜM:
* 1. Başlık satırının yüksekliği SABİTLENDİ — hem ad+il bloğuna hem de
* rozet+gerekçe bloğuna iki satırlık taban verildi. Böylece adı ya da
* gerekçesi uzun olan kart diğerlerini itmiyor.
* 2. Cümle satırı ESNEK (`1fr`), düğme satırı en altta. Yukarıdaki dört
* satır hizalandıktan sonra artan boşluğu cümle satırı yutuyor ve
* düğmeler kartın dibinde aynı çizgide duruyor.
*
* ⚠️ SATIR YÜKSEKLİKLERİ TAM SAYI (22 / 15 / 16 px). Oranla (1.2, 1.55)
* yazılınca kesirli piksel çıkıyor ve hem taban hesabı hem de kenar çizgileri
* yarım piksele düşüyor — düğmenin alt kenarının silik görünmesinin sebebi de
* buydu. ⛔ Buraya oran yazma.
* ------------------------------------------------------------- */
.advws-h.advws-genis .advws-kart {
/* no·ad·durum | ruz·hamle | seri | saat·yon·dalga | not | alt */
grid-template-rows: auto auto auto auto 1fr auto;
}
.advws-h.advws-genis .advws-kart-kimlik { min-height: 62px; }
.advws-h.advws-genis .advws-ad { line-height: 22px; }
.advws-h.advws-genis .advws-yer { line-height: 15px; }
.advws-h.advws-genis .advws-sonuc-hap { line-height: 16px; }
.advws-h.advws-genis .advws-sonuc-neden { line-height: 15px; min-height: 30px; }
.advws-h.advws-genis .advws-not { align-self: start; }
/* ⋯ DÜĞMESİ ANA DÜĞMEYLE AYNI ÇİFTTEN.
Kenarlığı nötr `--line` (#D9D6CC) iken yanındaki renkli hapın yanında
çizgisi yokmuş gibi duruyordu; artık kartın uygunluk rengini alıyor. */
.advws-h .advws-menu-ac { border-color: #C6C3B8; }
.advws-h .advws-kart[data-kademe="cokiyi"] .advws-menu-ac,
.advws-h .advws-kart[data-kademe="iyi"] .advws-menu-ac { border-color: #0A666D; color: #0D5C31; }
.advws-h .advws-kart[data-kademe="sinirda"] .advws-menu-ac { border-color: #C07F10; color: #7D5205; }
.advws-h .advws-kart[data-kademe="zayif"] .advws-menu-ac,
.advws-h .advws-kart[data-kademe="uygunsuz"] .advws-menu-ac{ border-color: #A94F18; color: #7D3A13; }
.advws-h .advws-menu-ac:hover { background: rgba(12, 26, 36, .06); }
/* ---------------------------------------------------------------
* MOBİL
* ------------------------------------------------------------- */
@media (max-width: 900px) {
.advws-h .band { padding: 44px 18px; }
.advws-h .band--hero { padding: 16px 18px 34px; }
.advws-h .cubuk-ic,
.advws-h .cubuk-not { padding-left: 18px; padding-right: 18px; }
.advws-h .advws-hata { padding-left: 18px; padding-right: 18px; }
.advws-h .yontem-satir { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.advws-h .yontem-satir h3 { grid-column: 2; }
.advws-h .yontem-satir p { grid-column: 2; }
}
@media (max-width: 760px) {
/* Çubuk mobilde YAPIŞKAN DEĞİL: dört grup alt alta dizilince ekranın
yarısını kaplıyor ve listeyi okumayı engelliyordu. */
.advws-h .cubuk { position: static; }
.advws-h .cubuk-ic { gap: 4px 0; }
.advws-h .cubuk-grup { padding: 6px 0; border-left: 0; width: 100%; }
.advws-h .advws-gunler,
.advws-h .advws-seviye,
.advws-h .advws-gorunum { flex-wrap: wrap; }
.advws-h .advws-sirala { max-width: none; width: 100%; }
/* Kompakt görünüm dar ekranda yedi sütuna sığmıyor: iki düzen de
yığılmış karta düşüyor ve sütun başlığı kalkıyor. */
.advws-h:not(.advws-genis) .advws-liste-baslik { display: none; }
.advws-h .advws-kart,
.advws-h.advws-genis .advws-kart,
.advws-h:not(.advws-genis) .advws-kart {
grid-template-columns: 26px minmax(0, 1fr) auto;
grid-template-areas:
"no ad durum"
"ruz ruz saat"
"seri seri seri"
"ikin ikin ikin"
"not not not"
"alt alt alt";
align-items: start;
padding: 14px 16px;
row-gap: 12px;
column-gap: 10px;
border-left-width: 1px;
border-top-width: 3px;
}
/* ⚠️ ALANLARI YENİDEN ATA. Kompakt düzende `.advws-gunluk` display:none
olduğu için ona hiç `grid-area` verilmemişti; mobilde geri açılınca
alansız kalıyor ve boş bir hücreye otomatik yerleşiyordu — canlıda
eğri 40 px'e sıkışıp saat ekseni "08:0014:0020:00" diye üst üste
biniyordu. İki mod da aynı beş satırlık ızgaraya düştüğü için alan
atamaları burada TEK yerden yapılıyor. */
.advws-h .advws-sira { grid-area: no; }
.advws-h .advws-kart-kimlik { grid-area: ad; }
.advws-h .advws-sonuc { grid-area: durum; }
.advws-h .advws-ruzgar-blok { grid-area: ruz; }
.advws-h .advws-saat-blok { grid-area: saat; }
.advws-h .advws-gunluk { grid-area: seri; }
.advws-h .advws-not { grid-area: not; }
.advws-h .advws-kart-alt { grid-area: alt; }
.advws-h .advws-iskelet-kap { grid-area: auto; grid-column: 1 / -1; grid-row: 2 / 6; }
.advws-h .advws-yok { grid-area: auto; grid-column: 1 / -1; grid-row: 2; }
/* ⚠️ HAMLE MOBİLDE GERİ SATIRA İNİYOR. Geniş ekranda `.advws-ikincil`
`display: contents` ve üç çocuğu ayrı alanlara dağılıyor; 390 px'de üç
sütun okunmuyor, bu yüzden yeniden tek satırlık ölçü şeridi oluyor.
`.advws-h.advws-genis` (0,3,0) ile eşit özgüllük — bu blok SONRA
geldiği için kazanıyor. ⛔ Sırasını değiştirme. */
.advws-h.advws-genis .advws-ikincil,
.advws-h:not(.advws-genis) .advws-ikincil {
display: flex; grid-area: ikin;
padding-top: 12px; border-top: 1px solid var(--line2); font-size: 13px;
}
.advws-h.advws-genis .advws-ikincil > span,
.advws-h.advws-genis .advws-saat-blok {
display: inline-flex; padding-top: 0; border-top: 0; text-align: left;
}
.advws-h.advws-genis .advws-saat-blok { display: block; text-align: right; }
.advws-h.advws-genis .advws-ikincil > span > i,
.advws-h.advws-genis .advws-ikincil > span > b { display: inline; margin-top: 0; font-size: inherit; }
.advws-h.advws-genis .advws-ikincil > span:nth-child(1) { text-align: left; align-self: auto; }
.advws-h.advws-genis .advws-ikincil .advws-ikon { display: inline-block; }
.advws-h:not(.advws-genis) .advws-gunluk { display: block; }
.advws-h:not(.advws-genis) .advws-sonuc-neden { display: block; }
.advws-h:not(.advws-genis) .advws-buyuk-not { display: block; }
.advws-h:not(.advws-genis) .advws-buyuk-sayi { font-size: clamp(40px, 12vw, 52px); }
.advws-h:not(.advws-genis) .advws-ikincil i { display: inline; }
.advws-h:not(.advws-genis) .advws-saat-blok { text-align: right; }
.advws-h:not(.advws-genis) .advws-saat-blok b { font-size: 15px; }
.advws-h:not(.advws-genis) .advws-ad { font-size: 17px; }
.advws-h:not(.advws-genis) .advws-btn { padding: 8px 14px; font-size: 11.5px; }
.advws-h .advws-sonuc-neden { max-width: 16ch; }
/* Tek sütunda kart yan yana gelmiyor; hizalama tabanları yalnız yer
kaplar. Satır yükseklikleri tam sayı kalıyor, tabanlar kalkıyor. */
.advws-h.advws-genis .advws-kart { grid-template-rows: none; }
.advws-h.advws-genis .advws-kart-kimlik { min-height: 0; }
.advws-h.advws-genis .advws-sonuc-neden { min-height: 0; }
.advws-h .pod-detay { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.advws-h *, .advws-h *::before, .advws-h *::after { transition: none !important; animation: none !important; }
}
/* ---------------------------------------------------------------
* 🔴 TEMA SIZINTISI — ÖZGÜLLÜK KALKANI
*
* Araç kısa kodla `.adv-makale__govde .adv-prose` sarmalayıcısının İÇİNE
* gömülüyor. Kayak Koşulları'nda aynı yerleşimde canlıda ÖLÇÜLEN sızıntılar
* (7 Eyl 2026 taraması) başlık tipografisini ele geçiriyordu:
*
* advenway.css `.adv-prose h2` → color: var(--adv-baslik)
* makale.css `.adv-makale__govde .adv-prose h2` → 31px + serif + lh 1.16
* makale.css `… .adv-prose h3` → 22px + serif
* makale.css `:where(… .adv-prose) a` → border-bottom 1px
* advenway.css `.adv-prose table` → font-size 16px
*
* Koyu bantta bunun sonucu ÖLÜMCÜL: hero başlığı serif, 31px ve #14181C —
* yani zeminde görünmez (kontrast 1,08).
*
* ⚠️ ÇÖZÜM `!important` DEĞİL, ÖZGÜLLÜK. Sızan seçicilerin en güçlüsü (0,2,1);
* sınıf yığmakla ancak berabere kalınır ve kazananı KAYNAK SIRASI belirler —
* tema dosyaları bizden SONRA yükleniyor, yani kaybederiz. `#advws-hub`
* (1,0,x) yarışı kesin bitiriyor ve kök zaten o kimliği taşıyor.
* ⛔ Bu bloğu `.advws-h`e çevirme — sessizce yeniden serif ve görünmez olur.
* ------------------------------------------------------------- */
#advws-hub h1,
#advws-hub h2,
#advws-hub h3 {
font-family: inherit;
color: var(--ink);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.15;
margin: 0;
max-width: none;
text-transform: none;
padding: 0;
}
#advws-hub .hero-baslik {
font-family: 'Archivo Black', 'Space Grotesk', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: clamp(38px, 7.6vw, 96px);
line-height: 1.06; /* Türkçe gerekçesi dosya başında */
letter-spacing: -.035em;
margin: 20px 0 0;
text-transform: none;
}
#advws-hub .bolum-ust h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.025em; }
#advws-hub .bolum-ust--cizgi h2 { font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -.03em; }
#advws-hub .yontem-satir h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
#advws-hub .advws-ad { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
#advws-hub:not(.advws-genis) .advws-ad { font-size: 15.5px; }
/* 🚨 RENK BURADA DA YAZILI. adv-ws.css'te ön eksiz bir `summary` kuralı
#22262A veriyordu; koyu bantta okunmuyordu (canlıda bildirildi).
O dosya artık hub'a hiç yüklenmiyor ama başka bir sızıntıya karşı
kimlik seçicisiyle çivilenmiş durumda. */
#advws-hub .advws-katki-ac > summary { font-size: 17px; font-weight: 700; color: var(--ink); }
/* 🚨 KATLANAN GRUP ŞERİDİNİN BAŞLIĞI. `.ikincil-baslik` bir `