/* Yağız Denli — dijital kartvizit · fırçalanmış metal */
:root{
  color-scheme:dark;
  --gunmetal:#141518;   /* zemin */
  --carbon:#0d0e10;     /* derin yüzey */
  --plate:#1b1c20;      /* plaka yüzeyi */
  --seam:#2b2d33;       /* ek yerleri */
  --chrome:#e4e6ea;     /* metin, metal ışığı */
  --steel:#9499a3;      /* ikincil metin */
  --dim:#6d727c;
  --glint:#b9ee3e;      /* logodaki kıvılcım */
  --denli:#4d7cff;
  --rm:#7ea2ff;
  --font:Manrope,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r-lg:22px;--r-md:14px;--r-sm:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;scroll-behavior:smooth}
body{margin:0;background:var(--gunmetal);color:var(--chrome);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 55% at 50% -10%,#2a2d34 0%,transparent 60%),radial-gradient(60% 40% at 100% 100%,#1c1f24 0%,transparent 70%)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--chrome);outline-offset:4px;border-radius:8px}
.skip-link{position:fixed;left:12px;top:12px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--chrome);color:var(--carbon);font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:none}

.page{width:min(560px,100%);margin:0 auto;padding:0 20px calc(env(safe-area-inset-bottom) + 72px)}
.top{display:flex;align-items:center;justify-content:space-between;padding:max(20px,env(safe-area-inset-top)) 0 8px}
.top-home img{width:78px;opacity:.9}
.round-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--seam);background:#ffffff05;transition:background .2s,border-color .2s}
.round-btn:hover{background:#ffffff0d;border-color:#454850}
.round-btn .icon{width:18px;height:18px}

/* ---------- Kart ---------- */
.hero{padding-top:18px}
.stage{position:relative;perspective:1100px;padding:10px 0 34px}
.metal-card{
  --rx:0deg;--ry:0deg;--lx:30%;--ly:20%;
  position:relative;aspect-ratio:1.586;border-radius:20px;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1);
  background:
    radial-gradient(120% 90% at var(--lx) var(--ly),#ffffff30 0%,transparent 45%),
    repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,#00000012 0 1px,transparent 1px 7px),
    linear-gradient(115deg,#2f3238 0%,#4d5159 24%,#33363c 48%,#474b53 72%,#26282d 100%);
  box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #00000080,inset 0 0 0 1px #ffffff14,0 30px 60px -20px #000c,0 8px 18px -6px #0009;
  overflow:hidden;will-change:transform;
}
.metal-card.is-moving{transition:transform .08s linear}
.mc-face{position:absolute;inset:0;padding:7% 7.5%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;transform:translateZ(18px)}
.mc-logo{width:30%;min-width:84px;filter:drop-shadow(0 1px 0 #00000080) drop-shadow(0 -1px 0 #ffffff20)}
.mc-nfc{width:26px;height:26px;fill:none;stroke:#dfe2e8;stroke-width:1.6;stroke-linecap:round;opacity:.65;justify-self:end}
.mc-chip{grid-column:1;width:13%;min-width:40px;aspect-ratio:1.3;border-radius:7px;align-self:center;
  background:linear-gradient(135deg,#d9c58f,#a48a4c 45%,#e6d6a5 60%,#8e7640);
  box-shadow:inset 0 0 0 1px #00000040,inset 0 1px 0 #fff6;position:relative;opacity:.92}
.mc-chip::before{content:"";position:absolute;inset:22% 14%;border:1px solid #6e5a2b88;border-radius:4px;border-left:0;border-right:0}
.mc-chip::after{content:"";position:absolute;inset:14% 40%;border:1px solid #6e5a2b88;border-top:0;border-bottom:0}
.mc-id{grid-column:1/-1;align-self:end}
.mc-name{font-size:clamp(30px,9vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#d9dce2 45%,#9ea3ad 55%,#eceef2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #00000090) drop-shadow(0 -1px 0 #ffffff26)}
.mc-role{margin-top:9px;font-size:clamp(12px,3.3vw,14px);font-weight:600;color:#d4d7dd;text-shadow:0 1px 0 #00000080}
.mc-glint{position:absolute;right:7.5%;bottom:9%;width:7px;height:7px;border-radius:50%;background:var(--glint);box-shadow:0 0 12px 2px #b9ee3e99}
.mc-sheen{position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 40%,#ffffff2e 48%,#ffffff55 50%,#ffffff2e 52%,transparent 60%);transform:translateX(-70%);pointer-events:none}
.metal-card.is-intro .mc-sheen{animation:sheen 1.6s .35s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes sheen{to{transform:translateX(70%)}}
.metal-card.is-intro{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px) rotateX(14deg)}}
.stage-shadow{position:absolute;left:12%;right:12%;bottom:8px;height:26px;border-radius:50%;background:#000;filter:blur(18px);opacity:.55}

.hero-note{color:var(--steel);font-size:15.5px;max-width:42ch}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:54px;padding:0 12px;white-space:nowrap;border-radius:var(--r-md);font-size:15px;font-weight:700;border:1px solid transparent;transition:transform .15s,background .2s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn-solid{color:#121316;background:linear-gradient(180deg,#f3f4f6,#cfd2d8);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #0000002e,0 10px 24px -12px #000}
.btn-solid:hover{background:linear-gradient(180deg,#fff,#dcdfe4)}
.btn-line{border-color:#3a3d44;background:#ffffff05}
.btn-line:hover{border-color:#5a5e66;background:#ffffff0a}
.contact-fallback{margin-top:12px;color:var(--steel);font-size:14px}
.contact-fallback button{border:0;background:none;padding:0;text-decoration:underline;font-weight:600}
.quick{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;border:1px solid var(--seam);border-radius:var(--r-md);overflow:hidden}
.quick a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font-size:14px;font-weight:600;color:#cfd2d7}
.quick a+a{border-left:1px solid var(--seam)}
.quick a:hover{background:#ffffff08}
.quick .icon{width:18px;height:18px;color:var(--steel)}

/* ---------- Hakkımda ---------- */
.about{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;margin-top:40px;padding-top:28px;border-top:1px solid var(--seam)}
.about-photo{width:76px;height:96px;object-fit:cover;object-position:50% 40%;border-radius:12px;filter:saturate(.85)}
.about-text{font-size:15.5px;line-height:1.6;color:#d3d6db}
.about-meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--dim)}
.about-meta .icon{width:15px;height:15px}

/* ---------- Bloklar ---------- */
.block{margin-top:48px}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.block-head h2{font-size:24px;font-weight:700;letter-spacing:-.03em}
.umbrella{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--steel);white-space:nowrap}
.umbrella .icon{width:15px;height:15px}
.umbrella:hover{color:var(--chrome)}

.plate{border-radius:var(--r-lg);background:linear-gradient(180deg,#1d1e23,#18191d);border:1px solid var(--seam);box-shadow:inset 0 1px 0 #ffffff0d}
.brand+.brand,.work+.work{border-top:1px solid var(--seam)}
.brand-link,.work{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:18px 18px 12px}
.work{padding:16px 18px}
.brand-mark,.work-mono{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--carbon);border:1px solid #ffffff10;overflow:hidden}
.brand-mark img{width:68%}
.mark-wide img{width:84%}
.brand-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-body b{font-size:17px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand-body>span{font-size:14px;line-height:1.5;color:var(--steel)}
.go{width:17px;height:17px;color:var(--dim);transition:transform .2s,color .2s}
.brand-link:hover .go,.work:hover .go,.feature:hover .go{color:var(--chrome);transform:translate(2px,-2px)}
.brand-subs{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 18px 16px 84px}
.brand-sub{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--dim)}
a.brand-sub:hover{color:var(--chrome)}
.brand-sub .icon{width:14px;height:14px}
.brand-tapgo .brand-subs .brand-sub+.brand-sub{border-left:1px solid var(--seam);padding-left:16px}
.brand-denli .brand-mark{background:radial-gradient(circle at 30% 30%,#1b2a52,#0c1022)}
.brand-denli>.brand-sub{margin:0 18px 16px 84px}
.brand-rm .rm-mark{background:none;border:0;box-shadow:0 6px 18px -6px #3c75ff99}
.rm-mark img{width:100%;height:100%;object-fit:cover}
.rm-mark svg{width:100%;height:100%}
.brand-body em{font-style:normal;font-size:12px;font-weight:700;color:var(--rm);border:1px solid #7ea2ff4d;background:#7ea2ff12;border-radius:999px;padding:2px 9px;letter-spacing:.01em}
.rm-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 18px 12px 84px;mask-image:linear-gradient(90deg,#000 80%,transparent)}
.rm-strip::-webkit-scrollbar{display:none}
.rm-strip span{flex:none;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;border:1px solid #ffffff0f;background:#ffffff05;font-size:12.5px;color:#b8bcc3;white-space:nowrap}
.rm-strip time{font-weight:700;font-variant-numeric:tabular-nums;color:#e1e3e7}
.rm-strip .is-new{border-color:#7ea2ff66;background:#7ea2ff17;color:var(--chrome)}
.rm-strip .is-new time{color:var(--rm)}
.rm-strip .is-open{border-style:dashed;color:var(--dim)}
.rm-strip .is-open time{color:var(--dim)}
.brand-sub.muted{color:var(--dim)}

/* ---------- İşler ---------- */
.feature{display:block;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--seam);background:var(--carbon);margin-bottom:10px}
.feature-shot{display:block;padding:12px 12px 0;background:linear-gradient(180deg,#191a1e,#0f1012)}
.feature-shot img{border-radius:10px 10px 0 0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.feature:hover .feature-shot img{transform:translateY(-4px)}
.feature-body{display:flex;flex-direction:column;gap:3px;padding:16px 50px 18px 18px;border-top:1px solid var(--seam)}
.feature-body b{font-size:18px;letter-spacing:-.02em}
.feature-body span{font-size:14px;color:var(--steel)}
.feature>.go{position:absolute;right:18px;bottom:22px}
.work-mono{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;letter-spacing:-.06em}
.freego{background:#f4f0e3;color:#2d5e44}.freego i{font-style:normal;color:#8c9c77}
.tesbih{background:#2f261e;color:#d7bc8c;font-family:Georgia,serif;font-weight:400;font-size:26px}
.kart img{width:100%;height:100%;object-fit:cover}

/* ---------- Topluluk ---------- */
.community .brand-link{grid-template-columns:52px minmax(0,1fr);padding-bottom:8px}
.es-mark{border-radius:50%;background:none;border:1px solid #ffffff14}
.es-mark img{width:100%;height:100%;object-fit:cover}
.community-meta{display:flex;align-items:center;gap:8px;padding:0 18px 14px 84px;font-size:13.5px;color:var(--dim)}
.live-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px #25d3662e}
.community-join{display:flex;margin:0 18px 18px}

/* ---------- Kapanış ---------- */
.closing{margin-top:56px;padding:28px 22px 24px;border-radius:var(--r-lg);border:1px solid var(--seam);
  background:radial-gradient(80% 70% at 100% 0%,#2a2d33,transparent 70%),var(--plate)}
.closing h2{font-size:clamp(28px,8vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.1;max-width:14ch}
.closing>p{margin-top:12px;color:var(--steel);font-size:15px}
.closing>.btn{width:100%;margin-top:22px}
.closing-links{display:grid;margin-top:10px}
.closing-links a{display:flex;align-items:center;gap:12px;min-height:50px;border-bottom:1px solid var(--seam);font-size:15px;color:#d3d6db}
.closing-links a:last-child{border-bottom:0}
.closing-links .icon{width:18px;height:18px;color:var(--steel)}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.socials a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:999px;border:1px solid #3a3d44;font-size:13.5px;color:#c5c8ce}
.socials a:hover{border-color:#5a5e66;color:var(--chrome)}
.socials .icon{width:15px;height:15px}

.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;font-size:13px;color:var(--dim)}
.foot-share{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 0;font-size:13px;color:var(--steel)}
.foot-share .icon{width:15px;height:15px}
.foot-share:hover{color:var(--chrome)}

/* ---------- Pencereler ---------- */
.sheet{width:min(430px,calc(100% - 32px));padding:0;border:1px solid var(--seam);border-radius:22px;background:#1a1b1f;color:var(--chrome);box-shadow:0 30px 90px #000c}
.sheet::backdrop{background:#000a;backdrop-filter:blur(8px)}
.sheet-body{position:relative;padding:30px 22px 24px;display:flex;flex-direction:column}
.sheet-close{position:absolute;top:12px;right:12px;width:36px;height:36px}
.sheet h2{font-size:26px;line-height:1.15;letter-spacing:-.03em;padding-right:40px}
.sheet-body>p{margin-top:10px;color:var(--steel);font-size:15px}
.sheet label{margin:20px 0 8px;font-size:13px;color:var(--steel)}
.sheet input{width:100%;min-height:48px;padding:0 12px;border-radius:10px;border:1px solid var(--seam);background:var(--carbon);font-size:16px}
.sheet .btn{margin-top:12px;width:100%}
.copy-help{margin-top:12px;min-height:20px;color:var(--chrome);font-size:14px}
.contact-save-phone{margin-top:14px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.contact-dialog .sheet-body{max-height:calc(100dvh - 48px);overflow-y:auto}
.dialog-fallback{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;z-index:40}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--chrome);color:var(--carbon);font-size:14px;font-weight:700;box-shadow:0 12px 40px #0009}

/* ---------- Geniş ekran ---------- */
@media (min-width:900px){
  .page{width:min(1080px,100%);padding:0 40px 80px;display:block}
  .top{padding-top:32px}
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:"stage ." "stage note" "stage actions" "stage quick" "stage fb" "stage .";column-gap:64px;padding-top:40px}
  .stage{grid-area:stage;align-self:center}
  .hero-note{grid-area:note;font-size:19px;color:#c3c6cc}
  .actions{grid-area:actions}
  .quick{grid-area:quick}
  .contact-fallback{grid-area:fb}
  main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .hero,.about,.community{grid-column:1/-1}
  .community .community-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .community .brand-link{padding:18px}
  .community-meta{padding:0 24px 0 0}
  .community-join{margin:0 18px 0 0;min-height:48px;padding:0 22px}
  .about{max-width:640px}
  .closing{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;padding:36px}
  .closing>*{grid-column:1}
  .closing>.btn,.closing-links,.socials{grid-column:2}
  .closing>.btn{grid-row:1;margin-top:0}
  .closing-links{grid-row:2/4}
}
@media (max-width:374px){
  .page{padding-left:16px;padding-right:16px}
  .actions{grid-template-columns:1fr}
  .brand-subs,.rm-strip{padding-left:18px}
  .brand-denli>.brand-sub{margin-left:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.closing-links small{margin-left:auto;font-size:12.5px;color:var(--dim)}
/* Sakin düzen: markalar tek satır, işler sade liste */
.brand-link{padding:18px}
.work{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:6px 14px;align-items:center;padding:17px 18px}
.work b{font-size:16px;font-weight:700;letter-spacing:-.02em;min-width:0}
.work>span{font-size:13.5px;color:var(--dim);text-align:right}
@media (max-width:400px){.work{grid-template-columns:minmax(0,1fr) 18px}.work>span{grid-column:1;grid-row:2;text-align:left}.work .go{grid-column:2;grid-row:1/3}}