/* ============================================================
   OS Yazılım — Tema katmanı
   data-theme: corporate | midnight | ocean | sunset | forest | royal | custom
   ============================================================ */

/* --- Ortak tema yüzeyleri --- */
.header { background: var(--header-bg); }
.footer { background: var(--footer-bg); }
.stat { background: var(--input-bg); }
.device-screen { background: linear-gradient(180deg, var(--surface), var(--bg)); }
.search input, .form input, .form textarea, .form select { background: var(--input-bg); }
.orb-a { background: var(--accent); }
.orb-b { background: var(--accent-2); }
.card:hover { border-color: var(--accent-border); }
.icon-blob { background: var(--accent-soft); }
.badge { background: var(--gold-soft, var(--accent-soft)); color: var(--accent-3, var(--accent)); }
.btn-primary { color: var(--btn-text); box-shadow: 0 8px 28px var(--accent-glow); }
.chip.active, .chip:hover { color: var(--btn-text); }
.pkg-badge { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--btn-text); }
.pkg.popular { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-soft); }
.cta-banner {
  background:
    linear-gradient(135deg, var(--accent-soft), rgba(45,212,191,.08)),
    var(--bg-elevated, #ffffff);
}
body {
  background:
    radial-gradient(1400px 800px at 5% -5%, var(--gradient-a), transparent 48%),
    radial-gradient(1000px 700px at 100% 5%, var(--gradient-b), transparent 44%),
    var(--bg);
}

/* --- Blog modülü --- */
.blog-hero { position: relative; padding-bottom: 12px; }
.blog-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .45;
}
.blog-card { position: relative; overflow: hidden; }
.blog-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3, var(--accent-2)));
  opacity: .95;
  z-index: 4;
}
.blog-card .blog-date {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--gold-soft, var(--accent-soft));
  color: var(--accent-3, var(--accent));
}
.blog-article {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.blog-article .blog-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* --- Modül kartları --- */
.module-card { position: relative; }
.module-card .module-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* --- Paket kartları --- */
.pkg-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--card);
  transition: .25s transform, .25s border-color, .25s box-shadow;
}
.pkg-card:hover { transform: translateY(-3px); border-color: var(--accent-border); }
.pkg-card.is-popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 20px 50px var(--accent-glow);
}
.pkg-card.is-popular::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-soft), transparent 55%);
  pointer-events: none;
}

.footer-title {
  color: var(--text);
  display: block;
  margin-bottom: 12px;
  font-weight: 800;
}

/* ============================================================
   TEMA: CORPORATE — OS Logo Mavi (varsayılan)
   ============================================================ */
