:root{--kagit:#f1e8d6;--kagit2:#e7dcc3;--murekkep:#2a2438;--hardal:#d9a21b;--kiremit:#c4522f;--yesil:#5d7a5a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kagit);color:var(--murekkep);font:19px/1.6 Georgia,"Iowan Old Style",serif;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.sar{max-width:960px;margin:0 auto;padding:0 20px}
header{padding:28px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.marka{font-style:italic;font-size:22px;color:var(--murekkep);text-decoration:none}
nav a{color:var(--murekkep);margin-left:18px;font-size:17px}
h1{font-size:clamp(34px,8.5vw,64px);line-height:1.08;margin:.7em 0 .3em;font-weight:700;letter-spacing:-.01em}
h1 em{font-style:italic;background:linear-gradient(transparent 62%,rgba(217,162,27,.55) 62%)}
.vaat{font-size:clamp(20px,4.6vw,26px);max-width:34ch;margin:0 0 1.2em}
.hero{display:grid;gap:28px;align-items:center;padding:20px 0 40px}
@media(min-width:760px){.hero{grid-template-columns:1.2fr 1fr}}
.dugme{display:inline-block;padding:12px 22px;margin:0 10px 12px 0;color:var(--murekkep);text-decoration:none;font-weight:700;
 background:var(--hardal);border:2.5px solid var(--murekkep);border-radius:6px 14px 8px 12px;box-shadow:3px 4px 0 var(--murekkep);transition:transform .12s}
.dugme.ikinci{background:var(--kagit2)}
.dugme:hover{transform:translate(-1px,-1px)}
.foto{position:relative;margin:0;background:#fffaf0;padding:10px 10px 12px;box-shadow:3px 5px 14px rgba(42,36,56,.28);transform:rotate(var(--r,-2deg))}
.foto img{display:block;width:100%;height:auto;background:var(--kagit2)}
.foto::before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:26px;margin-left:-42px;background:rgba(217,162,27,.55);transform:rotate(-3deg)}
.hero .foto{max-width:300px;justify-self:center}
section{padding:26px 0}
h2{font-size:clamp(26px,6vw,36px);margin:0 0 .5em;font-style:italic}
.deniz{background:var(--kagit2);padding:26px 22px;border-radius:4px 18px 6px 16px;border:2px dashed rgba(42,36,56,.45)}
.deniz p{max-width:56ch;margin:.4em 0}
.kapaklar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px;padding-top:12px;max-width:760px}
.kapaklar .foto:nth-child(1){--r:-2.2deg}.kapaklar .foto:nth-child(2){--r:1.6deg}.kapaklar .foto:nth-child(3){--r:-1deg}
.kapaklar .foto:nth-child(4){--r:2deg}.kapaklar .foto:nth-child(5){--r:-1.8deg}.kapaklar .foto:nth-child(6){--r:1.2deg}
figcaption{font-size:15px;text-align:center;margin-top:8px;font-style:italic}
footer{padding:36px 0 48px;font-size:16px;border-top:2px solid rgba(42,36,56,.25);margin-top:30px}
footer a,.metin a{color:var(--kiremit)}
.metin{max-width:68ch;padding-bottom:20px}
.metin h2{font-size:26px;margin-top:1.6em}
a:focus-visible{outline:3px solid var(--kiremit);outline-offset:3px}
.foto a{color:inherit;text-decoration:none;display:block}
.kapaklar .foto{max-width:220px}
.deniz{display:flex;gap:22px;align-items:center}.deniz-resim{width:120px;height:auto;flex:none;filter:drop-shadow(2px 3px 4px rgba(42,36,56,.3));transform:rotate(-2deg)}
@media(min-width:760px){.deniz-resim{width:120px}}