/* kutayonur.dev — ortak tasarım sistemi (Claude Design tasarımından). Koyu tema varsayılan; açık tema ile (localStorage "theme"). */ :root{ --bg:oklch(0.175 0.014 250); --bg2:oklch(0.215 0.016 250); --bg3:oklch(0.25 0.018 250); --line:oklch(0.31 0.018 250); --ink:oklch(0.945 0.008 250); --ink2:oklch(0.75 0.012 250); --ink3:oklch(0.60 0.014 250); --accent:oklch(0.83 0.062 235); --accent-soft:oklch(0.30 0.035 240); --btn-bg:oklch(0.83 0.062 235); --btn-fg:oklch(0.24 0.035 250); --live:oklch(0.68 0.11 150); --down:oklch(0.62 0.14 25); --warn:oklch(0.78 0.12 80); /* kategori renkleri */ --c-dunya:oklch(0.74 0.10 245); --c-teknoloji:oklch(0.74 0.11 295); --c-bilim:oklch(0.76 0.10 175); --c-ekonomi:oklch(0.80 0.11 85); --c-oyun:oklch(0.72 0.13 350); --c-spor:oklch(0.76 0.13 45); --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif; --wrap:760px; color-scheme:dark; } :root[data-theme="light"]{ --bg:oklch(0.985 0.006 250); --bg2:oklch(0.955 0.012 245); --bg3:oklch(0.925 0.014 245); --line:oklch(0.875 0.018 245); --ink:oklch(0.24 0.018 250); --ink2:oklch(0.44 0.016 250); --ink3:oklch(0.54 0.016 250); --accent:oklch(0.52 0.105 245); --accent-soft:oklch(0.93 0.028 240); --btn-bg:oklch(0.86 0.055 235); --btn-fg:oklch(0.26 0.035 250); --live:oklch(0.52 0.12 150); --down:oklch(0.52 0.16 25); --warn:oklch(0.58 0.12 70); --c-dunya:oklch(0.50 0.13 245); --c-teknoloji:oklch(0.50 0.15 295); --c-bilim:oklch(0.50 0.10 175); --c-ekonomi:oklch(0.55 0.12 75); --c-oyun:oklch(0.52 0.17 350); --c-spor:oklch(0.56 0.15 45); color-scheme:light; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:72px} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip} img{max-width:100%} a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent)} a:hover{text-decoration-color:var(--accent)} ::selection{background:var(--ink);color:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer} code{font-family:var(--mono);font-size:.9em} [hidden]{display:none!important} .mono{font-family:var(--mono)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--btn-bg);color:var(--btn-fg);padding:8px 14px;border-radius:4px;text-decoration:none;font-size:14px} .skip:focus{top:8px} .wrap{max-width:var(--wrap);width:100%;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))} .site-header .wrap{max-width:var(--wrap-hdr,760px)} main.wrap{flex:1;animation:pageEnter .24s cubic-bezier(0.16,1,0.3,1) both} /* ── başlık ─────────────────────────── */ .site-header{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);view-transition-name:site-header} .hdr{min-height:56px;display:flex;align-items:center;gap:20px} .brand{font-family:var(--mono);font-size:13.5px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;flex:none} .nav{display:flex;align-items:center;gap:18px} .nav a{font-size:13.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;transition:color .18s ease} .nav a:hover,.nav a[aria-current="page"]{color:var(--ink)} .hdr-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto} .tbtn{background:none;border:1px solid var(--line);border-radius:4px;color:var(--ink2);font-family:var(--mono);font-size:11.5px;padding:5px 8px;min-height:30px;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;transition:border-color .15s ease,color .15s ease} .tbtn:hover{color:var(--ink);border-color:var(--ink3)} @media (max-width:700px){ .hdr{flex-wrap:wrap;gap:0 12px;padding-top:6px;justify-content:space-between} .brand{min-height:44px;display:inline-flex;align-items:center} .nav{order:3;width:100%;gap:clamp(10px,3.2vw,18px);overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;margin-top:-2px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .nav::-webkit-scrollbar{display:none} .nav a{padding:6px 0} .hdr-actions{margin-left:0} } /* ── bölüm ──────────────────────────── */ .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500} .sec{padding:0 0 88px;display:flex;flex-direction:column;gap:20px;scroll-margin-top:72px} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .sec-head a{font-family:var(--mono);font-size:12px;color:var(--ink3)} .lead{font-size:19px;line-height:1.6;color:var(--ink2);max-width:52ch} .prose-p{font-size:17px;line-height:1.7;color:var(--ink2)} .h1{font-size:clamp(32px,6.5vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.06} .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 28px;border-top:1px solid var(--line);padding-top:22px} .kv > div{display:flex;flex-direction:column;gap:5px;min-width:0} .kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)} .kv dd{font-size:14.5px;color:var(--ink2);overflow-wrap:anywhere} .rows{display:flex;flex-direction:column} .rows > *{border-top:1px solid var(--line)} .links-row{display:flex;gap:20px;flex-wrap:wrap} /* ── düğmeler / form ────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:4px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid var(--line);background:none;color:var(--ink);line-height:1.2} .btn:hover{border-color:var(--ink3)} .btn-primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)} .btn-primary:hover{filter:brightness(1.06);border-color:var(--btn-bg)} .btn-danger{color:var(--down)} .btn-sm{min-height:34px;padding:0 12px;font-size:13.5px} .btn:disabled{opacity:.55;cursor:default;filter:none} .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink2);font-family:var(--mono);font-size:12px;white-space:nowrap;text-decoration:none;line-height:1.2} .chip:hover{color:var(--ink);border-color:var(--ink3)} .chip.is-on,.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)} .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field > span,.label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)} .input,.textarea,.select{width:100%;min-height:44px;padding:0 12px;background:var(--bg2);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-size:16px} .textarea{padding:12px;line-height:1.6;resize:vertical;min-height:120px} .input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent)} .msg{font-size:13.5px;min-height:18px;color:var(--ink3)} .msg.err{color:var(--down)}.msg.ok{color:var(--live)} .dot{width:6px;height:6px;border-radius:50%;background:var(--ink3);flex:none;display:inline-block} .card{border:1px solid var(--line);border-radius:5px;background:var(--bg2)} .spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;flex:none} @keyframes spin{to{transform:rotate(360deg)}} /* kategori noktası */ .cat{--c:var(--ink3)} .cat-dunya{--c:var(--c-dunya)}.cat-teknoloji{--c:var(--c-teknoloji)}.cat-bilim{--c:var(--c-bilim)} .cat-ekonomi{--c:var(--c-ekonomi)}.cat-oyun{--c:var(--c-oyun)}.cat-spor{--c:var(--c-spor)} .cat-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;display:inline-block} .cat-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c);border:1px solid color-mix(in oklab,var(--c) 45%,var(--line));border-radius:999px;padding:2px 8px;text-decoration:none;white-space:nowrap;line-height:1.4} /* ── alt bilgi ──────────────────────── */ .site-footer{border-top:1px solid var(--line);background:var(--bg)} .ftr{padding-top:26px;padding-bottom:max(34px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px} .ftr nav{display:flex;flex-wrap:wrap;gap:8px 20px} .ftr nav a,.ftr .linkbtn{font-size:13px;color:var(--ink2)} .ftr p{font-size:12px;line-height:1.6;color:var(--ink3);max-width:62ch} .ftr-bottom{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between} .ftr-bottom span{font-family:var(--mono);font-size:11.5px;color:var(--ink3)} .linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} /* ── sayfa geçişleri (view transitions + css animations) ── */ @view-transition{navigation:auto} @keyframes pageEnter{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } ::view-transition-old(root){ animation:140ms cubic-bezier(0.4,0,1,1) both vtFadeOut; } ::view-transition-new(root){ animation:220ms cubic-bezier(0,0,0.2,1) both vtFadeIn; } @keyframes vtFadeOut{ from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-4px)} } @keyframes vtFadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .page-leave{ opacity:0!important; transform:translateY(-6px)!important; transition:opacity .14s ease,transform .14s ease!important; } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}