/* ===================================================================================== Mi API Kılavuzu — stil Renkler Portal tanıtım sayfasının ailesinden (koyu lacivert zemin + "Mi" yeşili). Tema: . Sağdaki konsol her iki temada da koyu kalır. Dış kaynak yok: sistem yazı tipleri, satır içi SVG. ===================================================================================== */ :root, [data-tema="koyu"] { --zemin: #070d1a; --zemin2: #0b1220; --panel: #0f172a; --panel2: #111c33; --panel3: #16233d; --cizgi: rgba(148, 163, 184, .14); --cizgi2: rgba(148, 163, 184, .26); --yazi: #e6edf7; --yazi2: #c5d1e2; --soluk: #8fa3bd; --soluk2: #64748b; --vurgu: #22c55e; --vurgu2: #4ade80; --vurgu-rgb: 34, 197, 94; --mavi: #38bdf8; --mavi-rgb: 56, 189, 248; --mor: #a78bfa; --mor-rgb: 167, 139, 250; --amber: #f59e0b; --amber-rgb: 245, 158, 11; --kirmizi: #f43f5e; --kirmizi-rgb: 244, 63, 94; --camgobegi: #22d3ee; --kod-zemin: #0a1222; --kod-cizgi: rgba(148, 163, 184, .16); --kod-yazi: #dbe4f0; --golge: 0 10px 40px rgba(0, 0, 0, .35); color-scheme: dark; } [data-tema="acik"] { --zemin: #f5f7fb; --zemin2: #ffffff; --panel: #ffffff; --panel2: #f1f5f9; --panel3: #e8eef6; --cizgi: rgba(15, 23, 42, .10); --cizgi2: rgba(15, 23, 42, .18); --yazi: #0f172a; --yazi2: #334155; --soluk: #516179; --soluk2: #8391a7; --vurgu: #16a34a; --vurgu2: #15803d; --vurgu-rgb: 22, 163, 74; --mavi: #0284c7; --mavi-rgb: 2, 132, 199; --mor: #7c3aed; --mor-rgb: 124, 58, 237; --amber: #b45309; --amber-rgb: 217, 119, 6; --kirmizi: #e11d48; --kirmizi-rgb: 225, 29, 72; --camgobegi: #0891b2; --kod-zemin: #0f172a; --kod-cizgi: rgba(148, 163, 184, .18); --kod-yazi: #e2e8f0; --golge: 0 10px 30px rgba(15, 23, 42, .08); color-scheme: light; } /* ── temel ─────────────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--zemin); color: var(--yazi); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--mavi); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, kbd, .mono { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } code { font-size: .86em; background: rgba(var(--mavi-rgb), .10); border: 1px solid rgba(var(--mavi-rgb), .18); color: var(--yazi); padding: 1px 6px; border-radius: 6px; word-break: break-word; } kbd { font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--cizgi2); border-bottom-width: 2px; color: var(--soluk); background: var(--panel2); } button { font: inherit; color: inherit; } ::selection { background: rgba(var(--vurgu-rgb), .30); } [hidden] { display: none !important; } * { scrollbar-width: thin; scrollbar-color: var(--cizgi2) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--cizgi2); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } /* ── yerleşim: menü · içerik · konsol ─────────────────────────────────────────────── */ .duzen { display: grid; grid-template-columns: 288px minmax(0, 1fr) 470px; min-height: 100vh; } .menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--zemin2); border-right: 1px solid var(--cizgi); } .icerik { min-width: 0; } .icerik-ic { max-width: 980px; margin: 0 auto; padding: 44px 56px 96px; } .konsol { position: sticky; top: 0; height: 100vh; } .ust-serit { display: none; } /* ── menü ─────────────────────────────────────────────────────────────────────────── */ .m-bas { padding: 18px 18px 12px; border-bottom: 1px solid var(--cizgi); } .marka { display: flex; align-items: center; gap: 10px; color: var(--yazi); text-decoration: none; } .marka:hover { text-decoration: none; } .marka img { width: 34px; height: 34px; } .marka-ad { font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.1; } .marka-alt { font-size: 11.5px; color: var(--soluk); line-height: 1.2; } .marka-ad, .marka-alt { display: block; } .m-araclar { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .arama { position: relative; flex: 1; } .arama input { width: 100%; padding: 8px 52px 8px 32px; border-radius: 10px; border: 1px solid var(--cizgi2); background: var(--panel); color: var(--yazi); font: inherit; font-size: 13.5px; outline: none; } .arama input:focus { border-color: rgba(var(--vurgu-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--vurgu-rgb), .15); } .arama svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--soluk); } .arama kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } .ikon-dugme { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--cizgi2); background: var(--panel); color: var(--soluk); cursor: pointer; } .ikon-dugme:hover { color: var(--yazi); border-color: rgba(var(--vurgu-rgb), .5); } .ikon-dugme svg { width: 16px; height: 16px; } .m-liste { flex: 1; overflow-y: auto; padding: 10px 10px 40px; } .m-grup { margin-top: 14px; } .m-grup-ad { padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--soluk2); } .m-oge { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 6px 10px; border-radius: 9px; color: var(--yazi2); font-size: 13.5px; text-decoration: none; border: 1px solid transparent; } .m-oge:hover { background: var(--panel2); text-decoration: none; color: var(--yazi); } .m-oge.etkin { background: rgba(var(--vurgu-rgb), .10); border-color: rgba(var(--vurgu-rgb), .28); color: var(--yazi); } .m-oge .m-ad { grid-column: 2; } .m-oge .m-op { grid-column: 2; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--soluk2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-oge.sade { grid-template-columns: 1fr; } .m-oge.sade .m-ad { grid-column: 1; } .m-yok { padding: 16px 10px; color: var(--soluk); font-size: 13px; } /* ── rozetler ─────────────────────────────────────────────────────────────────────── */ .rozet { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 1px 7px; border-radius: 6px; font: 700 10.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; } .r-get { color: var(--mavi); background: rgba(var(--mavi-rgb), .12); border-color: rgba(var(--mavi-rgb), .28); } .r-post { color: var(--vurgu); background: rgba(var(--vurgu-rgb), .12); border-color: rgba(var(--vurgu-rgb), .28); } .r-soap { color: var(--mor); background: rgba(var(--mor-rgb), .12); border-color: rgba(var(--mor-rgb), .30); } .r-yazar { color: var(--amber); background: rgba(var(--amber-rgb), .12); border-color: rgba(var(--amber-rgb), .30); font-family: inherit; font-size: 11px; } .r-sayfa { color: var(--camgobegi); background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .28); font-family: inherit; font-size: 11px; } .m-oge .rozet { min-width: 38px; font-size: 9.5px; padding: 0 5px; } /* ── içerik tipografisi ───────────────────────────────────────────────────────────── */ .sayfa h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; margin: 6px 0 10px; font-weight: 800; } .sayfa h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--cizgi); } .sayfa h3 { font-size: 16px; margin: 26px 0 10px; } .sayfa p { margin: 0 0 14px; color: var(--yazi2); } .sayfa ul, .sayfa ol { margin: 0 0 16px; padding-left: 22px; color: var(--yazi2); } .sayfa li { margin: 5px 0; } .sayfa b, .sayfa strong { color: var(--yazi); } .ust-etiket { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); } .giris { font-size: 17px; color: var(--yazi2); max-width: 760px; } .soluk { color: var(--soluk); } /* ── kahraman (tanıtım) ───────────────────────────────────────────────────────────── */ .kahraman { position: relative; overflow: hidden; padding: 38px 150px 34px 36px; border-radius: 20px; border: 1px solid var(--cizgi); background: radial-gradient(600px 260px at 88% -10%, rgba(var(--vurgu-rgb), .20), transparent 60%), radial-gradient(520px 240px at -10% 110%, rgba(var(--mavi-rgb), .14), transparent 60%), var(--panel); box-shadow: var(--golge); } .kahraman h1 { font-size: 38px; margin: 10px 0 12px; } .kahraman h1 em { font-style: normal; background: linear-gradient(90deg, var(--vurgu), var(--camgobegi)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kahraman .giris { margin-bottom: 22px; } .kahraman-logo { position: absolute; right: 30px; top: 26px; width: 92px; opacity: .95; filter: drop-shadow(0 12px 30px rgba(var(--vurgu-rgb), .35)); } .cipler { display: flex; flex-wrap: wrap; gap: 8px; } .cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--cizgi2); background: var(--panel2); color: var(--yazi2); } .cip i { width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); display: inline-block; } .dugme-sira { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .dugme { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--cizgi2); background: var(--panel2); color: var(--yazi); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; } .dugme:hover { text-decoration: none; border-color: rgba(var(--vurgu-rgb), .55); } .dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #04210f; } .dugme.birincil:hover { filter: brightness(1.08); } .dugme svg { width: 16px; height: 16px; } /* ── kılavuzu indir (tek dosya) ───────────────────────────────────────────────────── */ /* Amber bilinçli: birincil eylem (yeşil "Hızlı başlangıç") ile yarışmadan göze çarpsın. */ .indir-serit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 13px 16px; border: 1px solid rgba(var(--amber-rgb), .45); border-radius: 14px; background: linear-gradient(90deg, rgba(var(--amber-rgb), .16), rgba(var(--amber-rgb), .05) 55%, transparent); } .indir-ikon { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--amber-rgb), .18); color: var(--amber); } .indir-ikon svg { width: 20px; height: 20px; } .indir-metin { flex: 1 1 280px; min-width: 0; line-height: 1.45; } .indir-metin b { display: block; font-size: 14.5px; } .indir-metin span { font-size: 12.5px; color: var(--soluk); } .dugme.indir-dugme { background: var(--amber); border-color: var(--amber); color: #2a1500; font-weight: 800; box-shadow: 0 8px 24px rgba(var(--amber-rgb), .25); } .dugme.indir-dugme:hover { filter: brightness(1.08); border-color: var(--amber); } [data-tema="acik"] .dugme.indir-dugme { color: #fff; } .m-indir { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(var(--amber-rgb), .45); border-radius: 10px; background: rgba(var(--amber-rgb), .10); color: var(--yazi); font-size: 13px; font-weight: 600; cursor: pointer; } .m-indir:hover { background: rgba(var(--amber-rgb), .18); } .m-indir svg { width: 15px; height: 15px; color: var(--amber); } .m-indir i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--soluk); } /* ── kartlar ──────────────────────────────────────────────────────────────────────── */ .kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 8px; } .kart { display: block; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--panel); color: var(--yazi); text-decoration: none; transition: border-color .15s, transform .15s; } a.kart:hover { text-decoration: none; border-color: rgba(var(--vurgu-rgb), .45); transform: translateY(-1px); } .kart-ikon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; background: rgba(var(--vurgu-rgb), .12); color: var(--vurgu); } .kart-ikon svg { width: 18px; height: 18px; } .kart h4 { margin: 0 0 4px; font-size: 14.5px; } .kart p { margin: 0; font-size: 13px; color: var(--soluk); } .kart code { font-size: 11.5px; } /* iki kapı diyagramı */ .kapilar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; margin: 16px 0 6px; } .kapi { border-radius: 14px; border: 1px solid var(--cizgi); background: var(--panel); padding: 16px; } .kapi h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; font-size: 15px; } .kapi p { margin: 0; font-size: 13px; color: var(--soluk); } .kapi .mono { font-size: 12px; color: var(--yazi2); display: block; margin-top: 8px; word-break: break-all; } .cekirdek { grid-column: 1 / -1; text-align: center; padding: 12px; border-radius: 14px; border: 1px dashed rgba(var(--vurgu-rgb), .45); background: rgba(var(--vurgu-rgb), .06); font-size: 13.5px; color: var(--yazi2); } /* ── tablolar ─────────────────────────────────────────────────────────────────────── */ .tablo-kap { overflow-x: auto; margin: 10px 0 20px; border: 1px solid var(--cizgi); border-radius: 12px; } .tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tablo th { text-align: left; white-space: nowrap; padding: 9px 12px; background: var(--panel2); color: var(--soluk); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--cizgi); } .tablo td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; color: var(--yazi2); } .tablo tr:last-child td { border-bottom: 0; } .tablo tbody tr:hover td { background: rgba(var(--mavi-rgb), .035); } .tablo td:first-child code { white-space: nowrap; } .tablo .zorunlu { color: var(--vurgu); font-weight: 800; } .tablo .tip { font-size: 12px; color: var(--mor); white-space: nowrap; } .tablo .yer { min-width: 150px; max-width: 220px; font-size: 11.5px; color: var(--soluk); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; } .tablo .yer div + div { margin-top: 4px; } .tablo .yer b { display: inline-block; min-width: 34px; font: 800 9.5px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .06em; color: var(--soluk2); } .tablo td.aciklama { min-width: 220px; } .tablo .sayi { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 700; white-space: nowrap; } .eylem { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .eylem.bekle { color: var(--mavi); background: rgba(var(--mavi-rgb), .12); } .eylem.basari { color: var(--vurgu); background: rgba(var(--vurgu-rgb), .14); } .eylem.gecersiz { color: var(--kirmizi); background: rgba(var(--kirmizi-rgb), .12); } .eylem.iptal { color: var(--amber); background: rgba(var(--amber-rgb), .14); } /* ── notlar ───────────────────────────────────────────────────────────────────────── */ .not { position: relative; margin: 14px 0; padding: 12px 14px 12px 44px; border-radius: 12px; border: 1px solid; font-size: 14px; color: var(--yazi2); } .not::before { content: "i"; position: absolute; left: 13px; top: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 ui-monospace, Consolas, monospace; color: #04121f; } .not.bilgi { background: rgba(var(--mavi-rgb), .07); border-color: rgba(var(--mavi-rgb), .25); } .not.bilgi::before { background: var(--mavi); } .not.uyari { background: rgba(var(--amber-rgb), .08); border-color: rgba(var(--amber-rgb), .30); } .not.uyari::before { background: var(--amber); content: "!"; } .not.tehlike { background: rgba(var(--kirmizi-rgb), .07); border-color: rgba(var(--kirmizi-rgb), .30); } .not.tehlike::before { background: var(--kirmizi); content: "!"; color: #fff; } .not.ipucu { background: rgba(var(--vurgu-rgb), .07); border-color: rgba(var(--vurgu-rgb), .28); } .not.ipucu::before { background: var(--vurgu); content: "✓"; } .not p:last-child { margin-bottom: 0; } /* ── kod blokları ─────────────────────────────────────────────────────────────────── */ .kod-kap { position: relative; margin: 10px 0 20px; } pre.kod { margin: 0; padding: 16px 18px; background: var(--kod-zemin); color: var(--kod-yazi); border: 1px solid var(--kod-cizgi); border-radius: 12px; overflow: auto; max-height: 560px; font-size: 12.5px; line-height: 1.6; tab-size: 2; } pre.kod code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; word-break: normal; } .kod-kap .kopyala { position: absolute; top: 8px; right: 8px; } .kopyala { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(148, 163, 184, .28); background: rgba(15, 23, 42, .75); color: #cbd5e1; font-size: 11.5px; font-weight: 600; cursor: pointer; } .kopyala:hover { color: #fff; border-color: rgba(var(--vurgu-rgb), .6); } .kopyala.tamam { color: var(--vurgu2); border-color: rgba(var(--vurgu-rgb), .6); } .kopyala svg { width: 12px; height: 12px; } /* sözdizimi renkleri (koyu kod zemini) */ .j-anahtar { color: #7dd3fc; } .j-metin { color: #86efac; } .j-sayi { color: #fbbf24; } .j-bool { color: #c4b5fd; } .j-null { color: #94a3b8; } .x-isaret { color: #64748b; } .x-etiket { color: #7dd3fc; } .x-oz { color: #c4b5fd; } .x-deger { color: #86efac; } .x-metin { color: #e2e8f0; } .x-yorum { color: #64748b; font-style: italic; } .kirpik { color: #fbbf24; font-style: italic; } .h-baslik { color: #7dd3fc; } .h-ilk { color: #fbbf24; font-weight: 700; } /* ── sekmeler ─────────────────────────────────────────────────────────────────────── */ .sekme-kap { margin: 10px 0 22px; } .sekmeler { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; align-items: center; } .sekme { padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--soluk); font-size: 13px; font-weight: 600; cursor: pointer; } .sekme:hover { color: var(--yazi); background: var(--panel2); } .sekme.etkin { color: var(--yazi); background: var(--panel2); border-color: var(--cizgi2); } .sekmeler .ara-bosluk { flex: 1; } .sekme-govde > [data-sekme-icerik] { display: none; } .sekme-govde > [data-sekme-icerik].etkin { display: block; } /* biçim anahtarı (JSON | XML) */ .bicim-sec { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--cizgi2); } .bicim-sec button { padding: 4px 12px; border-radius: 7px; border: 0; background: transparent; color: var(--soluk); font-size: 12.5px; font-weight: 700; cursor: pointer; } .bicim-sec button[aria-pressed="true"] { background: var(--panel); color: var(--yazi); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .bicim-sec button[aria-pressed="true"][data-bicim="json"] { color: var(--vurgu); } .bicim-sec button[aria-pressed="true"][data-bicim="xml"] { color: var(--mor); } /* ── akış adımları ────────────────────────────────────────────────────────────────── */ .akis { margin: 16px 0 22px; padding: 0; list-style: none; counter-reset: adim; } .akis > li { position: relative; margin: 0; padding: 0 0 18px 48px; counter-increment: adim; } .akis > li::before { content: counter(adim); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: rgba(var(--vurgu-rgb), .14); color: var(--vurgu); border: 1px solid rgba(var(--vurgu-rgb), .45); } .akis > li::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--cizgi2); } .akis > li:last-child::after { display: none; } .akis > li > b:first-child { display: block; font-size: 15px; margin: 4px 0 4px; color: var(--yazi); } .akis > li p { margin: 0 0 6px; } /* Adimin ikincil satiri — alternatif yol / ek not. */ .akis > li p.alt { font-size: 13px; color: var(--soluk); } ol.adimlar { padding-left: 20px; } /* ── uç sayfası ───────────────────────────────────────────────────────────────────── */ .u-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .u-op { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .u-op > code { font-size: 14px; padding: 3px 10px; } .u-op .kopyala { background: var(--panel2); color: var(--soluk); border-color: var(--cizgi2); } .u-ozet { font-size: 16.5px; color: var(--yazi2); } .adresler { display: grid; gap: 8px; margin: 18px 0 22px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--panel); } .adres { display: flex; align-items: center; gap: 10px; min-width: 0; } .adres .a-etiket { width: 38px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--soluk2); } .adres code { background: none; border: 0; padding: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .adres .kopyala { margin-left: auto; background: var(--panel2); color: var(--soluk); border-color: var(--cizgi2); } .adresler .dugme { justify-self: start; margin-top: 4px; } .onceki-sonraki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; } .onceki-sonraki a { display: block; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--panel); color: var(--yazi); text-decoration: none; font-weight: 600; font-size: 14px; } .onceki-sonraki a:hover { border-color: rgba(var(--vurgu-rgb), .45); text-decoration: none; } .onceki-sonraki small { display: block; color: var(--soluk); font-weight: 500; font-size: 11.5px; margin-bottom: 2px; } .onceki-sonraki .sonraki { text-align: right; grid-column: 2; } details.acilir { margin: 12px 0 18px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--panel); } details.acilir > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14px; list-style: none; } details.acilir > summary::-webkit-details-marker { display: none; } details.acilir > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--soluk); transition: transform .15s; } details.acilir[open] > summary::before { transform: rotate(90deg); } details.acilir > .acilir-ic { padding: 0 14px 12px; } details.acilir .kod-kap { margin-bottom: 4px; } /* ── canlı deneme konsolu (her iki temada koyu) ───────────────────────────────────── */ .konsol { --k-zemin: #0b1220; --k-panel: #0f1a2e; --k-panel2: #13213a; --k-giris: #0a1322; --k-cizgi: rgba(148, 163, 184, .16); --k-cizgi2: rgba(148, 163, 184, .30); --k-yazi: #e6edf7; --k-soluk: #8fa3bd; display: flex; flex-direction: column; background: var(--k-zemin); color: var(--k-yazi); border-left: 1px solid var(--cizgi); color-scheme: dark; } .k-bas { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--k-cizgi); } .k-baslik { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: -.01em; } .k-baslik svg { width: 16px; height: 16px; color: #facc15; } .k-hedef { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--k-soluk); } .k-hedef select { padding: 3px 8px; border-radius: 7px; border: 1px solid var(--k-cizgi2); background: var(--k-giris); color: var(--k-yazi); font-size: 12px; } .nokta { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .20); } .k-kapat { display: none; } .konsol .ikon-dugme { background: var(--k-panel); border-color: var(--k-cizgi2); color: var(--k-soluk); } .k-kaydir { flex: 1; overflow-y: auto; padding: 14px 16px 36px; } .k-kart { border: 1px solid var(--k-cizgi); background: var(--k-panel); border-radius: 12px; padding: 12px; margin-bottom: 12px; } .k-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--k-soluk); } .k-alan { display: block; margin-bottom: 11px; } .k-alan:last-child { margin-bottom: 0; } .k-etiket { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; font: 700 12px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; color: #cbd5e1; } .k-etiket i { font: 500 11px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; color: var(--k-soluk); } .k-etiket b { color: #4ade80; } .konsol input[type="text"], .konsol input[type="password"], .konsol input[type="number"], .konsol input[type="date"], .konsol select, .konsol textarea { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--k-cizgi2); background: var(--k-giris); color: var(--k-yazi); font: 13px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; outline: none; } .konsol select { font-family: inherit; } .konsol textarea { resize: vertical; min-height: 58px; line-height: 1.5; } .konsol textarea.k-ubl { min-height: 190px; font-size: 11.5px; white-space: pre; } .konsol textarea.k-ham-alan { min-height: 220px; font-size: 11.5px; white-space: pre; } .konsol input:focus, .konsol select:focus, .konsol textarea:focus { border-color: rgba(34, 197, 94, .6); box-shadow: 0 0 0 3px rgba(34, 197, 94, .14); } .k-parola { position: relative; } .k-parola input { padding-right: 38px; } .k-parola button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 26px; border: 0; background: transparent; color: var(--k-soluk); cursor: pointer; } .k-parola button svg { width: 15px; height: 15px; } .k-ipucu { font-size: 11.5px; color: var(--k-soluk); margin-top: 4px; line-height: 1.45; } .k-ipucu code { font-size: 10.5px; background: rgba(148, 163, 184, .10); border-color: rgba(148, 163, 184, .2); color: #cbd5e1; } .k-onay { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var(--k-soluk); cursor: pointer; } .k-sira { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .k-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--k-cizgi2); background: var(--k-panel2); color: var(--k-yazi); font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; } .k-dugme:hover { border-color: rgba(34, 197, 94, .55); text-decoration: none; } .k-dugme svg { width: 14px; height: 14px; } .k-dugme.k-kucuk { padding: 3px 9px; font-size: 11.5px; } .k-gonder { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 10px; background: #22c55e; color: #04210f; font-size: 14px; font-weight: 800; cursor: pointer; } .k-gonder:hover { filter: brightness(1.07); } .k-gonder:disabled { opacity: .65; cursor: progress; } .k-gonder svg { width: 15px; height: 15px; } .k-hesap { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; line-height: 1.45; } .k-hesap.ok { background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .30); color: #bbf7d0; } .k-hesap.hata { background: rgba(244, 63, 94, .10); border: 1px solid rgba(244, 63, 94, .35); color: #fecdd3; } .k-hesap small { display: block; color: var(--k-soluk); } .k-uc-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .k-uc-bas code { background: none; border: 0; padding: 0; font-size: 13px; color: var(--k-yazi); font-weight: 700; } .k-uc-ad { font-size: 12px; color: var(--k-soluk); margin-bottom: 12px; } .k-bos { color: var(--k-soluk); font-size: 13px; line-height: 1.55; } .k-hizli { display: grid; gap: 6px; margin-top: 12px; } .k-hizli a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--k-cizgi); background: var(--k-panel2); color: var(--k-yazi); font-size: 13px; text-decoration: none; } .k-hizli a:hover { border-color: rgba(34, 197, 94, .5); text-decoration: none; } .k-cipler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .k-cip { padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(56, 189, 248, .30); background: rgba(56, 189, 248, .08); color: #7dd3fc; font: 11px/1.5 ui-monospace, Consolas, monospace; cursor: pointer; } .k-cip.gelen { border-color: rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .08); color: #c4b5fd; } .k-cip:hover { filter: brightness(1.25); } details.k-ham { margin-top: 10px; } details.k-ham > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--k-soluk); padding: 4px 0; } .k-ham-uyari { font-size: 11.5px; color: #fbbf24; margin: 6px 0; } .konsol .bicim-sec { background: var(--k-giris); border-color: var(--k-cizgi2); } .konsol .bicim-sec button { color: var(--k-soluk); } .konsol .bicim-sec button[aria-pressed="true"] { background: var(--k-panel2); } .k-bicim-sira { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .k-bicim-sira span { font-size: 12px; color: var(--k-soluk); } .k-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--k-soluk); } .k-kod { padding: 2px 8px; border-radius: 6px; font: 800 12px/1.5 ui-monospace, Consolas, monospace; } .k-kod.i2 { background: rgba(34, 197, 94, .16); color: #4ade80; } .k-kod.i4, .k-kod.i5 { background: rgba(244, 63, 94, .16); color: #fb7185; } .k-kod.i0, .k-kod.i3 { background: rgba(245, 158, 11, .16); color: #fbbf24; } .k-bayrak { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; } .k-bayrak.ok { background: rgba(34, 197, 94, .14); color: #4ade80; } .k-bayrak.hata { background: rgba(244, 63, 94, .14); color: #fb7185; } .k-mesaj { margin: 6px 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--k-panel2); font-size: 12.5px; color: #e2e8f0; line-height: 1.5; } .k-arac { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .k-yanit pre.kod { max-height: 520px; font-size: 11.5px; background: #070e1c; } .k-yanit .sekmeler .sekme { color: var(--k-soluk); } .k-yanit .sekmeler .sekme.etkin, .k-yanit .sekmeler .sekme:hover { background: var(--k-panel2); color: var(--k-yazi); border-color: var(--k-cizgi2); } .cark { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(4, 33, 15, .3); border-top-color: #04210f; animation: don .7s linear infinite; } @keyframes don { to { transform: rotate(360deg); } } /* ── belge önizleme penceresi ─────────────────────────────────────────────────────── */ .onizleme { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 23, .72); backdrop-filter: blur(3px); } .o-kutu { width: min(1120px, 100%); height: min(92vh, 1100px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--cizgi2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .o-bas { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); } .o-bas strong { font-size: 14px; } .o-bas .bosluk { flex: 1; } .o-govde { flex: 1; overflow: auto; background: #fff; } .o-govde.koyu { background: var(--kod-zemin); } .o-govde iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; } .o-govde pre.kod { border: 0; border-radius: 0; max-height: none; min-height: 100%; } /* ── dar ekranlar ─────────────────────────────────────────────────────────────────── */ .konsol-ac { display: none; } .perde { display: none; } @media (max-width: 1360px) { .duzen { grid-template-columns: 272px minmax(0, 1fr); } .konsol { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 120; transform: translateX(100%); transition: transform .22s ease; box-shadow: -20px 0 60px rgba(0, 0, 0, .45); } body.konsol-acik .konsol { transform: none; } .k-kapat { display: inline-grid; } .konsol-ac { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 20px; bottom: 20px; z-index: 100; padding: 11px 16px; border: 0; border-radius: 999px; background: #22c55e; color: #04210f; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 12px 30px rgba(34, 197, 94, .35); } .konsol-ac svg { width: 16px; height: 16px; } body.konsol-acik .konsol-ac { display: none; } body.konsol-acik .perde { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(2, 6, 23, .5); } } @media (max-width: 900px) { .duzen { grid-template-columns: minmax(0, 1fr); } .menu { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 88vw); z-index: 130; transform: translateX(-100%); transition: transform .22s ease; } body.menu-acik .menu { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .45); } body.menu-acik .perde { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(2, 6, 23, .5); } .ust-serit { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 90; padding: 10px 14px; background: color-mix(in srgb, var(--zemin2) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi); } .ust-serit .marka img { width: 28px; height: 28px; } .ust-serit .marka-ad { font-size: 15px; } .icerik-ic { padding: 26px 18px 90px; } .sayfa h1 { font-size: 27px; } .kahraman { padding: 26px 20px; } .kahraman h1 { font-size: 29px; } .kahraman-logo { display: none; } .kapilar { grid-template-columns: 1fr; } .onceki-sonraki { grid-template-columns: 1fr; } .onceki-sonraki .sonraki { grid-column: 1; } .adres { flex-wrap: wrap; } .adres code { white-space: normal; word-break: break-all; } } @media print { .menu, .konsol, .ust-serit, .konsol-ac, .perde { display: none !important; } .duzen { display: block; } }