/* ===== TEMUR · PEARL FROST teması (2026-11-05, kullanıcı seçimi) =====
   site.css (ve ana sayfada ana-v2.css) sonrasında yüklenir; yalnız görünümü değiştirir.
   Geri almak için sayfalardaki <link href="/css/pearl.css"> satırını kaldırmak yeterli. */
:root {
  --zemin: #edf1f9;
  --zemin-2: #e7e9f4;
  --kart: rgba(255, 255, 255, .55);
  --metin: #14122b;
  --soluk: #4a4766;
  --cizgi: rgba(20, 18, 43, .08);
  --vurgu: #6c4cf0;
  --pf-cam: rgba(255, 255, 255, .55);
  --pf-cam-guclu: rgba(255, 255, 255, .8);
  --pf-kenar: rgba(255, 255, 255, .9);
  --pf-blur: blur(28px) saturate(1.8);
  --pf-golge: inset 0 1px 0 #fff, 0 24px 60px -30px rgba(60, 40, 140, .28);
  --pf-golge-ust: inset 0 1px 0 #fff, 0 30px 70px -30px rgba(108, 76, 240, .42);
  --pf-koyu: #14122b;
}

/* zemin: sedef ışıklar (sabit katman) */
html body.evrensiz::before {
  background:
    radial-gradient(55vw 45vw at 0% 0%, #d6d4ff 0, transparent 62%),
    radial-gradient(45vw 38vw at 100% 6%, #cfe3ff 0, transparent 62%),
    radial-gradient(55vw 45vw at 85% 92%, #cbf1f0 0, transparent 62%),
    radial-gradient(45vw 38vw at 8% 82%, #d8e6ff 0, transparent 62%),
    var(--zemin);
}
html body { background: var(--zemin); }

/* üst çubuk: her zaman buzlu cam */
html body .ust, html body .ust.dolu {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur);
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 30px -24px rgba(60, 40, 140, .35);
}
@media (max-width: 1279px) { html body .ana-menu { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur); } }

/* cam yüzeyler: kartlar, kutular, formlar */
html body.ana2 :is(.cell, .pk, .paket, .kart, .kart-serit, .hz-kart, .shot-card, .blog-kart, .yazi-teklif, .ucyil-kart, .kopru, .durum-kutu, .sss details, form.form, .mi-kart > a, .ilceler li, .hizmet-baglar a) {
  background: var(--pf-cam);
  -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur);
  border: 1px solid var(--pf-kenar);
  box-shadow: var(--pf-golge);
}
html body.ana2 :is(.cell, .pk, .paket, .kart, .hz-kart, .blog-kart, .yazi-teklif, .ucyil-kart, form.form, .mi-kart > a) { border-radius: 26px; }
html body.ana2 :is(.kopru, .durum-kutu, .sss details) { border-radius: 22px; }
html body.ana2 :is(.pk.pk-one, .paket.paket-one) {
  background: var(--pf-cam-guclu);
  border-color: rgba(108, 76, 240, .45);
  box-shadow: var(--pf-golge-ust);
}
html body.ana2 .cell::before, html body.ana2 .cell::after { border-radius: inherit; }
@media (max-width: 760px) {
  html body.ana2 :is(.cell, .pk, .paket, .kart, .kart-serit, .hz-kart, .shot-card, .blog-kart, .yazi-teklif, .ucyil-kart, .kopru, .durum-kutu, .sss details, form.form, .mi-kart > a) { background: rgba(255, 255, 255, .72); }
}

/* ince bantlar ve rozetler */
html body :is(.guven, .phero-price) {
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur);
  border-color: rgba(255, 255, 255, .85);
}

