/* SUP Takip — Claude Design handoff'undan üretime alınan tasarım.
   Palet, tipografi ve hareketler tasarımdan BİREBİR korunur:
   siyah zemin #000, vurgu sarı #FFD60A, başlıklar Instrument Serif, gövde Manrope. */
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#FFD60A;text-decoration:none}
a:hover{color:#fff}
.num{font-variant-numeric:tabular-nums}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@keyframes wave{to{transform:translateX(-50%)}}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{from{stroke-dashoffset:565}to{stroke-dashoffset:0}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(-4deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ripple{from{transform:scale(.4);opacity:.8}to{transform:scale(2.4);opacity:0}}
.bar{transform-origin:bottom;animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both}
nav a.gizle:hover,nav a:hover{color:#fff}
.dil{background:#1C1C1E;border:1px solid #3A3A3A;color:#fff;font:700 12px Manrope;letter-spacing:.08em;padding:8px 12px;border-radius:999px;cursor:pointer}
.dil:hover{border-color:#FFD60A}
.sari{display:inline-flex;align-items:center;gap:10px;background:#FFD60A;color:#000;font:800 15px Manrope;padding:15px 22px;border-radius:14px}
.sari:hover{background:#fff;color:#000}
.cerceve{display:inline-flex;align-items:center;gap:8px;color:#fff;font:700 15px Manrope;padding:15px 18px;border-radius:14px;border:1px solid #3A3A3A}
.cerceve:hover{border-color:#fff;color:#fff}
summary::-webkit-details-marker{display:none}
details[open] summary{color:#FFD60A}
/* Yasal sayfaların gövde tipografisi */
.yasal{padding:80px 6vw 120px;max-width:760px;margin:0 auto;font:500 16px/1.7 Manrope;color:#B8BEC6}
.yasal h1{margin:14px 0 0;font:400 clamp(34px,5vw,58px)/1.04 'Instrument Serif',serif;letter-spacing:-.02em;color:#fff}
.yasal h2{margin:38px 0 10px;font:800 19px Manrope;color:#fff}
.yasal h3{margin:28px 0 8px;font:800 17px Manrope;color:#fff}
.yasal ul,.yasal ol{padding-left:20px}
.yasal li{margin:7px 0}
.yasal li::marker{color:#FFD60A}
.yasal table{border-collapse:collapse;width:100%;font:500 14px/1.5 Manrope;margin:16px 0}
.yasal th,.yasal td{text-align:left;padding:10px;border-bottom:1px solid #1C1C1E;vertical-align:top}
.yasal th{color:#FFD60A;font-weight:700}
.uyariKutu{border:1px solid #5a2020;background:#1a0d0d;border-radius:16px;padding:16px 18px;margin:22px 0;color:#e8d5d5}

/* ————————————————————————————————————————————————————————————————
   Mobil düzen (09.09.2026). Tasarım masaüstü için kurulmuştu: iki sütunlu
   bölümler telefonda yan yana sıkışıyor, kahraman bölümü 88vh yüksekliğiyle
   ekranı taşırıyordu. Palet, tipografi ve hareketler DEĞİŞMEDİ — yalnız
   sütunlar tek sıraya iniyor ve boşluklar daralıyor.
   ———————————————————————————————————————————————————————————————— */
@media (max-width:860px){
  .iki,.mobil-tek{grid-template-columns:minmax(0,1fr)!important}
  nav .gizle{display:none}
}

@media (max-width:760px){
  /* Kahraman: sabit yükseklik kalkar, içerik kadar yer kaplar. */
  .mobil-tek[style*="min-height"]{min-height:auto!important;padding-top:80px!important}

  /* Yatay iç boşluklar telefonda 6vw yerine sabit ve daha dar. */
  section,header,footer{padding-left:22px!important;padding-right:22px!important}

  /* Dikey ritim: 120px'lik bölüm boşlukları telefonda yarıya iner. */
  section{padding-top:64px!important;padding-bottom:64px!important}

  /* Düğmeler alt alta ve tam genişlik — küçük ekranda yan yana taşıyorlardı. */
  .sari,.cerceve{width:100%;justify-content:center;box-sizing:border-box}

  /* Izgara boşlukları daralır ki kartlar kenarlara yapışmasın. */
  .iki,.mobil-tek{gap:22px!important}
}

@media (max-width:760px){
  /* Tek sütuna inen ızgaralarda sağ kenar çizgileri, içerikle ilgisi olmayan dikey bir
     ray gibi duruyordu; alt çizgiye çevrilir (kartları hâlâ ayırır, ray oluşturmaz). */
  .mobil-tek > *[style*="border-right"],.iki > *[style*="border-right"],
  [style*="auto-fit"] > *[style*="border-right"]{
    border-right:0!important;border-bottom:1px solid #1C1C1E;
  }

  /* Fotoğraf zeminli bölümlerde metin masaüstünde karanlık sütunda duruyordu; tek sütuna
     inince parlak alanın üzerine geliyor ve okunmuyordu. Bölüme koyu bir perde eklenir —
     fotoğraf görünür kalır, metin kontrastı garanti olur. */
  section[style*="url("]::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.62) 45%,rgba(0,0,0,.86));
    pointer-events:none;
  }
  section[style*="url("] > *{position:relative;z-index:1}

  /* Alt bilgide marka adı ile açıklama yan yana sıkışıyordu. */
  footer [style*="display:flex"]{flex-wrap:wrap;gap:10px}
}

@media (max-width:460px){
  /* Çok dar ekranlarda saat maketinin içindeki iki sütunlu minyatür arayüz
     korunur (o bilerek iki sütun), ama kart ızgaraları iyice sadeleşir. */
  .yasal{padding:56px 22px 80px}
}

/* Geniş içerik (tablolar) yasal sayfalarda kendi kabında kaysın; sayfa gövdesi
   ASLA yatay kaymaz. */
.yasal .kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,svg,video{max-width:100%;height:auto}


/* Saat maketindeki SOS halkasının içindeki etiket, halkadan (190px) daha genişti ve iki
   ucundan kırpılıyordu. Satır sarmasına izin verilir; ortalama zaten kapsayıcıda var. */
[data-t="sosCrown"]{white-space:normal;max-width:150px;margin-left:auto;margin-right:auto;line-height:1.35}