/* style.css — Turkish Ottoman (Light Mode + Rose Gold) */
:root {
  --bg:#F5EFE0;
  --bg-2:#EFE6D2;
  --surface:#FFFFFF;
  --surface-2:#FAF6EC;
  --border:rgba(201,162,39,.28);
  --border-strong:rgba(139,26,26,.22);
  --border-rose:rgba(183,110,121,.30);
  --border-ghost:rgba(74,63,51,.28);

  --gold:#C9A227;
  --gold-2:#B08C1E;
  --gold-soft:#E0C77A;

  --rose:#C97B84;
  --rose-gold:#B76E79;
  --rose-soft:#E8B4B8;
  --rose-deep:#A04A5A;

  --burgundy:#8B1A1A;
  --burgundy-2:#6E1414;
  --ottoman:#2C4A7C;
  --ottoman-2:#1E3557;

  --text:#1A1A1A;
  --text-dim:#4A3F33;
  --text-mute:#7A6B58;

  --grad:linear-gradient(135deg,#C9A227 0%,#B76E79 48%,#8B1A1A 100%);
  --grad-rose:linear-gradient(135deg,#E8B4B8 0%,#B76E79 50%,#C9A227 100%);
  --grad-soft:linear-gradient(135deg,rgba(201,162,39,.14),rgba(183,110,121,.12));

  --shadow:0 10px 30px rgba(139,26,26,.08);
  --shadow-gold:0 10px 30px rgba(201,162,39,.18);
  --shadow-rose:0 10px 30px rgba(183,110,121,.18);

  --radius:14px;
  --maxw:1200px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  line-height:1.65; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- NAV ---------- */
.nav {
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(245,239,224,.82);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:17px; letter-spacing:.6px;
  color:var(--text); text-decoration:none;
}
.brand-dot {
  width:28px; height:28px; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.brand-dot::before {
  content:''; position:absolute; inset:0;
  background:var(--grad);
  clip-path:polygon(50% 0%,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0% 50%,36% 36%);
}
.brand-dot::after {
  content:''; position:absolute; inset:8px; background:var(--bg);
  clip-path:polygon(50% 0%,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0% 50%,36% 36%);
}
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--text-dim); text-decoration:none; font-size:14px; transition:color .25s; }
.nav-links a:hover { color:var(--rose-deep); }

/* ---------- BADGE ---------- */
.badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.5px;
  background:rgba(201,162,39,.12);
  border:1px solid var(--border);
  color:var(--gold-2);
}
.badge.rose {
  background:rgba(183,110,121,.10);
  border-color:var(--border-rose);
  color:var(--rose-deep);
}
.badge.burgundy {
  background:rgba(139,26,26,.08);
  border-color:var(--border-strong);
  color:var(--burgundy);
}

/* ---------- BUTTON ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:10px;
  font-size:14px; font-weight:600; text-decoration:none;
  cursor:pointer; border:none; transition:all .25s;
}
.btn-primary {
  background:var(--grad); color:#FFFFFF;
  box-shadow:0 8px 24px rgba(139,26,26,.20);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(139,26,26,.32); }
.btn-rose {
  background:var(--grad-rose); color:#FFFFFF;
  box-shadow:0 8px 24px rgba(183,110,121,.25);
}
.btn-rose:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(183,110,121,.40); }
.btn-ghost {
  background:transparent; color:var(--text);
  border:1px solid var(--border-ghost);
}
.btn-ghost:hover { background:rgba(74,63,51,.05); border-color:var(--text-dim); }

/* ---------- HERO ---------- */
.hero { padding:120px 0 80px; text-align:center; position:relative; overflow:hidden; }
.hero h1 {
  font-size:56px; font-weight:800; line-height:1.08;
  margin:22px 0 18px; letter-spacing:-1px; color:var(--text);
}
.hero h1 .grad {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p { font-size:18px; color:var(--text-dim); max-width:640px; margin:0 auto 34px; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- ARCH FRAME ---------- */
.arch-frame {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(760px,92vw); height:min(560px,70vh);
  pointer-events:none; z-index:0; opacity:.60;
}
.hero .container { position:relative; z-index:2; }

/* ---------- DIVIDER ---------- */
.divider {
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:0 auto; max-width:520px;
  color:var(--gold); opacity:.7;
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.divider svg { width:32px; height:32px; }

/* ---------- SECTION ---------- */
.section { padding:80px 0; }
.section-head { text-align:center; margin-bottom:56px; }
.section-head h2 { font-size:36px; font-weight:700; margin:14px 0 12px; letter-spacing:-0.5px; color:var(--text); }
.section-head p { color:var(--text-dim); font-size:16px; max-width:560px; margin:0 auto; }

/* ---------- GRID / CARD ---------- */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
}
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:all .3s;
  position:relative; overflow:hidden;
  box-shadow:0 2px 12px rgba(139,26,26,.04);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad); opacity:0; transition:opacity .3s;
}
.card::after {
  content:''; position:absolute; right:-34px; bottom:-34px;
  width:110px; height:110px; opacity:.14; pointer-events:none;
  background:
    radial-gradient(circle, transparent 42%, var(--rose-gold) 43%, var(--rose-gold) 44%, transparent 45%),
    conic-gradient(from 22.5deg, var(--gold) 0 45deg, transparent 45deg 90deg,
                   var(--gold) 90deg 135deg, transparent 135deg 180deg,
                   var(--gold) 180deg 225deg, transparent 225deg 270deg,
                   var(--gold) 270deg 315deg, transparent 315deg 360deg);
  transform:rotate(22.5deg);
}
.card:hover {
  transform:translateY(-4px);
  border-color:var(--rose-gold);
  box-shadow:var(--shadow-rose);
}
.card:hover::before { opacity:1; }
.card h3 { margin:14px 0 8px; font-size:18px; font-weight:700; color:var(--text); }
.card p { color:var(--text-dim); font-size:14px; margin:0; }

.card-icon {
  width:48px; height:48px; position:relative;
  display:flex; align-items:center; justify-content:center;
  color:var(--burgundy); font-size:20px; font-weight:700;
  background:rgba(201,162,39,.14);
  border-radius:12px;
  border:1px solid var(--border);
}
.card-icon.gold { color:var(--gold-2); background:rgba(201,162,39,.18); }
.card-icon.rose { color:var(--rose-deep); background:rgba(183,110,121,.10); border-color:var(--border-rose); }
.card-icon.burgundy { color:var(--burgundy); background:rgba(139,26,26,.08); border-color:var(--border-strong); }

/* ---------- FOOTER ---------- */
footer {
  padding:60px 0 40px;
  border-top:1px solid var(--border);
  margin-top:80px; color:var(--text-mute); font-size:13px;
  text-align:center;
  background:var(--surface-2);
}
footer a { color:var(--text-dim); text-decoration:none; margin:0 12px; transition:color .25s; }
footer a:hover { color:var(--rose-deep); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px) {
  .hero { padding:70px 0 50px; }
  .hero h1 { font-size:36px; }
  .hero p { font-size:15px; }
  .section { padding:60px 0; }
  .section-head h2 { font-size:26px; }
  .nav-links { display:none; }
  .container { padding:0 18px; }
  .arch-frame { opacity:.35; }
}