/* CYF Tech — iletisim.html: channel tiles in the hero · brief form as an editor window beside the process ·
   full-width map with a floating office card */

/* ---------- hero channels ---------- */
.ct-chs{display:flex;flex-direction:column;gap:12px}
.ct-ch{position:relative;display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:16px;border:1px solid var(--line-2);background:rgba(8,16,32,.75);text-decoration:none;color:var(--text);overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.ct-ch::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 120px at 0% 50%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);opacity:.7;transition:opacity .25s ease;pointer-events:none}
.ct-ch:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:translateX(6px)}
[dir="rtl"] .ct-ch:hover{transform:translateX(-6px)}
.ct-ch:hover::before{opacity:1}
.ct-ch-ic{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.ct-ch-tx{position:relative;flex:1;min-width:0}
.ct-ch-tx b{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ct-ch-tx span{display:block;margin-top:4px;font-size:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-ch-go{position:relative;color:var(--c);transition:transform .25s ease}
.ct-ch:hover .ct-ch-go{transform:translateX(4px)}
[dir="rtl"] .ct-ch:hover .ct-ch-go{transform:scaleX(-1) translateX(4px)}

/* ---------- brief: process + editor ---------- */
.ct-brief-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.ct-process{position:sticky;top:calc(var(--head-h) + 32px)}
.ct-process .h2{font-size:40px}
.ct-process .steps{margin-top:32px}
.ct-mini{display:flex;gap:14px;margin-top:28px;padding:18px 20px;border-radius:14px;border:1px solid var(--line-2);background:rgba(8,16,32,.55)}
.ct-mini .ic{margin-top:2px;color:var(--accent)}
.ct-mini b{display:block;font-weight:500}
.ct-mini span{display:block;margin-top:2px;font-size:14px;color:var(--dim)}

.ct-editor{border-radius:20px;border:1px solid var(--accent-line);background:linear-gradient(180deg,#081428,#050B1A);box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 90px color-mix(in srgb,var(--accent) 12%,transparent);overflow:hidden}
.ct-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-bottom:1px solid var(--line-2);background:rgba(8,16,32,.9)}
.ct-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-3)}
.ct-bar i:nth-child(1){background:#F87171}
.ct-bar i:nth-child(2){background:#FBBF24}
.ct-bar i:nth-child(3){background:#4ADE80}
.ct-bar span{margin-inline-start:10px;font-family:var(--mono);font-size:12px;color:var(--dim);direction:ltr}
.ct-form{gap:0;padding:8px 32px 32px}
.ct-q{margin:0;padding:26px 0;border:0;border-bottom:1px dashed var(--line-2);display:grid;gap:16px;min-width:0}
.ct-q legend{float:left;width:100%;display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:0;font-size:18px;font-weight:600}
.ct-q legend+*{clear:both}
.ct-qn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--accent-line);background:var(--accent-faint);font-family:var(--mono);font-size:12px;color:var(--accent)}
.ct-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ct-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:12px;border:1px solid var(--line-3);background:rgba(4,8,20,.5);font-size:15px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.ct-opt input{position:absolute;opacity:0;pointer-events:none}
.ct-opt .ic{color:var(--dim);transition:color .2s ease}
.ct-opt:hover{border-color:var(--accent-line)}
.ct-opt:has(input:checked){border-color:var(--accent);background:var(--accent-faint);color:var(--text)}
.ct-opt:has(input:checked) .ic{color:var(--accent)}
.ct-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ct-form .field label small{color:var(--dim);font-size:12px}
.ct-form .field input,.ct-form .field textarea{background:rgba(4,8,20,.6)}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:26px}
.ct-send .form-note{flex:1;min-width:220px}

/* ---------- location: full-width map, floating card ---------- */
@keyframes ctPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.ct-loc{position:relative;margin-top:40px;padding:72px 0;min-height:560px;display:flex;align-items:center}
.ct-map{position:absolute;inset:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#061224}
.ct-map iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9)}
.ct-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent 60%)}
[dir="rtl"] .ct-map::after{background:linear-gradient(270deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent 60%)}
.ct-loc .wrap{position:relative;z-index:1;pointer-events:none}
.ct-card{position:relative;width:380px;max-width:100%;padding:32px;border-radius:20px;border:1px solid var(--accent-line);background:rgba(5,11,26,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 80px rgba(0,0,0,.45);pointer-events:auto;display:flex;flex-direction:column;gap:22px}
.ct-pin{position:relative;display:grid;grid-template-columns:14px auto;column-gap:14px;align-items:center}
.ct-pin::before{content:"";grid-row:1/3;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.ct-ping{position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid var(--accent);animation:ctPing 2s ease-out infinite}
[dir="rtl"] .ct-ping{left:auto;right:0}
.ct-pin b{font-size:20px;font-weight:600}
.ct-pin small{grid-column:2;font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.ct-addr{font-size:18px;line-height:1.55}
.ct-addr span{color:var(--muted)}
.ct-offices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-offices li{display:flex;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2)}
.ct-offices .ic{color:var(--accent);margin-top:2px}
.ct-offices b{display:block;font-weight:600;font-size:15px}
.ct-offices span{display:block;font-size:13px;color:var(--dim)}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px}
.ct-tag{position:absolute;right:20px;top:20px;padding:4px 8px;border-radius:6px;border:1px solid var(--accent-line);font-family:var(--mono);font-size:11px;color:var(--accent);direction:ltr}
[dir="rtl"] .ct-tag{right:auto;left:20px}

@media (prefers-reduced-motion: reduce){.ct-ping{animation:none;opacity:0}}
@media (max-width: 1100px){
  .ct-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 960px){
  .ct-brief-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ct-process{position:static}
  .ct-loc{flex-direction:column;align-items:stretch;padding:0;min-height:0}
  .ct-map{position:relative;height:340px}
  .ct-map::after{display:none}
  .ct-loc .wrap{margin-top:-80px;padding-bottom:24px}
  .ct-card{width:auto}
}
@media (max-width: 640px){
  .ct-form{padding:4px 20px 24px}
  .ct-row{grid-template-columns:minmax(0,1fr)}
  .ct-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-opt{padding:0 12px;font-size:14px}
  .ct-process .h2{font-size:32px}
  .ct-ch{padding:16px}
  .ct-ch-tx span{font-size:17px}
}