/* =====================================================================
   TEKNOVA — GÜNEŞ ENERJİSİ TASARIM DİLİ
   ---------------------------------------------------------------------
   Kurumsal mavi kimliğin üzerine güneş enerjisine özgü bir katman:
   ışık, ısı, fotovoltaik yüzey ve enerji akışı.

   Tüm sınıflar `sol-` ön ekiyle Tailwind'den ayrıştırılmıştır.
   Bütün hareketler `prefers-reduced-motion` ayarına saygı duyar.

   İçindekiler
     01 · Tasarım jetonları
     02 · Yüzeyler ve dokular (fotovoltaik ızgara, ışık huzmesi)
     03 · Tipografi yardımcıları
     04 · Scroll reveal
     05 · Çizimler: güneş, panel, enerji akışı, foton
     06 · Bileşenler: metrik, kart, künye, galeri, video alanı
     07 · Etkileşim: odak, hover, kaydırıcı
     08 · Duyarlılık ve azaltılmış hareket
   ===================================================================== */

/* ── 01 · Tasarım jetonları ─────────────────────────────────────────── */
:root {
  /* Marka */
  --sol-brand:        #2B5EA7;
  --sol-brand-deep:   #1B3F73;
  --sol-brand-soft:   #EAF1FB;

  /* Güneş paleti */
  --sol-ray:          #FFC24B;   /* ışın / vurgu */
  --sol-sun:          #F59E0B;   /* ana güneş tonu */
  --sol-ember:        #D97706;   /* metin üzerinde 4.5:1 üstü */
  --sol-ember-ink:    #92500A;   /* açık zeminde okunabilir metin tonu */

  /* Enerji / gökyüzü */
  --sol-sky:          #38BDF8;
  --sol-teal:         #0EA5A5;

  /* Yüzeyler */
  --sol-night:        #0A1424;   /* panel camı / koyu bölüm arka planı */
  --sol-night-2:      #101E33;
  --sol-slate:        #1E293B;
  --sol-paper:        #F7F9FC;
  --sol-line:         rgba(15, 23, 36, 0.10);
  --sol-line-dark:    rgba(255, 255, 255, 0.10);

  /* Degradeler */
  --sol-grad-sun:     linear-gradient(135deg, #FFD277 0%, #F59E0B 45%, #D97706 100%);
  --sol-grad-dawn:    linear-gradient(135deg, #2B5EA7 0%, #4C79C0 40%, #F59E0B 120%);
  --sol-grad-ocean:   linear-gradient(135deg, #0E7490 0%, #2B5EA7 55%, #38BDF8 100%);
  --sol-grad-dusk:    linear-gradient(135deg, #3B2F63 0%, #2B5EA7 50%, #D97706 110%);
  --sol-grad-night:   linear-gradient(180deg, #0A1424 0%, #142845 100%);

  /* Ölçek — density 4/10 (standart-ferah) */
  --sol-space-xs:  8px;
  --sol-space-sm:  16px;
  --sol-space-md:  24px;
  --sol-space-lg:  40px;
  --sol-space-xl:  64px;
  --sol-space-2xl: 96px;

  --sol-radius:    14px;
  --sol-radius-lg: 22px;

  /* Hareket */
  --sol-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --sol-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --sol-dur-fast:  180ms;
  --sol-dur:       320ms;
  --sol-dur-slow:  620ms;

  /* Gölgeler */
  --sol-shadow-sm: 0 1px 2px rgba(10, 20, 36, 0.06), 0 2px 8px rgba(10, 20, 36, 0.05);
  --sol-shadow:    0 4px 12px rgba(10, 20, 36, 0.07), 0 16px 40px rgba(10, 20, 36, 0.09);
  --sol-shadow-lg: 0 8px 24px rgba(10, 20, 36, 0.10), 0 32px 72px rgba(10, 20, 36, 0.16);
  --sol-glow:      0 0 0 1px rgba(245, 158, 11, 0.25), 0 8px 32px rgba(245, 158, 11, 0.22);
}

.dark {
  --sol-brand-soft: rgba(43, 94, 167, 0.14);
  --sol-paper:      #0F1724;
  --sol-line:       rgba(255, 255, 255, 0.10);
}

/* Aksan varyantları — proje `accent` alanına göre uygulanır.
   Sıralama önemli: önce genel varsayılan, sonra özel değerler.
   (Hepsi aynı özgüllükte olduğu için sonradan gelen kazanır.) */
[data-accent]         { --sol-accent-grad: var(--sol-grad-dawn);  --sol-accent: var(--sol-brand); }
[data-accent="solar"] { --sol-accent-grad: var(--sol-grad-sun);   --sol-accent: var(--sol-sun); }
[data-accent="ocean"] { --sol-accent-grad: var(--sol-grad-ocean); --sol-accent: var(--sol-sky); }
[data-accent="dusk"]  { --sol-accent-grad: var(--sol-grad-dusk);  --sol-accent: #A78BFA; }


/* ── 02 · Yüzeyler ve dokular ───────────────────────────────────────── */

/* Sayfa kabuğu.
   Dekoratif katmanların yatay taşmasını kırpar. `overflow-x: hidden`
   elemanı bir kaydırma kabına çevirdiği için içindeki `position: sticky`
   panelleri kilitler; `clip` ise kaydırma kabı oluşturmaz ve sticky
   çalışmaya devam eder. Desteklemeyen tarayıcılarda hidden'a düşer. */
.sol-shell { overflow-x: hidden; }

@supports (overflow-x: clip) {
  .sol-shell { overflow-x: clip; }
}

/* Fotovoltaik hücre ızgarası — çok ince, arka plan dokusu olarak */
.sol-surface-pv {
  position: relative;
  background-color: var(--sol-night);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(150deg, rgba(43, 94, 167, 0.35) 0%, rgba(10, 20, 36, 0) 60%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
}

/* Açık zeminde kullanılan çok soluk ızgara */
.sol-surface-grid {
  background-image:
    linear-gradient(rgba(43, 94, 167, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 94, 167, 0.055) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}

/* Üstten aşağı sönümlenen sabah ışığı */
.sol-surface-dawn {
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255, 194, 75, 0.30) 0%, rgba(255, 194, 75, 0) 55%),
    radial-gradient(90% 70% at 10% 0%, rgba(43, 94, 167, 0.22) 0%, rgba(43, 94, 167, 0) 60%);
}

/* Panel yüzeyinden geçen ışık huzmesi */
.sol-sheen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sol-sheen::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.34) 47%,
    rgba(255, 226, 160, 0.5) 50%,
    rgba(255, 255, 255, 0.34) 53%,
    transparent 62%
  );
  transform: translateX(-70%);
  pointer-events: none;
  z-index: 2;
  /* Beklerken görünmez: tarayıcı bu büyük katmanı hiç boyamak zorunda kalmaz */
  opacity: 0;
}
.sol-sheen:hover::after,
.sol-sheen:focus-within::after {
  animation: sol-sheen-sweep 900ms var(--sol-ease-out) forwards;
}
@keyframes sol-sheen-sweep {
  from { opacity: 1; transform: translateX(-70%); }
  to   { opacity: 1; transform: translateX(70%); }
}

/* İnce üst kenar ışığı — cam panel hissi */
.sol-edge-light {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}


/* ── 03 · Tipografi yardımcıları ────────────────────────────────────── */

.sol-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sol-ember-ink);
}
.dark .sol-eyebrow { color: var(--sol-ray); }

/* Koyu zemin üzerinde kullanılan varyant (Tailwind sınıfına bağımlı kalmadan) */
.sol-eyebrow--light { color: var(--sol-ray); }

.sol-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--sol-grad-sun);
}

