:root{
  --bg:#000; --fg:#474747; --accent:#0ea5e9; --shadow:0 10px 24px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100dvh; margin: 0; overflow-x: hidden; overflow-y: hidden; }
body{ margin:0; background:#000; color:var(--fg); font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; }

#app{ position:relative; width:100%; height:100dvh; overflow:hidden; }
#stage{ position:absolute; inset:0; background:#000; touch-action:none;   min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom);}

/* topbar*/
.topbar{
  background:#888ca9; color:#fff;
  height:100px; width:100%;
  position:absolute; top:0; left:0;
  display:flex; align-items:center; justify-content:center; 
  flex-wrap: wrap;
  z-index: 10;
}

.logo-badge{ width:auto; margin:0; display:flex; align-items:center; cursor:pointer; margin-top: 0px;}
.logo-badge img{ display:block; height:36px; width:auto; }

/* Top Bar end*/

main {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.main::-webkit-scrollbar {
  display: none;
}

section {
  position: relative;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100dvh;
  flex-direction: column;
}

section:nth-of-type(1n) {
  background-color: #ADB2D4;
  /*background-color: #DE4949;*/
}

section:nth-of-type(2n) {
  background-color: #C7D9DD;
  /*background-color: #E37B40;*/
}

section:nth-of-type(3n) {
  background-color: #000000;
  /*background-color: #F0CA4D;*/
}

section:nth-of-type(4n) {
  background-color: #D5E5D5;
  /*background-color: #46B39D;*/
}

section:nth-of-type(5n) {
  background-color: #EEF1DA;
  /*background-color: #324D5C;*/
}

section:nth-of-type(6n) {
  background-color: #ADB2D4;
  /*background-color: #8e44ad;*/
}

.contentText {
  padding: 30px;
  position: absolute;
}
/* Başlat katmanı */
#overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  /*background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.8));
  backdrop-filter: blur(4px); padding:24px;*/
}

.startRepair {color: var(--fg) !important}
.start-btn{
  appearance:none; border:0; cursor:pointer; padding:14px 26px; border-radius:14px;
  background: rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:18px;
  border:1px solid rgba(255,255,255,.18); box-shadow: var(--shadow); text-decoration:none;
}
.start-btn:active{ transform:scale(.98); }
.hintRepair {color: var(--fg) !important}
.hint{ margin:0; opacity:.85; font-size:13px; color:#d5d5d5; text-align:center; }

/* Story bar */
#storyBar{
  position:absolute;
  left: env(safe-area-inset-left, 8px);
  right: env(safe-area-inset-right, 8px);
  bottom: calc(env(safe-area-inset-bottom, 8px) + 10px);
  padding: 0 10px;
  pointer-events:none;
  opacity:0;
}
.bar-track{ width:100%; height:5px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.bar-fill{ width:0%; height:100%; background:#acacac; border-radius:999px; }

/* Çıkış butonu */
.exit-btn{
  position:absolute;
  right: calc(env(safe-area-inset-right, 8px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 8px) + 32px);
  padding:16px 30px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color:#fff; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none; /* başlangıçta gizli */
  z-index: 20;
}
.exit-btn:active{ transform:scale(.98); }

h1 { font-size: 24px; line-height: 1.2; }

/* Tablet ve üstü (>= 768px) */
@media (min-width: 768px) {
  .contentText { padding: 20px; }
  .topbar { height: 100px; }
}

/* Tablet ve üstü (>= 702px) */
@media (max-width: 702px) {
  .topbar { height: 120px; }
  .logo-badge { margin-top: 20px;}
}

/* Tablet ve üstü (>= 415px) */
@media (max-width: 415px) {
  .topbar { height: 130px; }
}

/* Daha geniş masaüstü (>= 1200px) — opsiyonel */
@media (min-width: 1200px) {
  body { font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; }
  .contentText { padding: 400px; }
  .topbar { height: 80px; }
}


  /* Alt orta konum */
  .scroll-indicator{
    position: absolute;        /* sadece bu sayfada kullanacaksan relative container içine de koyabilirsin */
    left: 50%;
    /*bottom: clamp(12px, 3vh, 28px);*/
    bottom: 22px;
    transform: translateX(-50%);
    pointer-events: none;    /* alttaki linkleri engellemesin */
    opacity: .9;
  }

  /* Hareket parametreleri (istersen kolayca değiştir) */
  .chevron{
    display: block;
    --shift: 12px;           /* aşağı-yukarı mesafe */
    --cycle: 4s;             /* toplam süre: 2s hareket + 2s bekleme */
    animation: upDown var(--cycle) ease-in-out infinite;
  }

  @keyframes upDown{
    /* 0–50%: hareket (down -> up), 50–100%: bekleme */
    0%   { transform: translateY(0); }
    25%  { transform: translateY(var(--shift)); } /* aşağı */
    50%  { transform: translateY(0); }            /* yukarı, hareket bitti */
    100% { transform: translateY(0); }            /* 50–100% arası: 2s bekleme */
  }

  /* Hareketten rahatsız olan kullanıcılar için */
  @media (prefers-reduced-motion: reduce){
    .chevron{ animation: none; }
  }



  /* ADS TEST */
  /* Ortak stil */
  .ad-banner{
    --c1: #9333ea;      /* gradyan rengi 1 */
    --c2: #06b6d4;      /* gradyan rengi 2 */
    --bg: linear-gradient(135deg, var(--c1), var(--c2));
    --radius: 10px;

    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;

    display:grid;
    place-items:center;
    background: var(--bg);
    color:#fff;
    font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    letter-spacing:.5px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.18);
    user-select:none;
  }

  /* İsteğe bağlı: farklı temalar */
  .ad-theme-blue  { --c1:#2563eb; --c2:#22d3ee; }
  .ad-theme-amber { --c1:#f59e0b; --c2:#ef4444; }
  .ad-theme-green { --c1:#16a34a; --c2:#06b6d4; }
  .ad-theme-mono  { --bg: #111; }

  /* Yaygın banner ölçüleri */
  .ad-728x90   { width:728px;  height:90px;  }
  .ad-970x90   { width:970px;  height:90px;  }
  .ad-468x60   { width:468px;  height:60px;  }
  .ad-320x50   { width:320px;  height:50px;  }
  .ad-320x100  { width:320px;  height:100px; }

  /* Küçük ekranlarda taşmayı önlemek için otomatik sığdır (opsiyonel) */
  @media (max-width: 1024px){
    .ad-banner{ max-width: 92vw; width: min(100%, var(--w, 100%)); position: relative; margin-top: 15px; margin-bottom: 15px;}
    /* yüksekliği orana göre ölçeklemek istersen wrapper kullanman gerekir; bu basit örnekte sabit bırakıyoruz */
  }

  /* ADS TEST SON */

  /* 100dvh yoksa var(--vh) devreye girsin */
@supports not (height: 100dvh){
  .stage{ min-height: var(--vh); }
  :fullscreen .stage{ min-height: var(--vh); }
}

.flags {
  background: #3c465f;
  padding: 5px 5px 1px 5px;
  margin-top: 4px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 5px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flags a {  
  text-decoration: none;
}

.flagBadge {  
  width: 24px;
  margin-right: 3px;
  margin-left: 3px;
}