/* yazı tipleri sitenin içinde barındırılır — dış sunucuya bağlantı yok */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #e9dcc4;
  --sh: 92, 60, 24;
  --card: #fffaf0;
  /* kartın üzerine vuran güneş ve parlama rengi */
  --card-sun: linear-gradient(125deg, rgba(255,222,160,.22) 0%, rgba(255,222,160,0) 55%, rgba(120,80,30,.05) 100%);
  --glare: 255, 232, 190;
  --ink: #1c1c1c;
  --muted: #8a8780;
  --line: #d9d6cf;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  perspective: 1400px;
}

/* güneşli öğleden sonra: sol üstteki pencereden giren alçak, altın ışık */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* güneşin geldiği köşe */
    radial-gradient(ellipse 80% 70% at 8% 0%, rgba(255,248,226,.95) 0%, rgba(255,222,160,.45) 38%, rgba(255,210,140,0) 75%),
    /* pencere camlarından düşen eğik ışık şeritleri */
    linear-gradient(118deg,
      rgba(255,238,200,0) 14%, rgba(255,238,200,.42) 20%, rgba(255,238,200,.42) 31%, rgba(255,238,200,0) 36%,
      rgba(255,238,200,0) 40%, rgba(255,238,200,.32) 45%, rgba(255,238,200,.32) 56%, rgba(255,238,200,0) 61%),
    /* odaya yayılan amber ton */
    linear-gradient(150deg, rgba(255,200,120,.14) 0%, rgba(255,200,120,0) 55%),
    /* güneşten uzak köşelerde sıcak gölge */
    radial-gradient(ellipse 95% 90% at 30% 25%, rgba(0,0,0,0) 50%, rgba(var(--sh), .2) 100%),
    /* ince gren */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220px;
}

/* alternatif zemin — <body class="eski"> yazınca devreye girer:
   eskimiş kâğıt; sararmış lekeler, benekler, gren ve koyulaşan kenarlar */
body.eski { --bg: #e4d8c1; --card: #fbfaf6; --sh: 60, 38, 15; --card-sun: none; --glare: 255, 255, 255; }
body.eski::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* kenarlara doğru koyulaşma */
    radial-gradient(ellipse 75% 70% at 50% 46%, rgba(255,248,232,.55) 0%, rgba(255,248,232,0) 55%, rgba(92,62,30,.16) 82%, rgba(70,45,20,.42) 100%),
    /* ince gren */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .14  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    /* küçük pas benekleri */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='s' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='2' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .3  0 0 0 0 .12  0 0 0 30 -23.4'/><feComponentTransfer><feFuncA type='linear' slope='.24'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    /* geniş, düzensiz sararma lekeleri */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .18  0 0 0 2.6 -1.05'/><feComponentTransfer><feFuncA type='linear' slope='.45'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 100% 100%, 220px, 600px, 1000px;
}

/* dış katman: fareyle eğilme */
.card {
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 85 / 55;
  transform: rotateX(4deg) rotateY(-3deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  animation: settle 1.1s cubic-bezier(.2,.7,.2,1) both;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* iç katman: tıklayınca dönme */
.flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.45,.05,.2,1);
}
.card.flipped .flipper { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  background: var(--card-sun), var(--card);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8% 9%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  box-shadow:
    inset 0 0 0 1px rgba(120,110,90,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 1px rgba(var(--sh), .06),
    0 2px 4px rgba(var(--sh), .07),
    0 8px 16px rgba(var(--sh), .08),
    16px 26px 48px -8px rgba(var(--sh), .22),
    36px 56px 80px -30px rgba(var(--sh), .3);
}
.back { transform: rotateY(180deg); }
.card:focus-visible .face { box-shadow: 0 0 0 2px var(--line), 0 24px 48px -8px rgba(0,0,0,.14); }

/* dokulu pamuk kâğıt: kabartma yüzey + lifler + ince gren */
.face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    /* ince gren */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .25  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    /* seyrek kâğıt lifleri */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.01 .16' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .52  0 0 0 0 .46  0 0 0 -4 2.15'/><feComponentTransfer><feFuncA type='linear' slope='.12'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    /* kabartmalı pamuk yüzey */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='r' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='3' stitchTiles='stitch' result='n'/><feDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='1.8' result='l'><feDistantLight azimuth='225' elevation='55'/></feDiffuseLighting><feComponentTransfer><feFuncR type='linear' slope='.6' intercept='0.5'/><feFuncG type='linear' slope='.6' intercept='0.495'/><feFuncB type='linear' slope='.6' intercept='0.48'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  background-size: 200px, 400px, 400px;
  mix-blend-mode: multiply;
  opacity: .6;
  z-index: 2;
}
/* ışık parlaması */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(var(--glare), .75), rgba(var(--glare), 0) 55%);
  mix-blend-mode: soft-light;
}

/* sağ üstte, kenardan biraz taşmış mürekkep mühür */
.stamp {
  position: absolute;
  top: -3%;
  right: -2.5%;
  width: 23%;
  aspect-ratio: 1;
  color: #8e2f2c;
  opacity: .78;
  transform: rotate(-14deg);
  mix-blend-mode: multiply;
  filter: url(#stamp-ink);
  pointer-events: none;
  z-index: 1;
}
.stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }

.name, .title, .mail, .motto { filter: url(#ink); }
.name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 5.4vw, 2.25rem);
  letter-spacing: .02em;
  line-height: 1.15;
}
.rule {
  width: 28px;
  height: 1px;
  background: var(--line);
  margin: 1.1em auto;
}
.title {
  font-size: clamp(.6rem, 1.9vw, .72rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}
.mail {
  position: absolute;
  bottom: 9%;
  left: 0; right: 0;
  font-size: clamp(.68rem, 2vw, .8rem);
  font-weight: 300;
  letter-spacing: .06em;
}
.mail a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.mail a:hover { border-color: var(--line); }

.motto {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 4.4vw, 1.85rem);
  letter-spacing: .02em;
  color: #3a3833;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(24px) rotateX(14deg) rotateY(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .flipper { animation: none; transition: none; }
}
.defs { position: absolute; }