/* Nuglr Developers — site temasıyla uyumlu geliştirici konsolu.
   Yalnız /developers sayfasında yüklenir; style.css'e dokunulmaz.

   Sayfa Nuglr'ın açık temasında kalır: koyu bir konsol, açık zeminli sitenin
   ortasında yabancı bir blok gibi duruyordu. Yalnız kod panelleri koyudur —
   kod okunurluğu için yerleşmiş bir beklenti. */

.dev-console{
  --ink:#111318; --muted:#767b86; --line:#E7E8EE; --soft:#F6F7F9;
  --card:#FFFFFF; --brand:#FFD21A; --accent:#00A651;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --radius:24px;
  max-width:1180px;margin:0 auto 110px;color:var(--ink);
}
.dev-console *{box-sizing:border-box}
.dev-console h1,.dev-console h2,.dev-console h3{color:var(--ink)}

/* Ürün seçici — kart içinde, taşmadan */
.dev-switcher{position:sticky;top:12px;z-index:40;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:10px 14px;margin-bottom:18px;border-radius:18px;
  border:1px solid var(--line);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(12px);box-shadow:0 8px 26px rgba(15,23,42,.06)}
.dev-switcher-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:14.5px;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.dev-switcher-brand span{width:32px;height:32px;border-radius:10px;background:var(--ink);
  color:var(--brand);display:grid;place-items:center;font-size:14px}
