/* Tailwind taramasının yakalayamayacağı, JS ile tetiklenen küçük durum
   sınıfları — framer-motion'ın (Reveal, HeroSlider, Lightbox) vanilla
   JS/CSS karşılığı. Tasarım/hareket hissi olabildiğince korunmuştur. */

/* Bu derlenmiş tailwind.css'te [] köşeli parantezli (arbitrary value)
   Tailwind sınıflarının HİÇBİRİ üretilmemiş — sadece brand-navy/green
   opaklık varyantları değil, aspect-[], h-[], rounded-[var(--radius)],
   backdrop-blur-[], bg-[#hex] gibi TÜM bracket sözdizimi etkilenmiş.
   Somut etkisi: hero slider bölümünün sabit yüksekliği (h-[560px]/
   sm:h-[620px]) hiç uygulanmadığı için section'ın yüksekliği
   çöküyordu — içindeki position:absolute slaytlar da böylece
   görünüp neredeyse anında kayboluyormuş gibi render oluyordu
   ("resimler geliyor, hemen ardından kararıp kayboluyor"). Aynı
   sebeple: kartların/butonların yuvarlak köşeleri (rounded-[var(--radius)])
   hiç yoktu, WhatsApp balonu renksizdi (bg-[#25D366]), lightbox arka
   planı kararmıyordu (bg-black/90), galeri/hakkımızda/iletişim
   görselleri en-boy oranını (aspect-[...]) hiç uygulamadığı için
   ham/orantısız boyutta render oluyor, mobil menü arka planı
   bulanıklaşmıyordu (backdrop-blur-[2px]). Aşağıda her biri Tailwind'in
   ürettiği yapıyı birebir taklit eden düz CSS kuralı olarak elle
   tanımlanmıştır — mevcut HTML'e hiç dokunulmadan çalışır. */
.aspect-\[16\/10\] { aspect-ratio: 16/10; }
.aspect-\[3\/4\] { aspect-ratio: 3/4; }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }
.aspect-\[4\/5\] { aspect-ratio: 4/5; }
.backdrop-blur-\[2px\] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.bg-\[\#25D366\] { background-color: #25D366; }
.bg-black\/90 { background-color: rgb(0 0 0 / 0.9); }
.border-black\/10 { border-color: rgb(0 0 0 / 0.1); }
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
.bg-white\/95 { background-color: rgb(255 255 255 / 0.95); }
.border-white\/10 { border-color: rgb(255 255 255 / 0.1); }
.border-white\/15 { border-color: rgb(255 255 255 / 0.15); }
.border-white\/30 { border-color: rgb(255 255 255 / 0.3); }
.text-white\/70 { color: rgb(255 255 255 / 0.7); }
.text-white\/85 { color: rgb(255 255 255 / 0.85); }
@media (hover: hover) {
  .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); }
  .hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); }
}
.h-\[560px\] { height: 560px; }
.min-h-\[420px\] { min-height: 420px; }
.min-h-\[8rem\] { min-height: 8rem; }
.rounded-\[var\(--radius\)\] { border-radius: var(--radius); }
.text-\[11px\] { font-size: 11px; }
.z-\[200\] { z-index: 200; }
@media (min-width: 640px) {
  .sm\:h-\[620px\] { height: 620px; }
}

/* Ücretlendirme (Demo) sayfası için eklenen, orijinal Next.js
   kaynağında hiç kullanılmadığı için statik derlemede üretilmemiş
   standart (arbitrary olmayan) Tailwind sınıfları — aynı "grep ile
   bul, elle karşılığını yaz" deseni. */
