:root {
    --ink:#202c2c;
    --muted:#707b7a;
    --accent-color:#267565;
    --accent-hover:#1c5c4f;
    --line:#e2e7e3;
    --paper:#f8f9f6;
    --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
    color-scheme:light;
    font-family:var(--font-sans);
    
    color:var(--ink);
    background:var(--paper);
}
* {
    box-sizing:border-box;
}
html {
    scrollbar-gutter:stable;
    scroll-behavior:smooth;
}
body {
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a {
    color:var(--accent-color);
    text-underline-offset:3px;
}
a:hover {
    color:var(--accent-hover);
}
button,input {
    font:inherit;
}
button,.button,[role=button] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:10px 20px;
    border:1px solid var(--accent-color);
    border-radius:8px;
    background:var(--accent-color);
    color:#fff;
    font-weight:600;
    
    line-height:1.4;
    text-decoration:none;
    cursor:pointer;
    transition:background .18s,box-shadow .18s;
}
button:hover,.button:hover,[role=button]:hover {
    background:var(--accent-hover);
    color:#fff;
}
button.outline,.outline[role=button],.outline.button {
    background:transparent;
    color:var(--ink);
    border-color:#d4ddd7;
}
button.outline:hover,.outline[role=button]:hover {
    background:#eef2ed;
}
a:focus-visible,button:focus-visible,input:focus-visible {
    outline:3px solid #69ac98;
    outline-offset:4px;
}
p {
    margin:0 0 20px;
}
h1,h2,h3,h4 {
    margin:0 0 16px;
    line-height:1.25;
    letter-spacing:-.03em;
    font-weight:650;
}
img {
    max-width:100%;
    height:auto;
}
.container {
    width:min(1120px,calc(100% - 64px));
    margin-inline:auto;
}
.site-header {
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.45);
}
.site-header nav {
    height:90px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.brand-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    
    font-weight:750;
    letter-spacing:-1.1px;
    color:var(--ink);
    text-decoration:none;
    line-height:1;
}
.brand-mark {
    color:var(--accent-color);
    flex-shrink:0;
}
.brand-dot {
    color:var(--accent-color);
}
.header-links {
    display:flex;
    align-items:center;
    gap:32px;
    
}
.header-links>a:not(.button) {
    color:#65716c;
    text-decoration:none;
}
.header-links>a:hover {
    color:var(--accent-color);
}
.header-links>a span {
    margin-left:7px;
}
.header-badge {
    display:flex;
    align-items:center;
    gap:8px;
    color:#57675e;
    
}
.status-dot {
    height:6px;
    width:6px;
    border-radius:50%;
    background:#599777;
}
.small-button {
    min-height:36px;
    padding:8px 14px;
    
}
.home-main {
    flex:1;
}
.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    padding:76px 0 58px;
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    
    letter-spacing:1.8px;
    font-weight:650;
    color:#5e7465;
    margin-bottom:27px;
}
.eyebrow-line {
    width:25px;
    height:1px;
    background:#6d8e74;
}
.hero h1 {
    
    line-height:1.1;
    letter-spacing:-1.6px;
    font-weight:650;
    margin-bottom:27px;
}
.hero h1>span {
    color:var(--accent-color);
}
.hero-description {
    
    color:#6b7771;
    line-height:1.85;
    margin-bottom:26px;
}
.hero-note {
    display:flex;
    align-items:center;
    gap:9px;
    
    color:#6a776e;
}
.hero-note svg {
    color:var(--accent-color);
    flex-shrink:0;
}
.text-link {
    display:inline-flex;
    gap:16px;
    margin-top:31px;
    
    text-decoration:none;
    font-weight:600;
}
.upload-panel {
    padding:25px;
    background:#fff;
    border:1px solid #dfe6df;
    border-radius:16px;
    box-shadow:0 14px 36px -20px #30452b30;
    min-width:0;
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    
    font-weight:650;
    letter-spacing:1.3px;
    color:#506058;
}
.panel-step {
    color:#95a099;
    
    letter-spacing:1px;
}
.upload-zone {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:310px;
    padding:28px 20px 23px;
    background:#f8faf7;
    border:1px dashed #c6d7c9;
    border-radius:10px;
    text-align:center;
    transition:background .2s,border-color .2s;
}
.upload-zone:hover,.upload-zone.dragover {
    background:#edf5ee;
    border-color:var(--accent-color);
}
.upload-zone:focus-within {
    outline:3px solid #69ac98;
    outline-offset:4px;
}
.upload-zone h2 {
    
    letter-spacing:-.5px;
    margin:17px 0 5px;
}
.upload-zone p {
    
    color:var(--muted);
    margin-bottom:18px;
}
.upload-zone input[type=file] {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}
.choose-file {
    min-height:42px;
    padding:10px 24px;
    
    box-shadow:0 3px 5px #1b554812;
}
.format-hint {
    margin-top:16px;
    
    letter-spacing:.2px;
    color:#849087;
}
.format-hint>span {
    margin:0 6px;
}
.upload-illustration {
    position:relative;
    width:112px;
    height:83px;
    margin-top:2px;
}
.picture-card {
    position:absolute;
    width:73px;
    height:70px;
    border:1px solid #c6d4c6;
    border-radius:9px;
    left:20px;
    top:5px;
    box-shadow:0 5px 10px #344b3410;
}
.picture-back {
    background:#e6eddf;
    transform:rotate(-13deg) translate(-8px,-3px);
}
.picture-front {
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    transform:rotate(7deg);
    color:#769583;
}
.illustration-plus {
    position:absolute;
    right:5px;
    bottom:0;
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border:3px solid #f8faf7;
    border-radius:50%;
    background:var(--accent-color);
    color:white;
    
    font-weight:400;
    line-height:1;
}
.paste-hint {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    
    color:#738078;
    padding:17px 0;
    border-bottom:1px solid #edf0ec;
    flex-wrap:wrap;
}
.paste-hint>span:first-child {
    margin-right:3px;
}
kbd {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    padding:1px 5px;
    border:1px solid #e0e5de;
    border-bottom-width:2px;
    border-radius:4px;
    background:#f8f9f6;
    color:#5d6c60;
    font-family: var(--font-sans);
}
.mac-hint {
    
    color:#93a096;
}
.upload-notice {
    
    line-height:1.7;
    color:#8a958b;
    margin:14px 5px 0;
    text-align:center;
}
.upload-notice a {
    color:#667e6b;
}
.steps {
    border-top:1px solid var(--line);
    padding:29px 0 26px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:38px;
}
.steps article {
    display:flex;
    gap:18px;
}
.step-number {
    color:#9bab9c;
    font-family: var(--font-mono);
    padding-top:3px;
}
.steps h3 {
    
    letter-spacing:-.2px;
    margin-bottom:8px;
}
.steps p {
    color:#7d897f;
    
    line-height:1.8;
    margin:0;
}
.public-note {
    
    color:#8b968e;
    text-align:center;
    margin:8px 0 35px;
}
.site-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding:24px 0;
    margin-top:auto;
    
    color:#89928c;
}
.site-footer p {
    margin:0;
}
.footer-divider {
    margin:0 12px;
    color:#bac4ba;
}
.site-footer nav {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
}
.site-footer nav a {
    color:#7a857d;
    text-decoration:none;
}
.site-footer nav a:hover {
    color:var(--accent-color);
}
.loading-container,.result-container {
    display:none;
}
.loading-container {
    padding:60px 15px;
    min-height:350px;
}
.loading-container h2 {
    
    margin-top:24px;
}
.loading-container p {
    
    color:var(--muted);
}
.loading-spinner {
    width:42px;
    height:42px;
    border:3px solid #e3ece6;
    border-top-color:var(--accent-color);
    border-radius:50%;
    margin:auto;
    animation:spin .8s linear infinite;
}
@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}
progress {
    width:100%;
    height:7px;
    border:0;
    border-radius:10px;
    background:#edf2ed;
    accent-color:var(--accent-color);
    margin:12px 0;
}
progress::-webkit-progress-bar {
    background:#edf2ed;
    border-radius:10px;
}
progress::-webkit-progress-value {
    background:var(--accent-color);
    border-radius:10px;
}
#progressStatus {
    font-family: var(--font-mono);
    color:var(--accent-color);
}
.result-heading {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}
.result-heading h2 {
    
    margin-bottom:5px;
}
.result-heading p {
    
    color:var(--muted);
    margin:0;
}
.success-check {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:50%;
    color:var(--accent-color);
    background:#e9f3ec;
    
}
.result-preview {
    display:block;
    width:100%;
    height:140px;
    object-fit:contain;
    background:#f5f7f3;
    border:1px solid var(--line);
    border-radius:8px;
    margin:0 auto 22px;
}
.input-group-vertical {
    margin-bottom:17px;
    min-width:0;
}
.input-group-vertical label {
    display:block;
    
    font-weight:600;
    margin-bottom:7px;
}
.input-group-vertical fieldset {
    display:flex;
    gap:0;
    border:0;
    margin:0;
    padding:0;
    min-width:0;
}
.input-group-vertical input {
    min-width:0;
    width:100%;
    border:1px solid #dfe5df;
    border-radius:7px 0 0 7px;
    background:#fcfdfb;
    padding:10px 12px;
    font-family: var(--font-mono);
    color:#66756a;
}
.copy-btn {
    border-radius:0 7px 7px 0;
    min-height:41px;
    padding:8px 13px;
    
    flex-shrink:0;
}
.secondary {
    background:#edf2eb;
    border-color:#dfe5df;
    color:#56715e;
}
.secondary:hover {
    background:#dfeadd;
    color:#34533e;
}
.success {
    background:#267565;
    color:#fff;
}
.result-expiry {
    
    color:var(--muted);
    text-align:center;
}
.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translate(-50%,20px);
    opacity:0;
    pointer-events:none;
    background:var(--ink);
    color:white;
    border-radius:9px;
    padding:12px 22px;
    
    box-shadow:0 8px 24px #20372a20;
    transition:opacity .2s,transform .2s;
    z-index:10;
}
.toast.show {
    opacity:1;
    transform:translate(-50%,0);
}
.error-box {
    padding:12px 14px;
    margin-bottom:15px;
    border:1px solid #efc5bb;
    border-radius:8px;
    background:#fff4f1;
    color:#9f4533;
    
}
.text-center {
    text-align:center;
}
.w-100 {
    width:100%;
}
.glass-card {
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:30px;
    margin-bottom:24px;
}
.legal-page,.developer-guide {
    padding-top:48px;
    padding-bottom:48px;
}
.legal-page .glass-card,.developer-guide .glass-card {
    padding:40px;
}
.legal-page h1,.developer-guide h1 {
    
    margin-bottom:20px;
}
.legal-page h2,.developer-guide h2 {
    
    margin-top:32px;
    margin-bottom:14px;
}
.legal-page p,.developer-guide p,.developer-guide li {
    
    line-height:1.85;
    color:#5b6961;
}
.legal-page p small {
    
    color:#8c968f;
}
.legal-page strong,.developer-guide strong {
    color:#36473b;
    font-weight:600;
}
.developer-guide ul,.developer-guide ol {
    padding-left:22px;
}
.developer-guide pre {
    padding:20px;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:8px;
    background:#f5f7f3;
    
}
.developer-guide pre code {
    white-space:pre;
}
.developer-guide code,.legal-page code {
    font-family:var(--font-mono);
    
    background:#eef2eb;
    padding:2px 5px;
    border-radius:3px;
}
.developer-guide pre code {
    padding:0;
    background:none;
}
.table-scroll {
    overflow-x:auto;
}
table {
    width:100%;
    border-collapse:collapse;
    
    text-align:left;
}
th,td {
    padding:12px;
    border-bottom:1px solid var(--line);
}
th {
    background:#f4f7f1;
    color:#526656;
}
hr {
    border:0;
    border-top:1px solid var(--line);
    margin:22px 0;
}
.view-layout {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(290px,1fr);
    gap:24px;
    margin:45px 0;
}
.image-card {
    padding:0;
    overflow:hidden;
}
.image-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 20px;
    border-bottom:1px solid var(--line);
    background:white;
}
.file-name {
    
    color:var(--muted);
}
.raw-btn {
    color:var(--muted);
}
.image-wrapper {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:350px;
    padding:25px;
    background-color:#eef1ed;
    background-image:linear-gradient(45deg,#e7ebe6 25%,transparent 25%),linear-gradient(-45deg,#e7ebe6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7ebe6 75%),linear-gradient(-45deg,transparent 75%,#e7ebe6 75%);
    background-size:20px 20px;
    background-position:0 0,0 10px,10px -10px,-10px 0;
}
.shared-image {
    display:block;
    max-height:65vh;
    object-fit:contain;
    border-radius:3px;
}
.info-card {
    padding:24px;
}
.timer-box {
    text-align:center;
    padding:5px 0 12px;
}
.timer-box small {
    display:block;
    color:var(--muted);
    
    margin-bottom:8px;
}
.countdown-timer {
    font-family: var(--font-mono);
    letter-spacing:-1px;
    color:var(--accent-color);
}
.error-page main {
    margin:auto;
    padding:50px 0;
}
.error-page p {
    color:var(--muted);
    
}
.error-page .outline {
    display:inline-block;
    margin-top:10px;
}
.error-page .site-footer {
    margin-top:0;
}
@media(min-width:1500px) {
    .hero {
        padding-top:100px;
        padding-bottom:85px;
    }
    .home-main {
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
}
@media(max-width:900px) {
    .hero {
        gap:35px;
        padding:50px 0;
    }
    .hero h1 {
        
        letter-spacing:-1.6px;
    }
    .desktop-break {
        display:none;
    }
    .upload-panel {
        padding:20px;
    }
    .steps {
        gap:20px;
    }
    .steps article {
        gap:10px;
    }
    .site-footer nav {
        gap:14px;
    }
    .view-layout {
        grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
    }
}
@media(max-width:680px) {
    .container {
        width:calc(100% - 36px);
    }
    .site-header nav {
        height:72px;
    }
    .brand-mark {
        width:29px;
        height:29px;
    }
    .header-links {
        gap:12px;
    }
    .header-badge {
        display:none;
    }
    .header-links:has(.small-button)>a:first-child {
        display:none;
    }
    .hero {
        grid-template-columns:1fr;
        gap:30px;
        padding:38px 0 32px;
    }
    .hero-copy {
        text-align:center;
    }
    .eyebrow {
        justify-content:center;
        
        margin-bottom:19px;
    }
    .hero h1 {
        
        letter-spacing:-1.6px;
        margin-bottom:20px;
    }
    .hero-description {
        
        margin-bottom:18px;
    }
    .hero-note {
        justify-content:center;
        
    }
    .text-link {
        display:none;
    }
    .upload-panel {
        padding:20px;
    }
    .upload-zone {
        min-height:285px;
    }
    .steps {
        grid-template-columns:1fr;
        gap:22px;
        padding:28px 0 20px;
    }
    .steps article {
        gap:18px;
    }
    .steps p br {
        display:none;
    }
    .step-number {
        width:26px;
    }
    .public-note {
        text-align:left;
        line-height:1.8;
        margin-bottom:28px;
    }
    .site-footer {
        flex-direction:column;
        align-items:flex-start;
        gap:13px;
        padding:20px 0;
        
    }
    .site-footer nav {
        gap:17px;
    }
    .legal-page,.developer-guide {
        padding-top:28px;
        padding-bottom:28px;
    }
    .legal-page .glass-card,.developer-guide .glass-card {
        padding:23px;
    }
    .view-layout {
        grid-template-columns:1fr;
        gap:0;
        margin:28px 0;
    }
    .image-wrapper {
        min-height:240px;
        padding:15px;
    }
    .error-page main {
        width:calc(100% - 36px);
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
    }
}

/* İçerik bildirimi */
.report-page { padding-top: 54px; padding-bottom: 44px; }
.report-intro { margin-bottom: 34px; }
.report-intro .eyebrow { margin-bottom: 18px; }
.report-intro h1 {  margin-bottom: 16px; }
.report-intro > p:last-child {  color: var(--muted); line-height: 1.8; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.report-checklist { list-style: none; padding: 0; margin: 25px 0; counter-reset: report-step; }
.report-checklist li { display: flex; gap: 15px; counter-increment: report-step; margin-bottom: 24px; }
.report-checklist li::before { content: counter(report-step, decimal-leading-zero); color: #8a9c8d; font-family: var(--font-mono); padding-top: 4px; }
.report-checklist h3 {  margin-bottom: 6px; letter-spacing: -.2px; }
.report-checklist p, .report-special p {  color: #6b7771; line-height: 1.85; margin-bottom: 0; }
.report-note { padding: 15px; border-radius: 8px; background: #f4f7f1; color: #738078;  line-height: 1.8; margin: 0; }
.report-contact-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: #edf4ed; color: var(--accent-color); margin-bottom: 22px; }
.report-contact .eyebrow {  margin-bottom: 10px; }
.report-contact > p:not(.eyebrow) {  color: var(--muted); }
.report-email { display: block;  overflow-wrap: anywhere; margin-bottom: 23px; }
.report-contact .report-contact-hint {  margin-top: 12px; margin-bottom: 0; line-height: 1.8; }
.report-contact .report-contact-footnote {  margin-bottom: 0; }
.report-special { padding: 30px; }
.report-special-tag { display: block;  letter-spacing: 1.1px; color: var(--accent-color); font-weight: 600; margin-bottom: 10px; }
.report-special p + p { margin-top: 15px; }
.report-special strong { color: #526458; font-weight: 600; }
.report-operator { color: #8c968f;  margin: 0; }
.report-image-link { display: block; text-align: center; margin-top: 18px;  color: var(--muted); text-decoration: none; }
.report-image-link span { margin-left: 5px; }
@media (max-width: 680px) {
    .report-page { padding-top: 32px; padding-bottom: 28px; }
    .report-intro .eyebrow { justify-content: flex-start; }
    .report-intro p br { display: none; }
    .report-layout { grid-template-columns: 1fr; gap: 0; }
    .report-page .glass-card { padding: 23px; }
}


/* Ortak tipografi: masaüstü ve mobilde yalnızca dört boyut. */
:root {
    --font-size-small: 12px;
    --font-size-medium: 16px;
    --font-size-big: 24px;
    --font-size-large: 48px;
}
:where(h1, h2, h3, h4, h5, h6, small, code, kbd, pre) {
    font-size: inherit;
}
.small,
:where(small, .header-links, .header-badge, .small-button, .eyebrow,
    .hero-note, .text-link, .panel-heading, .panel-step, .format-hint,
    .paste-hint, kbd, .mac-hint, .upload-notice, .step-number,
    .steps p, .public-note, .site-footer, #progressStatus,
    .result-heading p, .result-expiry, .input-group-vertical label,
    .input-group-vertical input, .copy-btn, .toast, .error-box,
    .developer-guide pre, .developer-guide code, .legal-page code,
    table, .file-name, .timer-box small, .report-checklist li::before,
    .report-note, .report-email, .report-contact-hint,
    .report-contact-footnote, .report-special-tag, .report-operator,
    .report-image-link) {
    font-size: var(--font-size-small);
}
:root, .medium,
:where(h3, h4, h5, h6, button, .button, [role=button], .hero-description,
    .upload-zone p, .loading-container p, .legal-page p, .developer-guide p,
    .developer-guide li, .error-page p, .report-intro > p:last-child,
    .report-checklist h3, .report-checklist p, .report-special p,
    .report-contact > p:not(.eyebrow)) {
    font-size: var(--font-size-medium);
}
.big,
:where(h2, .brand-link, .upload-zone h2, .result-heading h2,
    .loading-container h2, .success-check, .illustration-plus,
    .legal-page h2, .developer-guide h2, .error-page h2,
    .report-layout h2, .report-special h2, .countdown-timer) {
    font-size: var(--font-size-big);
}
.large,
:where(h1, .hero h1, .legal-page h1, .developer-guide h1, .report-intro h1) {
    font-size: var(--font-size-large);
}


/* Ana sayfadaki açıklamalar normal metin boyutunu kullanır. */
.how-it-works { border-top: 1px solid var(--line); padding-top: 28px; }
.how-it-works > h2 { margin-bottom: 0; }
.how-it-works .steps { border-top: 0; padding-top: 24px; }
.home-page .upload-notice, .home-page .public-note { color: #66756b; }
.home-page .paste-hint { gap: 7px; line-height: 1.8; }
.home-page .format-hint { display: block; line-height: 1.7; }
@media (max-width: 680px) {
    .home-page .header-links { gap: 0; }
    .home-page .header-links > a:not(.button) { letter-spacing: -.2px; }
}


/* Her adım için aynı ölçekte, şeffaf arka planlı illüstrasyon. */
.how-it-works .steps article { align-items: flex-start; gap: 16px; }
.step-illustration { display: block; flex: 0 0 88px; width: 88px; height: 88px; object-fit: contain; }
.how-it-works .steps article > div { min-width: 0; }
.how-it-works .steps p br { display: none; }
@media (min-width: 681px) {
    .how-it-works .steps article { flex-direction: column; gap: 14px; }
}
@media (max-width: 680px) {
    .step-illustration { flex-basis: 72px; width: 72px; height: 72px; }
    .how-it-works .steps { gap: 28px; }
}