/* Rakamlarda hizalı, teknik görünüm */
.sol-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* Çok satırlı kırpma — Tailwind eklentisine bağımlı kalmadan */
.sol-clamp-2,
.sol-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sol-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.sol-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.sol-text-sun {
  background: var(--sol-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ── 04 · Scroll reveal ─────────────────────────────────────────────── */

/* Başlangıç durumu yalnızca `.sol-js` sınıfı varken uygulanır.
   Bu sınıfı header'daki satır içi betik ekler ve solar.js beklenen sürede
   çalışmazsa yine aynı betik kaldırır. Böylece JavaScript kapalıyken veya
   solar.js yüklenemediğinde metinler gizli kalmaz. */
.sol-js [data-sol-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--sol-dur-slow) var(--sol-ease-out),
    transform var(--sol-dur-slow) var(--sol-ease-out);
  transition-delay: var(--sol-delay, 0ms);
  will-change: opacity, transform;
}
.sol-js [data-sol-reveal="left"]  { transform: translateX(-28px); }
.sol-js [data-sol-reveal="right"] { transform: translateX(28px); }
.sol-js [data-sol-reveal="scale"] { transform: scale(0.94); }
.sol-js [data-sol-reveal="rise"]  { transform: translateY(40px); }

.sol-js [data-sol-reveal].sol-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* ── 05 · Çizimler ──────────────────────────────────────────────────── */

/* --- Güneş: çekirdek + dönen ışınlar + nefes alan hale ---------------
   DİKKAT — SVG'de dönüş merkezi:
   `transform-box: view-box` altında `transform-origin: 50% 50%`
   viewBox'ın ortasını işaret eder, elemanın kendi merkezini değil.
   Güneşin viewBox ortasında olmadığı çizimlerde (ör. çatı kesiti)
   ışınlar başka bir nokta etrafında dönüyordu. Bu yüzden o çizimlerde
   `style="transform-origin: <cx>px <cy>px"` ile merkez açıkça verilir. */
.sol-sun-rays,
.sol-sun-core,
.sol-sun-halo  { transform-box: view-box; transform-origin: 50% 50%; }

.sol-sun-rays  { animation: sol-spin 44s linear infinite; }
.sol-sun-rays--alt { animation: sol-spin-rev 68s linear infinite; }
.sol-sun-core  { animation: sol-breathe 5.5s var(--sol-ease) infinite; }
.sol-sun-halo  { animation: sol-halo 7s ease-in-out infinite; }

@keyframes sol-spin     { to { transform: rotate(360deg); } }
@keyframes sol-spin-rev { to { transform: rotate(-360deg); } }
@keyframes sol-breathe  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sol-halo     { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.12); } }

/* --- Fotovoltaik hücrelerin sırayla ışıması -------------------------- */
.sol-cell {
  animation: sol-cell-charge 3.6s var(--sol-ease) infinite;
  animation-delay: calc(var(--sol-i, 0) * 130ms);
}
@keyframes sol-cell-charge {
  /* Taban opaklık, animasyon dururken bile hücrelerin okunur kalmasını sağlar */
  0%, 62%, 100% { opacity: 0.34; }
  22%           { opacity: 0.95; }
}

/* --- Enerji akış hattı: kesikli çizgi kayması ------------------------ */
.sol-flow {
  stroke-dasharray: 9 13;
  animation: sol-flow-move 1.5s linear infinite;
}
.sol-flow--slow { animation-duration: 2.6s; }
@keyframes sol-flow-move { to { stroke-dashoffset: -44; } }

/* --- Hat üzerinde ilerleyen enerji paketi ---------------------------- */
.sol-pulse-dot {
  animation: sol-pulse-fade 2.2s ease-in-out infinite;
}
@keyframes sol-pulse-fade {
  0%, 100% { opacity: 0; }
  18%, 74% { opacity: 1; }
}

/* --- Panele düşen fotonlar ------------------------------------------ */
.sol-photon {
  animation: sol-photon-fall 2.9s cubic-bezier(0.55, 0, 0.7, 0.35) infinite;
  animation-delay: calc(var(--sol-i, 0) * 340ms);
}
@keyframes sol-photon-fall {
  0%        { opacity: 0;   transform: translate(0, -18px); }
  14%       { opacity: 0.95; }
  72%       { opacity: 0.95; transform: translate(0, 46px); }
  100%      { opacity: 0;   transform: translate(0, 56px); }
}

/* --- Hat boyunca ilerleyen enerji paketi ----------------------------
   Mesafe, elemanın kendi --sol-travel değişkeninden okunur. */
.sol-travel {
  animation: sol-travel-x 2.4s linear infinite;
  animation-delay: calc(var(--sol-i, 0) * 260ms);
}
@keyframes sol-travel-x {
  0%        { transform: translateX(0);                 opacity: 0; }
  12%       {                                           opacity: 1; }
  88%       {                                           opacity: 1; }
  100%      { transform: translateX(var(--sol-travel, 100px)); opacity: 0; }
}

/* --- İnverter LED --------------------------------------------------- */
.sol-led { animation: sol-led-blink 2.4s steps(1, end) infinite; }
@keyframes sol-led-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.25; } }

/* --- Yavaş yüzen dekoratif katman ----------------------------------- */
.sol-float      { animation: sol-float 7s ease-in-out infinite; }
.sol-float--lag { animation-delay: -2.4s; animation-duration: 9s; }
@keyframes sol-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* --- Görünmeyen sahnelerde animasyonları durdur ----------------------
   solar.js, ekran dışına çıkan her animasyon sahnesine bu sınıfı ekler.
   Ekranda olmayan onlarca döngü, derleyiciyi meşgul edip görsellerin
   boyanmasını geciktirdiği için bu duraklatma performans açısından
   kritiktir. */
.sol-paused,
.sol-paused * { animation-play-state: paused !important; }


/* ── 06 · Bileşenler ────────────────────────────────────────────────── */

/* --- Metrik kutusu (animasyonlu sayaç için) -------------------------- */
.sol-metric {
  position: relative;
  padding: var(--sol-space-md);
  border-radius: var(--sol-radius);
  border: 1px solid var(--sol-line);
  /* Bilinçli olarak backdrop-filter kullanılmıyor: sayfada aynı anda
     4-8 metrik olabiliyor ve her biri ayrı bir bulanıklaştırma katmanı
     açtığında derleme maliyeti görselleri geciktirecek kadar artıyor. */
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  transition: transform var(--sol-dur) var(--sol-ease), box-shadow var(--sol-dur) var(--sol-ease);
}
.sol-metric::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--sol-accent-grad, var(--sol-grad-sun));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sol-dur-slow) var(--sol-ease-out);
}
.sol-metric.sol-in::before { transform: scaleX(1); }
.sol-metric:hover { transform: translateY(-3px); box-shadow: var(--sol-shadow); }