/* düğmeler: ana eylem koyu lacivert, ikincil buzlu cam */
html body .dugme-altin {
  color: #fff;
  background: var(--pf-koyu);
  box-shadow: 0 12px 30px -12px rgba(20, 18, 43, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
}
html body .dugme-altin:hover { box-shadow: 0 16px 36px -12px rgba(20, 18, 43, .7), inset 0 1px 0 rgba(255, 255, 255, .18); }
html body .dugme-cam {
  color: var(--metin);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--pf-kenar);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -18px rgba(60, 40, 140, .4);
  -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur);
}
html body .dugme-cam:hover { background: rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 #fff, 0 14px 30px -16px rgba(60, 40, 140, .45); }
html body .dugme-kucuk { box-shadow: 0 8px 20px -10px rgba(20, 18, 43, .55); }

/* form alanları ve seçimler */
html body .form :is(input, select, textarea) { background: rgba(255, 255, 255, .85); border-color: rgba(20, 18, 43, .12); border-radius: 14px; }

/* alt bilgi ve sabit öğeler */
html body .alt { background: rgba(255, 255, 255, .4); -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur); border-top: 1px solid rgba(255, 255, 255, .85); }
html body .yukari { background: rgba(255, 255, 255, .7); border-color: var(--pf-kenar); -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur); }
@media (max-width: 760px) {
  html body .sabit-cubuk { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur); border-top: 1px solid rgba(255, 255, 255, .9); }
  html body .sabit-cubuk .sc-wa { background: var(--pf-koyu); color: #fff; }
  html body .sabit-cubuk .sc-tel { background: rgba(255, 255, 255, .7); color: var(--metin); box-shadow: inset 0 0 0 1px var(--pf-kenar); }
}
html body .cerez { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: var(--pf-blur); backdrop-filter: var(--pf-blur); border: 1px solid var(--pf-kenar); }

/* backdrop-filter desteklemeyen tarayıcılarda okunurluk */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.ana2 :is(.cell, .pk, .paket, .kart, .hz-kart, .shot-card, .blog-kart, .kopru, .durum-kutu, .sss details, form.form) { background: rgba(255, 255, 255, .92); }
}

/* ===== Üst menü dil bayrakları (2026-11-05, kullanıcı seçimi: C "sakin") =====
   Üç bayrak, aralarında boşlukla bulundukları alana yayılır; her biri üst çubuğun yaklaşık yarısı
   yüksekliğinde, cam çerçeveli küçük bir karttır. Sayfa açılınca rüzgâr dalgası soldan sağa bir kez
   geçer ve durur; fareyle üzerine gelince o bayrak dalgalanır. Dokunma alanı bayrak + yanındaki
   boşluğun yarısıdır, arada ölü bölge kalmaz. Betik yoksa düz bayrak; az hareket seçiliyse dalga yok. */

/* yerleşim: bayrak alanı boşluğu doldurur */
html body .ust .ust-cta { align-self: stretch; }
@media (min-width: 1000px) { html body .ust .ust-cta { flex: 1 1 auto; min-width: 0; gap: 12px; margin-left: 10px; } }
@media (min-width: 1280px) { html body .ust .ana-menu ul { gap: 14px; } }
@media (min-width: 761px) and (max-width: 999px) {
  html body .ust .dil-sec-mob { order: 2; }
  html body .ust .ust-cta { order: 3; margin-left: 8px; }
  html body .ust .menu-ac { order: 4; margin-left: 12px; }
}
@media (max-width: 760px) {
  html body .ust .logo { margin-right: 0; flex-shrink: 1; min-width: 0; }
  html body .ust .ust-ic { column-gap: 6px; }
  html body .ust .menu-ac { margin-left: 2px; flex-shrink: 0; }
}
@media (max-width: 390px) { html body .ust .logo .logo-tam { height: 14px; width: auto; } }

