/* ==========================================================
   AGY Bilişim - CSS Core Framework v3.1
   Bootstrap-style Mobile-First Build (Stable)
   Author: Kenan Uçar - 2025-11-05
   ========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  font-size: var(--font-size-base);
  background-color: var(--bg-light);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* === CSS VARIABLES === */
:root {
  /* Colors */
  --primary: #2c3e50;
  --secondary: #3498db;
  --accent: #e74c3c;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;

  /* Backgrounds */
  --bg-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-dark: #34495e;

  /* Text */
  --text-dark: #2c3e50;
  --text-light: #666;
  --text-white: #fff;

  /* Typography (Base for 0–575px mobile) */
  --font-size-base: 0.85rem;
  --font-size-sm: 0.75rem;
  --font-size-p-base: 1rem;
  --font-size-lg: 0.95rem;
  --font-size-lg-1: 1.1rem;
  --font-size-xl: 1.2rem;
  --font-size-xl-1: 1.4rem;
  --font-size-xll: 1.7rem;
  --font-size-xll-1: 1.7rem;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 60px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-bold-x: 700;
}

/* === HEADINGS & TEXT === */
h1 { font-size: var(--font-size-xll-1); font-weight: var(--font-weight-bold-x); margin-bottom: 1em; line-height: 1.25; }
h2 { font-size: var(--font-size-xl-1);  font-weight: var(--font-weight-bold-x); margin-bottom: 0.75em; line-height: 1.25; }
h3 { font-size: var(--font-size-xl);    font-weight: var(--font-weight-bold);  margin-bottom: 0.75em; line-height: 1.25; }
h4 { font-size: var(--font-size-lg-1);  font-weight: var(--font-weight-bold);  margin-bottom: 0.5em; line-height: 1.25; }
p  { font-size: var(--font-size-p-base); margin-bottom: 0.5em; line-height: 1.45; }

.baslik-lg { font-size: var(--font-size-xll-1); font-weight: var(--font-weight-bold); }
.baslik-l  { font-size: var(--font-size-xll);   font-weight: var(--font-weight-bold); }
.baslik-s  { font-size: var(--font-size-lg);    font-weight: var(--font-weight-bold); }
.baslik    { font-size: var(--font-size-xl);    font-weight: var(--font-weight-bold); }

/* === DARK THEME === */
[data-theme="dark"] {
  --primary: #3498db;
  --secondary: #2980b9;
  --bg-light: #1a1a1a;
  --bg-white: #2d2d2d;
  --text-dark: #ffffff;
  --text-light: #b0b0b0;
  --text-white: #fff;

  a:hover { color: var(--secondary); }
  .hero { background: linear-gradient(rgba(26,26,26,0.9), rgba(44,62,80,0.9)) !important; }
  .service-card, .about-section { border: 1px solid #444; }
}

/* === UTILITIES === */
.container {
  width: 100%;
  max-width: 540px; /* base: mobile-first */
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* === COMPONENTS === */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all 0.3s ease;
}
.btn-primary   { background: var(--primary); color: white; }
.btn-secondary { background: var(--secondary); color: white; }
.btn-accent    { background: var(--accent); color: white; }
.btn:hover     { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

.card {
  background: var(--bg-white);
  padding: var(--space-md);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ==========================================================
   📐 Responsive Scaling - Bootstrap Breakpoints (min-width)
   ========================================================== */

/* sm ≥576px */
@media (min-width: 576px) {
  .container { 
    /* max-width: 720px; */
    max-width: 100%;
  } 
}

/* md ≥768px */
@media (min-width: 768px) {
  .container { 
    /* max-width: 720px; */
    max-width: 100%;
  } 
}

/* lg ≥992px */
@media (min-width: 992px) {
  .container { 
    /* max-width: 960px; */
    max-width: 100%;
  }
}

/* xl ≥1200px */
@media (min-width: 1200px) {
  .container { 
    /* max-width: 1140px; */
    max-width: 1200px;
  }
}

/* xxl ≥1400px */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}


/* === BOOTSTRAP BREAKPOINTS === */
/* xs: < 576px  - Telefonlar */
@media screen and (max-width: 575.98px) {
    :root {
        --font-size-base: 0.85rem;
        --font-size-sm: 0.75rem;
        --font-size-lg: 0.95rem;
        --font-size-lg-1: 1.1rem;
        --font-size-xl: 1.2rem;
        --font-size-xl-1: 1.4rem;
        --font-size-xll: 1.7rem;
        --font-size-xll-1: 1.7rem;
    }
}

/* sm: ≤ 767.98px - Küçük tabletler (mevcut 550px yerine) */
@media screen and (max-width: 767.98px) {
    :root {
        --font-size-base: 0.9rem;
        --font-size-sm: 0.8rem;
        --font-size-lg: 1rem;
        --font-size-lg-1: 1.2rem;
        --font-size-xl: 1.3rem;
        --font-size-xl-1: 1.5rem;
        --font-size-xll: 1.9rem;
        --font-size-xll-1: 2.0rem;
    }
}

/* md: ≥ 768px - Tabletler (mevcut 720px yerine) */
@media screen and (max-width: 991.98px) {
    :root {
        --font-size-base: 0.95rem;
        --font-size-sm: 0.85rem;
        --font-size-lg: 1.1rem;
        --font-size-lg-1: 1.35rem;
        --font-size-xl: 1.4rem;
        --font-size-xl-1: 1.7rem;
        --font-size-xll: 2.1rem;
        --font-size-xll-1: 2.1rem;
    }
}

/* lg: ≥ 992px - Masaüstü (mevcut 865px yerine) */
@media screen and (max-width: 1199.98px) {
    /* Bu breakpoint için ek responsive ayarlar */
}




/* === Dark theme specifics === */
[data-theme="dark"] body { background-color: var(--bg-light); color: var(--text-dark); }
[data-theme="dark"] .service-card,
[data-theme="dark"] .about-section,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .card {
  background-color: var(--bg-white);
  color: var(--text-dark);
}
[data-theme="dark"] .service-card p,
[data-theme="dark"] .about-section p {
  color: var(--text-light);
}