.dev-picker{position:relative;margin-left:auto;max-width:100%}
.dev-picker>button{display:flex;align-items:center;gap:11px;min-width:240px;max-width:100%;
  padding:10px 14px;border-radius:13px;border:1px solid var(--line);background:var(--soft);
  color:var(--ink);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.dev-picker>button:hover{border-color:#d3d6de;background:#fff}
.dev-picker>button i:first-child{color:#9aa1ad}
.dev-picker>button i:last-child{margin-left:auto;color:#9aa1ad;font-size:11px;transition:transform .18s}
.dev-picker.open>button i:last-child{transform:rotate(180deg)}
.dev-picker-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(340px,92vw);padding:6px;
  border-radius:18px;border:1px solid var(--line);background:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.16);display:none}
.dev-picker.open .dev-picker-menu{display:block}
.dev-picker-menu button{display:flex;gap:11px;width:100%;padding:11px;border:0;border-radius:13px;
  background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer;align-items:flex-start}
.dev-picker-menu button:hover{background:var(--soft)}
.dev-picker-menu button.active{background:#FFF8DC}
.dev-picker-menu i:first-child{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;
  place-items:center;background:var(--soft);color:#8a6d00}
.dev-picker-menu button.active i:first-child{background:var(--brand);color:#111}
.dev-picker-menu b{display:block;font-size:13.5px}
.dev-picker-menu small{color:var(--muted);font-size:12px;line-height:1.4}

/* Kahraman */
.dev-hero{position:relative;overflow:hidden;border-radius:30px;padding:44px;color:#fff;
  background:radial-gradient(760px 320px at 88% -20%,rgba(255,210,26,.34),transparent 62%),
    linear-gradient(155deg,#15181F,#232936)}
.dev-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(72% 62% at 46% 0,#000,transparent)}
.dev-hero h1,.dev-hero p{color:#fff;position:relative;z-index:1}
.dev-hero-eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--brand)}
.dev-hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.03;letter-spacing:-.042em;margin:16px 0 12px;max-width:720px}
.dev-hero p{margin:0;max-width:640px;color:#D6DCE6;font-size:16px;line-height:1.62}
.dev-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;position:relative;z-index:1}
.dev-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:13px;
  font-weight:900;text-decoration:none;border:1px solid transparent;font-size:14px}
.dev-btn.primary{background:var(--brand);color:#111}
.dev-btn.primary:hover{filter:brightness(1.05)}
.dev-btn.ghost{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}
.dev-btn.ghost:hover{background:rgba(255,255,255,.12)}

/* Bloklar */
.dev-page[hidden]{display:none}
.dev-block{margin-top:18px;padding:28px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--card);display:grid;gap:20px;box-shadow:0 14px 40px rgba(15,23,42,.05)}
.dev-block-head,.dev-console .dev-section-head{display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.dev-block-head h2,.dev-console .dev-section-head h2{margin:5px 0 0;font-size:27px;letter-spacing:-.035em}
.dev-block-head .eyebrow,.dev-console .dev-section-head .eyebrow{font-size:11px;font-weight:900;
  letter-spacing:.14em;color:var(--muted)}
.dev-lead{margin:0;color:#4d5563;font-size:15.5px;line-height:1.65;max-width:780px}
.dev-h3{margin:6px 0 0;font-size:18px;letter-spacing:-.02em}

/* Kartlar */
.dev-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dev-card{padding:19px;border-radius:18px;border:1px solid var(--line);background:var(--soft);
  display:grid;gap:8px;align-content:start}
.dev-card i{font-size:18px;color:#8a6d00;width:38px;height:38px;border-radius:12px;
  background:#FFF3C4;display:grid;place-items:center}
.dev-card h3{margin:4px 0 0;font-size:15.5px}
.dev-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.dev-card code{font-family:var(--mono);font-size:11.5px;color:#0b6b3a;background:#E7F7EE;
  padding:5px 8px;border-radius:8px;justify-self:start}

/* Kod panelleri — koyu kalır */
.dev-code-wrap{border:1px solid #1D2430;border-radius:20px;overflow:hidden;background:#0C1017}
.dev-code-tabs{display:flex;gap:4px;padding:8px;overflow:auto;background:#141A24;border-bottom:1px solid #1D2430}
.dev-code-tabs button{border:0;border-radius:10px;background:transparent;color:#98A3B4;padding:9px 13px;
  font-weight:800;font-size:13px;white-space:nowrap;cursor:pointer}
.dev-code-tabs button:hover{color:#fff}
.dev-code-tabs button.active{background:var(--brand);color:#111}
.dev-code-wrap pre{margin:0;padding:22px;overflow:auto;color:#DCE6F2;font-family:var(--mono);
  font-size:12.5px;line-height:1.7;min-height:180px}

/* Listeler */
.dev-steps{margin:0;padding-left:20px;display:grid;gap:11px;color:#4d5563;line-height:1.62}
.dev-list{margin:0;padding-left:18px;display:grid;gap:9px;color:#4d5563;line-height:1.62}
.dev-steps b,.dev-list b{color:var(--ink)}
.dev-steps code,.dev-list code,.dev-lead code{font-family:var(--mono);font-size:12px;
  background:var(--soft);border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:#0b6b3a}

/* Uygulama kartları */
.dev-console .dev-app-layout{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);
  gap:16px;align-items:start}
.dev-console .dev-app-form,.dev-console .dev-app-card{background:var(--soft);border:1px solid var(--line);
  border-radius:20px;padding:20px;display:grid;gap:13px}
.dev-console .dev-app-form input,.dev-console .dev-app-form textarea,.dev-console .dev-app-form select,
.dev-console .dev-field input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;
  font:inherit;background:#fff;color:var(--ink)}
.dev-console .dev-app-form input:focus,.dev-console .dev-field input:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,210,26,.25)}
.dev-console .dev-app-card code{background:#fff;border:1px solid var(--line);padding:10px;border-radius:11px;
  font-family:var(--mono);font-size:12px;color:#1f3d7a;overflow:auto;display:block}
.dev-console small{color:var(--muted)}
.dev-field{display:grid;gap:6px;font-weight:800;font-size:12px}
.dev-key-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.dev-key{flex:1;min-width:200px;font-family:var(--mono);font-size:12px;background:#0C1017;color:#7CE7B0;
  border:1px solid #1D2430;padding:11px;border-radius:11px;overflow:auto}
.dev-console details{border:1px solid var(--line);border-radius:17px;background:#fff}
.dev-console details>summary{cursor:pointer;padding:14px 16px;font-weight:900;list-style:none}
.dev-console details>summary::-webkit-details-marker{display:none}
.dev-console details[open]>summary{border-bottom:1px solid var(--line)}
.dev-console details>*:not(summary){margin:14px 16px}
.dev-console .dev-app-list{display:grid;gap:12px}
.dev-console .dev-app-title{display:flex;align-items:center;gap:11px}
.dev-console .dev-app-title>span{width:46px;height:46px;border-radius:14px;background:var(--ink);
  color:var(--brand);display:grid;place-items:center;font-size:20px;font-weight:950;flex:0 0 auto}
.dev-console .dev-app-title h3{margin:0;font-size:16px}
.dev-console .dev-app-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dev-console .dev-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px;align-items:stretch}
.dev-console .dev-flow span{min-height:74px;padding:13px;border-radius:15px;background:var(--soft);
  border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-weight:800;font-size:13.5px}
.dev-console .dev-flow b{width:28px;height:28px;border-radius:9px;background:var(--brand);color:#111;
  display:grid;place-items:center;flex:0 0 auto}
.dev-console .dev-flow>i{display:none}
.dev-console .dev-security-grid,.dev-console .developers-endpoints{display:grid;
  grid-template-columns:repeat(3,1fr);gap:12px}
.dev-console .dev-security-grid article,.dev-console .developers-endpoints article{padding:18px;
  border-radius:17px;background:var(--soft);border:1px solid var(--line);display:grid;gap:6px}
.dev-console .dev-security-grid i{font-size:21px;color:#8a6d00}
.dev-console .dev-security-grid h3{margin:9px 0 4px;font-size:15.5px}
.dev-console .dev-security-grid p{margin:0;color:var(--muted);line-height:1.55;font-size:13.5px}
.dev-console .developers-endpoints span{font-size:10.5px;font-weight:950;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}
.dev-console .developers-endpoints code{font-family:var(--mono);font-size:11.5px;color:#1f3d7a;overflow:auto}
.dev-console .dev-empty,.dev-console .dev-login-callout{min-height:160px;border:1px dashed #d3d6de;
  border-radius:20px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:22px}
.dev-console .dev-login-callout{grid-template-columns:54px 1fr;text-align:left;gap:14px;place-items:center start}
.dev-console .dev-login-callout i{font-size:32px;color:#c8a200}
.dev-console .dev-switch{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13.5px}
.dev-console .dev-switch input{width:auto;accent-color:var(--brand)}
.dev-console .dev-nugpay-note{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}

/* Anahtar kapsamı */
.dev-products{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.dev-product{display:flex;align-items:flex-start;gap:10px;padding:11px;border-radius:13px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700;transition:.15s}
.dev-product:hover{border-color:#d3d6de}
.dev-product:has(input:checked){border-color:var(--brand);background:#FFFBEB}
.dev-product input{width:auto;margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.dev-product>i{color:#8a6d00;font-size:14px;width:22px;text-align:center;margin-top:1px}
.dev-product b{display:block;font-size:13px}
.dev-product small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4;font-weight:600;margin-top:2px}

/* Anahtar yerleştirme rehberi */
.dev-where{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dev-where article{padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--soft);display:grid;gap:8px}
.dev-where h4{margin:0;font-size:14.5px;display:flex;align-items:center;gap:8px}
.dev-where h4 i{color:#8a6d00}
.dev-where p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.dev-where .tag{justify-self:start;font-size:10.5px;font-weight:900;letter-spacing:.08em;
  padding:4px 9px;border-radius:999px;text-transform:uppercase}
.dev-where .tag.safe{background:#E7F7EE;color:#0b6b3a}
.dev-where .tag.risk{background:#FDECEF;color:#a3162f}

@media(max-width:1000px){
  .dev-grid-3,.dev-console .dev-security-grid,.dev-console .developers-endpoints{grid-template-columns:1fr 1fr}
  .dev-console .dev-app-layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .dev-grid-3,.dev-console .dev-security-grid,.dev-console .developers-endpoints,
  .dev-products,.dev-where{grid-template-columns:1fr}
  .dev-hero{padding:26px;border-radius:22px}
  .dev-block{padding:18px;border-radius:20px}
  .dev-picker{margin-left:0;width:100%}
  .dev-picker>button{width:100%;min-width:0}
}

/* Anahtarın çalışacağı ortam */
.dev-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.dev-platform{position:relative;display:grid;gap:3px;padding:12px 10px;border-radius:13px;
  border:1px solid var(--line);background:#fff;cursor:pointer;text-align:center;transition:.15s}
.dev-platform:hover{border-color:#d3d6de}
.dev-platform:has(input:checked),.dev-platform.on{border-color:var(--brand);background:#FFFBEB}
.dev-platform input{position:absolute;opacity:0;pointer-events:none}
.dev-platform>i{font-size:17px;color:#8a6d00}
.dev-platform b{font-size:12.5px}
.dev-platform small{color:var(--muted);font-size:10.5px;line-height:1.35;font-weight:600}
.dev-console textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;
  font:inherit;font-family:var(--mono);font-size:12.5px;background:#fff;color:var(--ink);resize:vertical}
.dev-console textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,210,26,.25)}
@media(max-width:680px){.dev-platforms{grid-template-columns:repeat(2,1fr)}}

/* Kesilmeye karşı koruma.
   Sayfa bir noktada kesilip aşağı kaydırılamıyordu. Izgara çocukları
   varsayılan olarak min-width:auto taşır ve uzun kod/kimlik dizeleri
   kapsayıcıyı genişletip düzeni bozar; ayrıca miras alınan bir overflow
   kısıtı bloğun devamını gizleyebiliyor. Konsolun kendi zinciri burada
   açıkça serbest bırakılır. */
.dev-console,.dev-console .dev-page,.dev-console .dev-block{overflow:visible;min-height:0}
.dev-console .dev-grid-3>*,.dev-console .dev-where>*,.dev-console .dev-products>*,
.dev-console .dev-platforms>*,.dev-console .dev-app-layout>*,
.dev-console .dev-security-grid>*,.dev-console .developers-endpoints>*{min-width:0}
.dev-console .dev-card code,.dev-console .dev-key,.dev-console .dev-app-card code{
  overflow-wrap:anywhere;word-break:break-word}
/* Sticky şerit, sayfanın kaydırma bağlamını yakalamamalı. */
.dev-console .dev-switcher{will-change:auto;contain:none}

/* Kırpılmaya karşı kesin kural.
   Bloklar bir yükseklikte kesilip altı görünmez oluyordu. Kaynağı miras
   alınan bir yükseklik/taşma kısıtı; hangi kuraldan geldiğinden bağımsız
   olarak konsolun kendi kutuları burada serbest bırakılır. Konsol dışına
   etkisi yok, çünkü tüm seçiciler .dev-console altında. */
.dev-console,
.dev-console .dev-page,
.dev-console .dev-block,
.dev-console .dev-grid-3,
.dev-console .dev-where,
.dev-console .dev-app-layout,
.dev-console .dev-app-list{
  height:auto!important;max-height:none!important;overflow:visible!important;
}

/* Marka düğmeleri.
   Bu kurallar sayfada tanımlı değildi; yalnız kopyalanacak kod örneğinin
   içinde duruyordu. Önizleme stilsiz kaldığı için logo ham boyutunda,
   ekranı kaplayacak kadar büyük çıkıyordu. Kurallar burada da tanımlanır ki
   önizleme ile kopyalanan kod birebir aynı sonucu versin. */
.nuglr-brand-button{display:inline-flex;align-items:center;gap:12px;min-height:52px;
  padding:10px 22px 10px 10px;border-radius:16px;text-decoration:none;font-weight:800;
  letter-spacing:-.01em;transition:transform .18s ease,box-shadow .18s ease}
.nuglr-brand-button:hover{transform:translateY(-1px)}
.nuglr-brand-mark{width:32px;height:32px;border-radius:10px;background:#ffd31a;
  display:grid;place-items:center;overflow:hidden;flex:0 0 32px}
.nuglr-brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.nuglr-brand-login{background:linear-gradient(135deg,#111827,#020617);color:#fff;
  box-shadow:0 14px 30px rgba(2,6,23,.24)}
.nuglr-brand-pay{background:#ffd31a;color:#111827;box-shadow:0 14px 30px rgba(255,211,26,.32)}
.dev-button-preview{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Konsoldaki her görsel kutusuna sığar; boyutsuz bir logo bir daha
   sayfayı ele geçiremez. */
.dev-console img{max-width:100%;height:auto}