/* bayrak alanı ve dokunma bölgeleri */
html body .ust .dil-sec-ust, html body .ust .dil-sec-mob {
  --ara: 14px;
  container-type: size; align-self: stretch; flex: 1 1 0; min-width: 0;
  justify-content: space-evenly; align-items: stretch;
  gap: 0; margin: 0; padding: 0; filter: none;
}
@media (max-width: 999px) { html body .ust .dil-sec-mob { --ara: 8px; } }
@media (max-width: 400px) { html body .ust .dil-sec-mob { --ara: 6px; } }
html body .ust .dil-sec-ust a, html body .ust .dil-sec-mob a {
  position: relative; display: flex; flex: 1 1 0; justify-content: center; align-items: center;
  padding: 0 calc(var(--ara) / 2); min-width: 0; min-height: 0; border-radius: 0; opacity: 1; transform: none;
  background: none; filter: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html body .ust .dil-sec-ust a:hover, html body .ust .dil-sec-mob a:hover { transform: none; filter: none; }
html body .ust .dil-sec a::before, html body .ust .dil-sec a::after { content: none; }
html body .ust .dil-sec a:focus-visible { outline: 2px solid #6c4cf0; outline-offset: -2px; border-radius: 6px; }

/* bayrak kartı */
html body .ust .dil-sec-ust .bayrak, html body .ust .dil-sec-mob .bayrak {
  position: relative; display: block; flex: none; overflow: hidden;
  width: 30px; width: min(calc(100cqw / 3 - var(--ara)), calc(100cqh * .675));
  height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: 5px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 4px 10px -2px rgba(20, 18, 43, .22);
  filter: saturate(.9); transition: transform .25s, box-shadow .25s, filter .25s;
}
html body .ust .dil-sec .bayrak svg { shape-rendering: geometricPrecision; }
html body .ust .dil-sec a:hover .bayrak { transform: translateY(-1px); filter: saturate(1); box-shadow: 0 0 0 1.5px #fff, 0 7px 14px -3px rgba(20, 18, 43, .3); }
html body .ust .dil-sec a:active .bayrak { transform: scale(.96); }
html body .ust .dil-sec a[aria-current] .bayrak { filter: saturate(1); box-shadow: 0 0 0 2px #6c4cf0, 0 4px 10px -2px rgba(20, 18, 43, .22); }

/* kumaş: betik bayrağı dikey sütunlara böler; sütunlar sırayla esneyip kararır */
html body .ust .bayrak.dalga { display: flex; }
html body .ust .bayrak.dalga > svg { display: none; }
.ust .bayrak .bay-serit {
  position: relative; flex: 1 1 0; height: 100%; margin-right: -.4px; overflow: hidden;
  transform-origin: 50% 0;
  animation: bayrak-ruzgar 1.8s ease-in-out .4s 1; animation-delay: calc(.4s + var(--i) * .03s);
}
.ust .bayrak .bay-serit:last-child { margin-right: 0; }
.ust .bayrak .bay-serit svg { position: absolute; top: 0; left: calc(var(--j) * -100%); width: calc(var(--n) * 100%); height: 100%; display: block; }
.ust .bayrak .bay-serit::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .12));
}
.ust .bayrak .bay-serit::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #0d0b1f; opacity: 0;
  animation: bayrak-isik 1.8s ease-in-out .4s 1; animation-delay: inherit;
}
/* fareyle üzerine gelince o bayrak dalgalanır */
.ust .dil-sec a:hover .bay-serit { animation: bayrak-ruzgar-2 1.6s ease-in-out infinite; animation-delay: calc(var(--j) * -.05s); }
.ust .dil-sec a:hover .bay-serit::after { animation: bayrak-isik-2 1.6s ease-in-out infinite; animation-delay: inherit; }
@keyframes bayrak-ruzgar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.93); } }
@keyframes bayrak-isik { 0%, 100% { opacity: 0; } 50% { opacity: .2; } }
@keyframes bayrak-ruzgar-2 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.93); } }
@keyframes bayrak-isik-2 { 0%, 100% { opacity: 0; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ust .bayrak .bay-serit, .ust .bayrak .bay-serit::after { animation: none !important; } }