/* TRILUX veritabanı — tema
   Apple'ın tasarım dili: sistem yazı tipi (Apple cihazlarda SF Pro), sınırlı renk,
   geniş boşluk, saydam üst bar, yumuşak köşe ve gölgeler.
   Dış bağımlılık yok (CDN/webfont yok) — ofis ağında internet olmadan da çalışır. */

:root{
  color-scheme: light dark;

  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;
  --surface:   #ffffff;
  --surface-2: #fbfbfd;
  --hover:     rgba(0,0,0,.028);

  --text:   #1d1d1f;
  --text-2: #515154;   /* küçük punto için AA'yı geçsin diye Apple grisinden bir tık koyu */
  --text-3: #6e6e73;

  --line:      rgba(0,0,0,.10);
  --line-soft: rgba(0,0,0,.055);

  --accent:     #0071e3;
  --accent-2:   #0077ed;
  --accent-bg:  rgba(0,113,227,.09);
  --brand:      #003d6b;
  --ok:         #00875a;
  --ok-bg:      rgba(0,135,90,.10);
  --uyari-bg:   rgba(245,166,35,.10);
  --uyari-text: #8a5a00;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 980px;

  --golge-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.045);
  --golge:    0 4px 16px rgba(0,0,0,.07);
  --golge-lg: 0 10px 40px rgba(0,0,0,.10);

  --gecis: 180ms cubic-bezier(.4,0,.2,1);
  --en: 1180px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Apple'ın karanlık mod ölçeği: zemin siyah, yüzeyler ondan AÇIK olmalı ki
       kartlar sayfadan ayrılsın. */
    --bg:        #000000;
    --bg-alt:    #000000;
    --surface:   #1c1c1e;
    --surface-2: #2c2c2e;
    --hover:     rgba(255,255,255,.05);

    --text:   #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8e8e93;

    --line:      rgba(255,255,255,.13);
    --line-soft: rgba(255,255,255,.08);

    --accent:    #2997ff;
    --accent-2:  #47a6ff;
    --accent-bg: rgba(41,151,255,.15);
    --brand:     #7ab6e8;
    --ok:        #30d158;
    --ok-bg:     rgba(48,209,88,.14);
    --uyari-bg:  rgba(255,214,10,.12);
    --uyari-text:#ffd60a;

    --golge-sm: 0 1px 2px rgba(0,0,0,.5);
    --golge:    0 4px 16px rgba(0,0,0,.55);
    --golge-lg: 0 10px 40px rgba(0,0,0,.65);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
  color:var(--text);
  background:var(--bg-alt);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;transition:color var(--gecis)}
a:hover{color:var(--accent-2);text-decoration:underline}
main{max-width:var(--en);margin:0 auto;padding:34px 22px 80px}
h1,h2,h3{letter-spacing:-.022em;font-weight:600}

/* ---------- üst bar: saydam, bulanık, ince ayraç ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);                                   /* eski tarayıcı yedeği */
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(1px)){ header{background:var(--bg)} }
.ust-ic{
  max-width:var(--en);margin:0 auto;
  display:flex;align-items:center;gap:30px;
  padding:0 22px;height:52px;
}
.marka{
  font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.marka:hover{color:var(--text);text-decoration:none;opacity:.7}
.marka span{font-weight:400;color:var(--text-2)}
header nav{display:flex;gap:26px}
header nav a{
  font-size:14px;color:var(--text-2);text-decoration:none;
  transition:color var(--gecis);
}
header nav a:hover{color:var(--text);text-decoration:none}
.dil{margin-left:auto;display:flex;gap:2px;padding:2px;
  background:var(--bg-alt);border-radius:var(--r-pill)}
.dil a{
  font-size:12px;font-weight:500;color:var(--text-2);text-decoration:none;
  padding:4px 11px;border-radius:var(--r-pill);transition:all var(--gecis);
}
.dil a:hover{color:var(--text);text-decoration:none}
.dil a.aktif{background:var(--surface);color:var(--text);box-shadow:var(--golge-sm)}

/* ---------- arama alanı ---------- */
.arama{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.arama .q{
  flex:1;min-width:300px;
  padding:13px 20px;font-family:inherit;font-size:16px;letter-spacing:-.01em;
  color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--golge-sm);
  transition:border-color var(--gecis), box-shadow var(--gecis);
}
.arama .q::placeholder{color:var(--text-3)}
.arama .q:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-bg);
}
.arama button, .filtre-alt button{
  padding:13px 26px;font-family:inherit;font-size:15px;font-weight:500;
  letter-spacing:-.01em;color:#fff;background:var(--accent);
  border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--gecis), transform var(--gecis);
}
.arama button:hover, .filtre-alt button:hover{background:var(--accent-2)}
.arama button:active, .filtre-alt button:active{transform:scale(.97)}

