/* =========================================================================
 * ANA SAYFA ÖZET PANELİ — kendi kendine yeten stil dosyası
 *
 * NEDEN AYRI DOSYA: aracın kendi CSS'i 172 KB. Ana sayfa sitenin en çok
 * açılan sayfası ve bu panel oranın küçük bir parçası; oraya bütün aracı
 * yüklemek kabul edilemez. Bu dosya ~8 KB ve hiçbir şeye bağımlı değil —
 * renk değişkenleri, rozet ve lejant dahil ihtiyacı olan her şeyi kendi
 * içinde tanımlıyor.
 *
 * Değişken adları araçtakiyle AYNI; ileride ortak bir temele taşınmak
 * istenirse iki dosya çakışmadan birleşir.
 * ====================================================================== */

.advws-ozet-blok {
	--o-lacivert: #0e2a44;
	--o-zemin:    #ffffff;
	--o-sayfa:    #f3f7fa;
	--o-yuzey:    #eaf1f6;
	--o-cizgi:    #d8e2ea;
	--o-metin:    #17212b;
	--o-soluk:    #5f6b76;
	--o-iyi:      #0e7a5f;
	--o-sinir:    #a85a08;
	--o-kuv:      #b4232c;
	--o-turuncu:  var(--adv-o, #e5732a);

	--o-k-ana:  #fff;
	--o-k-yard: rgba(255,255,255,.82);
	--o-k-orta: rgba(255,255,255,.66);

	display: grid;
	grid-template-columns: minmax(0, 2.05fr) minmax(260px, 1fr);
	gap: 18px;
	margin: 28px 0;
	font-family: "Manrope", "Inter", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--o-metin);
	font-variant-numeric: tabular-nums;
}
.advws-ozet-blok.advws-ozet-tek { grid-template-columns: minmax(0, 1fr); }
.advws-ozet-blok *,
.advws-ozet-blok *::before,
.advws-ozet-blok *::after { box-sizing: border-box; }

/* İKONLARIN TEMEL KURALI — bu dosyada OLMAK ZORUNDA.
 *
 * advws_ikon() yalnızca <path> basıyor; fill/stroke'u CSS veriyor. O kural
 * aracın kendi dosyasında ve ana sayfaya yüklenmiyor. Kural olmayınca SVG
 * varsayılana düşüyor: fill siyah, stroke yok — ölçümde `fill: rgb(0,0,0)`,
 * `stroke: none` çıktı. Yani ikonlar beyaz değil, SİYAH DOLU LEKE olarak
 * çiziliyordu; renk beyazdı ama hiç kullanılmıyordu.
 * Kontur çizim + currentColor: artık bulunduğu metnin rengini alıyorlar. */
.advws-ozet-blok .advws-ikon {
	width: 16px; height: 16px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
	color: currentColor;
}
/* Tema başlıkları büyük harfe zorluyor; panel yazıldığı gibi görünmeli. */
.advws-ozet-blok h2,
.advws-ozet-blok h3 { text-transform: none; letter-spacing: -.2px; }

