/* =====================================================================
   Defter / el çizimi katmanı. Diğer stillerin üstüne yüklenir.
   Kareli kâğıt · kurşun kalem kenarlar · bant · fosforlu kalem · el yazısı
   ===================================================================== */
:root {
  --font-hand: "Caveat", "Segoe Print", cursive;
  --pencil: rgba(52, 44, 78, .55);
  --pencil-soft: rgba(52, 44, 78, .22);
  --grid-line: rgba(120, 140, 210, .11);
  --paper: #fffdf8;
  --marker: #fde68a;
  --marker-pink: #fbcfe8;
  --marker-mint: #bbf7d0;
  --sketch-r: 18px 22px 16px 24px / 22px 16px 24px 18px;
  --sketch-r-btn: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-r-s: 12px 15px 11px 16px / 15px 11px 16px 12px;
}
:root[data-theme="dark"] { --pencil: rgba(230, 224, 255, .5); --pencil-soft: rgba(230, 224, 255, .18); --grid-line: rgba(190, 200, 255, .06); --paper: #26243c; --marker: #7c6a1f; --marker-pink: #6b3550; --marker-mint: #275a45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pencil: rgba(230, 224, 255, .5); --pencil-soft: rgba(230, 224, 255, .18); --grid-line: rgba(190, 200, 255, .06); --paper: #26243c; --marker: #7c6a1f; --marker-pink: #6b3550; --marker-mint: #275a45; }
}

/* ---------- Kareli kâğıt ---------- */
body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
}
.hand { font-family: var(--font-hand); font-weight: 600; letter-spacing: 0; }

/* ---------- Kurşun kalem kenarlı kartlar ---------- */
.card { background: var(--paper); border-radius: var(--sketch-r); box-shadow: 0 1px 0 var(--pencil-soft), 0 10px 24px -14px rgba(60, 40, 100, .25); }
.card::before { content: ""; position: absolute; inset: 0; border: 1.6px solid var(--pencil); border-radius: inherit; filter: url(#rough); pointer-events: none; opacity: .85; }
.card.flat::before, .card.no-sketch::before { display: none; }
.card.flat { background: color-mix(in srgb, var(--paper) 60%, var(--surface-2)); }
.card.lift:hover { transform: translateY(-3px) rotate(0deg) !important; box-shadow: 0 1px 0 var(--pencil-soft), 0 18px 32px -14px rgba(60, 40, 100, .32); }

/* hafif eğik kâğıtlar (ızgaralarda) */
:is(.steps3, .bento, .project-grid, .cat-grid, .plans) > :nth-child(3n+1) { rotate: -.7deg; }
:is(.steps3, .bento, .project-grid, .cat-grid, .plans) > :nth-child(3n+2) { rotate: .5deg; }
:is(.steps3, .bento, .project-grid, .cat-grid, .plans) > :nth-child(3n) { rotate: -.3deg; }
:is(.steps3, .bento, .project-grid, .cat-grid, .plans) > * { transition: rotate .45s var(--ease-spring), transform .4s var(--ease), box-shadow .4s; }
:is(.steps3, .bento, .project-grid, .cat-grid, .plans) > *:hover { rotate: 0deg; }

/* ---------- Bant (washi tape) ---------- */
.taped::after { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tape, var(--peach)) 85%, transparent) 0 7px, color-mix(in srgb, var(--tape, var(--peach)) 60%, transparent) 7px 14px);
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
  -webkit-mask-composite: source-over; opacity: .9; animation: tape-in .6s .3s var(--ease-spring) both; }
.taped.tape-left::after { left: 22%; rotate: -8deg; } .taped.tape-right::after { left: 78%; rotate: 6deg; }
.tape-lavender { --tape: var(--lavender); } .tape-mint { --tape: var(--mint); } .tape-rose { --tape: var(--rose); } .tape-sky { --tape: var(--sky); } .tape-butter { --tape: var(--butter); }
@keyframes tape-in { from { opacity: 0; scale: 1.25; } }

