/* ============================================
   GAZİ KAHRAMAN DONDURMA — TEMA DEĞİŞKENLERİ
   ============================================ */

:root {
  --color-primary:      #1B5FA8;
  --color-primary-dark: #0D3D6E;
  --color-gold:         #C9A84C;
  --color-gold-dark:    #A68A3D;
  --color-bg:           #F7F9FC;
  --color-text:         #333333;
  --color-text-light:   #666666;
  --color-white:        #FFFFFF;

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Lato', sans-serif;

  --transition-default: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow:    all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 4px 24px rgba(13, 61, 110, 0.08);
  --shadow-hover: 0 8px 32px rgba(13, 61, 110, 0.16);
  --radius-card: 1rem;
}

/* BASE */
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
}

/* BUTON */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: var(--color-gold);
  color: var(--color-white);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-family: var(--font-heading);
  transition: var(--transition-default);
  z-index: 1;
}
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-gold:hover::before { transform: translateX(0); }

.btn-outline {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: var(--transition-default);
}
.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-primary-dark);
}

.btn-dark {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  z-index: 1;
  transition: var(--transition-default);
}
.btn-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-dark:hover::before { transform: translateX(0); }

/* HIGHLIGHT UNDERLINE (Hyper-Elegant Spray & Brush) */
.highlight-underline {
  position: relative;
  display: inline-block;
}
.highlight-underline svg {
  position: absolute;
  bottom: -8px;
  left: -2%;
  width: 104%;
  height: 20px;
  overflow: visible;
  pointer-events: none;
}
.highlight-underline path {
  stroke: #C9A84C !important;
  fill: none;
  stroke-linecap: round;
}
.highlight-underline path.main {
  stroke-width: 2;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.highlight-underline path.spray {
  stroke-width: 4;
  opacity: 0.4;
  stroke-dasharray: 1 8;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: spray-drift 3s infinite alternate ease-in-out;
}
.highlight-underline path.glimmer {
  stroke-width: 1.5;
  opacity: 0.6;
  stroke-dasharray: 2 15;
  stroke-dashoffset: 0;
  animation: spray-twinkle 1.5s infinite alternate ease-in-out;
}

@keyframes spray-drift {
  0% { transform: translateY(0); opacity: 0.3; }
  100% { transform: translateY(1.5px); opacity: 0.5; }
}
@keyframes spray-twinkle {
  0% { opacity: 0.2; stroke-width: 1; }
  100% { opacity: 0.8; stroke-width: 2.5; }
}

.highlight-underline.animated path.main {
  stroke-dashoffset: 0;
}
.highlight-underline.animated path.spray,
.highlight-underline.animated path.glimmer {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Pure Spray (No solid line) */
.pure-spray path.main { display: none; }
.pure-spray path.spray { stroke-width: 8; stroke-dasharray: 0.5 6; }

/* SCROLL ANIMASYONLARI */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes expandLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.reveal-up    { opacity: 0; }
.reveal-left  { opacity: 0; }
.reveal-right { opacity: 0; }

.reveal-up.animated    { animation: revealUp    0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.reveal-left.animated  { animation: revealLeft  0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.reveal-right.animated { animation: revealRight 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* KART */
.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition-default);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* ROZET */
.badge {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-primary-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

/* CAM KART (glass morphism) */
.glass-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-card);
  transition: var(--transition-default);
}
.glass-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
}

/* SECTION ETIKET */
.section-label {
  display: block;
  color: var(--color-gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  margin-bottom: 0.75rem;
}

/* ALTIN ÇİZGİ ACCENT */
.gold-line {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  transform-origin: left;
  animation: expandLine 0.8s 0.3s ease forwards;
  transform: scaleX(0);
}

/* NOKTA DESEN ARKA PLAN */
.dot-pattern {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255,255,255,0.08) 1px,
    transparent 0
  );
  background-size: 24px 24px;
}

/* FILL FROM LEFT */
.fill-from-left {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.fill-from-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-primary-dark);
  z-index: -1;
  transition: width 300ms ease;
}

/* USER CUSTOM CREATIVE EFFECTS */

/* Weave Effect (High Contrast Primary) */
.creative-weave {
  background-image: 
    repeating-linear-gradient(135deg, var(--color-primary-dark) 0px, var(--color-primary-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(45deg, var(--color-primary) 0px, var(--color-primary) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(135deg, var(--color-gold) 0px, var(--color-gold) 5px, var(--color-gold-dark) 5px, var(--color-gold-dark) 10px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800; /* Legibility boost */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Rainbow Energetic Effect (Blue/Gold Tones) */
.creative-rainbow {
  background-image: repeating-linear-gradient(135deg, 
    #1B5FA8 0px, #1B5FA8 14px,
    #0D3D6E 14px, #0D3D6E 28px,
    #C9A84C 28px, #C9A84C 42px,
    #A8873A 42px, #A8873A 56px,
    #F7F9FC 56px, #F7F9FC 70px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bouncey Line Animation */
.underline-bounce {
  position: relative;
  display: inline-block;
}

.underline-bounce:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 50%;
  height: 4px;
  background: var(--color-gold);
  border-radius: 4px;
  transform-origin: left center;
  animation: bouncey-line 1.5s ease-in-out infinite alternate;
}

@keyframes bouncey-line {
  0% { transform: translateX(50vw) scaleX(3); opacity: 0; }
  60% { transform: translateX(0) scaleX(0.4); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Delay helpers for animations */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }