/* =====================================================================
   PTS-Ticari — API Tanıtım ve Deneme Konsolu
   ---------------------------------------------------------------------
   ⚠ TEMA DOSYALARINA DOKUNULMADI. `varlik/tema/` (Velzon, Bootstrap
   5.3.6) bu sayfaya BAĞLANMIYOR da: sayfa kendi alan adında
   (api.plasiyertakip.com) tek başına yayınlanacak ve oradaki kök dizin
   üründen ayrı. Tema dosyasına göreli bir yol verilseydi yayında sessizce
   404 olur, sayfa biçimsiz açılırdı.

   Renkler Velzon paletinden BİREBİR alındı, böylece ürünle aynı görünüyor:
     birincil #405189 · ikincil #3577f1 · iyi #0ab39c
     uyarı   #f7b84b · tehlike #f06548 · bilgi #299cdb

   Aydınlık/karanlık: `html[data-tema]` ile. İşletim sistemi tercihi
   `konsol.js` içinde okunuyor, buradaki değişkenler ikisini de karşılıyor.
   ===================================================================== */

:root,
html[data-tema="aydinlik"] {
    --zemin:        #f3f6f9;
    --kart:         #ffffff;
    --kart-ust:     #f8f9fb;
    --yazi:         #212529;
    --yazi-soluk:   #6c7280;
    --cizgi:        #e3e7ea;
    --birincil:     #405189;
    --birincil-yazi:#ffffff;
    --ikincil:      #3577f1;
    --iyi:          #0a8f7e;
    --iyi-zemin:    #e4f6f3;
    --uyari:        #a4762a;
    --uyari-zemin:  #fdf3e2;
    --tehlike:      #c9402a;
    --tehlike-zemin:#fde9e5;
    --bilgi:        #1f7fb5;
    --bilgi-zemin:  #e3f1fa;
    --kod-zemin:    #f4f6f9;
    --golge:        0 1px 2px rgba(33, 37, 41, .06), 0 8px 24px rgba(33, 37, 41, .05);
}

html[data-tema="karanlik"] {
    --zemin:        #16181c;
    --kart:         #212529;
    --kart-ust:     #262b30;
    --yazi:         #dde1e5;
    --yazi-soluk:   #9aa0a6;
    --cizgi:        #333940;
    --birincil:     #6d81c4;
    --birincil-yazi:#0f1114;
    --ikincil:      #7ea6f7;
    --iyi:          #33c9b4;
    --iyi-zemin:    #14322f;
    --uyari:        #f0be6a;
    --uyari-zemin:  #362b16;
    --tehlike:      #f58b74;
    --tehlike-zemin:#3a201b;
    --bilgi:        #61b8e6;
    --bilgi-zemin:  #172c39;
    --kod-zemin:    #1a1e22;
    --golge:        0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* Uzun adresler, jeton parçaları ve JSON telefonda taşmasın. */
p, li, td, th, dd, dt { overflow-wrap: anywhere; }

.gizli { display: none !important; }

.kap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------------------------------------------------------------- Üst */

.ust {
    background: linear-gradient(135deg, #405189 0%, #2f3c68 55%, #3577f1 130%);
    color: #ffffff;
    padding: 28px 0 34px;
}

.ust-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.marka {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .2px;
}

.marka-kutu {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 13px;
}

.tema-dugme {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #ffffff;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.tema-dugme:hover { background: rgba(255, 255, 255, .24); }

.ust h1 {
    margin: 20px 0 8px;
    font-size: 30px;
    line-height: 1.25;
}

.ust-alt {
    margin: 0;
    max-width: 680px;
    font-size: 16px;
    color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------------------ Bölümler */

main { padding: 0 0 60px; }

.bolum { margin-top: 30px; }

.bolum > h2 {
    font-size: 20px;
    margin: 0 0 4px;
}

.bolum-alt {
    margin: 0 0 14px;
    color: var(--yazi-soluk);
    font-size: 14px;
}

.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    box-shadow: var(--golge);
    padding: 18px;
}

.kart + .kart { margin-top: 14px; }

.adim-no {
    display: inline-block;
    background: var(--birincil);
    color: var(--birincil-yazi);
    border-radius: 999px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin-inline-end: 8px;
    vertical-align: 2px;
}

/* ------------------------------------------------------------- Uyarı */

.dikkat {
    margin-top: -20px;
    background: var(--uyari-zemin);
    border: 1px solid var(--uyari);
    border-inline-start: 5px solid var(--uyari);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: var(--golge);
}

.dikkat h2 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--uyari);
}

.dikkat p { margin: 0 0 8px; }
.dikkat p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Form */

label.etiket {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.ipucu {
    color: var(--yazi-soluk);
    font-size: 13px;
    margin: 4px 0 0;
}

.adres-kutu {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.adres-birlesik {
    display: flex;
    align-items: stretch;
    flex: 1 1 260px;
    min-width: 0;
    border: 1px solid var(--cizgi);
    border-radius: 9px;
    background: var(--kart-ust);
    overflow: hidden;
}

.adres-birlesik input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--yazi);
    padding: 11px 12px;
    font-size: 16px;
    font-family: inherit;
}

.adres-birlesik input:focus { outline: 2px solid var(--ikincil); outline-offset: -2px; }

.adres-sabit {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--kod-zemin);
    border-inline-start: 1px solid var(--cizgi);
    color: var(--yazi-soluk);
    font-size: 14px;
    white-space: nowrap;
}

input[type="text"].alan,
input[type="password"].alan {
    width: 100%;
    border: 1px solid var(--cizgi);
    border-radius: 9px;
    background: var(--kart-ust);
    color: var(--yazi);
    padding: 11px 12px;
    font-size: 16px;
    font-family: inherit;
}

input.alan:focus { outline: 2px solid var(--ikincil); outline-offset: -2px; }

/* Salt okunur kutu, yazılabilir kutuyla AYNI görünmemeli: kullanıcı
   içine yazmayı denemeden önce anlamalı. */
input.alan[readonly] {
    background: var(--kod-zemin);
    color: var(--yazi-soluk);
    border-style: dashed;
    cursor: default;
}

.dugme {
    background: var(--birincil);
    color: var(--birincil-yazi);
    border: 0;
    border-radius: 9px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.dugme:hover { filter: brightness(1.08); }
.dugme:disabled { opacity: .6; cursor: default; }

.dugme-sade {
    background: transparent;
    color: var(--ikincil);
    border: 1px solid var(--cizgi);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.dugme-sade:hover { background: var(--kart-ust); }

.alan-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

/* Tür seçimi — fare ile tıklanan iki büyük kart, açılır liste değil. */

.secim {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 6px 0 4px;
}

.secim input { position: absolute; opacity: 0; pointer-events: none; }

.secim label {
    display: block;
    border: 2px solid var(--cizgi);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--kart-ust);
}

.secim label span.secim-ad {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.secim label span.secim-alt {
    display: block;
    color: var(--yazi-soluk);
    font-size: 13px;
}

.secim input:checked + label {
    border-color: var(--ikincil);
    box-shadow: 0 0 0 3px rgba(53, 119, 241, .16);
}

.secim input:focus-visible + label { outline: 2px solid var(--ikincil); outline-offset: 2px; }

/* ------------------------------------------------------------ Sonuç */

.sonuc {
    margin-top: 14px;
    border-radius: 10px;
    padding: 13px 15px;
    border: 1px solid var(--cizgi);
    background: var(--kart-ust);
}

.sonuc-baslik { font-weight: 700; margin-bottom: 4px; }
.sonuc-satir { margin: 6px 0 0; font-size: 14px; }

.sonuc-iyi      { background: var(--iyi-zemin);     border-color: var(--iyi); }
.sonuc-iyi .sonuc-baslik      { color: var(--iyi); }
.sonuc-uyari    { background: var(--uyari-zemin);   border-color: var(--uyari); }
.sonuc-uyari .sonuc-baslik    { color: var(--uyari); }
.sonuc-tehlike  { background: var(--tehlike-zemin); border-color: var(--tehlike); }
.sonuc-tehlike .sonuc-baslik  { color: var(--tehlike); }
.sonuc-bilgi    { background: var(--bilgi-zemin);   border-color: var(--bilgi); }
.sonuc-bilgi .sonuc-baslik    { color: var(--bilgi); }

.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }

.rozet {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ------------------------------------------------------------ Lamba */

.lambalar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.lamba {
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--kart-ust);
}

.lamba-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.lamba-isik {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ffffff;
    flex: 0 0 auto;
}

.lamba-baslik { font-weight: 700; font-size: 14px; }
.lamba-aciklama { margin: 0; font-size: 13px; color: var(--yazi-soluk); }

.lamba-acik   { border-color: var(--iyi); background: var(--iyi-zemin); }
.lamba-acik   .lamba-isik { background: var(--iyi); }
.lamba-kapali { border-color: var(--tehlike); background: var(--tehlike-zemin); }
.lamba-kapali .lamba-isik { background: var(--tehlike); }

/* ------------------------------------------------------------- Bilgi */

.ozet-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ozet-kutu {
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--kart-ust);
}

.ozet-kutu dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--yazi-soluk);
    margin: 0 0 2px;
}

.ozet-kutu dd { margin: 0; font-weight: 600; }

.bilgi-satir {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cizgi);
}

.bilgi-satir:last-child { border-bottom: 0; }
.bilgi-baslik { color: var(--yazi-soluk); font-size: 14px; }
.bilgi-deger { font-weight: 600; }

.cipler { display: flex; flex-wrap: wrap; gap: 6px; }

.cip {
    background: var(--bilgi-zemin);
    color: var(--bilgi);
    border: 1px solid var(--bilgi);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.cip-bos { color: var(--yazi-soluk); font-weight: 400; font-size: 14px; }

/* --------------------------------------------------------------- Kod */

pre.ham {
    margin: 12px 0 0;
    background: var(--kod-zemin);
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-x: auto;
    font-family: Consolas, "Courier New", monospace;
    color: var(--yazi);
}

code.satir-ici {
    background: var(--kod-zemin);
    border: 1px solid var(--cizgi);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 13px;
    font-family: Consolas, "Courier New", monospace;
}

/* ------------------------------------------------------------ Tablo */

.kaydir { overflow-x: auto; margin-top: 12px; }

/* Geniş tablo küçük ekranda yana kayıyor. Kaydırılabildiğini SÖYLEMEK
   gerekiyor: kaydırma çubuğu dokunmatikte görünmüyor ve kullanıcı
   kesilmiş sütunu "eksik" sanıyor. Geniş ekranda tablo zaten sığdığı
   için bu not GİZLİ. */
.kaydir-not { display: none; }

@media (max-width: 620px) {
    .kaydir-not {
        display: block;
        margin: 10px 0 -4px;
        font-size: 13px;
        color: var(--yazi-soluk);
    }
}

table.liste {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14px;
}

table.liste th,
table.liste td {
    text-align: start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: top;
}

table.liste thead th {
    background: var(--kart-ust);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--yazi-soluk);
    white-space: nowrap;
}

table.liste tbody tr:last-child td { border-bottom: 0; }

.yontem {
    display: inline-block;
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 700;
    font-family: Consolas, "Courier New", monospace;
}

.yontem-get  { background: var(--bilgi-zemin); color: var(--bilgi); }
.yontem-post { background: var(--iyi-zemin);   color: var(--iyi); }

.yol {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    white-space: nowrap;
}

/* -------------------------------------------------------- Hata sınıfı */

.sinif-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.sinif-kart {
    border: 1px solid var(--cizgi);
    border-inline-start-width: 5px;
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--kart);
    box-shadow: var(--golge);
}

.sinif-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sinif-simge { font-size: 19px; }
.sinif-ad { font-weight: 700; font-size: 16px; }

.sinif-kod {
    margin-inline-start: auto;
    font-size: 11.5px;
    color: var(--yazi-soluk);
    background: var(--kod-zemin);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: Consolas, "Courier New", monospace;
}

.sinif-kisa { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.sinif-telefon { margin: 0 0 6px; font-size: 14px; }
.sinif-ornek { margin: 0; font-size: 13px; color: var(--yazi-soluk); }

.sinif-uyari   { border-inline-start-color: var(--uyari); }
.sinif-tehlike { border-inline-start-color: var(--tehlike); }
.sinif-bilgi   { border-inline-start-color: var(--bilgi); }
.sinif-notr    { border-inline-start-color: var(--yazi-soluk); }

.olay {
    margin-top: 14px;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    background: var(--kart-ust);
    padding: 14px 16px;
}

.olay h3 { margin: 0 0 6px; font-size: 15px; }
.olay p { margin: 0 0 8px; font-size: 14px; }
.olay p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Günlük */

.gunluk {
    background: var(--kod-zemin);
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    padding: 8px 10px;
    max-height: 240px;
    overflow-y: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
}

.gunluk-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px;
    border-bottom: 1px dashed var(--cizgi);
}

.gunluk-satir:last-child { border-bottom: 0; }
.gunluk-saat { color: var(--yazi-soluk); }
.gunluk-yontem { font-weight: 700; }
.gunluk-yol { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.gunluk-kod { font-weight: 700; }
.kod-iyi { color: var(--iyi); }
.kod-kotu { color: var(--tehlike); }
.gunluk-hata { color: var(--uyari); }

/* ------------------------------------------------------------- Alt */

.alt {
    border-top: 1px solid var(--cizgi);
    padding: 22px 0 40px;
    color: var(--yazi-soluk);
    font-size: 13px;
}

.alt p { margin: 0 0 6px; }

ul.temiz { margin: 8px 0 0; padding-inline-start: 20px; }
ul.temiz li { margin-bottom: 5px; }

/* --------------------------------------------------- Küçük ekran (390px) */

@media (max-width: 620px) {
    body { font-size: 14.5px; }
    .ust h1 { font-size: 23px; }
    .ust-alt { font-size: 15px; }
    .kap { padding: 0 12px; }
    .kart { padding: 14px; }
    .bilgi-satir { grid-template-columns: 1fr; gap: 2px; }
    .adres-sabit { font-size: 13px; padding: 0 9px; }
    .dugme { width: 100%; }
    .dikkat { margin-top: -14px; }
}