/* =========================================================
   BERASOFT City Page CSS (Muğla) — Tailwind'siz çalışır
   Kullanılan sınıflar: bg-dark, glass-card, btn-*, grid,
   md:grid-cols-*, rounded-*, shadow-2xl, hover-scale, vs.
   ========================================================= */

/* --- Design tokens --- */
:root{
  --bg-dark:#0f172a;    /* slate-900 */
  --bg-darker:#0b1022;
  --text:#e5e7eb;       /* gray-200 */
  --text-2:#cbd5e1;     /* gray-300 */
  --muted:#9aa3b2;      /* gray-400/500 */
  --primary:#00e0ff;
  --blue-400:#60a5fa;
  --purple-400:#c084fc;
  --card-border:rgba(0,224,255,.24);
  --radius-xl:16px;
  --radius-2xl:20px;
  --shadow-xl:0 20px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-dark); color:var(--text);
  font-family:"Inter","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* --- Layout helpers (kullandıklarının tamamı) --- */
.container{width:100%; max-width:1200px; margin-inline:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem; padding-right:1rem}
.relative{position:relative} .absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.overflow-hidden{overflow:hidden}
.flex{display:flex} .items-center{align-items:center} .justify-center{justify-content:center}
.text-center{text-align:center}
.space-y-6 > *+*{margin-top:1.5rem}
.gap-4{gap:1rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem}
.order-1{order:1} .order-2{order:2}

.h-\[500px\]{height:500px}
.md\:h-\[600px\]{height:500px}
@media(min-width:768px){.md\:h-\[600px\]{height:600px}}

.py-20{padding-top:5rem;padding-bottom:5rem}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem} .mb-12{margin-bottom:3rem}

/* --- Grid (hafif) --- */
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-2{grid-template-columns:1fr}
.md\:grid-cols-3{grid-template-columns:1fr}
.md\:grid-cols-4{grid-template-columns:1fr}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.max-w-4xl{max-width:56rem} .max-w-5xl{max-width:64rem} .max-w-6xl{max-width:72rem}

/* --- Typography --- */
h1,h2,h3{margin:0 0 .6rem; line-height:1.2; letter-spacing:-.02em}
h1{font-weight:800; font-size:clamp(2rem,2.6vw+1.4rem,3.75rem)}
h2{font-weight:800; font-size:clamp(1.6rem,1.6vw+1.2rem,2.75rem)}
h3{font-weight:700; font-size:1.25rem}
.text-white{color:#fff}
.text-gray-300{color:var(--text-2)}
.text-gray-400{color:var(--muted)}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-4xl{font-size:2.25rem}
.text-5xl{font-size:3rem}
.text-6xl{font-size:3.75rem}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}

/* --- Colors/Gradients --- */
.bg-dark{background:var(--bg-dark)}
.bg-gradient-to-br{background-image:linear-gradient(135deg,var(--bg-darker),rgba(15,23,42,.6))}
.bg-gradient-to-r{background-image:linear-gradient(90deg,var(--primary),var(--blue-400),var(--purple-400))}
.from-dark\/95{background-color:rgba(15,23,42,.95)}
.via-dark\/85{background-color:rgba(15,23,42,.85)}
.to-dark\/95{background-color:rgba(15,23,42,.95)}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.text-transparent{color:transparent}
.text-primary{color:var(--primary)}

/* --- Cards / Surfaces --- */
.glass-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--card-border); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl); backdrop-filter:blur(8px);
}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-2xl{border-radius:var(--radius-2xl)}
.shadow-2xl{box-shadow:var(--shadow-xl)}
.hover-scale{transition:transform .25s ease, box-shadow .25s ease}
.hover-scale:hover{transform:translateY(-2px) scale(1.01)}

/* --- Buttons --- */
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 2rem; border-radius:16px; text-decoration:none; font-weight:700;
  transition:all .25s ease; border:1px solid transparent;
}
.btn-primary{
  color:#001018; background:linear-gradient(180deg,var(--primary),#00bbd4);
  box-shadow:0 12px 30px rgba(0,224,255,.25), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,224,255,.35)}
