:root{
    --bg:#F5F5F7;
    --card:#FFFFFF;
    --ink:#1D1D1F;
    --muted:#6E6E73;
    --line:rgba(0,0,0,.08);
    --line-strong:rgba(0,0,0,.14);
    --hover:rgba(0,0,0,.028);
    --accent:#0A6C4A;
    --accent-soft:rgba(10,108,74,.12);
    --mavi:#1454CC;
    --bar-bg:#1454CC;
    --bar-ink:#FFFFFF;
    --bar-alt:rgba(255,255,255,.76);
    --bar-cizgi:transparent;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.07);
    --gold-ink:#8A6300;
    --silver-ink:#63707D;
    --bronze-ink:#8A4B1E;
    --grad-gold:linear-gradient(180deg,#F6DE9B 0%,#D9A521 48%,#8A5F12 100%);
    --grad-silver:linear-gradient(180deg,#EEF1F4 0%,#B6BDC6 48%,#78818C 100%);
    --grad-bronze:linear-gradient(180deg,#F0C9A0 0%,#C0783C 48%,#7A431A 100%);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B0B0C;
      --card:#151517;
      --ink:#F2F2F4;
      --muted:#8E8E93;
      --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,255,255,.16);
      --hover:rgba(255,255,255,.04);
      --accent:#34C38A;
      --accent-soft:rgba(52,195,138,.16);
      --mavi:#3D7BEA;
      --bar-bg:transparent;
      --bar-ink:#F2F2F4;
      --bar-alt:#8E8E93;
      --bar-cizgi:rgba(255,255,255,.09);
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
      --gold-ink:#E6C158;
      --silver-ink:#C3CAD3;
      --bronze-ink:#D69A62;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0B0C;
    --card:#151517;
    --ink:#F2F2F4;
    --muted:#8E8E93;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);
    --hover:rgba(255,255,255,.04);
    --accent:#34C38A;
    --accent-soft:rgba(52,195,138,.16);
    --mavi:#3D7BEA;
    --bar-bg:transparent;
    --bar-ink:#F2F2F4;
    --bar-alt:#8E8E93;
    --bar-cizgi:rgba(255,255,255,.09);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
    --gold-ink:#E6C158;
    --silver-ink:#C3CAD3;
    --bronze-ink:#D69A62;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    font-variant-numeric:tabular-nums;
    display:flex;
    flex-direction:column;
    min-height:100dvh;
  }
  .wrap{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-block:clamp(16px,4vh,48px);
    padding-left:16px;
    padding-right:16px;
  }
  .shell{
    width:min(720px,100%);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(9px,1.4vh,13px);
  }
  .toolbar{
    display:flex;
    justify-content:flex-end;
  }
  .tema{
    display:grid;
    place-items:center;
    width:clamp(34px,4.8vh,40px);
    height:clamp(34px,4.8vh,40px);
    padding:0;
    color:var(--ink);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),
               box-shadow .32s cubic-bezier(.2,.8,.2,1),
               background .2s ease;
    will-change:transform;
  }
  .tema svg{width:55%;height:55%;display:block}
  .tema:hover{
    transform:translateY(-3px);
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 20px rgba(0,0,0,.14);
    background:var(--card);
  }
  .tema:active{transform:translateY(-1px)}
  .tema:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  .card{
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:clamp(20px,3.4vh,32px) clamp(18px,3vw,30px);
    background:var(--bar-bg);
    border-bottom:1px solid var(--bar-cizgi);
  }
  header h1{color:var(--bar-ink)}
  header .sub{color:var(--bar-alt)}
  .brand{
    display:flex;
    align-items:center;
    gap:clamp(10px,1.6vw,14px);
    min-width:0;
  }
  .crest{
    flex:none;
    width:clamp(38px,5.6vh,50px);
    height:clamp(38px,5.6vh,50px);
    max-width:100%;
    object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
    transition:transform .32s cubic-bezier(.2,.8,.2,1), filter .32s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  .brand:hover .crest{
    transform:translateY(-3px);
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));
  }
  h1{
    margin:0;
    font-size:clamp(19px,2.9vh,26px);
    font-weight:600;
    font-style:italic;
    letter-spacing:-.018em;
    text-wrap:balance;
  }
  .sub{
    margin:4px 0 0;
    font-size:clamp(11px,1.7vh,13.5px);
    color:var(--muted);
    letter-spacing:-.005em;
  }
  .week{
    position:relative;
    flex:none;
    overflow:hidden;
    isolation:isolate;
    font-size:clamp(10px,1.5vh,11.5px);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#150F02;
    background:linear-gradient(145deg,#C9921C 0%,#F4DE9A 26%,#E8C25C 50%,#B97F14 78%,#F0D689 100%);
    border:1px solid rgba(138,95,18,.55);
    padding:6px 12px;
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(120,80,10,.35), inset 0 1px 0 rgba(255,255,255,.55);
    transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  .week:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 16px rgba(120,80,10,.32), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .week::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,0) 62%);
    transform:translateX(-120%);
    animation:shine 3.6s ease-in-out infinite;
  }
  @keyframes shine{
    0%,55%{transform:translateX(-120%)}
    100%{transform:translateX(120%)}
  }

  /* Kart alt bilgisi */
  footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:clamp(11px,1.8vh,16px) clamp(18px,3vw,30px);
    border-top:1px solid var(--line);
    font-size:clamp(10px,1.5vh,11.5px);
    color:var(--muted);
    letter-spacing:-.003em;
  }

  /* Sayfanin en altindaki baglantilar */
  .site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:clamp(14px,2.4vw,26px);
    padding-top:2px;
    font-size:clamp(10.5px,1.5vh,12px);
    letter-spacing:-.003em;
  }
  .site-nav a,
  .site-nav .imza{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    text-decoration:none;
    padding-bottom:3px;
    transition:color .28s cubic-bezier(.2,.8,.2,1);
  }
  .site-nav .imza{cursor:default}
  .site-nav a::after,
  .site-nav .imza::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .38s cubic-bezier(.2,.8,.2,1);
  }
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav .imza:hover{color:var(--ink)}
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after,
  .site-nav .imza:hover::after{transform:scaleX(1)}
  .site-nav a:focus-visible{outline:none}
  .site-nav svg{
    width:1.15em;
    height:1.15em;
    flex:none;
    display:block;
  }

  @media (max-width:520px){
    .card{border-radius:16px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important}
    .week::after{animation:none;opacity:0}
    .brand:hover .crest,.week:hover,.tema:hover{transform:none}
    .site-nav a:hover::after,.site-nav .imza:hover::after{transform:scaleX(1)}
  }

  /* ——— Alt sayfalar (gizlilik, kosullar, 404) ——— */
  .wrap.sayfa{align-items:flex-start}
  .toolbar.iki{justify-content:space-between}

  .geri{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:clamp(11px,1.5vh,12.5px);
    font-weight:500;
    color:var(--muted);
    text-decoration:none;
    padding:0 14px;
    height:clamp(34px,4.8vh,40px);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    transition:transform .32s cubic-bezier(.2,.8,.2,1),
               box-shadow .32s cubic-bezier(.2,.8,.2,1),
               color .2s ease;
    will-change:transform;
  }
  .geri:hover{
    transform:translateY(-3px);
    color:var(--ink);
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 20px rgba(0,0,0,.14);
  }
  .geri:active{transform:translateY(-1px)}
  .geri:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  .prose{
    padding:clamp(18px,2.8vh,28px) clamp(18px,3vw,30px) clamp(22px,3.2vh,30px);
    font-size:clamp(12.5px,1.75vh,14px);
    line-height:1.68;
    color:var(--muted);
  }
  .prose h2{
    margin:24px 0 7px;
    font-size:clamp(13px,1.95vh,15px);
    font-weight:600;
    letter-spacing:-.012em;
    color:var(--ink);
  }
  .prose h2:first-child{margin-top:0}
  .prose p{margin:0 0 11px}
  .prose ul{margin:0 0 11px;padding-left:19px}
  .prose li{margin-bottom:5px}
  .prose strong{color:var(--ink);font-weight:600}
  .prose .tarih{
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:.92em;
  }

  .hata{
    padding:clamp(34px,7vh,62px) clamp(18px,3vw,30px);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .hata .kod{
    font-size:clamp(60px,12vh,104px);
    font-weight:700;
    font-style:italic;
    line-height:1;
    letter-spacing:-.045em;
    background:var(--grad-gold);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hata h2{
    margin:0;
    font-size:clamp(15px,2.2vh,19px);
    font-weight:600;
    letter-spacing:-.018em;
    color:var(--ink);
  }
  .hata p{
    margin:0;
    max-width:44ch;
    font-size:clamp(12px,1.7vh,13.5px);
    color:var(--muted);
    line-height:1.6;
  }
  .hata .week{margin-top:8px;text-decoration:none;display:inline-block}


  /* ——— Haber seridi (en ust) ——— */
  .seritt{
    flex:none;
    display:flex;
    align-items:stretch;
    height:clamp(30px,4.3vh,38px);
    background:var(--card);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .serit-pencere{
    position:relative;
    flex:1;
    min-width:0;
    overflow:hidden;
  }
  .serit-ray{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    display:flex;
    align-items:center;
    width:max-content;
    white-space:nowrap;
    animation:akis 46s linear infinite;
    will-change:transform;
  }
  .seritt:hover .serit-ray{animation-play-state:paused}
  .serit-ray i{
    display:inline-flex;
    align-items:center;
    gap:clamp(14px,2.4vw,22px);
    padding:0 clamp(14px,2.4vw,22px);
    font-style:normal;
    font-size:clamp(11px,1.55vh,12.5px);
    color:var(--muted);
    letter-spacing:-.004em;
  }
  .serit-ray i::before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--grad-gold);
    flex:none;
  }
  @keyframes akis{
    from{transform:translateX(-50%)}
    to{transform:translateX(0)}
  }

  /* ——— Yonetim: giris ve panel ——— */
  .toolbar{gap:10px}

  .modal[hidden]{display:none!important}
  .modal{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 16px;
  }
  .modal-arka{
    position:absolute;
    inset:0;
    background:rgba(8,10,14,.52);
    backdrop-filter:blur(3px);
  }
  .modal-kart{
    position:relative;
    width:min(560px,100%);
    max-height:88dvh;
    overflow:auto;
    background:var(--card);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
    padding:clamp(20px,3vh,28px) clamp(18px,3vw,26px);
    animation:kartGel .3s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes kartGel{
    from{opacity:0;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:none}
  }
  .modal-kart h2{
    margin:0 0 4px;
    font-size:clamp(15px,2.1vh,18px);
    font-weight:600;
    letter-spacing:-.018em;
  }
  .modal-kart .aciklama{
    margin:0 0 16px;
    font-size:clamp(11.5px,1.6vh,13px);
    color:var(--muted);
    line-height:1.55;
  }
  .modal-kart code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.94em;
  }

  .alan{
    width:100%;
    font:inherit;
    font-size:clamp(12.5px,1.7vh,14px);
    color:var(--ink);
    background:var(--bg);
    border:1px solid var(--line-strong);
    border-radius:12px;
    padding:10px 12px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .alan::placeholder{color:var(--muted);opacity:.75}
  .alan:focus{
    outline:none;
    border-color:var(--mavi);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--mavi) 22%, transparent);
  }
  select.alan{cursor:pointer;appearance:none;padding-right:26px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
    background-size:4px 4px,4px 4px;
    background-repeat:no-repeat;
  }
  #anahtarInput{letter-spacing:.14em;text-align:center}

  .hata-mesaj{
    margin:9px 0 0;
    font-size:clamp(11px,1.5vh,12.5px);
    color:#D0392B;
    font-weight:500;
  }
  :root[data-theme="dark"] .hata-mesaj{color:#FF8478}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .hata-mesaj{color:#FF8478}
  }

  .modal-alt{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .dugme{
    font:inherit;
    font-size:clamp(11.5px,1.6vh,13px);
    font-weight:600;
    letter-spacing:-.005em;
    padding:9px 16px;
    border-radius:12px;
    border:1px solid var(--line-strong);
    background:var(--bg);
    color:var(--ink);
    cursor:pointer;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .28s ease;
  }
  .dugme:hover{transform:translateY(-2px)}
  .dugme:active{transform:none}
  .dugme:disabled{opacity:.55;cursor:default;transform:none}
  .dugme:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}
  .dugme.birincil{
    background:var(--mavi);
    border-color:var(--mavi);
    color:#FFFFFF;
    box-shadow:0 2px 6px rgba(20,84,204,.3);
  }
  .dugme.birincil:hover{box-shadow:0 8px 18px rgba(20,84,204,.34)}

  /* Panel bolumleri */
  .panel-bolum{
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .panel-bolum:last-of-type{border-bottom:0}
  .panel-etiket{
    display:block;
    margin-bottom:7px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .panel-not{
    margin:9px 0 0;
    font-size:clamp(10.5px,1.5vh,12px);
    color:var(--muted);
    line-height:1.55;
  }

  /* Mac girisi */
  .mac-giris{
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px 12px 52px minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
  }
  .mac-giris .ayrac{text-align:center;color:var(--muted);font-weight:600}
  .mac-giris .skor{text-align:center;padding-left:4px;padding-right:4px}

  /* Kayitli maclar / haberler listesi */
  .liste{
    max-height:190px;
    overflow-y:auto;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:12px;
  }
  .liste:empty{display:none}
  .liste-satir{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 9px 7px 12px;
    border-bottom:1px solid var(--line);
    font-size:clamp(11.5px,1.6vh,12.8px);
  }
  .liste-satir:last-child{border-bottom:0}
  .liste-satir .sol{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .liste-satir .skor-rozet{
    flex:none;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    padding:2px 8px;
    border-radius:7px;
    background:var(--hover);
    border:1px solid var(--line);
  }
  .sil{
    flex:none;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    padding:0;
    font-size:15px;
    line-height:1;
    color:var(--muted);
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    cursor:pointer;
    transition:color .2s ease, background .2s ease;
  }
  .sil:hover{color:#D0392B;background:var(--hover)}

  .satir-ekle{display:flex;gap:7px;align-items:center}
  .takim-etiket{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    margin:0 6px 6px 0;
    font-size:11.5px;
    background:var(--hover);
    border:1px solid var(--line);
    border-radius:9px;
  }
  .takim-etiket .sil{width:18px;height:18px;font-size:13px}

  @media (max-width:520px){
    .mac-giris{grid-template-columns:minmax(0,1fr) 46px 10px 46px minmax(0,1fr);}
    .mac-giris .dugme{grid-column:1 / -1}
  }
  @media (prefers-reduced-motion:reduce){
    .modal-kart{animation:none}
    .dugme:hover{transform:none}
    .serit-ray{animation:none;transform:translateX(0)}
  }

  .onay{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:12px;
    font-size:clamp(11.5px,1.6vh,12.8px);
    color:var(--muted);
    cursor:pointer;
    user-select:none;
  }
  .onay input{
    width:15px;
    height:15px;
    margin:0;
    flex:none;
    accent-color:var(--mavi);
    cursor:pointer;
  }
  .unut{
    font:inherit;
    font-size:clamp(10.5px,1.5vh,12px);
    color:var(--muted);
    background:none;
    border:0;
    padding:0;
    margin-top:10px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .unut:hover{color:var(--ink)}

  /* ——— Mobil ——— */
  @media (max-width:560px){
    /* Dokunma hedefleri en az 40px */
    .tema,.geri{width:auto;min-width:40px;height:40px}
    .tema{width:40px}
    .site-nav{gap:12px 16px}
    .modal{padding:12px}
    .modal-kart{border-radius:18px;padding:18px 16px}

    /* iOS, 16px'ten kucuk alana odaklaninca sayfayi yakinlastirir */
    .alan{font-size:16px;padding:11px 12px}
    .panel-satir .alan{font-size:16px}

    /* Mac girisi: takim ustte, skor yaninda; alt alta iki satir */
    .mac-giris{grid-template-columns:minmax(0,1fr) 64px;gap:8px}
    .mac-giris .ayrac{display:none}
    .mac-giris #evSecim{order:1}
    .mac-giris #evSkor{order:2}
    .mac-giris #depSecim{order:3}
    .mac-giris #depSkor{order:4}
    .mac-giris .dugme{order:5;grid-column:1 / -1;padding:12px 16px}
    .dugme{padding:11px 16px}

    .liste-satir{padding:9px 8px 9px 12px}
    .sil{width:32px;height:32px}
    .takim-etiket{padding:7px 10px}
    .takim-etiket .sil{width:20px;height:20px}
  }

  @media (max-width:430px){
    header{gap:10px;padding:16px 16px}
    .card{border-radius:14px}
    .shell{gap:8px}
    .site-nav{gap:10px 14px;font-size:11px}
    footer{font-size:10.5px}
  }

  /* Ekranda gorunmez, ekran okuyucular ve arama motorlari icin */
  .gorunmez{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  .prose a{
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:var(--line-strong);
    transition:text-decoration-color .2s ease;
  }
  .prose a:hover{text-decoration-color:var(--mavi)}