/* =========================================================
   Global Design Tokens
   ========================================================= */
:root{
  /* palette */
  --bg:#182438;           --panel1:#0b1526;   --panel2:#0a1423;   --line:#1e2a40; --fg:#eaf2ff;
  --chip-bg:#0f223b;      --chip-text:#a6b7d2;
  --accent:#7b5dff;       --accent2:#5128ff;

  /* drawer */
  --drawer-bg:rgba(18,18,18,.95);    --drawer-line:#1e2a40;

  /* radii & shadows */
  --radius-lg: 1.5rem;    --radius-md: 1.25rem;   --radius-sm:.9rem;   --radius-xs:.7rem;
  --shadow-1: 0 14px 36px rgba(0,0,0,.35);
  --shadow-2: 0 30px 70px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);

  /* timing */
  --easing: cubic-bezier(.2,.8,.2,1);
  --dur-fast: .18s;       --dur: .28s;

  /* breakpoints */
  --bp-md: 768px;         --bp-lg: 900px;        --bp-xl: 1200px;

  color-scheme: dark;
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html,body{
  min-height:100%;
  margin:0;
  background:
    radial-gradient(950px 600px at -10% -20%, rgba(96,165,250,.15), transparent 60%),
    radial-gradient(1100px 800px at 110% -15%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1000px 900px at 50% 120%, rgba(251,191,36,.08), transparent 70%),
    var(--bg);
  color:var(--fg);
  font:15.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* Lacivert + geniş scrollbar */
* {
  scrollbar-width: auto;                  /* Firefox: auto = normal/geniş */
  scrollbar-color: #2f4a71 #0b1526;       /* Firefox thumb/track */
}

*::-webkit-scrollbar {
  width: 42px;                            /* Chrome/Safari/Edge → kalınlık */
}

*::-webkit-scrollbar-track {
  background: #0b1526;
}

*::-webkit-scrollbar-thumb {
  background: #2f4a71;
  border-radius: 12px;
  border: 4px solid #0b1526;              /* thumb ile track arasında boşluk efekti */
}

*::-webkit-scrollbar-thumb:hover {
  background: #3c5d8f;
}



a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Accessible focus ring for interactive controls */
:where(a,button,input,select,.nf-icon-btn,.btn-chip,.to-top):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: calc(var(--radius-xs) + 2px);
}

/* Smooth scroll + user preference */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* =========================================================
   Top Bar (Nav)
   ========================================================= */
.nf-nav{
  position:fixed; inset:0 0 auto 0; z-index:1100;
  background:linear-gradient(to bottom, rgba(10,18,33,.9) 0%, rgba(10,18,33,.55) 60%, rgba(10,18,33,0) 100%);
  -webkit-backdrop-filter:saturate(0%) blur(2px);
  backdrop-filter-:grayscale(0%) blur(0px);
}
.nf-inner{ max-width:1400px; margin:0 auto; padding:.75rem 1.75rem; display:flex; align-items:center; gap:1rem;}
.nf-logo{ display:inline-flex; align-items:center; gap:.6rem; font-weight:900; font-size:18pt; color:#fff; }
.nf-actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.nf-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-xs);
  border:1px solid rgba(255,255,255,.14); background:rgba(10,18,33,.55); color:#fff;
  transition: filter var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
.nf-icon-btn:hover{ background:rgba(10,18,33,.75); filter:brightness(1.05); }

/* =========================================================
   Drawer (right)
   ========================================================= */
.drawer-overlay{
  position:fixed; inset:0; z-index:1198;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity var(--dur-fast) ease;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1199;
  width:min(420px, 92vw);
  background:linear-gradient(180deg, var(--drawer-bg), #0a1423);
  border-left:1px solid var(--drawer-line);
  box-shadow:-20px 0 50px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .22s var(--easing);
  display:flex; flex-direction:column;
}
.drawer-open .drawer{ transform:none; }
.drawer-open .drawer-overlay{ opacity:1; pointer-events:auto; }

.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:4rem 1rem 1rem; border-bottom:1px solid var(--drawer-line); }
.drawer-title{ font-weight:900; font-size:1.05rem; }
.drawer-body{ padding:1rem; overflow:auto; }
.drawer-section{ margin-bottom:1.2rem; }
.drawer-section h6{ font-weight:800; font-size:.95rem; margin:0 0 .65rem; opacity:.9; }
.helper{ font-size:.85rem; opacity:.75; }