.filtreler{
  flex-basis:100%;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:4px 18px;box-shadow:var(--golge-sm);
}
.filtreler summary{
  cursor:pointer;font-size:14px;font-weight:500;color:var(--text-2);
  padding:11px 0;list-style:none;user-select:none;
}
.filtreler summary::-webkit-details-marker{display:none}
.filtreler summary::before{content:"⌄";display:inline-block;margin-right:8px;
  transition:transform var(--gecis);transform:translateY(-2px)}
.filtreler[open] summary::before{transform:rotate(180deg) translateY(2px)}
.filtreler summary:hover{color:var(--text)}
.filtre-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;margin:6px 0 18px;
}
.filtre-grid label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;font-weight:500;color:var(--text-2);
}
.filtre-grid select, .filtre-grid input{
  padding:9px 11px;font-family:inherit;font-size:14px;
  color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--gecis), box-shadow var(--gecis);
}
.filtre-grid select:focus, .filtre-grid input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
}
.filtre-alt{display:flex;gap:18px;align-items:center;font-size:13px;padding-bottom:16px}
.filtre-alt button{padding:9px 20px;font-size:14px}

/* ---------- sekmeler / sonuç tablosu ---------- */
.sekmeler{
  display:flex;gap:20px;align-items:baseline;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.sekme{font-size:14px;color:var(--text-2);text-decoration:none}
.sekme.aktif{color:var(--text);font-weight:600}
.sekme b{color:var(--accent);font-weight:600}
.disari{
  margin-left:auto;font-size:13px;font-weight:500;text-decoration:none;
  padding:7px 15px;background:var(--surface);color:var(--text-2);
  border:1px solid var(--line);border-radius:var(--r-pill);
  transition:all var(--gecis);
}
.disari:hover{background:var(--surface-2);color:var(--text);text-decoration:none;
  box-shadow:var(--golge-sm)}

table.sonuc{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--golge-sm);
}
table.sonuc th{
  text-align:left;padding:12px 16px;font-size:12px;font-weight:600;
  letter-spacing:.01em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
table.sonuc td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.sonuc tbody tr:last-child td{border-bottom:0}
table.sonuc tbody tr{transition:background var(--gecis)}
table.sonuc tbody tr:hover{background:var(--hover)}
.sag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pid{font-family:var(--mono);font-size:13px;font-weight:500;text-decoration:none}
.tek{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.soluk{color:var(--text-3);font-size:12.5px;font-weight:400}
.not{color:var(--text-2);font-size:13.5px;margin:8px 0 18px;max-width:70ch}
.bos{color:var(--text-2);padding:70px 20px;text-align:center;font-size:15px}

.rozet{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:500;line-height:1.5;
  background:var(--bg-alt);color:var(--text-2);border:1px solid transparent;
}
.rozet.ok{background:var(--ok-bg);color:var(--ok)}
.rozet.ana{background:var(--accent-bg);color:var(--accent)}
.rozet.kopya{background:var(--uyari-bg);color:var(--uyari-text)}
.rozet.dil{text-transform:uppercase;font-size:10.5px;letter-spacing:.04em}

.sayfalama{
  display:flex;gap:24px;align-items:center;justify-content:center;
  margin:34px 0 0;font-size:14px;color:var(--text-2);
}
.sayfalama a{font-weight:500}

/* ---------- ürün detayı ---------- */
.geri{font-size:14px;margin:0 0 20px}
.urun-bas{
  display:flex;justify-content:space-between;gap:30px;align-items:flex-start;
  padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.pid-buyuk{font-family:var(--mono);font-size:13px;color:var(--text-3)}
.urun-bas h1{
  margin:8px 0 8px;font-size:30px;line-height:1.18;letter-spacing:-.028em;
  max-width:860px;font-weight:600;
}
.urun-bas .alt{margin:0;color:var(--text-2);font-size:14px}
.fiyat-kutu{
  text-align:right;white-space:nowrap;padding:16px 22px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);box-shadow:var(--golge-sm);
}
.fiyat{font-size:26px;font-weight:600;letter-spacing:-.025em;color:var(--text);
  font-variant-numeric:tabular-nums}
.fiyat-not{font-size:11px;color:var(--text-3);line-height:1.45;margin-top:5px}

.urun section{margin:38px 0}
.urun h2{
  font-size:20px;margin:0 0 14px;letter-spacing:-.022em;
}
.urun h3{font-size:13px;margin:0 0 8px;color:var(--text-2);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}

.kunye dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;margin:0;background:var(--line-soft);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--golge-sm);
}
.kunye dl>div{background:var(--surface);padding:13px 16px}
.kunye dt{font-size:12px;color:var(--text-3);margin-bottom:3px}
.kunye dd{margin:0;font-size:14.5px}
.aciklama{max-width:74ch;color:var(--text-2);font-size:15px;line-height:1.65}

.dok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.dok-grup{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:15px 17px;box-shadow:var(--golge-sm)}
.dok-grup ul{margin:0;padding-left:16px}
.dok-grup li{font-size:13px;margin-bottom:5px;word-break:break-word;line-height:1.45}

table.ozellik{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--golge-sm);
}
table.ozellik th{
  text-align:left;padding:10px 15px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-3);
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
table.ozellik td{padding:9px 15px;border-bottom:1px solid var(--line-soft)}
table.ozellik tbody tr:last-child td{border-bottom:0}

ul.ilgili{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 26px;
}
ul.ilgili li{
  font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line-soft);
  display:flex;gap:12px;align-items:baseline;
}
ul.ilgili li span{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* ---------- katalog <-> ürün ---------- */
ul.katalog-liste{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.katalog-liste li{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--golge-sm);
  transition:box-shadow var(--gecis), transform var(--gecis);
}
ul.katalog-liste li:hover{box-shadow:var(--golge);transform:translateY(-1px)}
.kat-bas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kat-bas a{font-size:15px;font-weight:500;letter-spacing:-.015em}
.seri-rozetleri{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rozet.seri{text-decoration:none;color:var(--text-2);border-color:var(--line-soft);
  transition:all var(--gecis)}
.rozet.seri:hover{background:var(--accent);color:#fff;text-decoration:none;
  border-color:var(--accent)}
.rozet.seri b{color:var(--text-3);font-weight:600}
.rozet.seri:hover b{color:rgba(255,255,255,.75)}

/* ---------- belgeler ---------- */
.kategoriler{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
ul.belge-liste{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.belge-liste li{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:16px 20px;box-shadow:var(--golge-sm);
  transition:box-shadow var(--gecis), transform var(--gecis);
}
ul.belge-liste li:hover{box-shadow:var(--golge);transform:translateY(-1px)}
.belge-bas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.belge-bas a{font-size:16px;font-weight:500;letter-spacing:-.018em;color:var(--text)}
.belge-bas a:hover{color:var(--accent)}
.ozet{font-size:13.5px;color:var(--text-2);margin-top:8px;max-width:88ch;line-height:1.6}
.ozet mark{background:var(--accent-bg);color:var(--accent);padding:1px 3px;
  border-radius:4px;font-weight:500}

/* ---------- alt bilgi ---------- */
footer{
  border-top:1px solid var(--line-soft);background:var(--bg);
  padding:26px 22px 44px;font-size:12px;color:var(--text-3);line-height:1.6;
}
footer>div{max-width:var(--en);margin:0 auto}
footer b{color:var(--text-2);font-weight:600}
footer .uyari{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}

/* ---------- küçük ekran ---------- */
@media (max-width:720px){
  main{padding:24px 16px 60px}
  .ust-ic{gap:16px;padding:0 16px}
  header nav{gap:16px}
  .marka{font-size:17px}
  .marka span{display:none}
  .urun-bas{flex-direction:column;gap:18px}
  .urun-bas h1{font-size:24px}
  .fiyat-kutu{text-align:left;width:100%}
  table.sonuc{display:block;overflow-x:auto;white-space:nowrap}
  ul.ilgili{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  ul.katalog-liste li:hover, ul.belge-liste li:hover{transform:none}
}

/* ---------- hesap menüsü ---------- */
.hesap{display:flex;align-items:center;gap:16px;font-size:13px}
.hesap a{color:var(--text-2);text-decoration:none}
.hesap a:hover{color:var(--text)}
.hesap form{margin:0}
.hesap button{
  font-family:inherit;font-size:13px;color:var(--text-2);background:none;
  border:0;padding:0;cursor:pointer;transition:color var(--gecis);
}
.hesap button:hover{color:var(--text)}

/* ---------- giriş sayfası ---------- */
.giris-govde{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:var(--bg-alt);padding:20px}
.giris-kutu{max-width:400px;width:100%;padding:0}
.giris-kart{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:38px 34px 30px;box-shadow:var(--golge-lg);
}
.giris-kart h1{margin:0;font-size:24px;letter-spacing:-.024em;text-align:center}
.giris-kart h1 span{font-weight:400;color:var(--text-2)}
.giris-alt{margin:8px 0 26px;text-align:center;color:var(--text-2);font-size:14px}
.giris-kart label{display:block;margin-bottom:16px;font-size:13px;font-weight:500;
  color:var(--text-2)}
.giris-kart input{
  display:block;width:100%;margin-top:6px;padding:11px 14px;
  font-family:inherit;font-size:15px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--gecis), box-shadow var(--gecis);
}
.giris-kart input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg)}
.giris-kart button{
  width:100%;margin-top:8px;padding:12px;font-family:inherit;font-size:15px;
  font-weight:500;color:#fff;background:var(--accent);border:0;
  border-radius:var(--r-pill);cursor:pointer;transition:background var(--gecis);
}
.giris-kart button:hover{background:var(--accent-2)}
.giris-not{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--text-3)}
.giris-dip{text-align:center;margin-top:20px;font-size:12px;color:var(--text-3)}

/* ---------- bildirim kutuları ---------- */
.hata-kutu,.ok-kutu,.uyari-kutu{
  padding:12px 16px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:18px;
  line-height:1.5;
}
.hata-kutu{background:rgba(255,59,48,.10);color:#c1121f}
.ok-kutu{background:var(--ok-bg);color:var(--ok)}
.uyari-kutu{background:var(--uyari-bg);color:var(--uyari-text)}
.uyari-kutu code{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;
  word-break:break-all}
@media (prefers-color-scheme: dark){ .hata-kutu{color:#ff6961} }

/* ---------- form düzenleri ---------- */
.dar{max-width:720px}
.sayfa-baslik{font-size:28px;letter-spacing:-.026em;margin:0 0 22px}
.dikey-form{display:flex;flex-direction:column;gap:14px;max-width:380px}
.yatay-form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;align-items:end;background:var(--surface);padding:18px 20px;
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--golge-sm);
}
.dikey-form label,.yatay-form label{
  display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;
  color:var(--text-2);
}
.dikey-form input,.yatay-form input,.yatay-form select{
  padding:9px 11px;font-family:inherit;font-size:14px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.dikey-form input:focus,.yatay-form input:focus,.yatay-form select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dikey-form button,.yatay-form button{
  padding:11px 22px;font-family:inherit;font-size:14px;font-weight:500;color:#fff;
  background:var(--accent);border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--gecis);
}
.dikey-form button:hover,.yatay-form button:hover{background:var(--accent-2)}

/* ---------- yönetim tablosu ---------- */
.islemler form{display:flex;flex-wrap:wrap;gap:5px;margin:0}
button.mini{
  font-family:inherit;font-size:11.5px;font-weight:500;padding:4px 10px;
  color:var(--text-2);background:var(--bg-alt);border:1px solid var(--line-soft);
  border-radius:var(--r-pill);cursor:pointer;transition:all var(--gecis);white-space:nowrap;
}
button.mini:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
button.mini.tehlike:hover{background:#d70015;border-color:#d70015}
.parola-kutu{
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--r);
  padding:16px 20px;margin-bottom:22px;box-shadow:var(--golge);
}
.parola-satir{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0}
.parola-satir span{font-size:12px;color:var(--text-3)}
.parola-satir code{
  font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);
  background:var(--bg-alt);padding:6px 12px;border-radius:var(--r-sm);user-select:all;
}
.not code{font-family:var(--mono);font-size:12px;background:var(--bg-alt);
  padding:2px 6px;border-radius:5px}
.hata-kutu code{font-family:var(--mono);font-size:12px;word-break:break-all}
.hata-kutu.aralikli{margin-top:14px}

/* ---------- ürün görsel galerisi ---------- */
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.galeri-oge{margin:0}
.galeri-oge a{
  display:block;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:10px;
  box-shadow:var(--golge-sm);transition:box-shadow var(--gecis),transform var(--gecis);
}
.galeri-oge a:hover{box-shadow:var(--golge);transform:translateY(-2px)}
.galeri-oge img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.galeri-oge figcaption{margin-top:7px;font-size:12px;color:var(--text-3);text-align:center}
@media (prefers-color-scheme: dark){
  /* Ürün fotoğrafları beyaz zeminli; koyu temada kart da açık kalsın */
  .galeri-oge a{background:#f5f5f7}
}
.dip-marka{display:inline-block;margin-right:14px}