/* ==================================================================
   GECCEBET · TIDE BOARD, CUZDAN, 404, SPOR CERCEVESI, SANS CARKI
   Bu sayfalar kendi bileseniyle gelmiyor: anasayfadaki .tide ve
   hesap alanindaki .bal / .tbl burada aynen kullaniliyor. Dosyada
   sadece o bilesenlerin TAM SAYFA halinde ihtiyac duydugu
   duzeltmeler ve bu sayfalara ozel iki bilesen var.
   app.css, casino.css (ve kullanan sayfada hesap.css / belge.css)
   yuklendikten SONRA gelir.
   ================================================================== */


/* ==================================================================
   HATA SAYFASI
   ================================================================== */

/* Uc dugme yan yana, dar ekranda alt alta ve tam genislikte. Hata
   sayfasinda kisinin tek isi buradan cikmak; dugmeyi kucultmenin
   bir sebebi yok.
   Sinif adi ".err" DEGIL: auth.css'te .err form altindaki hata
   satiri ve varsayilani display:none. Ayni adi kullanmak hata
   sayfasinin tamamini gorunmez yapiyordu. */
.oops { min-height: 46vh; }
.oops-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

@media (max-width: 560px) {
  .oops-go { display: grid; }
  .oops-go > * { width: 100%; }
}


/* ==================================================================
   BELGE PARCALARI
   Bu sayfalarda tam bir politika metni yok, ama "kurallar operatorden
   gelecek" kutusu ve sirali anlatim var. belge.css o kutuyu zaten
   tanimliyor; burada sadece kutunun etrafindaki paragraf kaliyor.
   ================================================================== */

