/* ==========================================================================
   HEDIYE.MARKET — THEME VARIABLE SYSTEM (theme-variables.css)
   WordPress / GeneratePress için merkezi CSS değişken + utility sistemi.

   Yükleme (functions.php veya child-theme):
   --------------------------------------------------------------------------
   add_action( 'wp_enqueue_scripts', function () {
       wp_enqueue_style(
           'hediye-theme-variables',
           get_stylesheet_directory_uri() . '/assets/theme-variables.css',
           array(),
           '1.0.0'
       );
   });
   --------------------------------------------------------------------------
   Namespace: tüm değişken ve sınıflar --ai- / .ai- ön ekiyle tanımlıdır,
   böylece temanın ve mevcut --brand-* değişkenlerinin hiçbiriyle çakışmaz.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS  (:root custom properties)
   ========================================================================== */
:root {
  /* --- Fontlar ------------------------------------------------------------ */
  --ai-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ai-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* --- Marka renkleri (Tailwind config) ---------------------------------- */
  --ai-color-bg: #FAFAF8;
  --ai-color-bg-alt: #F4F1EB;
  --ai-color-accent: #9E7654;
  --ai-color-accent-hover: #8A6546;
  --ai-color-text-primary: #1F1E1D;
  --ai-color-text-secondary: #6B6661;
  --ai-color-border: #E8E4DD;

  /* --- HTML'de geçen ek renkler ------------------------------------------ */
  --ai-color-accent-warm: #A67C52;   /* HTML butonlarında kullanılan sıcak kahve */
  --ai-color-cream: #FCF8F3;         /* açık krem yüzeyler (kartlar, banner) */
  --ai-color-border-warm: #D5C3B3;   /* sıcak ton kenarlık */
  --ai-color-icon-bg: #F0EBE1;       /* ikon arka planı */
  --ai-color-star: #F59E0B;          /* yıldız / değerlendirme sarısı */
  --ai-color-whatsapp: #25D366;      /* WhatsApp yeşili */
  --ai-color-footer-bg: #1A1816;     /* koyu footer arka planı */
  --ai-color-footer-text: #A69F98;   /* footer metni */
  --ai-color-trust-heading: #4A3B32; /* trust banner başlık */
  --ai-color-hero-italic: #9C5B40;   /* hero italic vurgu */
  --ai-color-hero-desc: #5A5550;     /* hero açıklama metni */
  --ai-color-muted: #8C8782;         /* yıldız sayısı / soluk metin */
  --ai-color-white: #ffffff;

  /* --- Gölgeler ----------------------------------------------------------- */
  --ai-shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  --ai-shadow-floating: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
  --ai-shadow-card: 0 8px 20px -6px rgba(0, 0, 0, 0.10);
  --ai-shadow-card-hover: 0 12px 25px -6px rgba(0, 0, 0, 0.15);

  /* --- Köşe yarıçapları --------------------------------------------------- */
  --ai-radius-sm: 0.5rem;    /* tailwind lg */
  --ai-radius-md: 0.75rem;   /* tailwind xl */
  --ai-radius-lg: 1rem;      /* tailwind 2xl */
  --ai-radius-xl: 1.5rem;    /* rounded-[1.5rem] */
  --ai-radius-2xl: 2rem;     /* rounded-[2rem] */
  --ai-radius-full: 9999px;

  /* --- Boşluk / layout ---------------------------------------------------- */
  --ai-container-max: 1400px;
  --ai-container-pad: 1.5rem;

  /* --- Geçişler ----------------------------------------------------------- */
  --ai-transition: 0.2s ease;
  --ai-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. MODERN MINIMAL RESET
   (sadece güvenli, GeneratePress düzenini bozmayan sıfırlamalar)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--ai-font-sans);
  color: var(--ai-color-text-primary);
  background-color: var(--ai-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Serif yalnızca display başlıklar için */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ai-font-serif);
  color: var(--ai-color-text-primary);
  line-height: 1.15;
  font-weight: 600;
}

/* ==========================================================================
   4. TEXT UTILITIES
   ========================================================================== */
.ai-font-sans   { font-family: var(--ai-font-sans); }
.ai-font-serif  { font-family: var(--ai-font-serif); }

.ai-text-primary    { color: var(--ai-color-text-primary); }
.ai-text-secondary  { color: var(--ai-color-text-secondary); }
.ai-text-accent     { color: var(--ai-color-accent); }
.ai-text-muted      { color: var(--ai-color-muted); }
.ai-text-star       { color: var(--ai-color-star); }
.ai-text-white      { color: var(--ai-color-white); }

.ai-text-xs   { font-size: 0.75rem;  line-height: 1.5; }   /* 12px */
.ai-text-sm   { font-size: 0.875rem; line-height: 1.6; }   /* 14px */
.ai-text-base { font-size: 1rem;     line-height: 1.6; }   /* 16px */
.ai-text-lg   { font-size: 1.125rem; line-height: 1.5; }   /* 18px */
.ai-text-xl   { font-size: 1.5rem;   line-height: 1.3; }   /* 24px */
.ai-text-2xl  { font-size: 2rem;     line-height: 1.2; }   /* 32px */
.ai-text-3xl  { font-size: 2.75rem;  line-height: 1.1; }   /* 44px */
.ai-text-hero { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; }

.ai-heading {
  font-family: var(--ai-font-serif);
  color: var(--ai-color-text-primary);
  font-weight: 600;
}
.ai-heading-italic {
  font-style: italic;
  color: var(--ai-color-hero-italic);
}

/* Yüzey arka plan yardımcıları */
.ai-bg        { background-color: var(--ai-color-bg); }
.ai-bg-alt    { background-color: var(--ai-color-bg-alt); }
.ai-bg-cream  { background-color: var(--ai-color-cream); }
.ai-bg-icon   { background-color: var(--ai-color-icon-bg); }

/* ==========================================================================
   5. CONTAINER
   ========================================================================== */
.ai-container {
  max-width: var(--ai-container-max);
  margin-inline: auto;
  padding-inline: var(--ai-container-pad);
}

/* ==========================================================================
   6. BUTTON SYSTEM
   ========================================================================== */
.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ai-font-sans);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--ai-radius-sm);
  cursor: pointer;
  transition: background-color var(--ai-transition),
              border-color var(--ai-transition),
              color var(--ai-transition),
              box-shadow var(--ai-transition),
              transform 0.15s ease;
}
.ai-btn:active { transform: scale(0.97); }

/* --- Variants ----------------------------------------------------------- */
.ai-btn-primary {
  background-color: var(--ai-color-accent);
  color: var(--ai-color-white);
  border-color: var(--ai-color-accent);
}
.ai-btn-primary:hover {
  background-color: var(--ai-color-accent-hover);
  border-color: var(--ai-color-accent-hover);
  color: var(--ai-color-white);
  box-shadow: 0 10px 25px -8px rgba(158, 118, 84, 0.4);
}

.ai-btn-outline {
  background-color: var(--ai-color-cream);
  color: var(--ai-color-accent);
  border-color: var(--ai-color-border-warm);
}
.ai-btn-outline:hover {
  background-color: var(--ai-color-white);
  border-color: var(--ai-color-accent);
  color: var(--ai-color-accent);
  box-shadow: var(--ai-shadow-soft);
}

/* --- Sizes -------------------------------------------------------------- */
.ai-btn-sm { padding: 0.5rem 1rem;       font-size: 0.8125rem; } /* 13px */
.ai-btn-md { padding: 0.75rem 1.5rem;    font-size: 0.9375rem; } /* 15px — HTML hero */
.ai-btn-lg { padding: 0.875rem 2rem;     font-size: 1rem; }      /* 16px — “Hemen Tasarla” */

/* ==========================================================================
   7. SHARED SURFACE HELPERS (opsiyonel)
   ========================================================================== */
.ai-card {
  background-color: var(--ai-color-white);
  border: 1px solid var(--ai-color-border);
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow-card);
  transition: transform 0.4s var(--ai-ease-smooth),
              box-shadow 0.4s var(--ai-ease-smooth);
}
.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ai-shadow-card-hover);
}

.ai-shadow-soft     { box-shadow: var(--ai-shadow-soft); }
.ai-shadow-floating { box-shadow: var(--ai-shadow-floating); }

.ai-rounded-sm  { border-radius: var(--ai-radius-sm); }
.ai-rounded-md  { border-radius: var(--ai-radius-md); }
.ai-rounded-lg  { border-radius: var(--ai-radius-lg); }
.ai-rounded-xl  { border-radius: var(--ai-radius-xl); }
.ai-rounded-2xl { border-radius: var(--ai-radius-2xl); }
.ai-rounded-full{ border-radius: var(--ai-radius-full); }