/* ---------- Butonlar: el çizimi ---------- */
.btn { border-radius: var(--sketch-r-btn); border: 1.6px solid var(--pencil); background: var(--paper); }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--lavender); color: #fff; border-color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
:root[data-theme="dark"] .btn.primary { color: #1c1a2b; border-color: #ece8f6; box-shadow: 2px 3px 0 #ece8f6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #1c1a2b; border-color: #ece8f6; box-shadow: 2px 3px 0 #ece8f6; } }
.btn.primary:hover { background: color-mix(in srgb, var(--lavender) 90%, #000); transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); color: #fff; }
.btn.primary:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.soft { background: var(--lavender-bg); border-color: var(--pencil-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { border-color: var(--pencil-soft); }
.btn.danger { background: var(--rose-bg); border-color: var(--pencil-soft); }

/* ---------- Form alanları ---------- */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea {
  background-color: var(--paper); border: 1.6px solid var(--pencil-soft); border-radius: var(--sketch-r-s); }
input:focus, select:focus, textarea:focus { border-color: var(--pencil); box-shadow: 3px 3px 0 var(--lavender-bg); }
input[type=checkbox] { background: var(--paper); border: 1.6px solid var(--pencil); border-radius: 5px 7px 4px 6px; }
input[type=checkbox]:checked { background: var(--lavender-bg); }
input[type=checkbox]::after { border-color: var(--lavender-ink); width: 12px; height: 7px; }

/* ---------- Rozetler: kalemle çevrelenmiş ---------- */
.badge { border-radius: var(--sketch-r-btn); border: 1.2px solid color-mix(in srgb, currentColor 35%, transparent); }

/* ---------- Fosforlu kalem ---------- */
.marker { position: relative; z-index: 0; white-space: nowrap; }
.marker::before { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; top: .52em; bottom: .02em; border-radius: .2em .5em .3em .6em;
  background: var(--m, var(--marker)); opacity: .85; transform-origin: left center; rotate: -1deg; animation: marker-swipe .9s var(--d, .4s) var(--ease) both; }
.marker.pink { --m: var(--marker-pink); } .marker.mint { --m: var(--marker-mint); }
@keyframes marker-swipe { from { transform: scaleX(0); } }

/* ---------- El çizimi alt çizgi ---------- */
.scribble { position: relative; display: inline-block; }
.scribble::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.18em; height: .32em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-5 60-6 95-3s70 3 101-2' fill='none' stroke='%238b7cf6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path: inset(0 100% 0 0); animation: draw-in 1s .5s var(--ease) forwards; }
.scribble.peach::after { filter: hue-rotate(140deg) saturate(1.4); }
@keyframes draw-in { to { clip-path: inset(0 0 0 0); } }
.page-head h1 { position: relative; display: inline-block; }
.page-head h1::after { content: ""; position: absolute; left: 0; width: min(100%, 220px); bottom: -.2em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c40-4 70-5 100-2s60 2 96-3' fill='none' stroke='%23f2a27a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left/100% 100%;
  clip-path: inset(0 100% 0 0); animation: draw-in .9s .25s var(--ease) forwards; }

/* ---------- El yazısı notlar + oklar ---------- */
.note { position: absolute; z-index: 4; font: 600 1.35rem/1.05 var(--font-hand); color: var(--lavender-ink); rotate: var(--r, -4deg); display: flex; align-items: flex-end; gap: 4px; pointer-events: none; white-space: nowrap;
  animation: note-in .7s var(--d, 1s) var(--ease-spring) both; }
.note .doodle { width: 44px; height: 44px; position: static; animation: none; }
.note .doodle path { animation: draw .9s calc(var(--d, 1s) + .2s) var(--ease) both; }
.note.peach { color: var(--peach-ink); } .note.mint { color: var(--mint-ink); } .note.rose { color: var(--rose-ink); }
@keyframes note-in { from { opacity: 0; translate: 0 6px; } }
.note-inline { font: 600 1.25rem/1.1 var(--font-hand); color: var(--lavender-ink); display: inline-block; rotate: -2deg; }

/* ---------- Karalamalar (doodle) ---------- */
.doodle { position: absolute; width: var(--s, 40px); height: var(--s, 40px); color: var(--dc, var(--lavender)); opacity: .95; pointer-events: none; z-index: 0;
  animation: doodle-float var(--t, 9s) ease-in-out infinite; animation-delay: var(--fd, 0s); filter: url(#rough-soft); }
.doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--dd, .3s) var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes doodle-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4px, -9px) rotate(7deg); } }
.d-lavender { --dc: var(--lavender); } .d-peach { --dc: #f2a27a; } .d-mint { --dc: #6cc59a; } .d-rose { --dc: #ea8aa5; } .d-sky { --dc: #7fb0e6; } .d-butter { --dc: #e3bd3f; }

/* ---------- El çizimi skor halkası ---------- */
.sk-ring { position: relative; width: var(--size); height: var(--size); flex: none; }
.sk-ring svg { width: 100%; height: 100%; overflow: visible; }
.sk-ring circle { fill: none; }
.sk-ring .track { stroke: var(--surface-2); }
.sk-ring .pencil { stroke: var(--pencil); stroke-width: 1.1; stroke-dasharray: 4 3 9 2 6 3; filter: url(#rough); opacity: .7; }
.sk-ring .val { stroke: var(--c); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--off); filter: url(#rough); animation: ring-draw 1.8s .2s var(--ease) both; }
@keyframes ring-draw { from { stroke-dashoffset: var(--len); } }
.sk-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0; }
.sk-label b { font: 600 calc(var(--size) * .3)/1 var(--font-display); letter-spacing: -.03em; }
.sk-label span { font: 600 1.15rem/1 var(--font-hand); color: var(--ink-2); margin-top: 2px; }

/* ---------- Sıradaki adım: yapışkan not ---------- */
.next-step { background: #fff3b8; color: #3d3418; border-radius: 3px 3px 18px 3px; rotate: -.6deg; box-shadow: 0 14px 22px -16px rgba(80, 60, 0, .45), inset 0 -18px 30px -24px rgba(120, 90, 0, .25); position: relative; overflow: hidden; }
.next-step::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; background: linear-gradient(135deg, #f4e08a 50%, var(--bg) 50%); box-shadow: -2px -2px 4px rgba(120, 90, 0, .15); }
.next-step:hover { rotate: 0deg; color: #3d3418; }
.next-step small { color: #8a7428; font: 600 1.15rem/1 var(--font-hand); text-transform: none; letter-spacing: 0; }
.next-step .subtle { color: #6b5d2c; }
.next-step .go { background: #3d3418; color: #fff3b8; }
:root[data-theme="dark"] .next-step { background: #4a4224; color: #f8eec4; } :root[data-theme="dark"] .next-step .subtle, :root[data-theme="dark"] .next-step small { color: #d8c98a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next-step { background: #4a4224; color: #f8eec4; } :root:not([data-theme="light"]) .next-step .subtle, :root:not([data-theme="light"]) .next-step small { color: #d8c98a; } }

/* ---------- Kategori karoları: renkli fişler ---------- */
.cat { border-radius: var(--sketch-r-s); border: 1.4px solid color-mix(in srgb, var(--c-ink) 30%, transparent); }

/* ---------- Kenar menü: spiral cilt + fosforlu aktif ---------- */
@media (min-width: 921px) {
  .sidebar { background: color-mix(in srgb, var(--paper) 55%, transparent); border-right: 1.6px dashed var(--pencil-soft); }
  .sidebar::after { content: ""; position: absolute; top: 24px; bottom: 24px; right: -10px; width: 20px; pointer-events: none;
    background: radial-gradient(circle at 10px 13px, var(--bg) 0 4.5px, var(--pencil) 5px 6.4px, transparent 6.8px) 0 0 / 20px 30px repeat-y; }
}
.nav a { border-radius: var(--sketch-r-s); }
.nav a.active { background: transparent; box-shadow: none; color: var(--ink); }
.nav a.active::before { content: ""; position: absolute; left: 6px; right: 10px; top: 52%; bottom: 7px; z-index: -1; background: var(--marker); border-radius: .3em .6em .4em .7em; rotate: -1deg; transform-origin: left; animation: marker-swipe .5s var(--ease) both; }
.nav a { position: relative; z-index: 0; }
.nav .count { border-radius: 9px 12px 8px 11px; }
.proj, .me-btn:hover, .menu.open .me-btn { background: var(--paper); }
.proj { border: 1.4px solid var(--pencil-soft); border-radius: var(--sketch-r-s); box-shadow: none; }
.menu-panel { background: var(--paper); border: 1.6px solid var(--pencil); border-radius: var(--sketch-r-s); }
.avatar { border: 1.4px solid var(--pencil); border-radius: 50% 45% 52% 48%; }

/* ---------- Segment / sekmeler: defter ayraçları ---------- */
.segment { background: transparent; padding: 0; gap: 6px; border-bottom: 1.6px dashed var(--pencil-soft); border-radius: 0; padding-bottom: 0; }
.segment a, .segment button { border-radius: 12px 14px 0 0; border: 1.4px solid transparent; border-bottom: 0; margin-bottom: -1.6px; padding: 10px 16px; }
.segment .active, .segment [aria-selected="true"] { background: var(--paper); border-color: var(--pencil); box-shadow: none; translate: 0 -2px; }
.chip { border-radius: var(--sketch-r-btn); border: 1.2px solid var(--pencil-soft); background: var(--paper); }
.chip.active { border-color: var(--lavender-ink); }

/* ---------- Tablo & listeler: defter satırları ---------- */
.table td { border-top: 1.2px dashed var(--pencil-soft); }
.table tbody tr:hover { background: color-mix(in srgb, var(--marker) 22%, transparent); }
.fix { border-top: 1.2px dashed var(--pencil-soft); }
.list-row:hover, .issue-item:hover { background: color-mix(in srgb, var(--marker) 25%, transparent); }
.audit-item { border-top: 1.2px dashed var(--pencil-soft); }
hr { background: none; border-top: 1.4px dashed var(--pencil-soft); height: 0; }

/* ---------- Önce/sonra ---------- */
.diff > .side { border-radius: var(--sketch-r-s); }
.diff > .side.old { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rose-ink) 60%, transparent); text-decoration-thickness: 1.5px; }
.diff > .side small { font: 600 1.05rem/1 var(--font-hand); text-transform: none; letter-spacing: 0; }

pre { border-radius: var(--sketch-r-s); border: 1.2px dashed var(--pencil-soft); }
.alert { border-radius: var(--sketch-r-s); border: 1.4px solid color-mix(in srgb, currentColor 25%, transparent); }
dialog { border: 1.8px solid var(--pencil); border-radius: var(--sketch-r); background: var(--paper); }
.toast { border-radius: var(--sketch-r-btn); }
details.disclosure { background: var(--paper); border: 1.4px dashed var(--pencil-soft); border-radius: var(--sketch-r-s); }
details.disclosure[open] { border-style: solid; border-color: var(--pencil-soft); }
.tile { border-radius: 13px 16px 12px 17px / 16px 12px 17px 13px; border: 1.3px solid color-mix(in srgb, var(--c-ink) 30%, transparent); }
.logo-mark { border-radius: 12px 14px 11px 15px; border: 1.6px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.bulkbar { border-radius: var(--sketch-r-btn); }
.add-card { border-radius: var(--sketch-r); border: 2px dashed var(--pencil-soft); }
.empty h3 { font-family: var(--font-hand); font-size: 1.9rem; font-weight: 700; }
.card-title { position: relative; }

/* ---------- Pazarlama ---------- */
.site-header .bar-inner { background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1.6px solid var(--pencil); border-radius: var(--sketch-r-btn); box-shadow: 3px 4px 0 var(--pencil-soft); }
.hero { overflow: visible; }
.hero h1 { font-weight: 600; }
.hero h1 .hand { font-size: 1.18em; color: var(--lavender-ink); font-weight: 700; }
.hero .doodle, .auth-shell .doodle, .cta .doodle { z-index: 0; width: calc(var(--s, 40px) * 1.7); height: calc(var(--s, 40px) * 1.7); }
.mock { height: 270px; }
.hero { padding-bottom: 40px; }
.audit-form { border: 1.8px solid var(--ink); border-radius: var(--sketch-r-btn); box-shadow: 4px 5px 0 var(--ink); background: var(--paper); }
.audit-form:focus-within { box-shadow: 6px 7px 0 var(--ink); transform: translate(-2px, -2px); }
:root[data-theme="dark"] .audit-form { border-color: #ece8f6; box-shadow: 4px 5px 0 #ece8f6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .audit-form { border-color: #ece8f6; box-shadow: 4px 5px 0 #ece8f6; } }
.mock .card { box-shadow: 0 18px 30px -18px rgba(60, 40, 100, .4); }
.mock .m1 { rotate: -4deg; } .mock .m3 { rotate: 3deg; }
.mock .m2 { rotate: -1deg; }
.steps3 .num { font: 700 3.4rem/1 var(--font-hand); opacity: .55; }
.demo .arrow { border-radius: 50% 46% 52% 48%; border: 1.8px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.cta { background: var(--paper); border: 2px solid var(--pencil); border-radius: var(--sketch-r); box-shadow: 6px 7px 0 var(--lavender-bg); }
.plan.featured { background: var(--paper); box-shadow: 5px 6px 0 var(--lavender-bg); }
.section-head h2 { display: inline-block; }
.section-head { position: relative; }
.site-footer { border-top: 1.6px dashed var(--pencil-soft); }

@media (max-width: 820px) { .note { display: none; } .mock .card { rotate: 0deg !important; } }
@media (prefers-reduced-motion: reduce) { .doodle path, .sk-ring .val { stroke-dashoffset: 0 !important; } .scribble::after, .page-head h1::after { clip-path: none; } }
.flip svg, svg.flip { transform: scaleX(-1); }
.hero-card { overflow: visible; padding-bottom: 44px; }
@media (max-width: 640px) { .hero .doodle, .auth-shell .doodle, .cta .doodle { width: calc(var(--s, 40px) * .8); height: calc(var(--s, 40px) * .8); opacity: .45; } }

/* Öneri türleri: üstü çizili "eski" taraf yok, işaretli ifade fosforlu kalem */
.diff.suggest > .side.old { text-decoration: none; }
.diff.suggest mark { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--butter) 80%, transparent) 55%); color: inherit; padding: 0 .1em; }
.brief { border-left: 3px dashed color-mix(in srgb, var(--butter-ink, #b08a2e) 50%, transparent); padding: .25rem 0 .25rem 1rem; }
.brief ul { margin: .25rem 0 .75rem; padding-left: 1.2rem; }
.brief li { margin: .15rem 0; }
.brief small { font: 600 1.05rem/1 var(--font-hand); }

/* Arama performansı: el çizimi çizgi grafik (soldan sağa açılarak çizilir) */
.line-chart { width: 100%; height: 160px; display: block; margin: 8px 0; overflow: visible;
  clip-path: inset(0 100% 0 0); animation: draw-in 1.4s var(--ease) forwards; }
.line-chart polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#rough-soft); }
.line-chart .l-clk { stroke: var(--brand); }
.line-chart .l-imp { stroke: var(--sky-ink); opacity: .6; }
.stat > .badge { align-self: flex-start; }
.legend { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; }
.legend.c-lav { background: var(--brand); } .legend.c-sky { background: var(--sky-ink, #3c6e91); opacity: .6; }
.up { color: var(--mint-ink); font-weight: 600; } .down { color: var(--rose-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .line-chart { animation: none; clip-path: none; } }

/* Google sonuç önizlemesi */
.serp { margin-top: 10px; padding: 12px 14px; background: #fff; border-radius: 12px; border: 1px dashed var(--line, #e3ddd2);
  font-family: Arial, Helvetica, sans-serif; max-width: 620px; color: #202124; }
.serp-url { font-size: 12px; color: #4d5156; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { font-size: 19px; line-height: 1.3; color: #1a0dab; }
.serp-desc { font-size: 14px; line-height: 1.55; color: #4d5156; margin-top: 3px; }
.serp-meta { font: 600 1rem/1 var(--font-hand); color: var(--muted, #6f6a80); margin-top: 6px; }
.serp-meta b { color: var(--rose-ink); }
:root[data-theme="dark"] .serp { background: #202124; color: #e8eaed; }
:root[data-theme="dark"] .serp-title { color: #8ab4f8; } :root[data-theme="dark"] .serp-desc, :root[data-theme="dark"] .serp-url { color: #bdc1c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .serp { background: #202124; color: #e8eaed; }
  :root:not([data-theme="light"]) .serp-title { color: #8ab4f8; } :root:not([data-theme="light"]) .serp-desc, :root:not([data-theme="light"]) .serp-url { color: #bdc1c6; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }