:root{
    --orient-blue:#00aeef;        /* Label/Buton */
    --orient-blue-dark:#0088bc;   /* Hover tonu */
    --orient-navy:#133f8a;        /* Kart başlık */
    --bg:#e9ecf3;                 /* Soft gri zemin */
    --card:#ffffff;
    --ink:#1b2735;
    --muted:#6b7b8c;
    --ring:rgba(0,174,239,.25);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; padding:32px;
    background:radial-gradient(60% 100% at 0% 0%, #f4f6fb 0%, var(--bg) 60%) no-repeat;
    font:15px/1.65 "Inter","Segoe UI",Arial,sans-serif;
    color:var(--ink);
  }
  .brand{
    text-align:center; align-items:center; gap:10px; margin-bottom:18px; color:var(--muted);
    font-weight:600; letter-spacing:.2px; text-transform:uppercase; font-size:12px;
  }
  .container{max-width:980px;margin:0 auto}

  /* Kart */
  .card{
    background:var(--card);
    border-radius:16px;
    box-shadow:
      0 20px 40px rgba(16,24,40,.06),
      0 2px 6px rgba(16,24,40,.04);
    overflow:hidden;
    margin-bottom:28px;
    border:1px solid rgba(19,63,138,.06);
  }
  .card__head{
    background:linear-gradient(180deg, var(--orient-navy), #0f336f);
    color:#fff;
    padding:18px 22px;
    font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .card__head svg{opacity:.9}

  /* Grid satırları */
  .grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
    padding:18px;
    background:
      radial-gradient(120px 40px at 20px 0, rgba(255,255,255,.9), transparent),
      linear-gradient(#fdfefe, #f9fbfd);
  }

  /* Satır */
  .row{
    display:grid;
    grid-template-columns: 42% 1fr;
    gap:12px;
    align-items:center;
  }
  @media (max-width:760px){
    .row{grid-template-columns: 1fr}
  }

  /* Label: Orient mavisi neumorphic buton */
  .label{
    background:var(--orient-blue);
    color:#fff;
    border-radius:999px;
    padding:10px 14px;
    font-weight:700; text-transform:uppercase; font-size:12.5px;
    box-shadow:
      8px 8px 16px rgba(0,0,0,.12),
      -6px -6px 16px rgba(255,255,255,.65),
      inset 0 0 0 0 rgba(255,255,255,0);
    transition:all .25s ease;
    letter-spacing:.3px;
    display:flex; align-items:center; gap:8px;
    border:0;
  }
  .label:hover{
    background:var(--orient-blue-dark);
    box-shadow:
      4px 4px 10px rgba(0,0,0,.18),
      -4px -4px 10px rgba(255,255,255,.85),
      inset 0 0 0 0 rgba(255,255,255,0);
    transform:translateY(-1px);
  }

  /* Değer “chip” stili */
  .value{
    background:#fff;
    border-radius:14px;
    padding:12px 14px;
    border:1px solid rgba(2,6,12,.06);
    box-shadow:0 1px 0 rgba(2,6,12,.03);
    font-weight:600;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .value small{color:var(--muted); font-weight:500}

  /* Durum pill */
  .pill{
    background:#d4f8e8; color:#138e62;
    padding:4px 10px; border-radius:999px;
    font-size:12px; font-weight:800;
  }
.pill-red {
    background: #f8d4d4;
    color: #ff0000;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

  /* Odak/erişilebilirlik */
  .label:focus-visible, .value:focus-within{
    outline:2px solid transparent;
    box-shadow:0 0 0 6px var(--ring);
  }