/* =========================================================
   Kalkan Teknik — Özel CSS Değişkenleri ve Yardımcı Stiller
   Tailwind CDN ile birlikte kullanılır.
   ========================================================= */

:root {
  --radius: 0.625rem;

  /* Renkler */
  --background:         oklch(100% 0 0);
  --foreground:         oklch(18% .03 260);
  --card:               oklch(100% 0 0);
  --card-foreground:    oklch(18% .03 260);
  --primary:            oklch(24% .05 260);
  --primary-foreground: oklch(98.5% .005 250);
  --primary-hover:      oklch(30% .055 260);
  --secondary:          oklch(97% .008 250);
  --muted:              oklch(97% .008 250);
  --muted-foreground:   oklch(52% .02 260);
  --accent:             oklch(72% .17 55);
  --accent-foreground:  oklch(18% .03 260);
  --accent-hover:       oklch(68% .18 50);
  --border:             oklch(92% .01 255);
  --input:              oklch(92% .01 255);
  --surface-soft:       oklch(98.5% .005 250);

  /* Gradyanlar */
  --gradient-hero:
    radial-gradient(1200px 600px at 90% -10%, oklch(72% .17 55 / .12), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, oklch(55% .1 250 / .1), transparent 60%),
    linear-gradient(180deg, oklch(99% .006 250) 0%, oklch(95% .015 245) 100%);
  --gradient-brand:
    linear-gradient(135deg, oklch(20% .05 260) 0%, oklch(30% .06 255) 55%, oklch(24% .05 260) 100%);
  --gradient-accent:
    linear-gradient(135deg, oklch(75% .17 60) 0%, oklch(66% .19 45) 100%);

  /* Gölgeler */
  --shadow-soft:
    0 1px 2px oklch(24% .05 260 / .06),
    0 8px 24px oklch(24% .05 260 / .06);
  --shadow-elevated:
    0 4px 12px oklch(24% .05 260 / .08),
    0 20px 40px oklch(24% .05 260 / .1);
  --shadow-cta:
    0 8px 20px oklch(72% .17 55 / .35);
}

/* ---- Tailwind renk değişkeni köprüleri ---- */
.bg-background    { background-color: var(--background); }
.bg-card          { background-color: var(--card); }
.bg-secondary     { background-color: var(--secondary); }
.bg-muted         { background-color: var(--muted); }
.bg-accent        { background-color: var(--accent); }
.bg-surface-soft  { background-color: var(--surface-soft); }
.bg-primary       { background-color: var(--primary); }

.text-foreground       { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent           { color: var(--accent); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-accent-foreground  { color: var(--accent-foreground); }

.border-border { border-color: var(--border); }
.border-input  { border-color: var(--input); }

.bg-gradient-brand  { background: var(--gradient-brand); }
.bg-gradient-hero   { background: var(--gradient-hero); }
.bg-gradient-accent { background: var(--gradient-accent); }

.shadow-soft     { box-shadow: var(--shadow-soft); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.shadow-cta      { box-shadow: var(--shadow-cta); }

/* ---- Marquee animasyonu ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 28s linear infinite;
  will-change: transform;
}

/* ---- Fade-up animasyonu ---- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fade-up 0.5s ease both;
}

/* ---- Details/summary ok animasyonu ---- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.25s ease; }

/* ---- Hover kart çizgisi ---- */
.card-accent-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.card-accent-line:hover::after { transform: scaleX(1); }

/* ---- Mobil nav overlay ---- */
#mobile-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobile-menu.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* ---- Form input focus ---- */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Genel ---- */
html { scroll-behavior: smooth; }
body { background-color: var(--background); color: var(--foreground); }