/* ================================================================
   CEZBEHANE - ANA CSS
   Tema: Altın Sarısı + Koyu Yeşil + Beyaz
   2033 Ultra Modern Tasavvufi Tasarım
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Scheherazade+New:wght@400;500;600;700&family=Cinzel:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ===== CSS DEĞİŞKENLERİ - 5 TEMA ===== */
:root,
[data-tema="klasik"] {
  --altin: #C9A84C;
  --altin-acik: #E8C97A;
  --altin-koyu: #8B6914;
  --yesil-koyu: #0D2818;
  --yesil: #1A4A28;
  --yesil-orta: #2D6B3F;
  --yesil-acik: #3D8A52;
  --beyaz: #F8F4E8;
  --beyaz2: #EDE8D5;
  --kahve: #1A0E05;
  --kahve2: #2C1A08;
  --kahve3: #3D2510;
  --yazi: #F8F4E8;
  --yazi2: #C9A84C;
  --bg-ana: #0D2818;
  --bg-kart: rgba(26,74,40,0.4);
  --bg-kart2: rgba(13,40,24,0.7);
  --border: rgba(201,168,76,0.25);
  --border-hover: rgba(201,168,76,0.6);
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --radius: 16px;
  --font-ana: 'Amiri', serif;
  --font-baslik: 'Scheherazade New', serif;
  --font-deco: 'Cinzel', serif;
}

[data-tema="gece"] {
  --altin: #FFD700;
  --altin-acik: #FFE55C;
  --altin-koyu: #B8860B;
  --yesil-koyu: #050F0A;
  --yesil: #0A1F14;
  --yesil-orta: #142D1E;
  --yesil-acik: #1E3D28;
  --beyaz: #E8F4E8;
  --bg-ana: #050F0A;
  --bg-kart: rgba(10,31,20,0.6);
  --bg-kart2: rgba(5,15,10,0.85);
}

[data-tema="sedef"] {
  --altin: #C9A84C;
  --altin-acik: #E8D5A0;
  --yesil-koyu: #1A2B1A;
  --yesil: #243824;
  --bg-ana: #1A2B1A;
  --bg-kart: rgba(36,56,36,0.5);
  --beyaz: #F5F0FF;
}

[data-tema="sahara"] {
  --altin: #E8A020;
  --altin-acik: #F5C040;
  --altin-koyu: #A06010;
  --yesil-koyu: #1F1408;
  --yesil: #2E1C08;
  --yesil-orta: #4A2E0A;
  --bg-ana: #1F1408;
  --bg-kart: rgba(46,28,8,0.5);
  --beyaz: #FFF8E8;
}

[data-tema="lazuli"] {
  --altin: #C9A84C;
  --altin-acik: #E8C97A;
  --yesil-koyu: #0A1428;
  --yesil: #0F1F3D;
  --yesil-orta: #1A3060;
  --bg-ana: #0A1428;
  --bg-kart: rgba(15,31,61,0.5);
  --beyaz: #E8F0FF;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-ana);
  background: var(--bg-ana);
  color: var(--yazi);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* ===== ARKA PLAN DESENİ ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(201,168,76,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(45,107,63,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(13,40,24,0.3) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.03'%3E%3Cpath d='M40 0L80 40L40 80L0 40z M40 10L70 40L40 70L10 40z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ===== LOADER - SEMAZEN ===== */
#czb-loader {
  position: fixed;
  inset: 0;
  background: var(--yesil-koyu);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#czb-loader.gizle { opacity:0; visibility:hidden; }

#semazen-canvas {
  width: 200px;
  height: 200px;
}

.loader-logo {
  font-family: var(--font-baslik);
  font-size: 2rem;
  color: var(--altin);
  margin-top: 1rem;
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(201,168,76,0.5);
  animation: loaderPulse 1.5s ease-in-out infinite;
}
.loader-ar {
  font-family: var(--font-baslik);
  font-size: 1.1rem;
  color: rgba(201,168,76,0.6);
  margin-top: 0.3rem;
  direction: rtl;
}
@keyframes loaderPulse {
  0%,100% { opacity:0.7; }
  50% { opacity:1; text-shadow: 0 0 50px rgba(201,168,76,0.8); }
}

/* ===== HEADER ===== */
#czb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: all 0.4s ease;
}
.header-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--yesil-koyu) 0%, rgba(13,40,24,0.95) 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#czb-header.scrolled .header-bg {
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
  border-bottom-color: rgba(201,168,76,0.4);
}

.header-inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-hilal {
  font-size: 1.8rem;
  color: var(--altin);
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.5));
  animation: hilalDon 20s linear infinite;
}
@keyframes hilalDon {
  0% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(201,168,76,0.9)); }
  100% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.5)); }
}
.logo-yazi { display:flex; flex-direction:column; }
.logo-ana { font-family: var(--font-deco); font-size:1.2rem; color:var(--altin); letter-spacing:3px; line-height:1.1; }
.logo-ar { font-family: var(--font-baslik); font-size:0.8rem; color:rgba(201,168,76,0.6); direction:rtl; }

.header-nav {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}
.nav-link {
  color: rgba(248,244,232,0.7);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.25s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.aktif {
  color: var(--altin);
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.2);
}

.header-sag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 0.5rem;
}

.btn-giris {
  background: linear-gradient(135deg, var(--altin-koyu), var(--altin));
  color: var(--kahve);
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-deco);
  letter-spacing: 1px;
  transition: all 0.3s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-giris:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,168,76,0.4);
}

.menu-toggle {
  display: none;
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--border);
  color: var(--altin);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
}

/* Mobil Menü */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--yesil-koyu);
  border-top: 1px solid var(--border);
  padding: 0.8rem;
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 999;
}
.mobile-menu.acik { display: flex; }
.mobile-menu .nav-link {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(201,168,76,0.1);
  border-radius: 0;
  font-size: 1rem;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.hero-desen {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(201,168,76,0.03) 0px, rgba(201,168,76,0.03) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(201,168,76,0.03) 0px, rgba(201,168,76,0.03) 1px, transparent 1px, transparent 60px);
}
.hero-icerik { position:relative; z-index:1; max-width:900px; }
.hero-bismillah {
  font-family: var(--font-baslik);
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--altin);
  opacity: 0.85;
  margin-bottom: 1rem;
  direction: rtl;
  animation: fadeInDown 1s ease 0.2s both;
  text-shadow: 0 0 30px rgba(201,168,76,0.4);
}
.hero-baslik {
  font-family: var(--font-deco);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: var(--altin);
  letter-spacing: 6px;
  font-weight: 700;
  text-shadow: 0 0 60px rgba(201,168,76,0.3);
  animation: fadeInDown 1s ease 0.4s both;
  line-height: 1.1;
}
.hero-alt {
  font-family: var(--font-baslik);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: rgba(248,244,232,0.8);
  margin: 0.5rem 0;
  animation: fadeInDown 1s ease 0.6s both;
}
.hero-arabca {
  font-family: var(--font-baslik);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: rgba(201,168,76,0.6);
  direction: rtl;
  margin: 0.5rem 0 1.5rem;
  animation: fadeInDown 1s ease 0.7s both;
}
.hero-ayrac {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  animation: fadeIn 1s ease 0.8s both;
}
.hero-ayrac span {
  color: var(--altin);
  font-size: 1.2rem;
  animation: parlat 2s ease-in-out infinite;
}
.hero-ayrac span:nth-child(2) { animation-delay: 0.3s; }
.hero-ayrac span:nth-child(3) { animation-delay: 0.6s; }
@keyframes parlat { 0%,100%{opacity:0.4;} 50%{opacity:1;} }

.hero-aciklama {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: rgba(248,244,232,0.7);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.9;
  animation: fadeInUp 1s ease 0.9s both;
}
.asagi-ok {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--altin);
  font-size: 1.5rem;
  animation: asagiInip 2s ease-in-out infinite;
}
@keyframes asagiInip {
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(10px);}
}

/* ===== SECTION HEADER ===== */
.bolum-baslik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.bolum-baslik h2 {
  font-family: var(--font-deco);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--altin);
  letter-spacing: 3px;
}
.bolum-sut {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  max-width: 150px;
}

/* ===== ANA BUTONLAR ===== */
.ana-butonlar {
  padding: 4rem 1.5rem;
  background: linear-gradient(180deg, var(--yesil-koyu) 0%, var(--yesil) 50%, var(--yesil-koyu) 100%);
}
.butonlar-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