.sol-metric__value {
  /* Dar kartlarda "3.763,03 kWp" gibi uzun değerler taşmasın diye
     ölçek sınırlı tutulur ve birim gerekirse alt satıra iner. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: clamp(1.5rem, 1rem + 1.1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--sol-night);
}
.sol-metric__unit  { font-size: 0.72em; font-weight: 700; color: var(--sol-ember-ink); margin-left: 5px; }
.sol-metric__label { margin-top: 6px; font-size: 0.875rem; font-weight: 500; color: #52627A; }

.dark .sol-metric        { background: rgba(16, 30, 51, 0.86); border-color: var(--sol-line-dark); }
.dark .sol-metric__value { color: #F1F5F9; }
.dark .sol-metric__unit  { color: var(--sol-ray); }
.dark .sol-metric__label { color: #94A3B8; }

/* Koyu bölüm içindeki metrikler */
.sol-on-dark .sol-metric        { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.sol-on-dark .sol-metric__value { color: #FFFFFF; }
.sol-on-dark .sol-metric__unit  { color: var(--sol-ray); }
.sol-on-dark .sol-metric__label { color: rgba(226, 232, 240, 0.75); }

/* --- Proje kartı ----------------------------------------------------- */
.sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--sol-radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sol-line);
  box-shadow: var(--sol-shadow-sm);
  transition:
    transform var(--sol-dur) var(--sol-ease),
    box-shadow var(--sol-dur) var(--sol-ease),
    border-color var(--sol-dur) var(--sol-ease);
}
.dark .sol-card { background: #0F1C2F; border-color: var(--sol-line-dark); }

.sol-card:hover,
.sol-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sol-shadow-lg);
  border-color: rgba(245, 158, 11, 0.45);
}

.sol-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sol-grad-night);
}
.sol-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bekleme durumunda dönüşüm uygulanmaz: her görseli gereksiz yere ayrı bir
     derleme katmanına taşımak, kalabalık listelerde boyamayı geciktiriyor. */
  transition: transform 900ms var(--sol-ease-out);
}
.sol-card:hover .sol-card__img,
.sol-card:focus-within .sol-card__img { transform: scale(1.07); }

/* Görselin altına okunabilirlik perdesi */
.sol-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 16, 28, 0.86) 0%, rgba(8, 16, 28, 0.28) 42%, rgba(8, 16, 28, 0) 72%);
}

.sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A1424;
  background: var(--sol-ray);
  white-space: nowrap;
}
/* Fotoğraf üzerinde duran rozet.
   DİKKAT: burada backdrop-filter KULLANILMAZ. Yuvarlatılmış ve
   overflow:hidden olan bir kart içinde fotoğrafın üstüne konan
   backdrop-filter, Chrome'da altındaki <img>'in hiç boyanmamasına yol
   açıyor. Bunun yerine koyu yarı saydam bir zemin kullanılır; her
   fotoğrafta 4.5:1 üzeri kontrast sağlar ve derleme maliyeti yoktur. */
.sol-chip--glass {
  color: #fff;
  background: rgba(8, 16, 28, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Kart alt bilgi şeridi */
.sol-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sol-space-sm);
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--sol-line);
}
.dark .sol-card__meta { border-top-color: var(--sol-line-dark); }

/* Kartın tamamını tıklanabilir yapan bağlantı (erişilebilir) */
.sol-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Filtre sekmeleri ------------------------------------------------ */
.sol-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;              /* dokunmatik hedef ≥ 44px */
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--sol-line);
  transition: color var(--sol-dur-fast) var(--sol-ease),
              background var(--sol-dur-fast) var(--sol-ease),
              border-color var(--sol-dur-fast) var(--sol-ease),
              transform var(--sol-dur-fast) var(--sol-ease);
}
.sol-filter:hover { transform: translateY(-1px); border-color: rgba(245, 158, 11, 0.5); color: var(--sol-ember-ink); }
.sol-filter[aria-current="true"] {
  color: #0A1424;
  background: var(--sol-grad-sun);
  border-color: transparent;
  box-shadow: var(--sol-glow);
}
.dark .sol-filter { color: #CBD5E1; background: rgba(255, 255, 255, 0.05); border-color: var(--sol-line-dark); }
.dark .sol-filter[aria-current="true"] { color: #0A1424; }

.sol-filter__count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(10, 20, 36, 0.08);
}
.sol-filter[aria-current="true"] .sol-filter__count { background: rgba(10, 20, 36, 0.16); }
.dark .sol-filter__count { background: rgba(255, 255, 255, 0.10); }

/* --- Künye satırı (detay sayfası) ----------------------------------- */
.sol-fact {
  display: flex;
  gap: var(--sol-space-sm);
  padding: 14px 0;
  border-bottom: 1px solid var(--sol-line);
}
.dark .sol-fact { border-bottom-color: var(--sol-line-dark); }
.sol-fact:last-child { border-bottom: 0; }
.sol-fact__label { flex: 0 0 42%; font-size: 0.875rem; font-weight: 600; color: #64748B; }
.sol-fact__value { flex: 1; font-size: 0.9375rem; color: #0F1C2F; }
.dark .sol-fact__label { color: #94A3B8; }
.dark .sol-fact__value { color: #E2E8F0; }

/* --- Öne çıkanlar listesi ------------------------------------------- */
.sol-highlight {
  position: relative;
  padding-left: 40px;
  line-height: 1.65;
}
.sol-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--sol-grad-sun);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.32);
}
.sol-highlight::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* --- Drone video alanı (yer tutucu + gerçek video) ------------------- */
.sol-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sol-radius-lg);
  overflow: hidden;
  background: var(--sol-grad-night);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--sol-shadow-lg);
}
.sol-video__frame,
.sol-video video,
.sol-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Video henüz yüklenmediğinde gösterilen tarama animasyonu */
.sol-video__scan {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 194, 75, 0.9), transparent);
  animation: sol-scan 4.5s ease-in-out infinite;
}
@keyframes sol-scan {
  0%, 100% { transform: translateY(6%);  opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { transform: translateY(94%); }
}

/* --- Gömülü video oynatıcı -------------------------------------------
   Amaç: video kutuya hapsedilmiş gibi durmasın, bulunduğu koyu bölümün
   parçasıymış gibi görünsün. Bunun için sert çerçeve yerine kenarlarda
   bölüm zeminine eriyen bir degrade ve yumuşak bir dış gölge kullanılır. */
.sol-video--embedded {
  border: 0;
  border-radius: 26px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Kenar erimesi: üstte ve altta zemin rengine geçiş */
.sol-video__blend {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(10, 20, 36, 0.55) 0%, rgba(10, 20, 36, 0) 22%),
    linear-gradient(to top,    rgba(10, 20, 36, 0.85) 0%, rgba(10, 20, 36, 0) 38%),
    radial-gradient(120% 100% at 50% 50%, rgba(10, 20, 36, 0) 55%, rgba(10, 20, 36, 0.5) 100%);
}

/* Ortadaki büyük oynat düğmesi — yalnızca duraklatılmışken */
.sol-video__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--sol-dur) var(--sol-ease);
}
.sol-video[data-state="paused"] .sol-video__play { opacity: 1; }