.doc-body > p {
  margin: 0 0 13px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--tx-2);
}
.doc-body > p > a {
  color: var(--aqua-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc-body > p > a:hover { color: var(--tx); }


/* ==================================================================
   TIDE BOARD
   ================================================================== */

/* Gecmis tablosu dort sutun ve hepsi kisa metin: hesap alanindaki
   640px alt sinir burada yatay kaydirma cubugunu gereksiz yere
   goruntuluyordu. Tam genislikte de 1230px'e yayiliyordu: dort
   kisa kelime arasinda ekranin yarisi kadar bosluk kaliyor ve
   satiri soldan saga takip etmek zorlasiyordu. */
.tide-tbl { min-width: 460px; max-width: 780px; }
.tide-tbl th[scope="row"] {
  font-weight: 700;
  color: var(--tx);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Sayfanin kendi basligi zaten "Three offers surface every night"
   diyor; seridin ustundeki baslik bu yuzden tek satir kaliyor ve
   anasayfadaki uc satirlik bloga gore fazla bosluk biraktigi icin
   alt bosluk kisaliyor. */
.tide-head { margin-bottom: 22px; }


/* ==================================================================
   CUZDAN
   ================================================================== */

/* Ozet sayfasinda yan sutunda IKI satir var, burada UC. Ucuncu
   satirla birlikte aciklama paragrafi iyice asagi kaliyordu;
   satirlar arasi bosluk biraz daraliyor. */
.bal-side { gap: 12px; }

/* ==================================================================
   SPOR CERCEVESI
   Icerideki her sey ucuncu taraf modulun; burada yalnizca onun
   oturdugu kutu, sekmeler ve modul gelmediginde gorunen blok var.
   ================================================================== */

.sb { padding-top: 8px; }

.sb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 44px;
  margin-bottom: 20px;
}
.sb-head .page-title { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }

.sb-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.sb-tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.sb-tabs a:hover { color: var(--tx); }
.sb-tabs a.is-on { background: rgba(255, 138, 146, .13); color: var(--aqua-soft); }

/* MODULUN KABI. overflow VERILMIYOR: modulun kendi kaydirmasi var,
   ic ice iki kaydirma alani mobilde kuponu erisilmez yapiyor.
   Yukseklik alt sinir olarak veriliyor - modul kendi boyunu
   basacak, ama yuklenene kadar sayfa cokmesin. */
.sb-mount {
  min-height: 60vh;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.sb-frame { display: block; width: 100%; border: 0; }

/* TAM GENISLIK SPOR (kullanici karari 2026-09-24). Spor modulu sol menu
   rayinin hemen sagindan ekranin sag kenarina uzanir; header dokunulmaz.
   Kural YALNIZ spor sayfasinin kancasina bagli (.page-frame.sb-page-frame,
   show.blade.php @section('cerceve_sinifi')) - genel .page-frame'e
   dokunulmuyor, baska sayfalar ayni kalir.
   --sb-sol = rayin sol boslugu + ray genisligi (76px, arsenal.css
   .floating-sidebar) + 14px aralik. Ray hover'da 252px'e acilir ama
   ustte yuzer (fixed), icerigi itmez - kapali genislige gore hizalanir.
   <=780px'te ray gizli (arsenal.css), iki kenar da dar. */
.sb-page-frame { --sb-sol: 110px; --sb-sag: 16px; }
.page-frame.sb-page-frame {
  width: auto;
  max-width: none;
  margin-left: var(--sb-sol);
  margin-right: var(--sb-sag);
}
.sb-page-frame .sb.wrap { max-width: none; padding-inline: 0; }
@media (max-width: 1200px) {
  .sb-page-frame { --sb-sol: 102px; }
}
@media (max-width: 780px) {
  .sb-page-frame { --sb-sol: 8px; --sb-sag: 8px; }
}

.sb-stub {
  display: grid;
  /* align-content olmadan satirlar kutunun boyuna YAYILIYOR: simge
     tepede, yazi ortada, aciklama dipte kaliyordu. */
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 60vh;
  padding: 40px 24px;
  text-align: center;
}
.sb-stub svg { width: 34px; height: 34px; color: var(--tx-4); }
.sb-stub b { font-size: 15px; font-weight: 700; color: var(--tx-2); }
.sb-stub span { font-size: 13px; font-weight: 300; color: var(--tx-3); }

.sb-down { margin-top: 18px; }
.sb-down p { margin: 0 0 6px; font-size: 14.5px; font-weight: 300; color: var(--tx-2); }
.sb-down p b { font-weight: 700; color: var(--tx); }
.sb-down[hidden] { display: none; }

@media (max-width: 980px) {
  /* Kupon mobilde ekranin altina yapisiyor ve bizim alt menumuzle
     cakisiyor. Alt bosluk alt menu yuksekligi kadar. */
  .sb-mount { margin-bottom: 76px; }
  .sb-head { margin-top: 30px; }
}
/* Dort sekme tek satirda 620px altinda sigmiyor: flex:1 hepsini
   esitleyince "Virtual Sports" iki satira kirilip serit yukseliyordu.
   Ikiye iki izgara - dort kutu da ayni boyda ve yazi bolunmuyor. */
@media (max-width: 620px) {
  .sb-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .sb-tabs a { justify-content: center; padding-inline: 10px; }
  /* Iki satira dusunce hap bicimi birakiliyor: 999px yaricap tek
     satirlik bir seritte dogru, iki satirlik bir blokta bademe
     benziyor ve icindeki aktif hapin koselerine carpiyor. */
  .sb-tabs { border-radius: var(--r); }
  .sb-tabs a { border-radius: var(--r-sm); }
}


/* ==================================================================
   SANS CARKI
   ================================================================== */

.cark { padding-bottom: 40px; }

/* Izgara tam genislige yayilmiyor: 1400px'lik bir satirda cark
   solda kucuk bir daire, yaninda yarim ekran bosluk kaliyordu. */
.cark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 28px;
  max-width: 1000px;
  margin-top: 28px;
}

.cark-kutu {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.cark-svg { width: 100%; max-width: 500px; height: auto; display: block; }

/* Isaret carkin USTUNDE duruyor, donen grubun disinda. */
.cark-ok {
  position: absolute;
  inset-block-start: 18px;
  width: 26px;
  height: 20px;
  z-index: 2;
  fill: var(--aqua-bright);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* Donusun merkezi kutunun ortasi. transform-origin yuzde olarak
   verilince SVG'de kutunun degil kullanicinin bekledigi yerin
   disina kayiyordu; piksel degeri viewBox ile ayni. */
.cark-don { transform-origin: 170px 170px; }

/* Dilimler iki tonda: sekiz ayri renk karnaval oluyor, tek ton
   ise dilimlerin nerede bittigini gostermiyor. */
.cark-dilim {
  fill: rgba(255, 138, 146, .10);
  stroke: rgba(255, 138, 146, .26);
  stroke-width: 1;
}
.cark-dilim:nth-child(even) { fill: rgba(255, 255, 255, .035); }

.cark-yazi {
  font-family: var(--sans, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  fill: rgba(245, 244, 236, .86);
}

.cark-goz { fill: #26130d; stroke: rgba(255, 138, 146, .3); stroke-width: 1; }

.cark-yan { display: grid; gap: 14px; }
.cark-panel {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.cark-k {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.cark-panel > p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--tx-2);
}
.cark-form { margin: 0; }

/* SONUC BOSKEN YER KAPLAMIYOR: sunucudan once burada bir kutu
   durmasi "bir sey kazandin" izlenimi veriyordu. */
.cark-sonuc {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--aqua-soft);
}
.cark-sonuc:empty { display: none; }
.cark-next { margin: 0; font-size: 12.5px; font-weight: 300; color: var(--tx-3); }
.cark-next[hidden] { display: none; }

.cark-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cark-list li { display: grid; gap: 2px; }
.cark-list b { font-size: 14px; font-weight: 700; color: var(--tx); }
.cark-list span { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--tx-3); }

.cark-fine {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--tx-3);
}
.cark-fine a { color: var(--aqua-soft); text-decoration: underline; text-underline-offset: 3px; }
.cark-fine a:hover { color: var(--tx); }

@media (max-width: 980px) {
  .cark-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cark-kutu { padding: 18px; }
  .cark-svg { max-width: 340px; }
}
@media (max-width: 430px) {
  .cark-panel { padding: 18px 16px; }
  .cark-yazi { font-size: 14px; }
}