[data-theme="corporate"] .header {
  border-bottom: 1px solid rgba(0, 180, 255, .22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
}
[data-theme="corporate"] .topbar {
  background: linear-gradient(90deg, rgba(0, 120, 255, .18), transparent 72%);
}
[data-theme="corporate"] .topbar a:hover { color: var(--accent-3); }
[data-theme="corporate"] .footer {
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(0, 120, 255, .22), transparent),
    radial-gradient(700px 240px at 85% 100%, rgba(0, 180, 255, .12), transparent),
    var(--footer-bg);
  border-top: 1px solid rgba(0, 180, 255, .18);
}
[data-theme="corporate"] .section-band {
  background: var(--bg-2);
}
[data-theme="corporate"] .section-band--elevated {
  background: linear-gradient(180deg, #ffffff, var(--bg-2));
}
[data-theme="corporate"] .stats-bar {
  background: linear-gradient(135deg, #ffffff, var(--accent-soft), var(--bg-2));
  border-color: var(--accent-border);
}
[data-theme="corporate"] .nav a.active {
  color: var(--accent-3);
  background: rgba(0, 120, 255, .18);
}
[data-theme="corporate"] .step {
  background: #ffffff;
  border-left: 3px solid transparent;
}
[data-theme="corporate"] .step:hover {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
[data-theme="corporate"] .cta-banner {
  border-color: var(--accent-border);
}
[data-theme="corporate"] .blog-card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
[data-theme="corporate"] .hero::after {
  background-image:
    linear-gradient(rgba(0,120,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,255,.05) 1px, transparent 1px);
}
[data-theme="corporate"] .marquee-wrap {
  background: var(--bg-2);
}
[data-theme="corporate"] .chip.active,
[data-theme="corporate"] .chip:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
[data-theme="corporate"] .brand-logo-box--backdrop {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(0, 180, 255, .25);
  box-shadow: none;
}
[data-theme="corporate"] .pkg-content {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
[data-theme="corporate"] .pkg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
[data-theme="corporate"] .pkg-content th,
[data-theme="corporate"] .pkg-content td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}

/* ============================================================
   TEMA: OCEAN
   ============================================================ */
[data-theme="ocean"] .header {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
[data-theme="ocean"] .topbar {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}
[data-theme="ocean"] .footer {
  background:
    radial-gradient(600px 200px at 50% 0%, var(--accent-soft), transparent),
    linear-gradient(180deg, var(--bg), var(--footer-bg));
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="ocean"] .blog-card::before { height: 4px; }
[data-theme="ocean"] .pkg-card.is-popular { border-width: 2px; }
[data-theme="ocean"] .module-card { border-top: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
[data-theme="ocean"] .nav a.active { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   TEMA: SUNSET
   ============================================================ */
[data-theme="sunset"] .header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, var(--header-bg)), var(--header-bg));
}
[data-theme="sunset"] .brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px var(--accent-glow);
}
[data-theme="sunset"] .footer {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 8%, var(--footer-bg)));
}
[data-theme="sunset"] .blog-card { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
[data-theme="sunset"] .blog-card::before {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  height: 4px;
}
[data-theme="sunset"] .pkg-card.is-popular {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--card));
}
[data-theme="sunset"] .step {
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
[data-theme="sunset"] .cta-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 15%, transparent)), var(--input-bg);
}

/* ============================================================
   TEMA: FOREST
   ============================================================ */
[data-theme="forest"] .header { border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="forest"] .footer {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, var(--accent-soft), transparent),
    var(--footer-bg);
}
[data-theme="forest"] .module-card .module-icon {
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
}
[data-theme="forest"] .blog-card::before {
  background: linear-gradient(180deg, var(--accent), transparent);
  height: 100%;
  width: 4px;
  right: auto;
}
[data-theme="forest"] .pkg-card { border-radius: 28px 28px 18px 18px; }
[data-theme="forest"] .card { border-radius: 20px; }
[data-theme="forest"] .hero-meta b { color: var(--accent); }

/* ============================================================
   TEMA: ROYAL
   ============================================================ */
[data-theme="royal"] .header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 15%, var(--header-bg)), var(--header-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
}
[data-theme="royal"] .brand-mark {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: var(--btn-text);
}
[data-theme="royal"] .footer {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 10%, var(--footer-bg))),
    var(--footer-bg);
  border-top: 1px solid color-mix(in srgb, var(--accent-3) 20%, transparent);
}
[data-theme="royal"] .blog-article {
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, var(--line));
  box-shadow: inset 0 1px 0 var(--accent-soft);
}
[data-theme="royal"] .blog-card::before {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
}
[data-theme="royal"] .pkg-card.is-popular { border: 2px solid var(--accent-3); }
[data-theme="royal"] .pkg-badge {
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
}
[data-theme="royal"] .nav a.active {
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
}

/* ============================================================
   TEMA: MIDNIGHT
   ============================================================ */
[data-theme="midnight"] .footer {
  background: linear-gradient(180deg, transparent, var(--footer-bg));
}
[data-theme="midnight"] .blog-card::before { opacity: .7; }

/* ============================================================
   TEMA: CUSTOM
   ============================================================ */
[data-theme="custom"] .header,
[data-theme="custom"] .footer,
[data-theme="custom"] .blog-card,
[data-theme="custom"] .pkg-card {
  transition: background .3s ease, border-color .3s ease;
}

@media (max-width: 960px) {
  .header.nav-open .nav, .header.nav-open .header-cta {
    background: var(--header-bg);
  }
}