.sol-video__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--sol-grad-sun);
  color: #0A1424;
  box-shadow: 0 10px 34px rgba(217, 119, 6, 0.45);
  transition: transform var(--sol-dur) var(--sol-ease);
}
.sol-video__play:hover span { transform: scale(1.07); }

/* Alt kontrol çubuğu */
.sol-video__ui {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sol-dur) var(--sol-ease), transform var(--sol-dur) var(--sol-ease);
}
/* Fare üzerindeyken, odaklanıldığında ya da duraklatılmışken görünür */
.sol-video:hover .sol-video__ui,
.sol-video:focus-within .sol-video__ui,
.sol-video[data-state="paused"] .sol-video__ui {
  opacity: 1;
  transform: none;
}

.sol-video__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 20, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background var(--sol-dur-fast) var(--sol-ease), color var(--sol-dur-fast) var(--sol-ease);
}
.sol-video__btn:hover { background: var(--sol-ray); color: #0A1424; border-color: transparent; }
.sol-video__btn:focus-visible { outline: 3px solid var(--sol-ray); outline-offset: 2px; }

.sol-video__time {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}

/* İlerleme çubuğu — erişilebilirlik için gerçek bir range girdisi */
.sol-video__seek {
  flex: 1 1 auto;
  height: 22px;
  min-width: 60px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sol-video__seek:focus-visible { outline: 3px solid var(--sol-ray); outline-offset: 2px; border-radius: 999px; }

.sol-video__seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  /* Dolan kısım --sol-progress değişkeninden gelir (JS günceller) */
  background: linear-gradient(to right,
    var(--sol-ray) 0%, var(--sol-ray) var(--sol-seek, 0%),
    rgba(255, 255, 255, 0.28) var(--sol-seek, 0%), rgba(255, 255, 255, 0.28) 100%);
}
.sol-video__seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.sol-video__seek::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--sol-ray);
}
.sol-video__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.sol-video__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
  .sol-video__ui   { gap: 8px; padding: 10px 12px 12px; }
  .sol-video__btn  { width: 36px; height: 36px; }
  .sol-video__play span { width: 60px; height: 60px; }
}

/* Yer tutucu üzerindeki köşe nişangahları — drone HUD hissi */
.sol-hud {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(255, 194, 75, 0.65);
  border-style: solid;
  border-width: 0;
}
.sol-hud--tl { top: 18px; left: 18px;  border-top-width: 2px; border-left-width: 2px;  border-top-left-radius: 6px; }
.sol-hud--tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.sol-hud--bl { bottom: 18px; left: 18px;  border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 6px; }
.sol-hud--br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

/* Kayıt göstergesi */
.sol-rec-dot { animation: sol-rec 1.6s ease-in-out infinite; }
@keyframes sol-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- Galeri --------------------------------------------------------- */
.sol-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--sol-radius);
  cursor: zoom-in;
  background: var(--sol-grad-night);
}
.sol-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--sol-ease-out);
}
.sol-gallery__item:hover img { transform: scale(1.07); }
.sol-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 16, 28, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity var(--sol-dur) var(--sol-ease);
}
.sol-gallery__item:hover::after { opacity: 1; }

/* --- Lightbox -------------------------------------------------------- */
.sol-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  /* Zemin zaten neredeyse opak; ayrıca backdrop-filter uygulamak
     görselin boyanmasını riske atacağı için kullanılmaz. */
  background: rgba(6, 12, 22, 0.96);
}
.sol-lightbox.is-open { display: flex; animation: sol-fade var(--sol-dur) var(--sol-ease-out); }
.sol-lightbox__img {
  max-width: min(1400px, 100%);
  max-height: 82vh;
  border-radius: var(--sol-radius);
  box-shadow: var(--sol-shadow-lg);
  animation: sol-zoom var(--sol-dur-slow) var(--sol-ease-out);
}
@keyframes sol-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sol-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

.sol-lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background var(--sol-dur-fast) var(--sol-ease), transform var(--sol-dur-fast) var(--sol-ease);
}
.sol-lightbox__btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.06); }

/* --- Okuma ilerleme çubuğu ------------------------------------------ */
.sol-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--sol-grad-sun);
  z-index: 60;
  pointer-events: none;
}

/* --- Zengin metin (yönetici panelinden gelen HTML) ------------------- */
.sol-prose > p        { margin-bottom: 1.15em; }
.sol-prose > p:last-child { margin-bottom: 0; }
.sol-prose strong     { font-weight: 700; color: #0F1C2F; }
.dark .sol-prose strong { color: #F1F5F9; }
.sol-prose a          { color: var(--sol-ember-ink); text-decoration: underline; text-underline-offset: 3px; }
.dark .sol-prose a    { color: var(--sol-ray); }
.sol-prose ul         { margin: 0 0 1.15em; padding-left: 1.4em; list-style: disc; }
.sol-prose ol         { margin: 0 0 1.15em; padding-left: 1.4em; list-style: decimal; }
.sol-prose li         { margin-bottom: .4em; }
.sol-prose h3         { margin: 1.6em 0 .5em; font-size: 1.25rem; font-weight: 700; }
/* Editörden gelen, paragraflar ARASINDAKİ <br> etiketleri boşluğu ikiye
   katlıyor. Paragrafın içindeki satır sonları (p > br) korunur. */
.sol-prose > br       { display: none; }
.sol-prose br + br    { display: none; }

/* İlk paragrafı bir tık büyük göstererek giriş hissi ver */
.sol-prose--lead > p:first-of-type {
  font-size: 1.0625em;
  color: #0F1C2F;
}
.dark .sol-prose--lead > p:first-of-type { color: #E2E8F0; }

/* --- Yasal metin (KVKK, sözleşmeler) ---------------------------------
   Uzun metinde okunabilirlik önceliklidir: satır uzunluğu ~70 karakter,
   satır yüksekliği 1.75, gövde metni yüksek kontrastlı. */
.sol-legal {
  max-width: 72ch;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: #334155;
}
.dark .sol-legal { color: #CBD5E1; }

.sol-legal > :first-child { margin-top: 0; }

.sol-legal h2 {
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sol-line);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #0F1C2F;
  /* Sabit üst menü başlığı örtmesin */
  scroll-margin-top: 110px;
}
.sol-legal h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.dark .sol-legal h2 { color: #F1F5F9; border-top-color: var(--sol-line-dark); }

.sol-legal h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1E293B;
  scroll-margin-top: 110px;
}
.dark .sol-legal h3 { color: #E2E8F0; }

.sol-legal h4 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1E293B;
}
.dark .sol-legal h4 { color: #E2E8F0; }

.sol-legal p  { margin-bottom: 1.1em; }
.sol-legal ul { margin: 0 0 1.4em; padding-left: 0; list-style: none; }
.sol-legal ol { margin: 0 0 1.4em; padding-left: 1.4em; list-style: decimal; }
.sol-legal li { margin-bottom: .55em; }

/* Madde işareti yerine küçük güneş noktası */
.sol-legal ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.sol-legal ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sol-grad-sun);
}

.sol-legal strong { font-weight: 700; color: #0F1C2F; }
.dark .sol-legal strong { color: #F8FAFC; }

.sol-legal a {
  color: var(--sol-ember-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--sol-dur-fast) var(--sol-ease);
}
.sol-legal a:hover { color: var(--sol-brand-deep); }
.dark .sol-legal a { color: var(--sol-ray); }

.sol-legal blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--sol-sun);
  border-radius: 0 12px 12px 0;
  background: rgba(245, 158, 11, 0.07);
  font-style: normal;
}
.dark .sol-legal blockquote { background: rgba(245, 158, 11, 0.1); }

/* Tablolar dar ekranda kendi içinde kaysın, sayfayı taşırmasın */
.sol-legal table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.sol-legal th,
.sol-legal td {
  padding: 10px 14px;
  border: 1px solid var(--sol-line);
  text-align: left;
}
.sol-legal th { font-weight: 700; background: var(--sol-brand-soft); color: #0F1C2F; }
.dark .sol-legal th { color: #F1F5F9; }
.dark .sol-legal th,
.dark .sol-legal td { border-color: var(--sol-line-dark); }

.sol-legal hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--sol-line);
}
.dark .sol-legal hr { border-top-color: var(--sol-line-dark); }

/* --- İçindekiler ------------------------------------------------------ */
.sol-toc {
  list-style: none;
  counter-reset: sol-toc;
  border-left: 2px solid var(--sol-line);
}
.dark .sol-toc { border-left-color: var(--sol-line-dark); }

.sol-toc__link {
  display: block;
  padding: 8px 0 8px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748B;
  transition: color var(--sol-dur-fast) var(--sol-ease),
              border-color var(--sol-dur-fast) var(--sol-ease);
}
.dark .sol-toc__link { color: #94A3B8; }

.sol-toc__link:hover,
.sol-toc__link:focus-visible {
  color: var(--sol-ember-ink);
  border-left-color: var(--sol-sun);
}
.dark .sol-toc__link:hover,
.dark .sol-toc__link:focus-visible { color: var(--sol-ray); }

/* Okunmakta olan bölüm — solar.js tarafından işaretlenir */
.sol-toc__link.is-current {
  color: var(--sol-ember-ink);
  font-weight: 700;
  border-left-color: var(--sol-sun);
}
.dark .sol-toc__link.is-current { color: var(--sol-ray); }

/* --- İçerik paneli (açık zeminde kart) ------------------------------ */
.sol-panel {
  position: relative;
  border-radius: var(--sol-radius-lg);
  border: 1px solid var(--sol-line);
  background: #fff;
  box-shadow: var(--sol-shadow-sm);
  transition: transform var(--sol-dur) var(--sol-ease),
              box-shadow var(--sol-dur) var(--sol-ease),
              border-color var(--sol-dur) var(--sol-ease);
}
.dark .sol-panel { background: #0F1C2F; border-color: var(--sol-line-dark); }

.sol-panel--hover:hover,
.sol-panel--hover:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sol-shadow);
  border-color: rgba(245, 158, 11, 0.4);
}

/* Panelin üstünde ince aksan şeridi */
.sol-panel--accent::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: var(--sol-radius-lg) var(--sol-radius-lg) 0 0;
  background: var(--sol-accent-grad, var(--sol-grad-sun));
}

/* --- İkon rozeti ----------------------------------------------------- */
.sol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--sol-ember-ink);
  background: linear-gradient(150deg, rgba(255, 194, 75, 0.24), rgba(43, 94, 167, 0.14));
  border: 1px solid rgba(245, 158, 11, 0.28);
  flex: 0 0 auto;
}
.dark .sol-badge      { color: var(--sol-ray); }
.sol-badge--sm        { width: 40px; height: 40px; border-radius: 12px; }
.sol-badge--brand     { color: var(--sol-brand); background: rgba(43, 94, 167, 0.12); border-color: rgba(43, 94, 167, 0.24); }
.dark .sol-badge--brand { color: #7FA9E4; }
.sol-on-dark .sol-badge,
.sol-badge--on-dark   { color: var(--sol-ray); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }

/* --- İstatistik kutusu (büyük rakam) -------------------------------- */
.sol-stat__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--sol-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sol-stat__label {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.78);
}

/* --- Zaman çizelgesi ------------------------------------------------- */
.sol-timeline {
  position: relative;
  display: grid;
  gap: var(--sol-space-lg);
}
/* Sol kenarda dikey hat */
.sol-timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    rgba(245, 158, 11, 0.85) 0%,
    rgba(43, 94, 167, 0.55) 55%,
    rgba(43, 94, 167, 0.12) 100%);
}

.sol-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sol-space-md);
  align-items: start;
}

/* Yıl madalyonu */
.sol-timeline__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #0A1424;
  background: var(--sol-grad-sun);
  box-shadow: 0 0 0 6px var(--sol-paper), 0 6px 18px rgba(217, 119, 6, 0.28);
}
.dark .sol-timeline__marker { box-shadow: 0 0 0 6px #0F1724, 0 6px 18px rgba(217, 119, 6, 0.3); }

.sol-timeline__year {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sol-ember-ink);
}
.dark .sol-timeline__year { color: var(--sol-ray); }

/* --- Süreç adımları (numaralı) --------------------------------------- */
.sol-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sol-space-md);
  border-radius: var(--sol-radius);
  border: 1px solid var(--sol-line);
  background: #fff;
  transition: transform var(--sol-dur) var(--sol-ease), box-shadow var(--sol-dur) var(--sol-ease);
}
.dark .sol-step { background: rgba(255, 255, 255, 0.04); border-color: var(--sol-line-dark); }
.sol-step:hover { transform: translateY(-3px); box-shadow: var(--sol-shadow); }

.sol-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0A1424;
  background: var(--sol-ray);
}

/* Adımlar arasındaki kesikli bağlantı — yalnızca geniş ekranda */
@media (min-width: 1024px) {
  .sol-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    right: -22px;
    width: 22px;
    border-top: 2px dashed rgba(245, 158, 11, 0.5);
  }
}

