:root{
  --indigo:#4338CA;
  --lav:#8B5CF6;
  --bg:#FFFFFF;
  --soft:#F8FAFC;
  --text:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius:18px;

  --header-h: 72px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top: calc(var(--header-h) + 14px);}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

a{color:inherit;text-decoration:none}
strong{font-weight:700}
img,svg,video{max-width:100%;height:auto;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(226,232,240,.75);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 0;
  min-height: var(--header-h);
}

/* BRAND (logo + yazı) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;      /* <-- önemli: taşmayı kontrol eder */
  flex: 1 1 auto;    /* <-- daralabilsin */
}

/* LOGO: kırpma yok, tam görünür */
.brand__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  height:72px;   /* +8px ≈ her yöne ~2 mm */
  width:72px;    /* +8px ≈ her yöne ~2 mm */
  border-radius:18px;
  overflow:hidden;
}


.brand__logo img{
  height: 100%;
  width: 100%;
  object-fit: contain; /* <-- cover yerine contain: KIRPMA YOK */
  display:block;
}

/* Yazılar */
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width: 0;
}
.brand__name{font-weight:800; white-space: nowrap;}
.brand__tag{font-size:12px;color:var(--muted);margin-top:3px; white-space: nowrap;}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex: 0 0 auto;
}
.nav a{
  font-size:14px;
  color:rgba(15,23,42,.9);
  padding:8px 10px;
  border-radius:12px;
  white-space: nowrap;
}
.nav a:hover{background:rgba(67,56,202,.06)}
.nav__cta{
  background:rgba(67,56,202,.10);
  border:1px solid rgba(67,56,202,.22);
}
.nav__cta:hover{background:rgba(67,56,202,.14)}

/* Mobile */
.hamburger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.hamburger span{width:18px;height:2px;background:var(--text);border-radius:2px}

.mobileNav{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 18px 16px 18px;
  background: rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
}
.mobileNav.is-open{display:block}

.mobileNav a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  color:rgba(15,23,42,.92);
}
.mobileNav a:hover{background:rgba(67,56,202,.06)}
.mobileNav__admin{
  margin-top:6px;
  border:1px dashed rgba(67,56,202,.35);
}

/* Small section label */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  color:rgba(67,56,202,.95);
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
}

/* Hero */
.hero{
  position:relative;
  padding:54px 0 34px 0;
  background:
    radial-gradient(900px 360px at 12% 8%, rgba(67,56,202,.14), transparent 60%),
    radial-gradient(820px 320px at 92% 0%, rgba(139,92,246,.12), transparent 60%),
    linear-gradient(#fff, #fff);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:start;
}
.badge{
  display:inline-flex; align-items:center;
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
  color:rgba(67,56,202,.95);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}
.hero h1{
  margin:14px 0 10px 0;
  font-size:44px;
  letter-spacing:-.02em;
  line-height:1.08;
}
.hero__h1soft{
  color: rgba(15,23,42,.78);
  font-weight: 800;
}
.hero__subtitle{
  margin:0;
  color:rgba(15,23,42,.86);
  font-size:16px;
  line-height:1.65;
  max-width:60ch;
}
.hero__actions{display:flex;gap:12px;margin:18px 0 16px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  font-weight:800;
  font-size:14px;
  transition: transform .08s ease, background .2s ease, border .2s ease;
  white-space: nowrap;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, var(--indigo), var(--lav));
  color:#fff; border-color: transparent;
  box-shadow: 0 14px 30px rgba(67,56,202,.22);
}
.btn--primary:hover{filter: brightness(1.03)}
.btn--ghost{background:#fff}
.btn--ghost:hover{background:rgba(67,56,202,.06); border-color: rgba(67,56,202,.25)}

/* Hero highlights row */
.hero__highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin: 10px 0 14px;
}
.hlItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.hlIcon{
  width:38px;height:38px;
  border-radius:14px;
  display:grid;place-items:center;
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
  flex: 0 0 auto;
}
.hlTitle{font-weight:950;font-size:13px}
.hlDesc{color:var(--muted);font-size:12px;margin-top:2px}

.hero__trust{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:10px;
}
.trustItem{
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
}
.trustItem__title{font-weight:900;font-size:13px}
.trustItem__desc{color:var(--muted);font-size:12px;margin-top:4px}

/* Hero right */
.heroCard{
  border:1px solid var(--line);
  background:#fff;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.heroCard__top{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(67,56,202,.05), rgba(255,255,255,1));
}
.heroCard__dot{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.15)}
.heroCard__title{margin-left:auto;font-weight:900;color:rgba(15,23,42,.75);font-size:13px}
.heroCard__body{padding:14px}
.heroStat{
  display:flex;justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:10px;
  gap:10px;
}
.heroStat__k{color:var(--muted);font-size:13px;font-weight:800}
.heroStat__v{font-size:13px;font-weight:900}

.heroCard__pillRow{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.pill{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
  color:rgba(67,56,202,.95);
  font-size:12px;
  font-weight:900;
}
.heroCard__note{
  color:rgba(15,23,42,.78);
  font-size:13px;
  line-height:1.55;
  background: var(--soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.heroCard__miniCTA{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.heroMini{display:grid;gap:10px;margin-top:12px}
.miniItem{
  display:flex;gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius: var(--radius);
  padding:12px;
}
.miniIcon{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.22);
  flex: 0 0 auto;
}
.miniTitle{font-weight:950;font-size:13px}
.miniDesc{color:var(--muted);font-size:12px;margin-top:2px}

/* Sections */
.section{padding:44px 0}
.section--soft{
  background: var(--soft);
  border-top:1px solid rgba(226,232,240,.7);
  border-bottom:1px solid rgba(226,232,240,.7)
}
.sectionHead{margin-bottom:18px}
.sectionHead h2{
  margin:0 0 6px 0;
  font-size:26px;
  letter-spacing:-.01em;
}
.sectionHead p{margin:0;color:var(--muted);line-height:1.65}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.card--accent{
  border-color: rgba(67,56,202,.25);
  box-shadow: 0 12px 30px rgba(67,56,202,.10);
}
.card--icon .iconBadge{
  width:40px;height:40px;
  border-radius:16px;
  display:grid;place-items:center;
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
  margin-bottom:10px;
}
.card--stack{
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.roleChip{
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.72);
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  padding:6px 10px;
  border-radius:999px;
  white-space: nowrap;
}
.cardFoot{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(226,232,240,.8);
}
.micro{
  display:inline-flex;
  color:rgba(15,23,42,.68);
  font-size:12px;
  font-weight:800;
}

.card h3{margin:0 0 8px 0;font-size:16px}
.card p{margin:0;color:rgba(15,23,42,.78);line-height:1.7}
.cardTag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  color:rgba(67,56,202,.95);
  background:rgba(67,56,202,.08);
  border:1px solid rgba(67,56,202,.18);
}

.list{margin:10px 0 0 0; padding-left:18px; color:rgba(15,23,42,.78); line-height:1.7}
.muted{color:var(--muted)}

/* Video area */
.videoToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.videoTabs{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.tabBtn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:950;
  cursor:pointer;
}
.tabBtn.is-active{
  border-color: rgba(67,56,202,.28);
  background:rgba(67,56,202,.08);
  color:rgba(67,56,202,.95);
}

.videoSearch{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  min-width: 260px;
}
.videoSearch__icon{color:rgba(15,23,42,.55);font-weight:900}
.videoSearch__input{
  border:0;
  outline:none;
  width:100%;
  font-size:14px;
  background:transparent;
  color:rgba(15,23,42,.75);
}
.videoSearch__input:disabled{cursor:not-allowed}

.videoGrid{display:grid;grid-template-columns:1fr;gap:14px}
.videoCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 8px 22px rgba(2,6,23,.05);
}
.videoTitle{font-weight:950;margin-bottom:10px}
.videoFrame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background: #000;
}
.videoFrame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.videoEmpty{
  border:1px dashed rgba(67,56,202,.30);
  background: rgba(67,56,202,.04);
  border-radius:16px;
  padding:14px;
}
.videoEmpty__title{font-weight:950}
.videoEmpty__desc{margin-top:6px;color:var(--muted);line-height:1.6}

