/*
Theme Name: Alo Trend
Theme URI: https://alotrend.com
Description: Custom store theme for Alo Trend — khaki green and gold palette.
Author: Alo Trend
Template: storefront
Version: 1.4.0
Text Domain: alotrend
*/

/* ============================================================
   1. TASARIM JETONLARI
   ============================================================ */
:root {
  /* Haki yesili — yapisal renk */
  --k-900: #1E2116;
  --k-800: #2C3120;
  --k-700: #3D4429;
  --k-600: #4F5836;
  --k-500: #667046;
  --k-400: #87905F;
  --k-300: #AEB489;
  --k-200: #D2D6BE;
  --k-100: #E8EBDC;
  --k-50:  #F4F6EC;

  /* Altin sari — vurgu ve CTA */
  --y-700: #9C7410;
  --y-600: #BE8E14;
  --y-500: #D9A521;
  --y-400: #E9BE4A;
  --y-300: #F0D178;
  --y-200: #F8E7B0;
  --y-100: #FCF3DA;
  --y-50:  #FEFAF1;

  /* Notrler */
  --ink:    #1A1C14;
  --body:   #3A3D30;
  --muted:  #6E7362;
  --line:   #DFE3D3;
  --line-2: #ECEFE3;
  --paper:  #FFFFFF;
  --cream:  #FAFBF6;

  /* Anlamsal */
  --sale:   #B4460E;
  --ok:     #4C7A34;
  --star:   #E0A21B;

  /* Tipografi */
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Olcek */
  --wrap: 1280px;
  --wrap-wide: 1440px;
  --gap: 24px;
  --radius: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 33, 22, .06), 0 2px 8px rgba(30, 33, 22, .05);
  --shadow-md: 0 4px 14px rgba(30, 33, 22, .09);
  --shadow-lg: 0 18px 44px rgba(30, 33, 22, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. TEMEL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.alo-kilit { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.012em;
}

h1 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 600; }
h2 { font-size: clamp(24px, 2.9vw, 36px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
h4 { font-size: 17px; }

p { margin: 0 0 1.1em; }

a { color: var(--k-700); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--y-600); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.15em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

::selection { background: var(--y-300); color: var(--ink); }

:focus-visible { outline: 2px solid var(--y-500); outline-offset: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. YERLESIM
   ============================================================ */
.alo-wrap    { width: 100%; max-width: var(--wrap);      margin: 0 auto; padding: 0 20px; }
.alo-wrap--wide { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 20px; }
.alo-wrap--full { width: 100%; padding: 0; }

.alo-section { padding: 64px 0; }
.alo-section--tight { padding: 44px 0; }
.alo-section--tint { background: var(--k-50); }
.alo-section--cream { background: var(--cream); }

.alo-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.alo-head--left { text-align: left; margin-left: 0; }
.alo-head .alo-eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: 11px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--y-700); margin-bottom: 10px;
}
.alo-head h2 { margin-bottom: 10px; }
.alo-head p { color: var(--muted); margin: 0; }

.alo-rule { width: 52px; height: 3px; background: var(--y-500); margin: 0 auto 22px; }
.alo-head--left .alo-rule { margin-left: 0; }

/* ============================================================
   4. BUTONLAR
   ============================================================ */
.alo-btn,
.alo-btn:visited,
button.alo-btn,
input[type="submit"].alo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 14px 26px; border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-align: center; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.alo-btn:active { transform: translateY(1px); }

.alo-btn--gold { background: var(--y-500); color: var(--k-900); border-color: var(--y-500); }
.alo-btn--gold:hover { background: var(--y-600); border-color: var(--y-600); color: var(--k-900); }

.alo-btn--khaki { background: var(--k-700); color: #fff; border-color: var(--k-700); }
.alo-btn--khaki:hover { background: var(--k-800); border-color: var(--k-800); color: #fff; }

.alo-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.alo-btn--ghost:hover { background: var(--ink); color: #fff; }

.alo-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.alo-btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.alo-btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.alo-btn--white:hover { background: var(--y-500); border-color: var(--y-500); color: var(--k-900); }

.alo-btn--sm { padding: 10px 18px; font-size: 11.5px; }
.alo-btn--lg { padding: 17px 34px; font-size: 14px; }
.alo-btn--block { width: 100%; }
.alo-btn--disabled, .alo-btn[disabled] { opacity: .45; pointer-events: none; }

.alo-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-700); border-bottom: 1.5px solid var(--y-500); padding-bottom: 3px;
}
.alo-link-arrow:hover { color: var(--y-600); }
.alo-link-arrow svg { transition: transform .2s var(--ease); }
.alo-link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   5. ROZETLER
   ============================================================ */
.alo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius); line-height: 1;
}
.alo-badge--new  { background: var(--k-700); color: #fff; }
.alo-badge--sale { background: var(--sale); color: #fff; }
.alo-badge--gold { background: var(--y-500); color: var(--k-900); }
.alo-badge--out  { background: rgba(30,33,22,.82); color: #fff; }

/* ============================================================
   6. FORM ALANLARI
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--k-400); box-shadow: 0 0 0 3px rgba(135,144,95,.15); outline: none;
}
::placeholder { color: #9AA08C; }

/* ============================================================
   7. YARDIMCILAR
   ============================================================ */
.alo-stars { display: inline-flex; gap: 2px; color: var(--star); line-height: 1; }
.alo-price { font-family: var(--font-display); font-weight: 600; color: var(--sale); }
.alo-price del { color: var(--muted); font-weight: 400; font-size: .78em; margin-left: 8px; }
.alo-price ins { text-decoration: none; }

.alo-scroll-x {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: thin;
}
.alo-scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }
.alo-scroll-x::-webkit-scrollbar { height: 5px; }
.alo-scroll-x::-webkit-scrollbar-thumb { background: var(--k-300); border-radius: 3px; }

.alo-gizle { display: none !important; }

/* Erisilebilirlik: hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}