/*!
 * Uğraklar — ön yüz
 *
 * Tüm seçiciler .gy / .gy-mega-sar altında kapsüllenmiştir; tema CSS'ine sızmaz.
 * Renkler değişken: temayı değiştirmek için .gy üzerindeki --gy-* değerlerini
 * ezmek yeterli (Uğraklar → Ayarlar sayfası bunu yapar).
 */

.gy, .gy-mega-sar, .gy-mega {
	--gy-deniz: #071523;
	--gy-kagit: #0B1927;
	--gy-kagit-2: #08131F;
	--gy-vurgu: #D7A54C;
	--gy-murekkep: #EAF1F6;
	--gy-soluk: #93A9BA;
	--gy-cizgi: rgba(146, 178, 200, .18);
	--gy-h: clamp(460px, 72vh, 720px);
	--gy-sans: var(--wp--preset--font-family--body, inherit);
	--gy-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.gy { margin: 32px 0; font-family: var(--gy-sans); color: var(--gy-murekkep); }
.gy *, .gy-mega * { box-sizing: border-box; }
.gy-bos-uyari {
	margin: 24px 0; padding: 14px 18px; border-radius: 6px;
	background: #fff8e5; border: 1px solid #f0dda6; color: #6b5312; font-size: 14.5px;
}

/* ---------- kıta sekmeleri ---------- */
.gy .gy-tab {
	display: flex; gap: 2px; margin-bottom: 22px;
	border-bottom: 1px solid var(--gy-cizgi);
	overflow-x: auto; scrollbar-width: none;
}
.gy .gy-tab::-webkit-scrollbar { display: none; }
.gy .gy-tab button {
	flex: none; background: none; border: 0; border-bottom: 2px solid transparent;
	color: var(--gy-soluk); padding: 14px 22px; cursor: pointer; white-space: nowrap;
	font: 500 13px/1 var(--gy-sans); letter-spacing: .09em; text-transform: uppercase;
	transition: color .2s, border-color .2s;
}
.gy .gy-tab button:hover { color: var(--gy-murekkep); }
.gy .gy-tab button.on { color: var(--gy-vurgu); border-bottom-color: var(--gy-vurgu); }
.gy .gy-tab button span { font: 400 11px var(--gy-mono); opacity: .55; margin-left: 8px; }

/* ---------- ülke çipleri ---------- */
.gy .gy-cip { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
.gy .gy-cip button {
	display: flex; align-items: center; gap: 9px;
	background: var(--gy-kagit); border: 1px solid var(--gy-cizgi); color: var(--gy-soluk);
	padding: 8px 14px 8px 9px; border-radius: 100px; cursor: pointer;
	font: 500 13px/1.3 var(--gy-sans); transition: .2s;
}
.gy .gy-cip button:hover { border-color: rgba(215, 165, 76, .5); color: var(--gy-murekkep); }
.gy .gy-cip button.on {
	border-color: var(--gy-vurgu); background: rgba(215, 165, 76, .12); color: var(--gy-murekkep);
}
.gy .gy-cip img { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.gy .gy-cip i { font: 400 11px var(--gy-mono); font-style: normal; opacity: .6; }

/* ---------- gövde ---------- */
.gy .gy-govde { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: stretch; }
.gy .gy-govde.gy-tek { grid-template-columns: 1fr; }
.gy .gy-harita {
	position: relative; border: 1px solid var(--gy-cizgi);
	background: var(--gy-deniz); overflow: hidden; min-height: var(--gy-h); border-radius: 4px;
}
.gy .gy-lf { position: absolute; inset: 0; }
.gy .leaflet-container { background: var(--gy-deniz); font-family: var(--gy-sans); }
.gy .leaflet-tile-pane { filter: saturate(.72) brightness(1.03); }
.gy .leaflet-control-attribution {
	background: rgba(5, 12, 20, .82); color: #5C7185; font-size: 9px;
}
.gy .leaflet-control-attribution a { color: #6E97AB; }
.gy .leaflet-bar a {
	background: rgba(8, 20, 32, .95); color: var(--gy-murekkep); border-color: var(--gy-cizgi);
}
.gy .leaflet-bar a:hover { background: #10243A; color: var(--gy-vurgu); }
.gy .leaflet-control-scale-line {
	background: rgba(5, 12, 20, .7); border-color: var(--gy-cizgi); color: var(--gy-soluk);
}

/* katman çipleri — zoom düğmelerinin karşı köşesinde dursun ki çakışmasınlar */
.gy .gy-kat {
	position: absolute; z-index: 600; right: 14px; top: 14px;
	display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; max-width: 65%;
}
.gy .gy-kat button {
	background: rgba(8, 20, 32, .92); border: 1px solid var(--gy-cizgi); color: var(--gy-soluk);
	padding: 7px 13px; border-radius: 100px; cursor: pointer; transition: .2s;
	font: 500 10.5px/1 var(--gy-mono); letter-spacing: .13em; text-transform: uppercase;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gy .gy-kat button.on { background: var(--gy-vurgu); border-color: var(--gy-vurgu); color: #0A1420; }

/* ---------- pinler ---------- */
.gy-pin {
	display: block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; cursor: pointer;
	box-shadow: 0 0 0 2px rgba(215, 165, 76, .55), 0 4px 12px rgba(0, 0, 0, .6);
	transition: transform .18s, box-shadow .18s;
}
.gy-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gy-pin:hover, .gy-pin.on {
	transform: scale(1.25); box-shadow: 0 0 0 3px #D7A54C, 0 6px 18px rgba(0, 0, 0, .7);
}
/* Boğaz/kanal geçişleri liman değil. Eskiden köşeli çiziliyordu ama bayrak
   kare görünüyordu; artık hepsi yuvarlak, geçişler çift halkayla ayrılıyor. */
.gy-pin--gecis {
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--gy-deniz, #071523), 0 0 0 4px rgba(215, 165, 76, .9), 0 4px 12px rgba(0, 0, 0, .6);
}
.gy-pin--gecis:hover, .gy-pin--gecis.on {
	box-shadow: 0 0 0 2px var(--gy-deniz, #071523), 0 0 0 5px #D7A54C, 0 6px 18px rgba(0, 0, 0, .7);
}
.gy-pin--demirleme { box-shadow: 0 0 0 2px rgba(146, 178, 200, .6), 0 4px 12px rgba(0, 0, 0, .6); }
/* Mevkisi doğrulanmamış kayıt doğrulanmış gibi görünmesin. */
.gy-supheli { opacity: .55; box-shadow: 0 0 0 2px rgba(146, 178, 200, .45); }
.leaflet-tooltip.gy-lbl {
	background: rgba(5, 12, 20, .94); border: 0; color: #EAF1F6; border-radius: 3px;
	font: 500 12px/1.3 inherit; padding: 5px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.leaflet-tooltip.gy-lbl::before { display: none; }

/* ---------- baloncuk ---------- */
.gy-pop .leaflet-popup-content-wrapper {
	background: #0B1927; color: #EAF1F6; border-radius: 6px; padding: 0; overflow: hidden;
	box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .8);
}
.gy-pop .leaflet-popup-content { margin: 0; line-height: 1.55; }
.gy-pop .leaflet-popup-tip { background: #0B1927; }
.gy-pop .leaflet-popup-close-button { color: #93A9BA; }
.gy-pop-i img { width: 100%; height: 130px; object-fit: cover; display: block; }
.gy-pop-b { padding: 14px 16px 16px; }
.gy-pop-k {
	font: 500 10px var(--gy-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #D7A54C;
}
.gy-pop-b h4 { margin: 7px 0 8px; font-size: 17px; line-height: 1.25; color: #EAF1F6; }
.gy-pop-b p { margin: 0 0 8px; font-size: 12.5px; color: #93A9BA; }
.gy-pop-b .gy-mvk { font-family: var(--gy-mono, monospace); font-size: 11.5px; letter-spacing: .03em; }
.gy-pop-a { font: 600 13px inherit; color: #D7A54C; text-decoration: none; }
.gy-pop-a:hover { text-decoration: underline; }

/* ---------- liste ---------- */
.gy .gy-liste {
	background: var(--gy-kagit); border: 1px solid var(--gy-cizgi); border-radius: 4px;
	display: flex; flex-direction: column; min-height: 0; max-height: var(--gy-h);
}
.gy .gy-liste-bas {
	padding: 18px 20px 15px; border-bottom: 1px solid var(--gy-cizgi);
	display: flex; align-items: center; gap: 12px;
}
.gy .gy-lb-bayrak { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.gy .gy-lb-ad { margin: 0; font-size: 21px; line-height: 1.2; color: var(--gy-murekkep); }
.gy .gy-lb-alt {
	display: block; margin-top: 5px; color: #6E8496;
	font: 400 11px var(--gy-mono); letter-spacing: .14em; text-transform: uppercase;
}
.gy .gy-liste-i { overflow-y: auto; flex: 1; padding: 6px; }
.gy .gy-liste-i::-webkit-scrollbar { width: 6px; }
.gy .gy-liste-i::-webkit-scrollbar-thumb { background: rgba(146, 178, 200, .22); border-radius: 3px; }
.gy .gy-o {
	display: block; width: 100%; text-align: left; background: none; border: 0;
	border-bottom: 1px solid rgba(146, 178, 200, .09); padding: 12px 14px;
	cursor: pointer; transition: background .18s; font-family: inherit;
}
.gy .gy-o:last-child { border-bottom: 0; }
.gy .gy-o:hover, .gy .gy-o.on { background: rgba(215, 165, 76, .09); }
.gy .gy-o b { display: block; font: 500 15px/1.35 var(--gy-sans); color: var(--gy-murekkep); margin-bottom: 5px; }
.gy .gy-o > span {
	display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
	font: 400 11px var(--gy-mono); letter-spacing: .08em; color: #6E8496;
}
.gy .gy-o em { font-style: normal; color: var(--gy-vurgu); }
.gy .gy-o u { text-decoration: none; color: #E0894A; }
.gy .gy-ay { opacity: .4; }
.gy .gy-bos { padding: 34px 20px; text-align: center; color: #6E8496; font-size: 14px; }

/* ---------- mega menü ---------- */
.gy-mega-sar { position: relative; display: inline-block; }
.gy-mega-ac { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.gy-mega-ac::after { content: "▾"; font-size: 10px; opacity: .7; transition: transform .2s; }
.gy-mega-sar.acik .gy-mega-ac::after { transform: rotate(180deg); }
.gy-mega {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
	width: min(1060px, 94vw); background: var(--gy-kagit-2); border: 1px solid var(--gy-cizgi);
	padding: 26px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px 34px;
	opacity: 0; visibility: hidden; transition: .22s; z-index: 950;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85);
	/* Avrupa'da düzinelerce ülke olabilir: menü ekranı aşmasın, kendi içinde kaysın. */
	max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain;
}
.gy-mega::-webkit-scrollbar { width: 7px; }
.gy-mega::-webkit-scrollbar-thumb { background: rgba(146, 178, 200, .25); border-radius: 4px; }
.gy-mega-sar.acik .gy-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gy-mega h6 {
	margin: 0 0 13px; color: var(--gy-vurgu);
	font: 500 10.5px var(--gy-mono); letter-spacing: .22em; text-transform: uppercase;
}
.gy-mega h6 span { opacity: .5; }
.gy-mega ul { list-style: none; margin: 0; padding: 0; }
.gy-mega li { margin: 0 0 3px; break-inside: avoid; }
/* Uzun listeler iki sütuna akar; menü yarı yüksekliğe iner. */
.gy-mega ul.gy-iki { column-count: 2; column-gap: 30px; }
.gy-mega a {
	display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 0;
	font-size: 13.5px; color: var(--gy-soluk); text-decoration: none; border-radius: 4px; transition: .18s;
}
.gy-mega a:hover { color: var(--gy-murekkep); background: rgba(215, 165, 76, .08); padding-left: 8px; }
.gy-mega a img { width: 19px; height: 19px; flex: none; border-radius: 50%; }
.gy-mega a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-mega a i {
	margin-left: auto; padding-left: 8px; font-style: normal; color: #5C7185;
	font: 400 11px var(--gy-mono);
}
.gy-mega-tum {
	grid-column: 1 / -1; border-top: 1px solid var(--gy-cizgi); padding-top: 16px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.gy-mega-tum b { font: 400 13px var(--gy-sans); color: var(--gy-soluk); }
.gy-mega-tum a {
	color: var(--gy-vurgu); text-decoration: none; padding: 0 0 3px;
	font: 500 12px var(--gy-mono); letter-spacing: .14em; text-transform: uppercase;
	border-bottom: 1px solid rgba(215, 165, 76, .4);
}

@media (prefers-reduced-motion: reduce) {
	.gy *, .gy-mega, .gy-pin { transition: none !important; }
}

@media (max-width: 1080px) {
	.gy .gy-govde { grid-template-columns: 1fr; }
	.gy .gy-harita { min-height: 420px; }
	.gy .gy-liste { max-height: 380px; }
	.gy-mega { display: none; }
}
@media (max-width: 620px) {
	.gy .gy-tab button { padding: 12px 15px; font-size: 12px; }
	.gy .gy-cip { gap: 7px; }
	.gy .gy-cip button { font-size: 12.5px; padding: 7px 12px 7px 8px; }
	.gy .gy-kat { max-width: calc(100% - 28px); left: 14px; right: 14px; justify-content: flex-start; }
}

/* Denizcilik (açık) taban haritada koyu zemin varsayımı geçersiz:
   etiket ve kontrol renklerini ters çevir. */
.gy--acik .leaflet-tile-pane { filter: none; }
.gy--acik .leaflet-tooltip.gy-lbl { background: rgba(255, 255, 255, .96); color: #10202F; }
.gy--acik .leaflet-control-attribution { background: rgba(255, 255, 255, .82); color: #33475A; }
.gy--acik .leaflet-control-attribution a { color: #1B5E7E; }

/* Kayıt yokken mega menü düz bağlantıya düşer; ok işareti çıkmasın. */
.gy-mega-bos .gy-mega-ac::after { display: none; }

/* =========================================================================
 * Tema üst menüsünün içinde
 *
 * Panelin açılıp kapanmasını ve konumunu tema yönetiyor (.btb-nav-panel);
 * mega menü orada kendi konumlandırmasını bırakıp düz bir panel oluyor.
 * ========================================================================= */
.btb-nav-panel .gy-mega {
	position: static; transform: none; opacity: 1; visibility: visible;
	width: min(1040px, 92vw); border-radius: 6px;
	max-height: min(70vh, 620px);
	background: var(--gy-kagit-2, #08131F);
}

/* =========================================================================
 * Aydınlık tema
 * ========================================================================= */
html[data-tema="acik"] .gy,
html[data-tema="acik"] .gy-mega-sar,
html[data-tema="acik"] .gy-mega,
html[data-tema="acik"] .btb-nav-panel {
	--gy-deniz: #E7E1D4;
	--gy-kagit: #FFFFFF;
	--gy-kagit-2: #FFFFFF;
	--gy-vurgu: #9A6B1E;
	--gy-murekkep: #14232F;
	--gy-soluk: #566875;
	--gy-cizgi: rgba(30, 50, 66, .16);
}
html[data-tema="acik"] .gy-mega { box-shadow: 0 24px 54px -26px rgba(24, 40, 54, .4); }
html[data-tema="acik"] .gy-mega a:hover { background: rgba(154, 107, 30, .1); }
/* Karanlık karolar açık temada göz alıyor; hafifçe aydınlatılır. */
html[data-tema="acik"] .gy .leaflet-tile-pane { filter: brightness(1.35) saturate(.85); }

/* Dar ekranda serbest duran mega menü gizlenir; ama tema menüsünün içindeki
   akordiyon sürümü kalmalı — orada zaten tam genişlikte tek sütun. */
@media (max-width: 1080px) {
	.btb-nav-panel .gy-mega {
		display: grid; grid-template-columns: 1fr; width: auto;
		border: 0; box-shadow: none; padding: 0 0 12px; background: none;
		max-height: none; gap: 18px;
	}
	.btb-nav-panel .gy-mega-tum { grid-column: 1 / -1; }
}