@layer temel, duzen, bilesen;

@layer temel {
  :root {
    color-scheme: dark;
    --zemin: oklch(0.17 0.03 265);
    --yuzey: oklch(0.22 0.03 265);
    --yuzey-2: oklch(0.27 0.03 265);
    --cizgi: oklch(0.36 0.03 265);
    --yazi: oklch(0.96 0.01 265);
    --soluk: oklch(0.74 0.03 265);
    --vurgu: oklch(0.78 0.14 230);
    --canli: oklch(0.65 0.23 25);
    --basari: oklch(0.72 0.17 160);
    --uyari: oklch(0.8 0.15 80);
    --r-k: 10px; --r-o: 14px; --r-b: 20px;
    --gecis: 180ms cubic-bezier(.2, .7, .2, 1);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; min-height: 100dvh; background: var(--zemin); color: var(--yazi); font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
  h1, h2, p { margin: 0; }
  h1 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); letter-spacing: -.02em; }
  button, input, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
  .gizli { position: absolute; width: 0; height: 0; }
  .ikon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
  .soluk { color: var(--soluk); }
}

@layer duzen {
  .uygulama { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .ust { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--zemin); border-bottom: 1px solid color-mix(in oklch, var(--cizgi) 55%, transparent); }
  .ust-sag { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
  main { width: min(100%, 1240px); margin-inline: auto; padding: 16px; }
  .gorunum { display: grid; gap: 14px; }
  .canli-duzen { display: grid; gap: 14px; container-type: inline-size; }
  .olcumler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sekmeler { position: fixed; inset: auto 0 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: color-mix(in oklch, var(--yuzey) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--cizgi); }

  @media (min-width: 900px) {
    .uygulama { padding-bottom: 0; }
    .ust { background: color-mix(in oklch, var(--zemin) 86%, transparent); backdrop-filter: blur(14px); }
    .sekmeler { position: static; display: flex; gap: 4px; padding: 4px; margin-inline-start: 20px; border: 1px solid var(--cizgi); border-radius: 999px; }
    .canli-duzen { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
    .olcumler { grid-template-columns: 1fr; }
    main { padding: 24px; }
  }
}

@layer bilesen {
  .marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; }
  .marka .ikon { color: var(--vurgu); }

  .sekmeler a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; justify-content: center; font-size: .75rem; color: var(--soluk); transition: color var(--gecis); }
  .sekmeler a[aria-current="page"] { color: var(--vurgu); }
  @media (min-width: 900px) {
    .sekmeler a { flex-direction: row; gap: 8px; min-height: 36px; padding-inline: 16px; font-size: .875rem; border-radius: 999px; }
    .sekmeler a[aria-current="page"] { background: var(--yuzey-2); color: var(--yazi); }
  }

  .ikon-dugme { display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: var(--r-k); color: var(--soluk); cursor: pointer; transition: background var(--gecis), color var(--gecis); }
  .ikon-dugme:hover { background: var(--yuzey-2); color: var(--yazi); }
  .yazi-dugme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-k); font-size: .875rem; cursor: pointer; transition: background var(--gecis), transform var(--gecis); }
  .yazi-dugme:hover { background: var(--yuzey-2); }
  .yazi-dugme:active, .ana-dugme:active, .cam-dugme:active { transform: scale(.97); }
  .yazi-dugme:disabled { opacity: .45; cursor: default; }
  @media (max-width: 500px) { #yukle span { display: none; } }

  .serit { padding: 8px 16px; text-align: center; font-size: .875rem; background: color-mix(in oklch, var(--uyari) 22%, var(--zemin)); }

  .giris { position: relative; display: grid; place-items: center; min-height: 100dvh; padding: 24px; overflow: hidden; }
  .aurora { position: absolute; inset: 0; pointer-events: none; }
  .aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .32; will-change: transform; }
  .aurora i:first-child { top: -30vmax; left: -20vmax; background: radial-gradient(circle, var(--vurgu), transparent 65%); animation: suzul 22s ease-in-out infinite alternate; }
  .aurora i:last-child { bottom: -35vmax; right: -25vmax; background: radial-gradient(circle, oklch(.5 .18 285), transparent 65%); animation: suzul 28s ease-in-out infinite alternate-reverse; }
  @keyframes suzul { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.1); } }
  .giris-kart { position: relative; display: grid; gap: 8px; width: min(100%, 400px); padding: clamp(24px, 6vw, 36px); background: color-mix(in oklch, var(--yuzey) 72%, transparent); backdrop-filter: blur(24px); border: 1px solid color-mix(in oklch, var(--yazi) 12%, transparent); border-radius: var(--r-b); box-shadow: 0 30px 80px -30px oklch(0 0 0 / .8); }
  .giris-kart .soluk { margin-bottom: 14px; font-size: .9375rem; }
  .giris-kart label { margin-top: 6px; font-size: .875rem; font-weight: 550; }
  .giris-kart input { width: 100%; min-height: 48px; padding-inline: 14px; background: color-mix(in oklch, var(--zemin) 70%, transparent); border: 1px solid var(--cizgi); border-radius: var(--r-k); font-size: 1rem; transition: border-color var(--gecis); }
  .giris-kart input:focus { outline: 0; border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in oklch, var(--vurgu) 28%, transparent); }
  .marka-buyuk { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 16px; font-size: 1.5rem; color: var(--zemin); background: linear-gradient(145deg, var(--vurgu), oklch(.62 .16 255)); box-shadow: 0 10px 30px -10px var(--vurgu); }
  .sifre-alani { position: relative; }
  .sifre-alani input { padding-inline-end: 50px; }
  .sifre-alani button { position: absolute; inset: 2px 2px 2px auto; }
  .sifre-alani button[aria-pressed="true"] { color: var(--vurgu); }
  .mesaj { min-height: 1.4em; margin-top: 4px; font-size: .875rem; color: oklch(.76 .15 25); }
  .ana-dugme { min-height: 50px; margin-top: 4px; background: var(--vurgu); border: 0; border-radius: var(--r-k); color: oklch(.17 .03 265); font-weight: 650; cursor: pointer; transition: filter var(--gecis), transform var(--gecis); }
  .ana-dugme:hover { filter: brightness(1.08); }
  .ana-dugme:disabled { opacity: .55; cursor: default; }

  .sahne { position: relative; aspect-ratio: 16 / 9; width: 100%; max-height: 72dvh; margin-inline: auto; overflow: hidden; background: oklch(.1 .01 265); border: 1px solid color-mix(in oklch, var(--cizgi) 60%, transparent); border-radius: var(--r-b); }
  .sahne video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
  .sahne:fullscreen { border: 0; border-radius: 0; }
  .sahne-ust { position: absolute; inset: 12px 12px auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
  .sahne-alt { position: absolute; inset: auto 12px 12px; display: flex; justify-content: flex-end; gap: 8px; }
  .rozet, .saat { padding: 5px 11px; background: oklch(0 0 0 / .62); backdrop-filter: blur(8px); border-radius: 999px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .saat { margin-inline-start: auto; }
  .rozet { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
  .rozet b { font-weight: inherit; }
  .rozet i { width: 9px; height: 9px; border-radius: 50%; background: var(--soluk); }
  .rozet.acik i { background: var(--canli); animation: nabiz 1.4s ease-in-out infinite; }
  .rozet.kapali i { background: var(--uyari); }
  @keyframes nabiz { 50% { opacity: .3; } }
  .cam-dugme { display: grid; place-items: center; width: 44px; height: 44px; background: oklch(0 0 0 / .58); backdrop-filter: blur(8px); border: 0; border-radius: 12px; color: #fff; cursor: pointer; transition: background var(--gecis), transform var(--gecis); }
  .cam-dugme:hover { background: oklch(0 0 0 / .78); }
  .cam-dugme:disabled { opacity: .4; cursor: default; }
  .sahne-bos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; background: radial-gradient(circle at center, var(--yuzey), oklch(.12 .02 265)); }
  .sahne-bos .ikon { width: 44px; height: 44px; margin-bottom: 6px; color: var(--cizgi); }
  .sahne-bos h2 { font-size: 1.125rem; }
  .sahne-bos p { max-width: 42ch; font-size: .9375rem; }

  .olcum { display: grid; gap: 2px; padding: 12px 14px; background: var(--yuzey); border: 1px solid color-mix(in oklch, var(--cizgi) 45%, transparent); border-radius: var(--r-o); }
  .olcum span { font-size: .75rem; color: var(--soluk); }
  .olcum strong { font-size: 1.0625rem; font-weight: 620; font-variant-numeric: tabular-nums; }

  .gunler { display: flex; gap: 8px; padding-block: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .gunler button { flex: none; min-height: 44px; padding-inline: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px; font-size: .875rem; cursor: pointer; scroll-snap-align: start; transition: background var(--gecis); }
  .gunler button[aria-pressed="true"] { background: var(--vurgu); border-color: var(--vurgu); color: oklch(.17 .03 265); font-weight: 650; }

  .kontrol-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .hiz { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-k); font-size: .875rem; }
  .hiz select { min-height: 36px; background: transparent; border: 0; }
  .hiz option { background: var(--yuzey); }
  #parca-indir { margin-inline-start: auto; }

  .cizelge-kutu { padding: 12px 14px 8px; background: var(--yuzey); border: 1px solid color-mix(in oklch, var(--cizgi) 45%, transparent); border-radius: var(--r-o); }
  .cizelge { position: relative; height: 44px; overflow: hidden; background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--cizgi) 60%, transparent) 0 1px, transparent 1px calc(100% / 24)), var(--zemin); border-radius: var(--r-k); cursor: pointer; touch-action: manipulation; }
  .cizelge u { position: absolute; inset-block: 6px; min-width: 3px; border-radius: 4px; background: linear-gradient(180deg, var(--vurgu), oklch(.62 .16 255)); text-decoration: none; pointer-events: none; }
  .cizelge i { position: absolute; inset-block: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; }
  .cizelge b { position: absolute; top: 2px; padding: 0 6px; background: oklch(0 0 0 / .8); border-radius: 4px; font-size: .75rem; font-weight: 500; pointer-events: none; transform: translateX(-50%); }
  .saatler { display: flex; justify-content: space-between; margin-top: 4px; font-size: .6875rem; color: var(--soluk); font-variant-numeric: tabular-nums; }

  .alt-baslik { font-size: 1rem; margin-top: 6px; }
  .kayit-listesi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .kayit-listesi li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; background: var(--yuzey); border: 1px solid color-mix(in oklch, var(--cizgi) 45%, transparent); border-radius: var(--r-o); }
  .kayit-listesi li > button { flex: 1; display: grid; gap: 1px; min-height: 44px; padding: 4px 6px; background: transparent; border: 0; text-align: start; cursor: pointer; font-variant-numeric: tabular-nums; }
  .kayit-listesi strong { font-weight: 620; }
  .kayit-listesi span { font-size: .8125rem; color: var(--soluk); }
  .kayit-listesi .bos { padding: 16px; color: var(--soluk); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}