/* ============================================================
   GOPOS BASE — v2 Aydınlık & Canlı (adisyo/menülux tarzı)
   İllüstrasyon dolu, modern, teknoloji hissi
   ============================================================ */

:root {
  /* ── GoPOS Marka Paleti (sıcak: turuncu + altın + bilgi mavisi) ──
     Markanın gerçek renkleri: turuncu #FF5931, altın #F3B859/#FCC12C,
     bilgi mavisi #2563EB. Marka dışı tonlar (mor/teal/cyan/pembe/indigo)
     bu üç renge eşlendi; böylece tüm sayfalar tek tutarlı palete uyar. */
  --gp-primary:      #FF5931;   /* GoPOS turuncu */
  --gp-primary-dark: #E8430F;
  --gp-primary-soft: #FFE7DC;
  --gp-primary-tint: #FFF3EE;

  --gp-gold:    #C8810A;  --gp-gold-soft:  #FBEFD3;   /* altın/amber (ikincil) */
  --gp-blue:    #2563EB;  --gp-blue-soft:  #E7EFFE;   /* bilgi mavisi */

  /* Geri uyum: eski renk adları → GoPOS paletine eşlendi */
  --gp-purple:  #2563EB;  --gp-purple-soft:#E7EFFE;   /* → mavi */
  --gp-indigo:  #2563EB;  --gp-indigo-soft:#E7EFFE;   /* → mavi */
  --gp-teal:    #C8810A;  --gp-teal-soft:  #FBEFD3;   /* → altın */
  --gp-cyan:    #C8810A;  --gp-cyan-soft:  #FBEFD3;   /* → altın */
  --gp-yellow:  #C8810A;  --gp-yellow-soft:#FBEFD3;   /* → altın */
  --gp-pink:    #FF5931;  --gp-pink-soft:  #FFE7DC;   /* → turuncu */

  /* ── Nötr (sıcak gri) ─────────────────────────────────── */
  --gp-ink:     #1E2340;   /* başlık koyu lacivert */
  --gp-ink-2:   #3A3F66;
  --gp-text:    #4A5070;   /* gövde metni */
  --gp-mute:    #8A90B0;   /* soluk */
  --gp-faint:   #B4B9D4;
  --gp-line:    #ECEEF7;   /* ince çizgi */
  --gp-line-2:  #E0E3F0;

  --gp-white:   #FFFFFF;
  --gp-bg:      #FFFFFF;
  --gp-bg-soft: #F6F7FC;   /* açık bölüm zemini */
  --gp-bg-tint: #F0F2FB;

  /* ── Gradyanlar ───────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, #FF7A45 0%, #FF5931 100%);
  --grad-gold:    linear-gradient(135deg, #F3B859 0%, #C8810A 100%);
  --grad-blue:    linear-gradient(135deg, #5B9BFF 0%, #2563EB 100%);
  --grad-purple:  linear-gradient(135deg, #5B9BFF 0%, #2563EB 100%);   /* → mavi */
  --grad-teal:    linear-gradient(135deg, #F3B859 0%, #C8810A 100%);   /* → altın */
  --grad-sunset:  linear-gradient(120deg, #FF5931 0%, #FFA63D 50%, #F3B859 100%);  /* turuncu→altın */
  --grad-hero:    linear-gradient(180deg, #FFFFFF 0%, #F6F7FC 100%);
  --grad-text:    linear-gradient(120deg, #FF5931 0%, #F3B859 100%);   /* logo benzeri turuncu→altın */

  /* ── Tipografi ────────────────────────────────────────── */
  --font-primary:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem; --text-7xl:4.5rem;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* ── Radius (yumuşak, oynak) ──────────────────────────── */
  --radius-sm:.5rem; --radius:.875rem; --radius-md:1.125rem; --radius-lg:1.5rem;
  --radius-xl:2rem; --radius-2xl:2.5rem; --radius-full:9999px;

  /* ── Renkli yumuşak gölgeler ──────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(30,35,64,.06);
  --shadow:     0 8px 24px rgba(30,35,64,.08);
  --shadow-lg:  0 18px 50px rgba(30,35,64,.10);
  --shadow-xl:  0 30px 70px rgba(30,35,64,.14);
  --shadow-primary: 0 16px 40px -8px rgba(255,87,34,.45);
  --shadow-purple:  0 16px 40px -8px rgba(124,58,237,.40);
  --shadow-teal:    0 16px 40px -8px rgba(0,200,150,.40);

  /* ── Geçişler ─────────────────────────────────────────── */
  --transition-fast:140ms cubic-bezier(.4,0,.2,1);
  --transition:240ms cubic-bezier(.4,0,.2,1);
  --transition-slow:420ms cubic-bezier(.4,0,.2,1);
  --transition-bounce:420ms cubic-bezier(.34,1.56,.64,1);

  --z-dropdown:100; --z-sticky:200; --z-fixed:300; --z-modal:400; --z-toast:500;

  --container-max:1200px;
  --container-pad:clamp(1.25rem,5vw,2.5rem);
  --topbar-h:42px;
  --mainbar-h:68px;
  --header-height:110px;   /* topbar + mainbar (spacer & offset için) */
  --section-py:clamp(2rem,4vw,4rem);   /* bölümler arası dikey boşluk (azaltıldı) */
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
/* Root'ta SADECE overflow-x:hidden → bu değer viewport'a yansır ve yatay
   kaymayı engeller. (clip root öğede viewport'a propagate olmadığı için
   kullanılmıyor; aksi halde hidden'ı etkisiz bırakırdı.) */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; overflow-x:hidden; }
body {
  font-family:var(--font-primary);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--gp-text);
  background:var(--gp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  width:100%;
  max-width:100%;
}
img,video,svg { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input,select,textarea { font-family:inherit; max-width:100%; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-primary); font-weight:800; line-height:1.12; color:var(--gp-ink); letter-spacing:-.025em; overflow-wrap:break-word; word-break:break-word; }
p { line-height:1.7; overflow-wrap:break-word; }

/* Hiçbir öğe ekranı yatay taşırmasın */
table { max-width:100%; }
.gp-shop-main, .gp-blog-main, .exp-panel, .tab-panel__content { min-width:0; }

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

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--gp-bg-soft); }
::-webkit-scrollbar-thumb { background:var(--gp-line-2); border-radius:var(--radius-full); border:2px solid var(--gp-bg-soft); }
::-webkit-scrollbar-thumb:hover { background:var(--gp-primary); }
::selection { background:var(--gp-primary); color:#fff; }
:focus-visible { outline:3px solid var(--gp-primary-soft); outline-offset:2px; }

/* ── Gradyan metin ────────────────────────────────────────── */
.text-gradient { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.text-gradient-sunset { background:var(--grad-sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── Duotone İkon Sistemi ─────────────────────────────────── */
.gp-ico { width:1.5rem; height:1.5rem; }
.gp-ico .duo-bg { fill:currentColor; opacity:.16; stroke:none; }
.gp-ico .duo-fg { stroke:currentColor; }

/* Marka renkli vurgu sarmalayıcıları */
.ico-orange{ color:var(--gp-primary); }
.ico-purple{ color:var(--gp-purple); }
.ico-teal  { color:var(--gp-teal); }
.ico-blue  { color:var(--gp-blue); }
.ico-yellow{ color:var(--gp-yellow); }
.ico-pink  { color:var(--gp-pink); }
.ico-cyan  { color:var(--gp-cyan); }
.ico-indigo{ color:var(--gp-indigo); }