/* Toggle (switch) */
.switch{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem .6rem; border:1px solid var(--drawer-line); border-radius:.8rem; margin-bottom:.55rem;
  background:;
}
.switch label{ font-weight:800; }
.switch .tgl{
  appearance:none; width:48px; height:28px; border-radius:999px; position:relative; outline:none; cursor:pointer;
  background:#27344c; transition:background var(--dur-fast) ease;
}
.switch .tgl:after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#cdd9ef; transition:transform var(--dur-fast) ease; box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.switch .tgl:checked{ background:#3d7bfd; }
.switch .tgl:checked:after{ transform:translateX(20px); }

/* Drawer chips */
.btn-chip{
  display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .75rem;
  border-radius:.7rem; border:1px solid var(--drawer-line);
  background:#0f1a2d; color:#eaf2ff; font-weight:800; cursor:pointer;
  transition: filter var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
.btn-chip:hover{ background:#13233d; }
.btn-light-ghost{ background:transparent; border:1px dashed var(--drawer-line); color:#a6b7d2; }
.btn-light-ghost:hover{ background:#0f1a2d; }

/* =========================================================
   Cards (base)
   ========================================================= */
.gn-card{
  margin:0px auto;
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.02);
  overflow:visible; position:relative;
  content-visibility:auto; contain-intrinsic-size:900px 520px;
}
.gn-list{ display:flex; flex-direction:column; gap:1.5rem; }

/* =========================================================
   HERO
   ========================================================= */
.gn-hero{
  width:99.5vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  height:100svh; min-height:100vh; border:none; border-radius:0; box-shadow:none;
  background:#000; overflow:hidden; position:relative;
}
.gn-hero .gn-hero-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; max-height:none; }
.gn-hero .gn-hero-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, rgba(10,18,33,0) 0%, rgba(10,18,33,0.28) 40%, rgba(10,18,33,0.55) 60%, var(--bg) 80%, var(--bg) 100%);
}
.gn-hero .gn-hero-body{ padding:2rem clamp(1rem, 3vw, 2.5rem); width:100%; max-width:min(1300px, 95vw); margin-inline:auto; margin-bottom:50px; }
.gn-hero .gn-title{ font-size:26pt; color:#fff; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.55); }

/* =========================================================
   Compact Card
   ========================================================= */
.gn-compact{
  --_bg: var(--bgimg);
  position:relative; overflow:hidden; min-height:260px; border-radius:var(--radius-md);
  background-image: linear-gradient(180deg, rgba(8,14,24,0.05) 0%, rgba(8,14,24,0.35) 55%, rgba(8,14,24,0.85) 100%), var(--_bg);
  background-size: 100% 100%, cover; background-position: 0 0, center; background-repeat: no-repeat;
}
.gn-compact::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(600px 300px at -5% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(500px 300px at 105% 110%, rgba(56,189,248,.16), transparent 60%);
  pointer-events:none; opacity:.45;
}
.gn-compact-overlay{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,14,24,0) 0%, rgba(8,14,24,0.28) 45%, rgba(8,14,24,.9) 100%); }
.gn-compact-body{ position:relative; z-index:1; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem 1.25rem 1.25rem; }
.gn-compact .gn-title{ color:#fff; font-size:22pt; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* Thumb (shared) */
.gn-compact-thumb{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  width:550px; max-height:300px; border-radius:.7rem; overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); background:#0b1628;
}
.gn-compact-thumb img{ width:100%; height:100%; object-fit:cover; }

