:root{
  --ink:#0e1116;
  --slate:#171c24;
  --panel:#1d2430;
  --paper:#efe7d6;
  --amber:#f0b429;
  --signal:#ff3d2e;
  --phosphor:#7dffb3;
  --oak:#d4b483;
  --mist:#9aa3b2;
  --line:rgba(239,231,214,.12);
  --dock:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
html,body{margin:0;padding:0}
body{
  min-height:100%;
  color:var(--paper);
  background:
    radial-gradient(900px 420px at 88% -8%,rgba(240,180,41,.16),transparent 52%),
    radial-gradient(720px 380px at -8% 18%,rgba(255,61,46,.1),transparent 48%),
    linear-gradient(165deg,#0b0e13 0%,var(--ink) 46%,#121820 100%);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto;
  font-size:clamp(1.05rem,1.8vw,1.125rem);
  line-height:1.72;
  word-spacing:.04em;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px}
a:hover{color:#ffd36a}
.atlan{position:absolute;left:-999px;top:auto}
.atlan:focus{left:12px;top:12px;z-index:80;background:var(--amber);color:var(--ink);padding:8px 12px}
.omurga{
  position:fixed;left:0;top:0;bottom:0;width:52px;z-index:30;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#11151c, #1a120e);
  border-right:1px solid var(--line);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Martian Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.28em;color:var(--oak);
}
.omurga i{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--signal);margin-inline:8px;
  animation:nabiz 1.4s ease-in-out infinite;
  writing-mode:horizontal-tb;
}
.cerceve{width:min(1120px,calc(100% - 36px));margin-inline:auto}
@media (min-width:960px){
  .cerceve{width:min(1120px,calc(100% - 108px))}
  body{padding-left:52px}
}

.ustluk{
  position:sticky;top:0;z-index:40;
  background:rgba(14,17,22,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.ustluk-ic{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "imza aksiyon"
    "menu diller";
  align-items:center;gap:10px 14px;
  padding:10px 4vw;
}
@media (min-width:1180px){
  .ustluk-ic{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"imza menu diller aksiyon";
  }
}
.imza{grid-area:imza;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);min-width:0}
.imza img{width:42px;height:42px;border-radius:11px;flex:0 0 auto}
.imza strong{
  display:block;font-family:"Syne",sans-serif;font-weight:800;
  letter-spacing:.04em;font-size:1.05rem;line-height:1.1
}
.imza span{display:block;font-family:"Martian Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--mist)}
.menu{
  grid-area:menu;
  display:flex;flex-wrap:wrap;gap:8px 14px;
  font-family:"Sofia Sans",system-ui,sans-serif;font-size:.88rem
}
.menu a{color:var(--mist);text-decoration:none}
.menu a:hover{color:var(--paper)}
.diller{grid-area:diller;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.diller a{
  font-family:"Martian Mono",monospace;font-size:.68rem;letter-spacing:.06em;
  color:var(--mist);text-decoration:none;border:1px solid var(--line);
  padding:4px 7px;border-radius:6px
}
.diller a[aria-current="page"]{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.aksiyon{grid-area:aksiyon;display:flex;gap:8px;flex-shrink:0}
.is{
  appearance:none;border:0;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 16px;border-radius:10px;
  font-family:"Syne",sans-serif;font-weight:800;letter-spacing:.03em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.is:hover{transform:translateY(-1px)}
.is-giris{
  background:var(--signal);color:#fff7f4;
  box-shadow:0 0 0 0 rgba(255,61,46,.45);
  animation:isik 1.8s ease-in-out infinite;
}
.is-uye{background:var(--amber);color:#1a1208}
.is-cizgi{background:transparent;color:var(--paper);border:1.5px solid var(--oak)}
@keyframes isik{
  0%,100%{box-shadow:0 0 0 0 rgba(255,61,46,0)}
  50%{box-shadow:0 0 0 9px rgba(255,61,46,.16)}
}
@keyframes nabiz{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

.altbant{
  overflow:hidden;
  background:#10141b;
  border-block:1px solid rgba(240,180,41,.22);
  font-family:"Martian Mono",monospace;
  font-size:.74rem;color:var(--amber);white-space:nowrap
}
.altbant-yol{display:inline-block;padding:9px 0;animation:kay 32s linear infinite}
.altbant-yol span{margin-right:42px}
@keyframes kay{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .altbant-yol,.is-giris,.omurga i,.fon-dalga{animation:none}
}

.sahne{position:relative;padding:22px 0 14px;overflow:hidden}
.fon-dalga{
  position:absolute;inset:auto -20% -80px;height:160px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,180,41,.08),transparent);
  animation:dalga 8s ease-in-out infinite alternate;
}
@keyframes dalga{to{transform:translateX(8%)}}
.levha{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 28%),
    var(--slate);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.levha-sol{padding:clamp(22px,4vw,40px);position:relative}
.levha-sol::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(180deg,transparent,transparent 3px,rgba(255,255,255,.4) 4px);
}
.canli{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Martian Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--phosphor)
}
.canli i{width:8px;height:8px;border-radius:50%;background:var(--phosphor);animation:nabiz 1.3s infinite}
h1{
  font-family:"Syne",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.55rem,3.6vw,2.25rem);line-height:1.15;margin:.28em 0 .35em
}
.lead{color:#d7d0c2;max-width:38rem;font-family:"Sofia Sans",system-ui,sans-serif;font-size:1.02rem;word-spacing:0}
.plaka{
  margin:16px 0 14px;padding:12px 14px;
  background:linear-gradient(180deg,#2a2114,#1c1812);
  border:1px dashed rgba(240,180,41,.45);
  border-radius:14px
}
.plaka small{display:block;font-family:"Martian Mono",monospace;font-size:.68rem;color:var(--oak);letter-spacing:.08em}
.plaka b{
  display:block;margin:.25em 0 .15em;
  font-family:"Syne",sans-serif;font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--amber);word-break:break-all
}
.plaka span{display:block;font-size:.88rem;color:var(--mist)}
.cift{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}
.kopya{
  font-family:"Martian Mono",monospace;font-size:.72rem;
  background:transparent;color:var(--oak);border:1px solid rgba(212,180,131,.4);
  border-radius:8px;padding:8px 10px;cursor:pointer
}
.kopya.kopyalandi{color:var(--phosphor);border-color:var(--phosphor)}
.levha-sag{
  background:
    linear-gradient(160deg,rgba(255,61,46,.16),transparent 40%),
    #141820;
  padding:clamp(22px,4vw,36px);
  border-left:1px dashed rgba(239,231,214,.16);
  display:flex;flex-direction:column;justify-content:center;gap:16px
}
.posta{
  font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:.95;color:var(--paper);letter-spacing:-.03em
}
.posta em{display:block;color:var(--amber);font-style:normal}
.adim{margin:0;padding-left:1.1em;color:#d2cbbe}
.adim li{margin:.45em 0}

.isaret{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:"Sofia Sans",sans-serif;font-size:.9rem;color:var(--mist);
  padding:14px 0 6px
}
.isaret a{color:var(--oak);text-decoration:none}
.isaret span{color:var(--paper)}

.kamera{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid var(--line);background:var(--panel);margin:10px 0 28px
}
.kamera-yol{display:flex;transition:transform .55s ease}
.kare{
  min-width:100%;padding:clamp(20px,4vw,34px);
  display:grid;grid-template-columns:.22fr 1fr;gap:18px;align-items:center
}
.kare-no{
  font-family:"Syne",sans-serif;font-weight:800;font-size:2.2rem;color:var(--amber);line-height:1
}
.kare h2{font-family:"Syne",sans-serif;font-size:clamp(1.2rem,2.4vw,1.55rem);margin:.1em 0 .35em}
.kare p{margin:0;color:#d4cdc0}
.kamera-ok{
  position:absolute;inset:12px 12px auto auto;display:flex;gap:6px;z-index:2
}
.kamera-ok button,.nokta button{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:#12161d;color:var(--paper);cursor:pointer;font-size:1.1rem
}
.nokta{display:flex;gap:6px;padding:0 18px 16px}
.nokta button{width:10px;height:10px;border-radius:50%;padding:0}
.nokta button.aktif{background:var(--amber);border-color:var(--amber)}

.yazi{
  background:var(--paper);color:#211910;
  border-radius:20px;padding:clamp(22px,4vw,42px);
  margin:0 0 22px;border:1px solid rgba(20,16,12,.08)
}
.yazi h2{
  font-family:"Syne",sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;margin:.15em 0 .35em;color:#16120e
}
.yazi h3{font-family:"Syne",sans-serif;font-size:1.2rem;margin:1.2em 0 .4em;color:#2a2118}
.yazi p{margin:.7em 0}
.yazi .pul{
  display:inline-block;font-family:"Martian Mono",monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:#8a4a1a;
  background:#f3d9a6;padding:4px 8px;border-radius:6px
}
.yazi .meta{font-family:"Sofia Sans",sans-serif;color:#6b5a48;font-size:.92rem}
.yazi img{border-radius:14px;margin:14px 0;border:1px solid rgba(20,16,12,.08)}
.yazi .iki{
  display:grid;grid-template-columns:1fr 1fr;gap:16px
}
.yazi .alinti{
  border-left:4px solid var(--signal);padding:.2em 0 .2em 1em;
  font-size:1.15rem;color:#3a2a1c
}
.yildiz{color:#b45309;letter-spacing:.08em}
.puan{width:100%;border-collapse:collapse;font-family:"Sofia Sans",sans-serif;margin-top:12px}
.puan th,.puan td{border-bottom:1px solid rgba(33,25,16,.12);text-align:left;padding:8px 6px}
.puan th{font-family:"Syne",sans-serif}

.etkinlik{
  display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
  background:linear-gradient(135deg,#241810,#151820 60%);
  border:1px solid rgba(240,180,41,.28);border-radius:20px;
  padding:clamp(20px,4vw,34px);margin:8px 0 22px
}
.etkinlik h2{font-family:"Syne",sans-serif;margin:.2em 0}
.sss details{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:4px 14px;margin:8px 0
}
.sss summary{
  cursor:pointer;font-family:"Syne",sans-serif;font-weight:700;padding:10px 0
}
.alt{
  border-top:1px solid var(--line);padding:28px 0 24px;color:var(--mist);
  font-family:"Sofia Sans",sans-serif;font-size:.95rem
}
.alt-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:22px}
.alt a{color:var(--oak);text-decoration:none}
.alt strong{display:block;color:var(--paper);font-family:"Syne",sans-serif;margin-bottom:.4em}

.sabit{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;gap:10px;justify-content:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,10,14,.94);
  border-top:1px solid rgba(240,180,41,.28);
}
.sabit .is{min-width:min(44vw,220px);min-height:52px;font-size:1.05rem}

@media (max-width:900px){
  .omurga{display:none}
  body{padding-left:0}
  .levha,.kare,.etkinlik,.alt-grid,.yazi .iki{grid-template-columns:1fr}
  .levha-sag{border-left:0;border-top:1px dashed rgba(239,231,214,.16)}
  .aksiyon .is{min-height:44px;padding:0 12px}
}
@media (max-width:560px){
  .cerceve{width:calc(100% - 22px)}
  .ustluk-ic{
    padding:10px 12px;
    grid-template-columns:1fr;
    grid-template-areas:
      "imza"
      "aksiyon"
      "menu"
      "diller";
  }
  .imza span span{display:none}
  .diller{justify-content:flex-start}
  h1{font-size:1.48rem}
  .aksiyon{width:100%}
  .aksiyon .is{flex:1}
}
