:root{--bg:#0b1020;--card:#121935;--muted:#8ea0c0;--text:#e9eeff;--accent:#7aa2ff;--chip:#1a2347;--chip-b:#2a386d}
    *{box-sizing:border-box}
    body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:linear-gradient(180deg,#0b1020,#0a0f1e 120%);color:var(--text)}
    a{color:var(--accent);text-decoration:none}

    /* Header */
    header{position:sticky;top:0;z-index:20;background:rgba(11,16,32,.75);backdrop-filter:blur(8px);border-bottom:1px solid #1a2140}
    .wrap{max-width:1100px;margin:0 auto;padding:12px 18px}

    nav{display:flex;gap:16px;align-items:center;justify-content:space-between;position:relative}
    /* Menüdeki site adı (tek renk beyaz) */
    .brand-logo{
      font-weight:800;display:inline-block;margin:0;
      font-size:clamp(20px,3vw,28px); letter-spacing:.2px;
      color:#fff !important; background:none !important;
      -webkit-background-clip:initial !important; background-clip:initial !important;
      text-shadow:none !important; filter:none !important; mix-blend-mode:normal !important;
      white-space:nowrap;
    }
    .brand-logo .tld{opacity:1;font-weight:800;color:#fff !important}

    .links{display:flex;gap:10px;align-items:center}
    nav a{padding:8px 10px;border-radius:10px;border:1px solid transparent}
    nav a.active{border-color:var(--chip-b);background:var(--chip)}
    .links a:hover{background:#0f1633;border-color:#22315b}

    #menu-btn{display:none;border:1px solid #22315b;background:#10183a;color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
    #menu-btn svg{width:18px;height:18px;vertical-align:middle}

@media (max-width: 720px){
  #menu-btn{display:inline-flex;align-items:center;gap:8px}
  .links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:rgba(11,16,32,.98);
    border:1px solid #1a2140; border-top:none;
    padding:8px;
    flex-direction:column; gap:6px;
    border-radius:0 0 12px 12px;
  }
  .links.open{display:flex}

  /* PHP'deki ile aynı boyutlar */
  .links a{
    display:block;
    width:100%;
    padding:8px 10px;            /* aynı padding */
    border:1px solid #22315b;    /* aynı kenarlık */
    background:#0f1633;          /* aynı arka plan */
    border-radius:10px;
  }

  nav{position:relative}
}



    h1{margin:6px 0;font-size:clamp(22px,3vw,32px)}
    main{max-width:1100px;margin:18px auto;padding:0 18px}

    .hero{margin:32px auto 18px;max-width:820px;text-align:center}

    /* ÖNERİ çakışmasını düzelt: z-index eklendi */
    .searchbar{position:relative; z-index:30;}

    .searchbar input{width:100%;padding:18px 16px;border-radius:14px;border:1px solid #29325d;background:#0f1530;color:var(--text);outline:none;font-size:18px}
    .searchbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(122,162,255,.18)}

    /* ÖNERİ kutusu bulutun üstünde dursun, uzun listede taşmasın */
    .suggest{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--card);border:1px solid #22315b;border-radius:12px;overflow:hidden;
             z-index:40; max-height:60vh; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.35);}
    .suggest ul{list-style:none;margin:0;padding:6px}
    .suggest li{padding:10px 12px;border-radius:10px;cursor:pointer}
    .suggest li:hover,.suggest li.active{background:#152047}

    article{border:1px solid #22315b;background:var(--card);border-radius:16px;padding:16px}
    ol.meanings{margin:8px 0 0 22px}
    .meanings a{text-decoration:underline dotted;cursor:pointer}
    .meanings a:hover{text-decoration:underline}
    .muted{color:var(--muted)}
    .empty{border:1px dashed #2a386d;border-radius:12px;padding:16px;color:#9fb1d8;background:#0f1633}
    footer{max-width:1100px;margin:40px auto 60px;padding:0 18px;color:#9db0d7}

    #cloud{margin:16px auto 0;max-width:820px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
    .chip{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--chip-b);background:var(--chip);cursor:pointer;white-space:nowrap;transition:transform .08s}
    .chip:hover{transform:translateY(-1px)}
    .chip.s1{font-size:11px;opacity:.85}
    .chip.s2{font-size:12px}
    .chip.s3{font-size:13px}
    .chip.s4{font-size:14px}

    /* ÖNERİ açıkken bulutu gizle */
    body.suggest-open #cloud{opacity:0; pointer-events:none; transition:opacity .15s ease;}

    #comments h2{margin:12px 0 8px;font-size:20px}
    #comments .item{border:1px solid #22315b;background:#10183a;border-radius:10px;padding:10px}
    .captcha{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
    .captcha .q{padding:6px 10px;border-radius:8px;background:#0f1530;border:1px solid #29325d}
    .captcha input{width:110px;padding:8px;border-radius:8px;border:1px solid #29325d;background:#0f1530;color:#e9eeff}
    .captcha button{padding:8px 10px;border-radius:8px;border:1px solid #2a386d;background:#1a2347;color:#e9eeff;cursor:pointer}
    .captcha .warn{color:#ffb3b3;font-size:13px}

    #cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#0f1633;border:1px solid #22315b;border-radius:12px;padding:12px;display:none}
    #cookie .row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    #cookie .actions{display:flex;gap:8px}
    .btn{border:1px solid var(--chip-b);background:var(--chip);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
    .btn.alt{background:transparent}

    /* ====== EK: Ara butonlu yerleşim + durum göstergeleri ====== */
    .searchbar{display:flex;gap:8px;align-items:center}
    .searchbar input{flex:1 1 auto}
    .btn-search{
      flex:0 0 auto;
      padding:14px 16px;
      border-radius:12px;
      border:1px solid var(--chip-b);
      background:var(--chip);
      color:var(--text);
      cursor:pointer;
      font-weight:600;
      display:inline-flex; align-items:center; gap:8px;
    }
    .btn-search[disabled]{opacity:.7; cursor:not-allowed;}

    /* spinner */
    .spinner{width:16px;height:16px;border:2px solid rgba(233,238,255,.25);border-top-color:rgba(233,238,255,.95);border-radius:50%;animation:spin 0.8s linear infinite;display:none}
    .is-searching .spinner{display:inline-block}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* ince yükleme şeridi */
    .search-progress{
      position:absolute; left:0; right:0; bottom:-6px; height:3px;
      background:transparent; overflow:hidden; border-radius:999px;
      display:none;
    }
    .search-progress::before{
      content:""; position:absolute; left:-40%; top:0; height:100%; width:40%;
      background:linear-gradient(90deg, transparent, var(--accent), transparent);
      animation:ind 1.2s infinite;
    }
    @keyframes ind{
      0%{left:-40%}
      50%{left:60%}
      100%{left:100%}
    }
    .is-searching .search-progress{display:block}

    @media (max-width:520px){
      .searchbar{flex-direction:column; align-items:stretch;}
      .btn-search{width:100%;}
    }