/* Chips */
.gn-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.gn-chip{ background:var(--chip-bg); color:var(--chip-text); border:1px solid #203351; }

/* Price badge (shared for hero & compact) */
.gn-price{
  position:absolute; top:20px; right:24px; text-align:right; z-index:3;
}
.gn-price .badge-price{
  display:inline-flex; align-items:baseline; gap:.15rem; padding:1rem 1.4rem; border-radius:.9rem; font-weight:900;
  background:linear-gradient(313deg,rgba(77,13,130,1) 0%, rgba(44,9,79,1) 28%, rgba(99,28,158,1) 100%);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 28px rgba(124,58,237,.35), 0 8px 100px rgba(251,176,0,.55);
  font-size:16pt;
}
.gn-price .disc{ position:absolute; right:7px; top:0; color:#fbb000; font-weight:900; font-size:12pt; }
.gn-price .old{ display:block; margin-top:-25px; color:#fff; font-weight:500; text-decoration:line-through; opacity:.85; font-size:10pt; text-align:center; }

/* Brand watermark */
.branD{
  position:absolute; right:30px; bottom:4px; font-size:42px; color:#f5f5f5; opacity:.95;
  text-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none;
}


.gn-hero .gn-price{
    position:relative;width:150px;top:0;right:unset;left:0;margin-bottom:30px;text-align:center;
	
  }
  .gn-hero .gn-price .badge-price{
    width:150px;display:block
	
  }
  
  .modal-body{min-height:1000px;}
  

/* =========================================================
   Responsive
   ========================================================= */
/* Medium up */
@media (min-width: 768px){
  .gn-compact{ min-height:220px; }
}
/* Large up */
@media (min-width: 900px){
  .gn-compact{
    --thumbW: 550px;   /* .gn-compact-thumb width */
    --gap: 24px;       /* visual-text gap */
  }
  .gn-compact .gn-chips,
  .gn-compact .gn-title{
    margin-left: calc(var(--thumbW) + var(--gap));
    max-width: calc(100% - var(--thumbW) - var(--gap));
  }
}

/* Mobile first overrides */
@media (max-width: 900px){
  :root{ --nav-base-h: 64px; }

  .gn-compact{ --thumbH: 250px; }                /* istersen 220–260 arası oynat */

  .gn-compact-thumb{
    position:absolute;
    top: .9rem;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: var(--thumbH);                       /* sabit yükseklik */
    max-height: none;
  }
  .gn-compact-thumb img{ width:100%; height:100%; object-fit:cover; }

  /* Yazı alanını resmin altına it */
  .gn-compact-body{
    min-height: 500px;                               /* çok yüksek olmasın */
    padding: calc(var(--thumbH) + 1rem) 1.25rem 1.25rem;
    /* başlık/çip’ler artık soldan boşluk istemiyor */
  }
  .gn-compact .gn-chips,
  .gn-compact .gn-title{
    margin-left: 0;
    max-width: 100%;
  }

  /* Fiyat rozetini mobilde de köşede tut (resmin üstünde dursun) */
  .gn-compact .gn-price{
    top: 14px;
    left: 13px;
	right:unset
  }
  
  .nf-nav{
	  padding-top:40px;background:linear-gradient(to bottom, rgba(10,18,33,.9) 0%, rgba(10,18,33,.55) 60%, rgba(10,18,33,0) 100%);
	  -webkit-backdrop-filter:saturate(0%) blur(0px);
	backdrop-filter-:grayscale(0%) blur(0px);
	}
  
  .modal-body{min-height:300px;}

  .branD{ display:none; }

  /* Preview modal (Bootstrap) */
  .modal-fullscreen-md-down{ width:100vw; max-width:none; height:100%; margin:0; }
  #previewFrame{ height:100vh !important; }
  .modal-content{ width:90%; height:90% !important; margin:0 auto; border-radius:35px !important; }
}

/* =========================================================
   Scroll-to-top (Floating)
   ========================================================= */
.to-top{
  position: fixed; right: 18px;
  bottom: clamp(16px, env(safe-area-inset-bottom) + 12px, 28px);
  z-index: 9999; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  box-shadow: 0 14px 30px rgba(81,40,255,.35), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer; opacity: 0; transform: translateY(22px) scale(.94); pointer-events: none;
  transition: opacity var(--dur) ease, transform var(--dur) var(--easing), filter var(--dur-fast) ease;
}
.to-top.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover{ filter: brightness(1.06); }
.to-top:active{ transform: translateY(0) scale(.97); }
.to-top svg{ width: 22px; height: 22px; }

/* =========================================================
   Alerts & Loader
   ========================================================= */
.alert-top{
  position:fixed; top:64px; left:0; right:0; margin:auto; max-width:900px;
  padding:10px 14px; background:#2b1b1b; color:#ffd7d7; border:1px solid #5a2b2b; border-radius:10px; z-index:9999;
}
#loader{ display:none; place-items:center; padding:1rem 0; }
#loader.show{ display:grid; }

/* =========================================================
   Modal theming (Bootstrap overrides kept minimal)
   ========================================================= */
.modal-backdrop.show{
  backdrop-filter: blur(6px) saturate(115%);
  background: rgba(5,9,20,.65);
}
.modal-content{
  background: linear-gradient(180deg, #0f1a2d, #0a1322);
  border:1px solid rgba(255,255,255,.08);
  color: var(--fg);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
}
.modal-header,.modal-footer{ border-color: rgba(255,255,255,.08); }
.modal-title{ font-weight: 800; letter-spacing:.2px; }
.modal-content .form-label{ color:#c8d3e6; }
.modal-content .form-text{ color:#a0aec0; }
.modal-content .form-control{ background:#0b1424; border-color:#1f2b45; color:var(--fg); }
.modal-content .form-control::placeholder{ color:#7f8aa0; }
.modal-content .btn-close{ filter: invert(1) opacity(.8); }

/* =========================================================
   Utilities
   ========================================================= */
.zero{ clear:both !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }