/* ==========================================================================
   Bulut Web Design, yasal sayfa stili
   gizlilik.html ve kvkk.html tarafından kullanılır.
   ========================================================================== */

:root{
  --bg:#0A0A0B; --fg:#F4F4F2; --mut:#8C8C94; --ac:#CDF03A; --acf:#0A0A0B;
  --dot:rgba(255,255,255,.055);
  --brd:rgba(255,255,255,.10);
  --gls:rgba(255,255,255,.055);
  --e:cubic-bezier(.16,1,.3,1);
  --ff:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max:800px; --pad:clamp(18px,4vw,34px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--fg); font-family:var(--ff);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:24px 24px; background-attachment:fixed;
}
::selection{ background:var(--ac); color:var(--acf); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

/* --- üst bar --- */
.ubar{ position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--brd); background:rgba(10,10,11,.82);
  -webkit-backdrop-filter:saturate(170%) blur(18px);
  backdrop-filter:saturate(170%) blur(18px); }
.ubar .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-top:14px; padding-bottom:14px; }
.logo{ display:flex; align-items:center; gap:9px; font-size:15px;
  font-weight:400; letter-spacing:-.015em; color:var(--mut);
  text-decoration:none; }
.logo{ white-space:nowrap; }
.logo b, .logo span{ white-space:nowrap; }
.logo b{ font-weight:600; color:var(--fg); }
.logo i{ width:38px; height:24px; flex:0 0 auto; background:var(--fg);
  opacity:.92; transform:translateY(-2px);
  -webkit-mask:url("kus-maske.png") no-repeat center/contain;
  mask:url("kus-maske.png") no-repeat center/contain;
  transition:background-color .5s var(--e); }
.logo:hover i{ background:var(--ac); }
.geri{ font-size:13.5px; color:var(--mut); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .3s var(--e); }
.geri:hover{ color:var(--fg); }
.geri svg{ width:14px; height:14px; }

/* --- içerik --- */
main{ padding:clamp(48px,8vh,86px) 0 clamp(60px,9vh,100px); }

.etiket{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px;
  border-radius:980px; border:1px solid var(--brd); background:var(--gls);
  font-size:12px; color:var(--mut); }
.etiket span{ width:6px; height:6px; border-radius:50%; background:var(--ac); }

h1{ margin-top:22px; font-size:clamp(30px,4.4vw,46px); font-weight:600;
  line-height:1.08; letter-spacing:-.035em; max-width:22ch; }
.tarih{ margin-top:16px; font-size:13px; color:var(--mut); }

h2{ margin-top:clamp(38px,5vw,56px); font-size:clamp(19px,2vw,23px);
  font-weight:600; line-height:1.25; letter-spacing:-.024em;
  padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--brd); }
h3{ margin-top:26px; font-size:15.5px; font-weight:600; letter-spacing:-.015em; }

p{ margin-top:14px; font-size:15px; line-height:1.72; color:#C2C2C8;
  max-width:70ch; }
ul, ol{ margin-top:14px; padding-left:20px; max-width:70ch; }
li{ font-size:15px; line-height:1.72; color:#C2C2C8; margin-top:8px; }
li::marker{ color:var(--mut); }
strong{ color:var(--fg); font-weight:600; }

a.bag{ color:var(--fg); text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px;
  transition:text-decoration-color .3s var(--e); }
a.bag:hover{ text-decoration-color:var(--ac); }

/* doldurulması gereken yerler */
.doldur{ color:var(--ac); background:rgba(205,240,58,.10);
  border:1px dashed rgba(205,240,58,.45); border-radius:6px;
  padding:1px 7px; font-size:.94em; white-space:nowrap; }

/* bilgi kartı */
.kart{ margin-top:20px; padding:20px 22px; border-radius:20px;
  border:1px solid var(--brd); background:var(--gls); }
.kart p{ margin-top:8px; }
.kart p:first-child{ margin-top:0; }

/* tablo */
.tablo{ margin-top:18px; width:100%; border-collapse:collapse;
  border:1px solid var(--brd); border-radius:16px; overflow:hidden;
  display:block; overflow-x:auto; }
.tablo table{ width:100%; border-collapse:collapse; min-width:520px; }
.tablo th, .tablo td{ padding:13px 16px; text-align:left; font-size:14px;
  line-height:1.55; border-bottom:1px solid var(--brd); }
.tablo th{ font-weight:600; color:var(--fg); background:rgba(255,255,255,.03);
  font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; }
.tablo td{ color:#C2C2C8; vertical-align:top; }
.tablo tr:last-child td{ border-bottom:0; }

/* --- footer --- */
footer{ border-top:1px solid var(--brd); padding:28px 0 34px; }
footer .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--mut); }
footer a{ color:var(--mut); text-decoration:none;
  transition:color .3s var(--e); }
footer a:hover{ color:var(--fg); }
footer nav{ display:flex; gap:18px; flex-wrap:wrap; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}