.btn-secondary{
  color:var(--text); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15)
}
.btn-secondary:hover{background:rgba(255,255,255,.10); transform:translateY(-1px)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,224,255,.45),0 0 0 6px rgba(0,224,255,.18)
}

/* --- Breadcrumb --- */
nav[aria-label="Breadcrumb"]{font-size:.95rem}
nav[aria-label="Breadcrumb"] a{color:var(--muted); text-decoration:none}
nav[aria-label="Breadcrumb"] a:hover{color:var(--primary)}
nav[aria-label="Breadcrumb"] span{color:#64748b}

/* --- Hero image bg helpers --- */
.bg-cover{background-size:cover} .bg-center{background-position:center}

/* --- Images --- */
img{max-width:100%; height:auto}
img.rounded-2xl{border-radius:var(--radius-2xl)}
img.shadow-2xl{box-shadow:var(--shadow-xl)}
img[loading="lazy"]{opacity:.001; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease}
img[loading="lazy"].loaded{opacity:1; transform:none}

/* --- Lists inside cards/sections --- */
ul{padding-left:1.2rem} li+li{margin-top:.35rem}

/* --- Utility widths --- */
.max-w-3xl{max-width:48rem}

/* --- Link colors --- */
a{color:var(--primary)} a:hover{color:var(--blue-400)}

/* --- Section: CTA gradient arka plan --- */
.bg-gradient-to-br.from-primary\/20.via-blue-500\/20.to-purple-500\/20{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,224,255,.22), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(96,165,250,.20), transparent 60%),
              radial-gradient(700px 500px at 20% 0%, rgba(192,132,252,.18), transparent 60%),
              linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* --- Spacing utilities used in markup --- */
.inline-flex{display:inline-flex} .justify-center{justify-content:center}
.sm\:flex-row{flex-direction:column}
@media(min-width:640px){.sm\:flex-row{flex-direction:row}}
.flex-col{flex-direction:column}

/* --- Headline gradients in your markup --- */
.bg-gradient-to-r.from-primary.to-blue-400,
.bg-gradient-to-r.from-primary.via-blue-400.to-purple-400{
  background-image:linear-gradient(90deg,var(--primary),var(--blue-400),var(--purple-400));
}

/* --- “glass stat box” look --- */
.text-center.p-4.bg-gradient-to-br.from-primary\/10.to-blue-500\/10.rounded-xl{
  background:linear-gradient(135deg, rgba(0,224,255,.12), rgba(96,165,250,.12));
  border:1px solid var(--card-border)
}
.text-primary{color:var(--primary)}

/* --- Responsive heading sizes used in HTML --- */
.md\:text-4xl{font-size:2.25rem}
.md\:text-5xl{font-size:3rem}
.md\:text-6xl{font-size:3.75rem}
@media(max-width:767.98px){
  .md\:text-4xl,.md\:text-5xl,.md\:text-6xl{font-size:inherit}
}

/* --- Order utilities used once --- */
@media(min-width:768px){ .md\:order-1{order:1} .md\:order-2{order:2} }

/* --- Little fix for long gradient titles --- */
.bg-clip-text.text-transparent{display:inline-block}

/* --- Helper to keep hero overlay dark --- */
.from-dark\/95.via-dark\/85.to-dark\/95{
  background:linear-gradient(135deg, rgba(15,23,42,.95), rgba(15,23,42,.85), rgba(15,23,42,.95));
}

/* --- Accessibility tweaks --- */
a,button{outline:none}
a:focus-visible,button:focus-visible{
  box-shadow:0 0 0 3px rgba(0,224,255,.45), 0 0 0 6px rgba(0,224,255,.15);
  border-radius:10px
}

/* --- Small utilities matched from your HTML --- */
.inline-flex.items-center{display:inline-flex; align-items:center}
.rounded-xl.font-semibold{border-radius:var(--radius-xl); font-weight:600}
.text-lg.md\:text-xl{font-size:1.125rem}