/* Rayist sefer saatleri sayfasi */
.sf-main { padding-top: 7.5rem; padding-bottom: 3rem; color: #f5f3f7; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.sf-hero { max-width: 46rem; }
.sf-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font: 500 .7rem/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #ffb37a; }
.sf-eyebrow i { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: sfPing 1.6s infinite; }
@keyframes sfPing { 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.sf-hero h1 { margin: .8rem 0 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.sf-hero h1 em { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; background: linear-gradient(135deg, #ffb37a, #ff6b2c 45%, #c9a7ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.sf-hero p { margin: .9rem 0 0; color: rgba(245,243,247,.68); line-height: 1.65; font-size: 1rem; }

.sf-card { margin-top: 1.6rem; border-radius: 1.6rem; padding: 1.2rem; background: rgba(15,10,24,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.35); }
.sf-label { display: block; margin: 0 0 .7rem; font: 600 .7rem/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,243,247,.5); }
.sf-lines { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sf-line { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .7rem .5rem .5rem; border: 0; border-radius: 1rem; cursor: pointer; text-align: left; color: #f5f3f7; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .2s, box-shadow .2s, transform .2s; font: inherit; }
.sf-line:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.sf-line b { flex: none; display: grid; place-items: center; min-width: 2.6rem; height: 2rem; padding: 0 .4rem; border-radius: .65rem; font: 800 .82rem/1 'Geist', system-ui, sans-serif; color: #fff; background: var(--c); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sf-line span { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(245,243,247,.82); }
.sf-line[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 2px var(--c); }

.sf-empty { margin-top: 1rem; padding: 1.4rem; border-radius: 1.2rem; text-align: center; color: rgba(245,243,247,.6); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sf-tool { margin-top: 1rem; scroll-margin-top: 6rem; }
.sf-tool-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.sf-line-title { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.sf-line-title b { display: grid; place-items: center; min-width: 2.8rem; height: 2.1rem; padding: 0 .45rem; border-radius: .7rem; font-size: .9rem; color: #fff; }
.sf-field { margin-bottom: .9rem; }
.sf-select { width: 100%; padding: .8rem 1rem; border-radius: .9rem; border: 0; color: #f5f3f7; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font: 600 .95rem/1.2 'Geist', system-ui, sans-serif; appearance: auto; }
.sf-select option { color: #111; }
.sf-segs { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-seg { padding: .55rem .8rem; border: 0; border-radius: .8rem; cursor: pointer; color: rgba(245,243,247,.8); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 600 .8rem/1.2 'Geist', system-ui, sans-serif; }
.sf-seg i { font-size: .7rem; opacity: .7; }
.sf-seg[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--line, #ff6b2c) 28%, transparent); box-shadow: inset 0 0 0 2px var(--line, #ff6b2c); }
.sf-swap { margin-left: auto; }

.sf-next { border-radius: 1.3rem; padding: 1.1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--line, #ff6b2c) 26%, rgba(15,10,24,.9)), rgba(15,10,24,.9)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sf-next-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .8rem; }
.sf-live { flex-basis: 100%; display: inline-flex; align-items: center; gap: .45rem; font: 600 .7rem/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.sf-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; animation: sfPing 1.6s infinite; }
.sf-next-main strong { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.sf-next-main em { font-style: normal; font: 600 1.1rem/1 'Geist Mono', ui-monospace, monospace; color: rgba(255,255,255,.75); }
.sf-next-rest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: 1rem; }
.sf-next-rest span { display: grid; gap: .15rem; padding: .55rem .6rem; border-radius: .8rem; background: rgba(0,0,0,.25); }
.sf-next-rest b { font: 700 .95rem/1 'Geist Mono', ui-monospace, monospace; }
.sf-next-rest small { font-size: .7rem; color: rgba(255,255,255,.6); }
.sf-next-empty { padding: .3rem; line-height: 1.55; color: rgba(245,243,247,.78); }
.sf-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .9rem; font-size: .8rem; color: rgba(245,243,247,.6); }
.sf-meta i { margin-right: .25rem; color: #ffb37a; }
.sf-meta b { color: #fff; font-family: 'Geist Mono', ui-monospace, monospace; }

.sf-table { max-height: 520px; overflow-y: auto; border-radius: 1.2rem; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overscroll-behavior: contain; }
.sf-row { display: grid; grid-template-columns: 3.2rem 1fr; align-items: start; border-bottom: 1px solid rgba(255,255,255,.05); }
.sf-row.is-now { background: color-mix(in srgb, var(--line, #ff6b2c) 12%, transparent); }
.sf-h { padding: .62rem 0; text-align: center; font: 700 .9rem/1 'Geist Mono', ui-monospace, monospace; color: #ffb37a; border-right: 1px solid rgba(255,255,255,.06); }
.sf-row > div { display: flex; flex-wrap: wrap; gap: .3rem; padding: .45rem .6rem; }
.sf-row i { font-style: normal; min-width: 2.1rem; padding: .22rem .35rem; border-radius: .45rem; text-align: center; font: 600 .82rem/1.2 'Geist Mono', ui-monospace, monospace; color: rgba(245,243,247,.85); background: rgba(255,255,255,.05); }
.sf-row i.is-past { opacity: .35; }
.sf-row i.is-next { color: #fff; background: var(--line, #ff6b2c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--line, #ff6b2c) 35%, transparent); }
.sf-note { margin: .8rem .2rem 0; font-size: .75rem; line-height: 1.5; color: rgba(245,243,247,.5); }

.sf-more { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.4rem; }
.sf-box { border-radius: 1.4rem; padding: 1.2rem; background: rgba(15,10,24,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sf-box h2 { margin: 0 0 .5rem; font-size: 1.1rem; letter-spacing: -.01em; }
.sf-box p { margin: 0; font-size: .88rem; line-height: 1.6; color: rgba(245,243,247,.66); }
.sf-box ul { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-box li a { display: inline-flex; padding: .35rem .6rem; border-radius: .6rem; font-size: .8rem; font-weight: 600; color: #f5f3f7; background: rgba(255,255,255,.06); text-decoration: none; }
.sf-box li a:hover { background: rgba(255,255,255,.12); }
.sf-stores { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.sf-stores a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .9rem; border-radius: .9rem; font-weight: 700; font-size: .82rem; text-decoration: none; color: #07030d; background: #fff; }
.sf-stores a.ghost { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

@media (max-width: 899px) {
  .sf-main { padding-top: 6.2rem; }
  .sf-tool-grid { grid-template-columns: 1fr; }
  .sf-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-line span { font-size: .74rem; }
  .sf-next-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-table { max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .sf-eyebrow i, .sf-live i { animation: none; } }