.noteBox{
  margin-top:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:12px 14px;
  color:rgba(15,23,42,.78);
  line-height:1.6;
}

/* Pricing */
.pricing{display:flex;justify-content:center}
.priceCard{
  width:min(720px, 100%);
  background:#fff;
  border:1px solid rgba(67,56,202,.22);
  border-radius: 22px;
  padding:18px;
  box-shadow: 0 16px 36px rgba(67,56,202,.10);
}
.priceTop{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.priceName{font-weight:1000;font-size:18px}
.priceSub{color:var(--muted);margin-top:3px;font-weight:800}
.priceBadge{
  padding:8px 10px;border-radius:999px;
  background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.22);
  font-weight:950;font-size:12px;
}
.priceFoot{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fineprint{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.6}

/* Form */
.formWrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:start;
}
.form{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 22px;
  padding:16px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.formRow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-weight:950;font-size:13px}
input,textarea{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
input:focus,textarea:focus{
  border-color: rgba(67,56,202,.35);
  box-shadow: 0 0 0 4px rgba(67,56,202,.10)
}
.formActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.formStatus{color:rgba(67,56,202,.95);font-weight:900}

.sideInfo{
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:16px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.steps{margin:10px 0 0 18px;color:rgba(15,23,42,.78);line-height:1.7}

/* Footer */
.footer{
  padding:22px 0;
  border-top:1px solid var(--line);
  background:#fff;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.footerBrand{font-weight:1000}
.footerLinks{display:flex;gap:14px;flex-wrap:wrap}
.footerLinks a{color:rgba(15,23,42,.78)}
.footerLinks a:hover{color:rgba(67,56,202,.95)}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .hero__trust{grid-template-columns:1fr}
  .hero__highlights{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .formWrap{grid-template-columns:1fr}
}

@media (max-width: 820px){
  .nav{display:none}
  .hamburger{display:flex}

  .brand__tag{display:none}

  /* mobilde logo biraz küçülsün */
  .brand__logo{
    height: 44px;
    width: 170px;
    max-width: 190px;
  }

  .videoSearch{min-width: 100%;}
}

@media (max-width: 820px){
  .brand__logo{
    height:52px;
    width:52px;
  }
}
/* =========================
   ADMIN PANEL – LIGHT MODE
   ========================= */

.adminCard{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.adminTop{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.adminSearch{
  position:relative;
  flex:1;
  min-width:240px;
}

.adminSearch__icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#9ca3af;
  font-size:14px;
}

.adminSearch__input{
  width:100%;
  padding:10px 12px 10px 34px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fafafa;
  font-size:14px;
}

.adminSearch__input:focus{
  outline:none;
  background:#fff;
  border-color:#6366f1;
}

.adminFilters{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.adminCheck{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#374151;
}

.adminStatus{
  font-size:13px;
  margin:8px 0 12px;
  color:#374151;
}

.adminStatus.is-error{
  color:#b91c1c;
}

.adminTableWrap{
  overflow-x:auto;
}

.adminTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.adminTable th{
  text-align:left;
  font-weight:600;
  color:#374151;
  padding:10px 12px;
  background:#f9fafb;
  border-bottom:1px solid #e5e7eb;
}

.adminTable td{
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
}

.adminTable tr:hover td{
  background:#fafafa;
}

/* Mini badge'ler */
.badgeMini{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid transparent;
}

.badgeMini--ok{
  background:#ecfdf5;
  color:#065f46;
  border-color:#a7f3d0;
}

.badgeMini--warn{
  background:#fffbeb;
  color:#92400e;
  border-color:#fde68a;
}

.badgeMini--bad{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
}

/* Buton küçültmeler */
.btn--sm{
  padding:6px 10px;
  font-size:13px;
}

.btn--ghost{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#374151;
}

.btn--ghost:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.fineprint{
  margin-top:12px;
  font-size:12px;
  color:#6b7280;
}

/* Mobil uyum */
@media (max-width: 768px){
  .adminTop{
    flex-direction:column;
    align-items:stretch;
  }
}
<!doctype html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Admin • Özel Eğitim Pro</title>
  <link rel="stylesheet" href="/style.css?v=5" />
</head>

<body>
  <header class="header">
    <div class="container header__inner">
      <a class="brand" href="/index.html" aria-label="Özel Eğitim Pro">
        <span class="brand__logo">
          <img src="logo-ozelegitimpro.png" alt="Özel Eğitim Pro">
        </span>
        <span class="brand__text">
          <span class="brand__name">Admin</span>
          <span class="brand__tag">Kurum Yetkilendirme</span>
        </span>
      </a>

      <nav class="nav">
        <a href="/index.html#top">Site</a>
        <a class="nav__cta" href="#yetki">Kurum Yetkilendirme</a>
      </nav>

      <button class="hamburger" id="hamburger" aria-label="Menüyü aç/kapat" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>

    <div class="mobileNav" id="mobileNav" aria-hidden="true">
      <a href="/index.html#top">Site</a>
      <a href="#yetki">Kurum Yetkilendirme</a>
    </div>
  </header>

  <main id="yetki">
    <section class="section">
      <div class="container">
        <div class="sectionHead">
          <div class="kicker">Yönetim</div>
          <h2>Kurum Yetkilendirme</h2>
          <p>Uygulamadan gelen kayıtlar. Ödemesi “paid” olan ve yetkilendirilmemiş kurumlarda “Yetkilendir” aktif olur.</p>
        </div>

        <div class="adminCard">
          <div class="adminTop">
            <div class="adminSearch">
              <span class="adminSearch__icon">⌕</span>
              <input id="searchBox" class="adminSearch__input" type="text"
                     placeholder="Kurum / Yetkili / Telefon ara" autocomplete="off"/>
            </div>

            <div class="adminFilters">
              <label class="adminCheck">
                <input id="onlyPaid" type="checkbox" checked>
                <span>Sadece paid</span>
              </label>
              <label class="adminCheck">
                <input id="onlyUnauthorized" type="checkbox" checked>
                <span>Sadece yetkisiz</span>
              </label>
              <button id="refreshBtn" class="btn btn--ghost" type="button">Yenile</button>
            </div>
          </div>

          <div class="adminStatus" id="status" role="status" aria-live="polite">Bağlanıyor…</div>

          <div class="adminTableWrap">
            <table class="adminTable">
              <thead>
                <tr>
                  <th>Kurum</th>
                  <th>Yetkili</th>
                  <th>Telefon</th>
                  <th>Ödeme</th>
                  <th>Durum</th>
                  <th style="text-align:right;">İşlem</th>
                </tr>
              </thead>
              <tbody id="rows"></tbody>
            </table>
          </div>

          <div class="fineprint">
            Not: Şimdilik “Yetkilendir” SMS yerine test modda çalıştırılabilir. SMS sağlayıcı seçince gerçek SMS’e bağlarız.
          </div>
        </div>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

  <script>
    // ====== BURAYI DOLDUR ======
    const SUPABASE_URL = "PASTE_SUPABASE_URL_HERE";
    const SUPABASE_ANON_KEY = "PASTE_SUPABASE_ANON_KEY_HERE";
    // ===========================

    const TABLE = "institution_applications";

    const { createClient } = window.supabase;
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const el = (id) => document.getElementById(id);
    const rowsEl = el("rows");
    const statusEl = el("status");
    const searchEl = el("searchBox");
    const onlyPaidEl = el("onlyPaid");
    const onlyUnauthEl = el("onlyUnauthorized");
    const refreshBtn = el("refreshBtn");

    // mobile nav
    const hamburger = document.getElementById("hamburger");
    const mobileNav = document.getElementById("mobileNav");
    function closeMobileNav() {
      hamburger.setAttribute('aria-expanded', 'false');
      mobileNav.setAttribute('aria-hidden', 'true');
      mobileNav.classList.remove('is-open');
    }
    hamburger?.addEventListener('click', () => {
      const isOpen = mobileNav.classList.toggle('is-open');
      hamburger.setAttribute('aria-expanded', String(isOpen));
      mobileNav.setAttribute('aria-hidden', String(!isOpen));
    });
    Array.from(document.querySelectorAll('.mobileNav a')).forEach(a => a.addEventListener('click', closeMobileNav));

    function escapeHtml(s) {
      return String(s ?? "")
        .replaceAll("&","&amp;")
        .replaceAll("<","&lt;")
        .replaceAll(">","&gt;")
        .replaceAll('"',"&quot;")
        .replaceAll("'","&#039;");
    }
    function badge(text, kind) {
      const cls = kind ? `badgeMini badgeMini--${kind}` : "badgeMini";
      return `<span class="${cls}">${escapeHtml(text)}</span>`;
    }
    function setStatus(msg, ok=true) {
      statusEl.textContent = msg;
      statusEl.classList.toggle("is-error", !ok);
    }

    async function fetchData() {
      setStatus("Yükleniyor…");
      rowsEl.innerHTML = "";

      let q = supabase
        .from(TABLE)
        .select("id, institution_name, authorized_person, phone, payment_status, is_authorized, sms_status")
        .order("id", { ascending: false })
        .limit(200);

      if (onlyPaidEl.checked) q = q.eq("payment_status", "paid");
      if (onlyUnauthEl.checked) q = q.eq("is_authorized", false);

      const { data, error } = await q;
      if (error) {
        setStatus("Hata: " + error.message, false);
        return;
      }
      setStatus(`Toplam ${data.length} kayıt yüklendi.`);
      renderRows(data);
    }

    function renderRows(data) {
      const s = searchEl.value.trim().toLowerCase();
      const filtered = !s ? data : data.filter(r => {
        const hay = [r.institution_name, r.authorized_person, r.phone].join(" ").toLowerCase();
        return hay.includes(s);
      });

      rowsEl.innerHTML = filtered.map(r => {
        const pay = r.payment_status || "pending";
        const authorized = !!r.is_authorized;

        const payBadge =
          pay === "paid" ? badge("paid", "ok") :
          pay === "failed" ? badge("failed", "bad") :
          badge("pending", "warn");

        const authBadge = authorized ? badge("Yetkilendirildi", "ok") : badge("Yetkisiz", "warn");

        const action = authorized
          ? `<button class="btn btn--ghost btn--sm" type="button" disabled>Yetkilendirildi</button>`
          : (pay === "paid"
              ? `<button class="btn btn--primary btn--sm" type="button" data-id="${r.id}">Yetkilendir</button>`
              : `<button class="btn btn--ghost btn--sm" type="button" disabled>Ödeme bekleniyor</button>`
            );

        return `
          <tr>
            <td>${escapeHtml(r.institution_name)}</td>
            <td>${escapeHtml(r.authorized_person)}</td>
            <td>${escapeHtml(r.phone)}</td>
            <td>${payBadge}</td>
            <td>${authBadge}</td>
            <td style="text-align:right;">${action}</td>
          </tr>
        `;
      }).join("");

      rowsEl.querySelectorAll('button[data-id]').forEach(btn => {
        btn.addEventListener("click", async () => {
          const id = btn.getAttribute("data-id");
          await approveTestMode(id, btn);
        });
      });
    }

    // === TEST MODE: SMS yok, sadece yetkilendirir ===
    async function approveTestMode(id, btn) {
      btn.disabled = true;
      btn.textContent = "Yetkilendiriliyor…";
      setStatus("Test mod: yetkilendirme yapılıyor…");

      const { error } = await supabase
        .from(TABLE)
        .update({ is_authorized: true, sms_status: "sent" })
        .eq("id", id);

      if (error) {
        setStatus("Hata: " + error.message, false);
        btn.disabled = false;
        btn.textContent = "Yetkilendir";
        return;
      }

      setStatus("Test mod: Yetkilendirildi ✅");
      await fetchData();
    }

    searchEl.addEventListener("input", fetchData);
    onlyPaidEl.addEventListener("change", fetchData);
    onlyUnauthEl.addEventListener("change", fetchData);
    refreshBtn.addEventListener("click", fetchData);

    fetchData();
  </script>
</body>
</html>