.ana-btn {
  display: block;
  text-decoration: none;
  background: var(--bg-kart);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.ana-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--altin), transparent);
  transform: scaleX(0);
  transition: transform 0.4s;
}
.ana-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,168,76,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.ana-btn:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(201,168,76,0.1);
}
.ana-btn:hover::before { transform: scaleX(1); }
.ana-btn:hover::after { opacity: 1; }

.btn-ikon { font-size: 2rem; margin-bottom: 0.6rem; display: block; }
.btn-ar {
  font-family: var(--font-baslik);
  font-size: 0.85rem;
  color: rgba(201,168,76,0.55);
  direction: rtl;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.btn-baslik { font-size: 1.05rem; font-weight: 700; color: var(--altin); margin-bottom: 0.4rem; line-height: 1.3; }
.btn-aciklama { font-size: 0.82rem; color: rgba(248,244,232,0.6); line-height: 1.5; }
.btn-ok {
  position: absolute;
  bottom: 1rem; right: 1.2rem;
  color: rgba(201,168,76,0.4);
  font-size: 1.2rem;
  transition: all 0.3s;
}
.ana-btn:hover .btn-ok { color: var(--altin); transform: translateX(-4px); }

/* ===== HADİS BÖLÜMÜ ===== */
.hadis-bolum {
  padding: 3.5rem 1.5rem;
  background: linear-gradient(135deg, var(--yesil-koyu) 0%, rgba(26,74,40,0.3) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
}
.hadis-sut { font-family: var(--font-baslik); font-size: 1.2rem; color: var(--altin); opacity: 0.6; letter-spacing: 0.5rem; margin: 0.8rem 0; }
.hadis-kutu { max-width: 750px; margin: 0 auto; padding: 1.5rem; }
.hadis-arabca { font-family: var(--font-baslik); font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--altin); direction: rtl; margin-bottom: 1rem; line-height: 1.9; text-shadow: 0 0 20px rgba(201,168,76,0.3); }
.hadis-turkce { font-size: 1.1rem; color: var(--beyaz); font-style: italic; margin-bottom: 0.5rem; line-height: 1.7; }
.hadis-kaynak { font-size: 0.85rem; color: rgba(201,168,76,0.6); }

/* ===== SON EKLENENLER ===== */
.son-eklenenler { padding: 4rem 1.5rem; }
.son-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.son-kart {
  background: var(--bg-kart);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  text-decoration: none;
  color: var(--yazi);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}
.son-kart:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.son-kart-ikon { font-size: 1.4rem; }
.son-kart-etiket { font-size: 0.7rem; color: var(--altin); text-transform: uppercase; letter-spacing: 2px; }
.son-kart-baslik { font-size: 0.95rem; font-weight: 700; }

/* ===== DUYURULAR ===== */
.duyurular-bolum { padding: 3rem 1.5rem; }
.duyuru-kart {
  background: linear-gradient(135deg, rgba(26,74,40,0.5), rgba(13,40,24,0.7));
  border: 1px solid rgba(201,168,76,0.3);
  border-left: 4px solid var(--altin);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.duyuru-tarih { font-size: 0.75rem; color: rgba(201,168,76,0.6); margin-bottom: 0.3rem; }
.duyuru-baslik { font-size: 1.05rem; font-weight: 700; color: var(--altin); margin-bottom: 0.4rem; }
.duyuru-icerik { font-size: 0.9rem; color: rgba(248,244,232,0.8); line-height: 1.7; }
.duyuru-yeni {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  background: var(--altin);
  color: var(--kahve);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: 1px;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--yesil-koyu);
  border-top: 2px solid var(--border);
  padding: 3rem 1.5rem 1.5rem;
  text-align: center;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-logo { font-family: var(--font-deco); font-size: 1.4rem; color: var(--altin); margin-bottom: 1.2rem; }
.footer-logo-ar { font-family: var(--font-baslik); font-size: 0.9rem; color: rgba(201,168,76,0.5); margin-top: 0.2rem; }
.footer-linkler { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; margin-bottom: 2rem; }
.footer-linkler a { color: rgba(248,244,232,0.6); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-linkler a:hover { color: var(--altin); }
.footer-alt { border-top: 1px solid var(--border); padding-top: 1.2rem; }
.footer-alt p { color: rgba(248,244,232,0.4); font-size: 0.8rem; margin-bottom: 0.4rem; }
.footer-dua { font-family: var(--font-baslik); font-size: 0.95rem; color: rgba(201,168,76,0.5); }

/* ===== ORTAK KARTLAR & FORMLAR ===== */
.sayfa-hero {
  padding: 7rem 1.5rem 3rem;
  background: radial-gradient(ellipse at center, var(--yesil) 0%, var(--yesil-koyu) 70%);
  text-align: center;
  border-bottom: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sayfa-hero-desen {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(201,168,76,0.02) 0, rgba(201,168,76,0.02) 1px, transparent 1px, transparent 80px);
}
.sayfa-hero h1 { font-family: var(--font-deco); font-size: clamp(1.8rem, 5vw, 3rem); color: var(--altin); position: relative; letter-spacing: 2px; }
.sayfa-hero-ar { font-family: var(--font-baslik); font-size: 1.3rem; color: rgba(201,168,76,0.6); margin-top: 0.4rem; direction: rtl; }

.icerik-alani { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; }

.form-grup { margin-bottom: 1.1rem; }
.form-grup label { display: block; color: var(--altin); font-size: 0.85rem; margin-bottom: 0.4rem; letter-spacing: 0.3px; }
.form-kontrol {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--yazi);
  font-family: var(--font-ana);
  font-size: 0.95rem;
  transition: all 0.25s;
  outline: none;
}
.form-kontrol:focus { border-color: var(--altin); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); }
textarea.form-kontrol { min-height: 100px; resize: vertical; }
select.form-kontrol option { background: var(--yesil-koyu); }

.btn-altin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--altin-koyu), var(--altin));
  color: var(--kahve);
  padding: 0.65rem 1.4rem;
  border-radius: 22px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-deco);
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.btn-altin:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,0.4); }
.btn-altin:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-yesil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--yesil), var(--yesil-acik));
  color: var(--beyaz);
  padding: 0.65rem 1.4rem;
  border-radius: 22px;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(201,168,76,0.3);
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  font-family: var(--font-deco);
}
.btn-yesil:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(45,107,63,0.4); }

.btn-tehlike {
  background: rgba(180,30,30,0.2);
  border: 1px solid rgba(180,30,30,0.4);
  color: #ff9090;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ana);
  font-size: 0.85rem;
  transition: all 0.2s;
}
.btn-tehlike:hover { background: rgba(180,30,30,0.35); }

.bildirim {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.bildirim-hata { background: rgba(180,30,30,0.2); border: 1px solid rgba(180,30,30,0.4); color: #ffb3b3; }
.bildirim-basari { background: rgba(45,107,63,0.2); border: 1px solid rgba(45,107,63,0.4); color: #90ee90; }
.bildirim-bilgi { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); color: var(--altin); }

/* ===== KART ===== */
.kart {
  background: var(--bg-kart);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
}
.kart:hover { border-color: var(--border-hover); }
.kart-baslik { font-family: var(--font-deco); font-size: 1rem; color: var(--altin); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }

/* ===== ANİMASYONLAR ===== */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-25px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(25px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-25px);} to{opacity:1;transform:translateX(0);} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(25px);} to{opacity:1;transform:translateX(0);} }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .header-nav { display: none; }
  .menu-toggle { display: block; }
  .butonlar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .butonlar-grid { grid-template-columns: 1fr; }
  .son-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { padding: 0.6rem 1rem; }
}
@media (max-width: 380px) {
  .son-grid { grid-template-columns: 1fr; }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--yesil-koyu); }
::-webkit-scrollbar-thumb { background: var(--altin-koyu); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--altin); }

/* ===== SEÇİM ===== */
::selection { background: rgba(201,168,76,0.3); color: var(--beyaz); }

/* ===== 5 AÇIK TEMA ===== */
[data-tema="sahil"]{
  --altin:#B8860B;--altin-acik:#DAA520;--altin-koyu:#8B6914;
  --yesil-koyu:#F0F8F0;--yesil:#E8F5E9;--yesil-orta:#C8E6C9;
  --beyaz:#1A1A1A;--kahve:#F5F5F5;--bg:#F0F8F0;--bg2:rgba(200,230,200,0.5);
  --bg3:rgba(220,240,220,0.8);--border:rgba(184,134,11,0.3);--yazi:#1A1A1A;
  --bg-kart:rgba(255,255,255,0.8);
}
[data-tema="inci"]{
  --altin:#C9A84C;--altin-acik:#E8C97A;--altin-koyu:#8B6914;
  --yesil-koyu:#FFF8F0;--yesil:#FFF0E0;--yesil-orta:#FFE4C4;
  --beyaz:#2C1A0A;--kahve:#FFF8F0;--bg:#FFF8F0;--bg2:rgba(255,235,200,0.6);
  --bg3:rgba(255,245,220,0.9);--border:rgba(201,168,76,0.35);--yazi:#2C1A0A;
  --bg-kart:rgba(255,255,255,0.85);
}
[data-tema="gumus"]{
  --altin:#708090;--altin-acik:#A9A9A9;--altin-koyu:#556B7D;
  --yesil-koyu:#F5F5F5;--yesil:#ECECEC;--yesil-orta:#DCDCDC;
  --beyaz:#1C1C1C;--kahve:#F5F5F5;--bg:#F2F2F2;--bg2:rgba(220,220,220,0.5);
  --bg3:rgba(235,235,235,0.9);--border:rgba(112,128,144,0.3);--yazi:#1C1C1C;
  --bg-kart:rgba(255,255,255,0.9);
}
[data-tema="seker"]{
  --altin:#C9A84C;--altin-acik:#E8C97A;--altin-koyu:#8B6914;
  --yesil-koyu:#FDF0F8;--yesil:#FAE8F5;--yesil-orta:#F5D0EC;
  --beyaz:#2C0A20;--kahve:#FDF0F8;--bg:#FDF0F8;--bg2:rgba(245,208,236,0.5);
  --bg3:rgba(250,232,245,0.9);--border:rgba(201,168,76,0.3);--yazi:#2C0A20;
  --bg-kart:rgba(255,255,255,0.85);
}
[data-tema="safak"]{
  --altin:#E8A020;--altin-acik:#F5C040;--altin-koyu:#C07818;
  --yesil-koyu:#FFF5E6;--yesil:#FFF0D0;--yesil-orta:#FFE4A0;
  --beyaz:#2C1800;--kahve:#FFF5E6;--bg:#FFF5E6;--bg2:rgba(255,228,160,0.4);
  --bg3:rgba(255,240,200,0.9);--border:rgba(232,160,32,0.35);--yazi:#2C1800;
  --bg-kart:rgba(255,255,255,0.85);
}

/* ===== POPUP / LIGHTBOX ===== */
.czb-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
.czb-popup-ic{
  position:relative;max-width:95vw;max-height:95vh;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.czb-popup-ic img,.czb-popup-ic video{
  max-width:95vw;max-height:85vh;border-radius:10px;object-fit:contain;
}
.czb-popup-btns{
  display:flex;gap:.8rem;
}
.czb-popup-btn{
  background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);
  color:#C9A84C;padding:.5rem 1.2rem;border-radius:8px;cursor:pointer;
  font-size:.85rem;font-family:serif;transition:all .2s;text-decoration:none;
}
.czb-popup-btn:hover{background:rgba(201,168,76,0.3);}
.czb-popup-kapat{
  position:absolute;top:-40px;right:0;background:rgba(180,30,30,0.5);
  border:none;color:white;width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;
}

/* ===== LOADER GIF ===== */
#czb-loader{
  position:fixed;inset:0;background:var(--yesil-koyu,#0D2818);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:99998;transition:opacity .5s;
}
#czb-loader.gizle{opacity:0;pointer-events:none;}
.czb-loader-gif{width:160px;height:160px;object-fit:contain;}
.czb-loader-yazi{
  color:var(--altin,#C9A84C);font-family:'Cinzel',serif;
  font-size:1.1rem;letter-spacing:3px;margin-top:1rem;
  animation:parlat 1.5s ease-in-out infinite;
}
.czb-loader-alt{
  color:rgba(201,168,76,0.5);font-family:'Scheherazade New',serif;
  font-size:.9rem;margin-top:.3rem;direction:rtl;
}