:root{
  --lacivert:#0f2d4a; --lacivert-acik:#1c4a76; --altin:#c8a45c;
  --zemin:#f5f6f8; --kart:#ffffff; --metin:#1a2230; --soluk:#5f6b7d;
  --cizgi:#e2e6ec; --yesil:#1f7a4d; --kirmizi:#b3261e;
  --golge:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06);
  --yuvarlak:10px;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--metin);background:var(--zemin);-webkit-font-smoothing:antialiased}
a{color:var(--lacivert-acik);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- giriş ---- */
.giris-sayfa{display:grid;place-items:center;min-height:100vh;padding:24px;
  background:linear-gradient(160deg,#0f2d4a 0%,#163a5f 55%,#1c4a76 100%)}
.giris-kart{width:100%;max-width:400px;background:var(--kart);border-radius:14px;
  padding:36px 32px;box-shadow:0 18px 48px rgba(8,20,35,.28)}
.marka{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.marka-isaret{width:32px;height:32px;border-radius:8px;background:var(--lacivert);
  color:var(--altin);display:grid;place-items:center;font-weight:700;font-size:16px}
.marka-ad{font-size:19px;font-weight:650;letter-spacing:-.01em}
.giris-kart p.alt{color:var(--soluk);font-size:13.5px;margin:0 0 24px}

label{display:block;font-size:13px;font-weight:560;margin:14px 0 6px;color:#374151}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--cizgi);border-radius:8px;
  font-size:14.5px;background:#fff;color:var(--metin);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lacivert-acik);
  box-shadow:0 0 0 3px rgba(28,74,118,.12)}
.dugme{display:inline-block;width:100%;margin-top:22px;padding:11px 16px;border:0;
  border-radius:8px;background:var(--lacivert);color:#fff;font-size:15px;font-weight:560;
  cursor:pointer;transition:background .15s}
.dugme:hover{background:var(--lacivert-acik)}
.uyari{margin:16px 0 0;padding:10px 12px;border-radius:8px;font-size:13.5px;
  background:#fdecea;color:var(--kirmizi);border:1px solid #f5c6c2}
.ipucu{margin-top:18px;font-size:12.5px;color:var(--soluk);text-align:center}

/* ---- panel ---- */
.kabuk{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.yan{background:var(--lacivert);color:#cdd8e4;padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.yan .marka{padding:6px 8px 18px;color:#fff}
.yan .marka-ad{color:#fff}
.yan a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:#cdd8e4;font-size:14px}
.yan a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.yan a.etkin{background:rgba(255,255,255,.14);color:#fff;font-weight:560}
.yan .bolum{font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:#7d94ac;padding:16px 10px 6px}
.yan .dip{margin-top:auto;padding:12px 10px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#93a7bb}

.ana{padding:0}
.ust{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;background:#fff;border-bottom:1px solid var(--cizgi)}
.ust h1{margin:0;font-size:18px;font-weight:620;letter-spacing:-.01em}
.icerik{padding:24px 28px;max-width:1180px}

.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:18px 20px;box-shadow:var(--golge)}
.izgara{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.olcum .sayi{font-size:26px;font-weight:650;letter-spacing:-.02em}
.olcum .etiket{font-size:12.5px;color:var(--soluk);margin-top:2px}

.rozet{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:560}
.rozet.iyi{background:#e7f4ed;color:var(--yesil)}
.rozet.uyari{background:#fdf3e3;color:#8a5a12}
.rozet.kotu{background:#fdecea;color:var(--kirmizi)}

.serit{margin:0 0 18px;padding:11px 14px;border-radius:8px;background:#fdf3e3;
  border:1px solid #f0dcb8;color:#7a5310;font-size:13.5px}

.hata-sayfa{display:grid;place-items:center;min-height:100vh;padding:24px;text-align:center}
.hata-sayfa .kod{font-size:44px;font-weight:700;color:var(--lacivert);letter-spacing:-.02em}

@media (max-width:860px){
  .kabuk{grid-template-columns:1fr}
  .yan{flex-direction:row;flex-wrap:wrap;gap:6px;padding:10px}
  .yan .bolum,.yan .dip{display:none}
  .icerik,.ust{padding:16px}
}

/* ---- ortak bileşenler (modüller) ---- */
.ust{align-items:flex-start}
.ust-alt{margin:2px 0 0;font-size:12.5px;color:var(--soluk)}
.ust-eylemler{display:flex;align-items:center;gap:8px}
.satir-form{display:inline}
.icerik.dar{max-width:820px}

.dugme.kucuk{width:auto;margin:0;padding:8px 14px;font-size:13.5px}
.dugme.ikincil{background:#fff;color:var(--lacivert);border:1px solid var(--cizgi)}
.dugme.ikincil:hover{background:#f7f8fa}
.dugme.sessiz{background:transparent;color:var(--soluk);border:1px solid transparent}
.dugme.sessiz:hover{background:#f1f3f6;color:var(--metin)}
.bag-soluk{color:var(--soluk);font-size:13.5px}
.kucuk-yazi{font-size:12.5px}
.soluk{color:var(--soluk)}
.sag{text-align:right}
.ara-bosluk{flex:1}

.bildirim{margin:0 0 16px;padding:10px 14px;border-radius:8px;font-size:13.5px}
.bildirim.iyi{background:#e7f4ed;color:#14603a;border:1px solid #c3e3d2}
.bildirim.kotu{background:#fdecea;color:var(--kirmizi);border:1px solid #f5c6c2}

.suzgec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.suzgec input[type=search]{flex:1 1 260px;width:auto;padding:9px 12px}
.suzgec select{width:auto;padding:9px 12px}

.tablo-sarmal{padding:0;overflow-x:auto}
.tablo{width:100%;border-collapse:collapse;font-size:14px}
.tablo th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--soluk);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--cizgi);
  background:#fbfcfd;white-space:nowrap}
.tablo th.sag,.tablo td.sag{text-align:right}
.tablo td{padding:12px 16px;border-bottom:1px solid #eef1f5;vertical-align:top}
.tablo tbody tr:last-child td{border-bottom:0}
.tablo tbody tr{cursor:pointer}
.tablo tbody tr:hover{background:#f7f9fb}
.satir-bag{font-weight:560;color:var(--metin)}
.satir-bag:hover{color:var(--lacivert-acik)}

.etiketler{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.etiket{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;
  background:#eef1f6;color:#4a5568}

.sayfalama{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:18px;font-size:13.5px;color:var(--soluk)}

.bos-durum{text-align:center;padding:44px 24px}
.bos-durum h2{margin:0 0 6px;font-size:16px}
.bos-durum p{margin:0 0 16px;color:var(--soluk);font-size:14px}
.bos-durum .dugme{width:auto;display:inline-block}

/* ---- form ---- */
.form{padding:22px 24px}
.form-baslik{margin:22px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--soluk);font-weight:600}
.form-baslik:first-of-type{margin-top:0}
.form-izgara{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.alan.genis{grid-column:1/-1}
.alan.hatali input,.alan.hatali select,.alan.hatali textarea{border-color:var(--kirmizi)}
.hata{display:block;margin-top:4px;color:var(--kirmizi);font-size:12.5px}
.form-dip{display:flex;align-items:center;gap:16px;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--cizgi)}
textarea{resize:vertical;font:inherit}

/* ---- detay ---- */
.ikili{display:grid;gap:16px;grid-template-columns:1.1fr .9fr;align-items:start}
.kart-ust{display:flex;align-items:center;justify-content:space-between}
.kart-baslik{margin:0 0 12px;font-size:15px;font-weight:620}
.kart-ust .kart-baslik{margin-bottom:12px}
.ozellikler{display:grid;gap:12px 20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0}
.ozellikler dt,.ozellik-blok dt{font-size:12px;color:var(--soluk);margin-bottom:2px}
.ozellikler dd,.ozellik-blok dd{margin:0;font-size:14px}
.ozellik-blok{margin-top:16px}
.ozellik-blok dd{white-space:pre-wrap}
.kayit-bilgi{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--cizgi);
  font-size:12.5px;color:var(--soluk)}

.liste{list-style:none;margin:0;padding:0}
.liste li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid #eef1f5;font-size:14px}
.liste li:last-child{border-bottom:0;padding-bottom:0}

.not-form{margin-bottom:16px}
.not-form textarea{margin-bottom:8px}
.not-form .dugme{width:auto}
.notlar{list-style:none;margin:0;padding:0}
.notlar li{padding:11px 0;border-bottom:1px solid #eef1f5}
.notlar li:last-child{border-bottom:0;padding-bottom:0}
.notlar p{margin:0 0 3px;font-size:14px;white-space:pre-wrap}

@media (max-width:900px){ .ikili{grid-template-columns:1fr} }

.bilgi{margin:16px 0 0;padding:10px 12px;border-radius:8px;font-size:13.5px;
  background:#e7f4ed;color:#14603a;border:1px solid #c3e3d2}
.yan .dip-baglar{display:flex;gap:14px;margin-top:8px}
.yan .dip-baglar a{padding:0;color:#93a7bb;font-size:12.5px;background:none}
.yan .dip-baglar a:hover{background:none;color:#fff;text-decoration:underline}
.yan .dip-baglar a.etkin{background:none;color:#fff}

/* ---- WhatsApp ---- */
.wa-qr-sarmal{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.wa-qr{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:10px;line-height:0}
.wa-qr img{width:250px;height:250px;display:block}
.wa-adimlar{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.9}

.wa-duzen{display:grid;gap:16px;grid-template-columns:300px 1fr;align-items:start;margin-top:16px}
.wa-liste-kart{padding:0;overflow:hidden}
.wa-liste-ust{padding:12px;border-bottom:1px solid var(--cizgi)}
.wa-liste-ust input{padding:8px 10px;font-size:13.5px}
.wa-liste{list-style:none;margin:0;padding:0;max-height:62vh;overflow-y:auto}
.wa-liste .wa-bos{padding:20px 16px;font-size:14px}
.wa-satir{padding:11px 14px;border-bottom:1px solid #eef1f5;cursor:pointer}
.wa-satir:hover{background:#f7f9fb}
.wa-satir.etkin{background:#eef3f8}
.wa-satir-ust{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-ad{font-weight:560;font-size:14px}
.wa-onizleme{font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-rozet{min-width:19px;height:19px;padding:0 6px;border-radius:99px;background:var(--yesil);
  color:#fff;font-size:11.5px;line-height:19px;text-align:center}

.wa-yazisma-kart{display:flex;flex-direction:column;min-height:62vh;padding:0}
.wa-bos-orta{display:grid;place-items:center;flex:1;font-size:14px;padding:40px}
#wa-yazisma{display:flex;flex-direction:column;flex:1;min-height:0}
.wa-yazisma-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--cizgi)}
.wa-akis{flex:1;overflow-y:auto;padding:16px 18px;background:#f7f9fb;min-height:280px}
.wa-balon{max-width:74%;margin-bottom:9px;padding:8px 12px;border-radius:12px;
  background:#fff;border:1px solid var(--cizgi);font-size:14px;position:relative}
.wa-balon.giden{margin-left:auto;background:#e6f2ea;border-color:#cbe4d5}
.wa-balon p{margin:0;white-space:pre-wrap;word-break:break-word}
.wa-saat{display:block;margin-top:3px;font-size:11px;color:var(--soluk);text-align:right}
.wa-gonder{display:flex;gap:10px;align-items:flex-end;padding:12px 18px;border-top:1px solid var(--cizgi)}
.wa-gonder textarea{flex:1;margin:0}
.wa-gonder .dugme{margin:0;flex:0 0 auto}
.wa-not{margin:0 18px 12px}

@media (max-width:900px){
  .wa-duzen{grid-template-columns:1fr}
  .wa-liste{max-height:280px}
}