/* ---------- Koyu panel ---------- */
.advws-op {
	display: flex; flex-direction: column;
	padding: 20px 22px 16px;
	border-radius: 18px;
	color: var(--o-k-ana);
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='220'><g fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-opacity='.07'><path d='M-30 34h150' stroke-width='2'/><path d='M140 34h58' stroke-width='2'/><path d='M-30 78h96' stroke-width='1.5'/><path d='M86 78h180' stroke-width='1.5'/><path d='M40 122h210' stroke-width='2'/><path d='M270 122h120' stroke-width='2'/><path d='M-10 166h130' stroke-width='1.5'/><path d='M150 190h190' stroke-width='2'/></g></svg>"),
		linear-gradient( 130deg, #0a1d2e 0%, #123a63 55%, #0a1d2e 100% );
	background-size: 420px 220px, cover;
	background-repeat: repeat, no-repeat;
	box-shadow: 0 12px 30px rgba(9,26,40,.20);
}

/* Üst şerit: kimlik solda, günün cevabı sağda. */
.advws-op-ust {
	display: flex; flex-wrap: wrap; align-items: flex-start;
	justify-content: space-between; gap: 16px 24px;
	padding-bottom: 0;
}
.advws-op-kimlik { flex: 1 1 320px; min-width: 0; }
.advws-op-baslik {
	margin: 0 0 5px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #fff;
}
.advws-op-alt {
	margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5;
	color: var(--o-k-yard); max-width: 54ch;
}

/* SAYIM ROZETLERİ — masaüstünde DÖRDÜ DE TEK SATIRDA.
 *
 * Önce sarmalı bir sıraydı ve "12 uygun değil" alt satıra düşüp altında
 * boşluk bırakıyordu. `flex-wrap: nowrap` bunu kesin olarak engelliyor;
 * yer ise araç kartları kaldırılıp panel tam genişliğe geçince zaten açıldı.
 *
 * Üç durum rozetine ortak bir asgari genişlik verildi: içerikleri farklı
 * uzunlukta ("0 Uygun" / "12 Uygun değil") ve serbest bırakılınca satır
 * dengesiz görünüyordu. */
.advws-op-sayim {
	display: flex; flex-wrap: nowrap; align-items: stretch;
	gap: 9px;
	/* Başlık satırının altında kendi satırı. Üst boşluk ölçülerek seçildi:
	   4 px'te "En iyi seçenek" kartının hemen dibine yapışıyordu, ikisi tek
	   blok gibi okunuyordu. 14 px'te kart net biçimde ayrılıyor. */
	margin: 14px 0 16px;
}
.advws-ops {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 0 12px; min-height: 42px;
	border-radius: 11px;
	background: rgba(255,255,255,.09);
	border: 1px solid rgba(255,255,255,.16);
	white-space: nowrap;
}
/* İlk rozet içeriğine göre; üç durum rozeti birbirine yakın genişlikte. */
.advws-ops-toplam { flex: 0 0 auto; }
.advws-ops-iyi,
.advws-ops-sinir,
.advws-ops-kotu { flex: 0 1 auto; min-width: 112px; }
.advws-ops b { font-size: 17px; font-weight: 700; color: #fff; }
.advws-ops i {
	font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--o-k-orta);
}
/* "12 Spot kontrol edildi" çipinin rüzgâr ikonu BEYAZ — yanındaki sayıyla
   aynı ağırlıkta okunmalı. */
.advws-ops .advws-ikon { width: 17px; height: 17px; color: #fff; }
.advws-ops-iyi::before,
.advws-ops-sinir::before,
.advws-ops-kotu::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.advws-ops-iyi::before   { background: #34d399; }
.advws-ops-sinir::before { background: #fbbf24; }
.advws-ops-kotu::before  { background: #f87171; }

/* Günün cevabı */
.advws-op-eniyi {
	display: flex; align-items: center; gap: 14px;
	flex: 0 1 300px; min-width: 0;
	padding: 14px 16px; border-radius: 14px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	text-decoration: none; color: inherit;
	transition: background .15s, border-color .15s;
}
.advws-op-eniyi:hover {
	background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3);
}
.advws-op-eniyi-ikon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; flex: none; border-radius: 50%;
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
}
/* Yelken ikonu beyaz — kutunun içindeki en güçlü öğe o. */
.advws-op-eniyi-ikon .advws-ikon { width: 24px; height: 24px; color: #fff; stroke-width: 1.5; }
.advws-op-eniyi-govde { display: grid; gap: 2px; min-width: 0; }
.advws-op-eniyi-govde i {
	font-style: normal; font-size: 10.5px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--o-k-orta);
}
.advws-op-eniyi-govde b { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.2; }
.advws-op-eniyi-saat { font-size: 14px; font-weight: 500; color: var(--o-k-yard); }
.advws-op-eniyi-olcu { font-size: 13px; font-weight: 400; color: var(--o-k-orta); }
.advws-op-eniyi-olcu em { font-style: normal; opacity: .6; }

/* ---------- Gövde: liste + harita ---------- */
.advws-op-govde {
	display: grid; gap: 14px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: stretch;
}
.advws-op-liste {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 2px;
	max-height: 360px; overflow-y: auto;
}
.advws-op-liste li { margin: 0; }
.advws-op-satir {
	display: grid;
	grid-template-columns: 24px minmax(0, auto) minmax(0, 1fr) auto 12px;
	align-items: center; gap: 10px;
	padding: 7px 10px; border-radius: 9px;
	text-decoration: none; color: inherit;
	transition: background .12s;
}
.advws-op-satir:hover { background: rgba(255,255,255,.09); }
.advws-op-no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 7px;
	background: rgba(255,255,255,.14); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1;
}
.advws-op-ad { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
/* Kesilme kabul; tam konum satırın `title`'ında — üstüne gelince çıkıyor.
   `cursor: help` vermiyoruz, satır zaten bağlantı. */
.advws-op-yer {
	font-size: 12px; font-weight: 400; color: var(--o-k-orta);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.advws-op-yer::before { content: "· "; opacity: .55; }
/* Üstüne gelince konum bir tık parlıyor: ipucunun oradan geldiği anlaşılsın. */
.advws-op-satir:hover .advws-op-yer { color: var(--o-k-yard); }
.advws-op-ok { color: var(--o-k-orta); font-size: 16px; line-height: 1; }

/* Rozet — araçtakiyle aynı bileşen, koyu zemine göre tonlanmış. */
.advws-rozet {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 3px 10px; border-radius: 999px;
	border: 1px solid transparent;
	font-size: 11.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
	background: rgba(255,255,255,.10); color: var(--o-k-yard);
}
.advws-uyg-cokiyi .advws-rozet,
.advws-uyg-iyi .advws-rozet {
	background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.4); color: #6ee7b7;
}
.advws-uyg-sinirda .advws-rozet {
	background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); color: #fcd34d;
}
.advws-uyg-zayif .advws-rozet,
.advws-uyg-uygunsuz .advws-rozet {
	background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4); color: #fca5a5;
}

/* Harita */
.advws-op-harita-sar { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.advws-op-harita {
	flex: 1 1 auto; min-height: 300px; border-radius: 12px; overflow: hidden;
	background: var(--o-yuzey);
}
.advws-op-harita .leaflet-container { background: #dbe7f0; font: inherit; }
.advws-op-harita .leaflet-control-attribution {
	font-size: 9.5px; background: rgba(255,255,255,.78);
}
/* Numaralı pinler */
.advws-op-pin {
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
	border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.advws-op-pin-cokiyi, .advws-op-pin-iyi { background: #12a06f; }
.advws-op-pin-sinirda { background: #e08a12; }
.advws-op-pin-zayif, .advws-op-pin-uygunsuz { background: #d23c3c; }
.advws-op-pin-yok { background: #8a97a3; }

.advws-op-lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.advws-lej {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 500; color: var(--o-k-orta);
}
.advws-lej::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.advws-lej-iyi::before   { background: #34d399; }
.advws-lej-sinir::before { background: #fbbf24; }
.advws-lej-kuv::before   { background: #f87171; }

/* Alt bağlantı */
.advws-op-tumu {
	display: flex; align-items: center; gap: 9px;
	margin-top: 14px; padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: #fff; text-decoration: none;
}
.advws-op-tumu .advws-ikon { width: 16px; height: 16px; color: #fff; }
.advws-op-tumu span { margin-left: auto; font-size: 17px; color: var(--o-k-orta); }
.advws-op-tumu:hover { color: var(--o-turuncu); }
.advws-op-tumu:hover span { color: var(--o-turuncu); }

/* ---------- Sağdaki araç kartları ---------- */
.advws-op-araclar { display: grid; gap: 18px; align-content: stretch; }
/* Kart = TAM KART ARKA PLAN FOTOĞRAFI + soldan beyaz perde.
   Önce fotoğraf sağ yarıda ayrı bir sütundaydı; kart ikiye bölünmüş
   görünüyordu ve dar sütunda fotoğraftan bir şey seçilmiyordu. Artık
   fotoğraf kartın tamamını kaplıyor, metin onun üstünde duruyor. */
.advws-ak {
	position: relative; isolation: isolate;
	display: flex; align-items: center;
	min-height: 232px;
	border-radius: 18px; overflow: hidden;
	background: var(--o-zemin);
	border: 1px solid var(--o-cizgi);
	box-shadow: 0 8px 22px rgba(20,45,65,.07);
}
.advws-ak-gorsel { position: absolute; inset: 0; z-index: 0; }
.advws-ak-gorsel img {
	width: 100%; height: 100%; display: block;
	object-fit: cover;
	/* Öznenin (koşucu, bisikletli) sağda kalması için: metin solda. */
	object-position: 72% center;
}
/* PERDE — metnin okunması buna bağlı.
   Soldan sağa açılan beyaz katman: sol %40 neredeyse tam opak, sağ uç
   şeffaf. Böylece yazı her fotoğrafta okunur kalıyor, fotoğrafın konusu
   ise sağda görünmeye devam ediyor. */
.advws-ak::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient( 90deg,
		rgba(255,255,255,.97) 0%,
		rgba(255,255,255,.95) 34%,
		rgba(255,255,255,.72) 56%,
		rgba(255,255,255,.18) 78%,
		rgba(255,255,255,0) 100% );
}
.advws-ak-govde {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 24px 22px; max-width: 60%; min-width: 0;
}
/* Görselsiz kart: perde gereksiz, metin tam genişlik. */
.advws-ak-gorselsiz::before { display: none; }
.advws-ak-gorselsiz .advws-ak-govde { max-width: 100%; }
.advws-ak-ad {
	margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.2;
	color: var(--o-lacivert);
}
/* Kart açıklaması bir kademe koyu.
   Genel yardımcı gri (#5f6b76) beyaz perdenin üstünde soluk kalıyordu —
   perde tam opak değil, altındaki fotoğraf metnin kontrastını düşürüyor.
   #46525e beyaz üstünde 8.1 kontrast veriyor. */
.advws-ak-metin {
	margin: 0 0 18px;
	font-size: 14px; font-weight: 400; line-height: 1.55; color: #46525e;
}
.advws-ak-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	align-self: flex-start;
	padding: 12px 22px; border-radius: 10px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; text-decoration: none;
	border: 1px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
/* Koşu kartı dolu lacivert, bisiklet kartı turuncu çerçeveli: iki araç
   birbirinin kopyası gibi durmasın, ikisi de aynı ağırlıkta olmasın. */
.advws-ak-kosu .advws-ak-btn {
	background: var(--o-lacivert); color: #fff; border-color: var(--o-lacivert);
}
.advws-ak-kosu .advws-ak-btn:hover { background: #163b5c; }
/* Kayak Durumu kartı — ton yalnızca düğme rengini seçiyor.
   Koşu kartıyla aynı dolu lacivert: kış aracı da birincil eylem. */
.advws-ak-kayak .advws-ak-btn{background:var(--o-lacivert);color:#fff;border-color:var(--o-lacivert)}
.advws-ak-kayak .advws-ak-btn:hover{background:#163b5c}
.advws-ak-bisiklet .advws-ak-btn {
	background: transparent; color: var(--o-turuncu); border-color: var(--o-turuncu);
}
.advws-ak-bisiklet .advws-ak-btn:hover { background: var(--o-turuncu); color: #fff; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	.advws-ozet-blok { grid-template-columns: minmax(0, 1fr); }
	.advws-op-araclar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* Rozetler: alan yetmeyince tek satır ısrarı taşmaya yol açar. 760 px'in
   altında 2×2 düzene geçiyorlar — dört rozet iki satırda eşit bölünüyor. */
@media (max-width: 760px) {
	.advws-op-sayim { flex-wrap: wrap; }
	.advws-op-sayim .advws-ops {
		flex: 1 1 calc(50% - 5px); min-width: 0; justify-content: flex-start;
	}
}
@media (max-width: 640px) {
	.advws-op { padding: 16px 14px 14px; border-radius: 14px; }
	.advws-op-baslik { font-size: 20px; }
	.advws-op-govde { grid-template-columns: minmax(0, 1fr); }
	/* Liste kısalıyor: mobilde 12 satır ekranı kilitliyordu. Tamamı için
	   alttaki bağlantı var. */
	.advws-op-liste { max-height: 260px; }
	.advws-op-satir { grid-template-columns: 22px minmax(0, 1fr) auto 10px; }
	.advws-op-yer { display: none; }
	.advws-op-eniyi { flex: 1 1 100%; }
	.advws-op-harita { min-height: 240px; }
	/* Dar ekranda perde yatay değil DİKEY: 375 px'de soldan sağa açılan
	   perde metnin son satırlarını fotoğrafın üstünde bırakıyordu. */
	.advws-ak { min-height: 210px; }
	.advws-ak::before {
		background: linear-gradient( 175deg,
			rgba(255,255,255,.97) 0%,
			rgba(255,255,255,.94) 52%,
			rgba(255,255,255,.62) 78%,
			rgba(255,255,255,.22) 100% );
	}
	.advws-ak-govde { padding: 18px 16px; max-width: 100%; }
	.advws-ak-ad { font-size: 19px; }
	.advws-ak-gorsel img { object-position: 65% center; }
}