.top-3 { top: 0.75rem; }
.-top-3 { top: -0.75rem; }
.right-0 { right: 0px; }
.left-8 { left: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.h-9 { height: 2.25rem; }
.w-9 { width: 2.25rem; }
.line-through { text-decoration-line: line-through; }
.items-baseline { align-items: baseline; }
.rounded-bl-lg { border-bottom-left-radius: 0.5rem; }
.rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
/* Kartın kendi köşe yarıçapıyla (temaya göre değişen --radius) birebir
   eşleşen köşe — kartın üst-sağ köşesine yaslanan rozetin dış köşesi
   kartın kendi kavisinden taşmasın diye. */
.rounded-tr-\[var\(--radius\)\] { border-top-right-radius: var(--radius); }
/* position:relative ebeveynde absolute konumlanan öğe, kenarlığı
   (border) DEĞİL, padding kutusunu referans alır — bu yüzden top-0/
   right-0 rozeti kenarlığın 1-2px İÇİNE yerleştirir, dışarıda ince bir
   boşluk bırakır. Rozeti kenarlığın kendi kalınlığı kadar dışarı
   taşıyarak bu boşluğu kapatıyoruz. */
.-top-px { top: -1px; }
.-right-px { right: -1px; }
.-top-0\.5 { top: -0.125rem; }
.-right-0\.5 { right: -0.125rem; }

/* next/font/google'ın (layout.tsx + fonts.ts) her fontu otomatik olarak
   bir --font-* CSS değişkenine bağlamasının PHP karşılığı. includes/fonts.php
   aynı Google Fonts ailelerini <link> ile yüklüyor ama tarayıcı bu isimlere
   ancak bu değişkenler tanımlıysa erişebilir — tanımsız kalırsa theme.php'deki
   var(--font-...) referansları sessizce tarayıcı varsayılan fontuna düşer. */
:root {
  --font-geist-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-playfair: 'Playfair Display', Georgia, serif;
  --font-lora: 'Lora', Georgia, serif;
  --font-quicksand: 'Quicksand', ui-sans-serif, sans-serif;
  --font-space-grotesk: 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-barlow-condensed: 'Barlow Condensed', ui-sans-serif, sans-serif;
  --font-cinzel: 'Cinzel', Georgia, serif;
  --font-libre-franklin: 'Libre Franklin', ui-sans-serif, sans-serif;
}

/* navigation-progress.tsx + brand-loader.tsx'in (sayfalar arası geçişte
   logo gösteren tam ekran yükleme animasyonu) vanilla JS/CSS karşılığı.
   PHP'de client-side router olmadığı için gerçek sayfa geçişi (tarayıcı
   navigasyonu) kullanılır — bu overlay, tıklama anında gösterilip yeni
   sayfa yüklendiğinde kaldırılır (bkz. public/js/page-loader.js). */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-navy);
  transition: opacity 0.3s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.page-loader-ring {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 3px solid color-mix(in oklab, white 15%, transparent);
  border-top-color: var(--brand-green);
  border-right-color: var(--brand-green);
  animation: page-loader-spin 0.85s linear infinite;
}
.page-loader img {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
  animation: page-loader-pulse 1.1s ease-in-out infinite;
}
@keyframes page-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.9); opacity: 0.75; }
}
@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

.hero-slide {
  opacity: 0;
  transition: opacity 1s ease;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero-slide img {
  animation: hero-kenburns 7s ease-out forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.lightbox-modal {
  display: none;
}
.lightbox-modal.is-open {
  display: flex;
}

/* Tailwind'in --brand-navy/--brand-green için opaklık varyantlarını
   (from-X/NN, via-X/NN, to-X/NN, bg-X/NN, border-X/NN) statik derlemede
   HİÇ üretmediği görüldü — bu renkler Tailwind tema rengi değil,
   theme.php tarafından her sayfada enjekte edilen çalışma zamanı CSS
   değişkeni, bu yüzden derleme zamanında opaklık sınıfı üretilemiyor.
   Etkilenen yerler: hero slider karartma gradyanı (görsel görünüp
   hemen ardından bozuk/kararmış görünüyordu — gradyan stopları hiç
   tanımlanmamış oluyordu), mobil menü arka planı, galeri lightbox
   hover kararması, iki ince kenarlık. Tailwind'in kendi ürettiği
   yapıyı burada elle, color-mix() ile karşılıyoruz. */
.hero-darkness-acik {
  background-image: linear-gradient(to right,
    color-mix(in oklab, var(--brand-navy) 70%, transparent),
    color-mix(in oklab, var(--brand-navy) 50%, transparent),
    color-mix(in oklab, var(--brand-navy) 20%, transparent));
}
.hero-darkness-orta {
  background-image: linear-gradient(to right,
    var(--brand-navy),
    color-mix(in oklab, var(--brand-navy) 85%, transparent),
    color-mix(in oklab, var(--brand-navy) 50%, transparent));
}
.hero-darkness-koyu {
  background-image: linear-gradient(to right,
    var(--brand-navy),
    color-mix(in oklab, var(--brand-navy) 95%, transparent),
    color-mix(in oklab, var(--brand-navy) 75%, transparent));
}
.bg-brand-navy\/0 { background-color: color-mix(in oklab, var(--brand-navy) 0%, transparent); }
.bg-brand-navy\/40 { background-color: color-mix(in oklab, var(--brand-navy) 40%, transparent); }
.border-brand-green\/10 { border-color: color-mix(in oklab, var(--brand-green) 10%, transparent); }
.border-brand-green\/20 { border-color: color-mix(in oklab, var(--brand-green) 20%, transparent); }
@media (hover: hover) {
  .group-hover\:bg-brand-navy\/40:is(:where(.group):hover *) {
    background-color: color-mix(in oklab, var(--brand-navy) 40%, transparent);
  }
}