/* --- Form alanları ---------------------------------------------------- */
.sol-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.dark .sol-label { color: #CBD5E1; }
.sol-label__req { color: #DC2626; margin-left: 2px; }
.dark .sol-label__req { color: #FCA5A5; }

.sol-field {
  display: block;
  width: 100%;
  min-height: 48px;                 /* dokunmatik hedef */
  padding: 12px 14px;
  font-size: 1rem;                  /* iOS'ta odakta yakınlaştırmayı önler */
  line-height: 1.5;
  color: #0F1C2F;
  background: #fff;
  border: 1.5px solid rgba(15, 28, 47, 0.16);
  border-radius: 12px;
  transition: border-color var(--sol-dur-fast) var(--sol-ease),
              box-shadow var(--sol-dur-fast) var(--sol-ease),
              background var(--sol-dur-fast) var(--sol-ease);
}
.sol-field::placeholder { color: #94A3B8; }
.sol-field:hover  { border-color: rgba(15, 28, 47, 0.28); }
.sol-field:focus  {
  outline: none;
  border-color: var(--sol-sun);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.dark .sol-field {
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.dark .sol-field::placeholder { color: #64748B; }

.sol-field--invalid,
.sol-field[aria-invalid="true"] {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.04);
}
.sol-field--invalid:focus,
.sol-field[aria-invalid="true"]:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.16);
}

textarea.sol-field { min-height: 140px; resize: vertical; }

.sol-help  { margin-top: 6px; font-size: 0.8125rem; color: #64748B; }
.dark .sol-help { color: #94A3B8; }

.sol-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #B91C1C;
}
.dark .sol-error { color: #FCA5A5; }

/* --- Harita kabı ------------------------------------------------------
   16:9 alan önceden ayrılır (düzen kaymaz) ve içindeki iframe
   ayarlardan hangi biçimde gelirse gelsin tam kaplar. */
.sol-map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #E2E8F0;
}
.dark .sol-map { background: #1E293B; }
.sol-map iframe,
.sol-map img,
.sol-map > div {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
@media (max-width: 640px) {
  .sol-map { aspect-ratio: 4 / 3; }
}

/* --- Gönderim sırasında buton durumu --------------------------------- */
.sol-btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}
.sol-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(10, 20, 36, 0.25);
  border-top-color: #0A1424;
  animation: sol-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sol-spinner { animation-duration: 1800ms; }
}

/* --- Uyarı / bildirim kutuları --------------------------------------- */
.sol-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--sol-radius);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.sol-alert--success { color: #065F46; background: #ECFDF5; border-color: #A7F3D0; }
.sol-alert--error   { color: #991B1B; background: #FEF2F2; border-color: #FECACA; }
.dark .sol-alert--success { color: #A7F3D0; background: rgba(6, 95, 70, 0.28); border-color: rgba(16, 185, 129, 0.35); }
.dark .sol-alert--error   { color: #FCA5A5; background: rgba(153, 27, 27, 0.28); border-color: rgba(248, 113, 113, 0.35); }

/* --- Alt bilgi (footer) ----------------------------------------------
   Açık zemin esas alınmıştır; koyu tema için `.dark` varyantları var. */

.sol-footer {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sol-paper) 40%, #EEF3FA 100%);
  border-top: 1px solid rgba(43, 94, 167, 0.14);
}
.dark .sol-footer {
  background: linear-gradient(180deg, #0F1C2F 0%, #0C1728 100%);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Bağlantı: bekleme durumunda sade, üzerine gelince altın vurgu */
.sol-flink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;                   /* dokunmatik hedefi büyütür */
  font-size: 0.9375rem;
  color: #475569;
  transition: color var(--sol-dur-fast) var(--sol-ease);
}
.dark .sol-flink { color: rgba(203, 213, 225, 0.82); }

.sol-flink::before {
  content: "";
  width: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--sol-grad-sun);
  transition: width var(--sol-dur) var(--sol-ease);
}
.sol-flink:hover,
.sol-flink:focus-visible { color: var(--sol-brand-deep); }
.dark .sol-flink:hover,
.dark .sol-flink:focus-visible { color: #fff; }

.sol-flink:hover::before,
.sol-flink:focus-visible::before { width: 14px; }

/* Sütun başlığı */
.sol-fhead {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sol-ember-ink);
}
.dark .sol-fhead { color: var(--sol-ray); }

/* Sosyal medya düğmesi — 44px dokunmatik hedef */
.sol-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #475569;
  background: #fff;
  border: 1px solid rgba(15, 28, 47, 0.12);
  box-shadow: var(--sol-shadow-sm);
  transition: color var(--sol-dur-fast) var(--sol-ease),
              background var(--sol-dur-fast) var(--sol-ease),
              border-color var(--sol-dur-fast) var(--sol-ease),
              transform var(--sol-dur-fast) var(--sol-ease);
}
.dark .sol-social {
  color: rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.sol-social:hover,
.sol-social:focus-visible {
  color: #0A1424;
  background: var(--sol-ray);
  border-color: transparent;
  transform: translateY(-2px);
}

/* Belge rozeti (ISO, TSE, CE …) */
.sol-cert {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #334155;
  background: #fff;
  border: 1px solid rgba(15, 28, 47, 0.12);
}
.dark .sol-cert {
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Yetkili bayi rozeti.
   Üreticinin logosu kendi renklerini taşıdığı için her iki temada da
   beyaz bir zemin üzerinde gösterilir — marka kullanım kuralına da uygun. */
.sol-dealer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 28, 47, 0.12);
  box-shadow: var(--sol-shadow-sm);
  transition: border-color var(--sol-dur-fast) var(--sol-ease),
              box-shadow var(--sol-dur-fast) var(--sol-ease),
              transform var(--sol-dur-fast) var(--sol-ease);
}
.dark .sol-dealer { border-color: rgba(255, 255, 255, 0.18); box-shadow: none; }

.sol-dealer:hover,
.sol-dealer:focus-visible {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
  transform: translateY(-1px);
}
.sol-dealer:focus-visible { outline: 3px solid var(--sol-ember); outline-offset: 3px; }

.sol-dealer__logo {
  height: 22px;
  width: auto;
  display: block;
}

/* Logo ile etiket arasındaki ince ayraç */
.sol-dealer__tag {
  position: relative;
  padding-left: 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sol-ember-ink);
  white-space: nowrap;
}
.sol-dealer__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(15, 28, 47, 0.14);
}

/* Logo yoksa marka adı yazıyla gösterilir */
.sol-dealer__name {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F1C2F;
  white-space: nowrap;
}

/* Küçük metin bağlantılarına yeterli dokunma alanı kazandırır.
   WCAG 2.2 AA (2.5.8) en az 24×24 CSS piksel ister; 32px rahat bir pay bırakır. */
.sol-tap {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* Başa dön */
.sol-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  background: #fff;
  border: 1px solid rgba(15, 28, 47, 0.12);
  box-shadow: var(--sol-shadow-sm);
  transition: color var(--sol-dur-fast) var(--sol-ease),
              background var(--sol-dur-fast) var(--sol-ease),
              border-color var(--sol-dur-fast) var(--sol-ease);
}
.sol-top:hover { color: var(--sol-brand-deep); border-color: rgba(245, 158, 11, 0.55); }
.dark .sol-top {
  color: rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.dark .sol-top:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Odak halkası her iki temada da görünür kalsın */
.sol-flink:focus-visible,
.sol-social:focus-visible,
.sol-top:focus-visible {
  outline: 3px solid var(--sol-ember);
  outline-offset: 3px;
}
.dark .sol-flink:focus-visible,
.dark .sol-social:focus-visible,
.dark .sol-top:focus-visible { outline-color: var(--sol-ray); }

/* Çapa bağlantılarında yumuşak kaydırma */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Bölüm ayıracı: panel sırası silüeti ---------------------------- */
.sol-divider {
  height: 28px;
  background-repeat: repeat-x;
  background-size: 120px 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg fill='none' stroke='%232B5EA7' stroke-opacity='.22' stroke-width='1.5'%3E%3Cpath d='M4 24l14-13h26l-14 13z'/%3E%3Cpath d='M46 24l14-13h26l-14 13z'/%3E%3Cpath d='M88 24l14-13h26l-14 13z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.9;
}


/* ── 07 · Etkileşim ─────────────────────────────────────────────────── */

/* Klavye odağı her yerde görünür kalır */
.sol-card a:focus-visible,
.sol-filter:focus-visible,
.sol-lightbox__btn:focus-visible,
.sol-gallery__item:focus-visible,
.sol-btn:focus-visible {
  outline: 3px solid var(--sol-ray);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Birincil buton — güneş degradesi */
.sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #0A1424;
  background: var(--sol-grad-sun);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.28);
  transition: transform var(--sol-dur-fast) var(--sol-ease),
              box-shadow var(--sol-dur-fast) var(--sol-ease),
              filter var(--sol-dur-fast) var(--sol-ease);
}
.sol-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(217, 119, 6, 0.36); filter: saturate(1.08); }
.sol-btn:active { transform: translateY(0); }

.sol-btn--ghost {
  color: #0F1C2F;
  background: transparent;
  border: 1.5px solid rgba(15, 28, 47, 0.18);
  box-shadow: none;
}
.sol-btn--ghost:hover { border-color: var(--sol-sun); box-shadow: none; }
.dark .sol-btn--ghost { color: #E2E8F0; border-color: rgba(255, 255, 255, 0.22); }

.sol-btn--on-dark {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.sol-btn--on-dark:hover { background: rgba(255, 255, 255, 0.18); box-shadow: none; }

/* Yatay kaydırmalı galeri şeridi */
.sol-scroller {
  display: flex;
  gap: var(--sol-space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.sol-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
.sol-scroller::-webkit-scrollbar { height: 6px; }
.sol-scroller::-webkit-scrollbar-thumb { background: rgba(43, 94, 167, 0.35); border-radius: 999px; }

/* Sayfa gövdesi lightbox açıkken kaymasın */
body.sol-lock { overflow: hidden; }


/* =====================================================================
   07b · YÜKLENME DURUMLARI
   ---------------------------------------------------------------------
   Üç ayrı bekleme anı, üç ayrı gösterge:

     1. Açılış perdesi (.sol-loader)
        Siteye ilk girişte, ilk boyama ile birlikte görünür. Oturum başına
        yalnızca bir kez: iç sayfalar arasında gezinirken tekrar çıkmaz.
     2. Gezinme çubuğu (.sol-navload)
        Bir iç bağlantıya tıklandığı an üstte ince bir şerit ilerler.
        Sunucu yeni sayfayı üretirken ekranın "donmuş" görünmesini önler.
     3. İskelet / görsel açılışı (.sol-frame)
        Görsel inene kadar yerini parıltılı bir iskelet tutar, sonra
        görsel yumuşak biçimde belirir. Yer önceden ayrıldığı için
        sayfa zıplamaz (CLS = 0).

   JS yoksa hiçbiri devreye girmez: `.sol-loading` sınıfını `<head>`
   içindeki satır içi betik ekler, dolayısıyla betiksiz tarayıcıda perde
   hiç görünmez ve içerik doğrudan okunur.
   ===================================================================== */

/* Yalnızca ekran okuyucuya görünen metin.
   Tailwind'in `sr-only` sınıfı CDN çalışma zamanında üretildiği için ilk
   boyamada henüz hazır olmayabiliyor; perde metni bir an görünmesin diye
   burada gerçek bir stil dosyasında tanımlanır. */
.sol-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 1 · Açılış perdesi ---------------------------------------------- */
.sol-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFF6E4 0%, rgba(255, 246, 228, 0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--sol-paper) 100%);
}
.dark .sol-loader {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0) 60%),
    var(--sol-grad-night);
}

/* Perde yalnızca "yükleniyor" durumunda gösterilir ve sayfa kaydırılamaz */
.sol-loading .sol-loader { display: flex; }
.sol-loading, .sol-loading body { overflow: hidden; }

/* İş bitince perde yerinde kalmadan, içerik hafifçe yukarı çekilerek açılır */
.sol-loader[data-sol-done] {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 520ms var(--sol-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-loader__art { position: relative; width: 132px; height: 132px; }

/* Güneş çekirdeği — yavaşça nefes alır */
.sol-loader__core {
  position: absolute;
  inset: 34px;
  border-radius: 999px;
  background: var(--sol-grad-sun);
  box-shadow: 0 0 42px rgba(245, 158, 11, 0.45);
  animation: sol-loader-breathe 2200ms ease-in-out infinite;
}

/* Işınlar — çekirdeğin çevresinde döner */
.sol-loader__rays {
  position: absolute;
  inset: 0;
  animation: sol-spin 9s linear infinite;
}
.sol-loader__rays span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 15px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--sol-sun);
  opacity: 0.75;
  /* 66px = yarıçap; ışın çekirdeğin dışında kalır */
  transform-origin: 50% 66px;
}

/* Toplanan enerjiyi gösteren halka */
.sol-loader__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.sol-loader__ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.sol-loader__ring .sol-loader__track { stroke: rgba(43, 94, 167, 0.14); }
.dark .sol-loader__ring .sol-loader__track { stroke: rgba(255, 255, 255, 0.12); }
.sol-loader__ring .sol-loader__arc {
  stroke: var(--sol-brand);
  stroke-dasharray: 396;          /* 2πr, r = 63 */
  stroke-dashoffset: 396;
  animation: sol-loader-arc 1800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.dark .sol-loader__ring .sol-loader__arc { stroke: var(--sol-ray); }

.sol-loader__brand {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #334155;
}
.dark .sol-loader__brand { color: #CBD5E1; }

/* İlerleme şeridi: yüzde bilinmediği için önce %70'e kadar yavaşlayarak
   ilerler, sayfa hazır olunca JS `--sol-progress` değerini 100 yapar. */
.sol-loader__bar {
  width: min(220px, 46vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(43, 94, 167, 0.14);
  overflow: hidden;
}
.dark .sol-loader__bar { background: rgba(255, 255, 255, 0.12); }
.sol-loader__fill {
  display: block;
  height: 100%;
  width: var(--sol-progress, 8%);
  border-radius: inherit;
  background: var(--sol-grad-sun);
  /* İlk aşama: yavaşlayarak %70'e. Uzun ve yavaşlayan eğri, gerçek bir
     yüzde bilinmediği hâlde "ilerliyor" hissi verir. */
  transition: width 1800ms cubic-bezier(0.12, 0.75, 0.2, 1);
}
/* İkinci aşama: sayfa hazır, kalan pay hızlıca kapanır */
.sol-loader__fill[data-sol-complete] {
  transition: width 280ms ease-out;
}

@keyframes sol-loader-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 42px rgba(245, 158, 11, 0.45); }
  50%      { transform: scale(1.07); box-shadow: 0 0 58px rgba(245, 158, 11, 0.62); }
}
@keyframes sol-loader-arc {
  0%   { stroke-dashoffset: 396; }
  55%  { stroke-dashoffset: 110; }
  100% { stroke-dashoffset: 396; }
}

/* --- 2 · Gezinme çubuğu ---------------------------------------------- */
.sol-navload {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;                    /* sabit menünün (z-50) üstünde */
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--sol-brand) 0%, var(--sol-sun) 70%, var(--sol-ray) 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
  opacity: 0;
  pointer-events: none;
}
/* Yeni sayfa beklenirken %85'e kadar yavaşlayarak ilerler */
.sol-navload[data-sol-active] {
  opacity: 1;
  transform: scaleX(0.85);
  transition: transform 2400ms cubic-bezier(0.12, 0.75, 0.2, 1), opacity 120ms linear;
}
/* Geri/ileri ile sayfaya dönüldüğünde tamamlanıp kaybolur */
.sol-navload[data-sol-done] {
  opacity: 0;
  transform: scaleX(1);
  transition: transform 220ms ease-out, opacity 320ms ease-out 160ms;
}

/* --- 3 · İskelet ve görsel açılışı ----------------------------------- */
.sol-skeleton {
  position: relative;
  overflow: hidden;
  background: #E6EBF3;
}
.dark .sol-skeleton { background: rgba(255, 255, 255, 0.07); }
.sol-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: sol-shimmer 1500ms ease-in-out infinite;
}
.dark .sol-skeleton::after {
  background: linear-gradient(90deg,
              transparent 0%, rgba(255, 255, 255, 0.09) 50%, transparent 100%);
}
@keyframes sol-shimmer {
  100% { transform: translateX(100%); }
}

/* Görsel çerçevesi: inene kadar iskelet, indiğinde yumuşak geçiş.
   İskelet yalnızca `.sol-js` varken çalışır; betiksiz tarayıcıda görsel
   zaten anında görünür durumdadır. */
.sol-frame { position: relative; }

/* İskelet katmanı sürekli var; hazır olunca YOK OLMAZ, solar.
   Anında kaldırılsaydı görsel henüz saydamken altındaki koyu kart zemini
   bir kare boyunca görünür, göz bunu titreme olarak algılardı.
   z-index 1: görselin üstünde, kart rozetlerinin (z-2) altında. */
.sol-js .sol-frame::before,
.sol-js .sol-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 420ms ease-out;
}
.sol-js .sol-frame::before { background: #E6EBF3; }
.dark .sol-js .sol-frame::before { background: rgba(255, 255, 255, 0.07); }
.sol-js .sol-frame::after {
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: sol-shimmer 1500ms ease-in-out infinite;
}
.dark .sol-js .sol-frame::after {
  background: linear-gradient(90deg,
              transparent 0%, rgba(255, 255, 255, 0.09) 50%, transparent 100%);
}
.sol-js .sol-frame--ready::before,
.sol-js .sol-frame--ready::after {
  opacity: 0;
}
/* Görünmez bir katmanı boyamaya devam etmenin anlamı yok */
.sol-js .sol-frame--ready::after { animation: none; }
.sol-js .sol-frame [data-sol-fade] {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 520ms ease-out, transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sol-js .sol-frame--ready [data-sol-fade] {
  opacity: 1;
  transform: none;
}
/* Kart hover'ındaki büyütme ile çakışmasın: hazır olduktan sonra
   dönüşümü kartın kendi kuralı devralır. */
.sol-js .sol-frame--ready .sol-card__img { transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }


/* ── 08 · Duyarlılık ve azaltılmış hareket ──────────────────────────── */

@media (max-width: 640px) {
  .sol-fact { flex-direction: column; gap: 4px; }
  .sol-fact__label { flex: none; }

  /* Dar ekranda metrikler iki sütuna sığdığı için iç boşluk ve
     rakam ölçüsü küçültülür; "3.037,32 kWp" tek satırda kalır. */
  .sol-metric        { padding: 16px; }
  .sol-metric__value { font-size: 1.375rem; }
  .sol-metric__label { font-size: 0.8125rem; }

  .sol-hud { width: 18px; height: 18px; }
  .sol-hud--tl, .sol-hud--tr { top: 12px; }
  .sol-hud--bl, .sol-hud--br { bottom: 12px; }
  .sol-hud--tl, .sol-hud--bl { left: 12px; }
  .sol-hud--tr, .sol-hud--br { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hareket kapalıyken içerik anında ve tam görünür olmalı */
  .sol-js [data-sol-reveal],
  [data-sol-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sol-sun-rays,
  .sol-sun-rays--alt,
  .sol-sun-core,
  .sol-sun-halo,
  .sol-cell,
  .sol-flow,
  .sol-pulse-dot,
  .sol-photon,
  .sol-travel,
  .sol-led,
  .sol-float,
  .sol-video__scan,
  .sol-rec-dot,
  .sol-loader__rays,
  .sol-loader__core,
  .sol-skeleton::after,
  .sol-js .sol-frame::after {
    animation: none !important;
  }

  /* Sürekli animasyonlar durunca görünür kalsınlar */
  .sol-cell      { opacity: 0.55; }
  .sol-photon    { opacity: 0.7; }
  .sol-pulse-dot { opacity: 1; }
  .sol-travel    { opacity: 1; }
  .sol-sun-halo  { opacity: 0.5; }

  .sol-metric.sol-in::before { transform: scaleX(1); transition: none; }
  .sol-sheen:hover::after    { animation: none; }

  .sol-card,
  .sol-card__img,
  .sol-gallery__item img,
  .sol-btn,
  .sol-filter {
    transition: none !important;
  }
  .sol-card:hover { transform: none; }
  .sol-card:hover .sol-card__img { transform: scale(1.02); }

  /* Yükleme göstergeleri: bilgi kalır, hareket kalkar.
     Perde büyüyerek değil, yalnızca solarak kapanır; ilerleme şeridi ve
     görseller anında yerine oturur. */
  .sol-loader[data-sol-done] { transform: none; transition: opacity 200ms linear; }
  .sol-loader__ring .sol-loader__arc { stroke-dashoffset: 130; }
  .sol-loader__fill,
  .sol-loader__fill[data-sol-complete] { transition: none; }
  .sol-navload[data-sol-active] { transform: scaleX(0.85); transition: opacity 120ms linear; }
  .sol-navload[data-sol-done]   { transform: scaleX(1);    transition: opacity 200ms linear; }

  .sol-js .sol-frame [data-sol-fade] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Yazdırma: dekoratif katmanları gizle */
@media print {
  .sol-video, .sol-lightbox, .sol-progress, .sol-divider,
  .sol-loader, .sol-navload { display: none !important; }
  .sol-js [data-sol-reveal],
  [data-sol-reveal] { opacity: 1 !important; transform: none !important; }

  /* Görsel iskeleti baskıda gri bir kutu olarak çıkmasın */
  .sol-js .sol-frame::before,
  .sol-js .sol-frame::after { content: none !important; }
  .sol-js .sol-frame [data-sol-fade] { opacity: 1 !important; transform: none !important; }
}