/* Okuma Hizi - Beceri Yayinlari Tema Uyumlu */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Breadcrumb Banner */
.oh-breadcrumb{background:linear-gradient(135deg,#1c2b5e 0%,#1ebba3 100%);padding:60px 0 40px;color:#fff;}
.oh-breadcrumb h1{font:800 36px/1.2 'Inter',sans-serif;margin-bottom:8px;}
.oh-breadcrumb p{color:rgba(255,255,255,.8);font-size:18px;margin:0;}

/* Section Title */
.oh-section-title{text-align:center;margin:50px 0 32px;}
.oh-section-title .pre-title{display:inline-block;background:rgba(30,187,163,.1);color:#1ebba3;border:1px solid rgba(30,187,163,.25);font:600 13px/1 'Inter',sans-serif;padding:8px 20px;border-radius:20px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.oh-section-title h2{font:800 32px/1.3 'Inter',sans-serif;color:#1c2b5e;}
.oh-section-title h2 span{color:#1ebba3;}

/* Category Header */
.oh-category-header{font:700 20px/1 'Inter',sans-serif;color:#1c2b5e;padding-bottom:12px;border-bottom:3px solid #1ebba3;margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.oh-category-header i{color:#1ebba3;}

/* Cards Area */
.oh-cards-area{padding:0 0 60px;background:#f8f9fa;}

/* Card */
.oh-card{display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:28px 22px 22px;border:1px solid #e8e8e8;text-decoration:none;color:inherit;transition:all .3s ease;cursor:pointer;height:100%;position:relative;overflow:hidden;}
.oh-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(30,187,163,.15);border-color:#1ebba3;}
.oh-card h5{font:700 20px/1.3 'Inter',sans-serif;color:#1c2b5e;margin:18px 0 10px;}
.oh-card p{font:400 15px/1.5 'Inter',sans-serif;color:#7C7A8A;flex-grow:1;margin:0;}
.oh-card-icon{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:32px;}
.oh-card-icon.icon-eye{background:rgba(30,187,163,.1);color:#1ebba3;}
.oh-card-icon.icon-read{background:rgba(228,62,86,.08);color:#e43e56;}
.oh-card-icon.icon-test{background:rgba(28,43,94,.08);color:#1c2b5e;}
.oh-card-tag{display:inline-block;font:600 12px/1 'Inter',sans-serif;padding:6px 14px;border-radius:6px;margin-top:16px;text-transform:uppercase;letter-spacing:.8px;}
.oh-card-tag.tag-eye{background:rgba(30,187,163,.1);color:#1ebba3;}
.oh-card-tag.tag-read{background:rgba(228,62,86,.08);color:#e43e56;}
.oh-card-tag.tag-test{background:rgba(28,43,94,.08);color:#1c2b5e;}
.oh-card-arrow{position:absolute;bottom:18px;right:18px;color:#1ebba3;font-size:1rem;opacity:.4;transition:all .3s;}
.oh-card:hover .oh-card-arrow{opacity:1;transform:translateX(4px);}

/* Exercise Panel */
.oh-exercise-area{padding:40px 0 60px;background:#f8f9fa;}
.oh-exercise-panel{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(28,43,94,.06);overflow:hidden;border:1px solid #e8e8e8;}
.oh-exercise-header{background:linear-gradient(135deg,#1c2b5e,#1ebba3);padding:28px 32px;color:#fff;}
.oh-exercise-header h3{font:700 24px/1 'Inter',sans-serif;margin:0 0 8px;}
.oh-exercise-header p{font:400 16px/1.4 'Inter',sans-serif;color:rgba(255,255,255,.8);margin:0;}

/* Canvas */
.oh-canvas-wrapper{display:flex;justify-content:center;padding:28px;background:#F0FAF8;}
#ohCanvas{border-radius:12px;border:2px solid #d6efe9;}

/* Controls */
.oh-controls{display:flex;align-items:center;gap:14px;padding:18px 28px;border-top:1px solid #eee;flex-wrap:wrap;background:#fafafa;}
.oh-btn{display:inline-flex;align-items:center;gap:6px;font:600 16px/1 'Inter',sans-serif;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;transition:all .2s;}
.oh-btn-primary{background:#1ebba3;color:#fff;}.oh-btn-primary:hover{background:#189e8a;}
.oh-btn-danger{background:#e43e56;color:#fff;}.oh-btn-danger:hover{background:#c73049;}
.oh-btn-success{background:#1c2b5e;color:#fff;}.oh-btn-success:hover{background:#152247;}
.oh-btn-secondary{background:#e8e8e8;color:#1c2b5e;}.oh-btn-secondary:hover{background:#d4d4d4;}
.oh-btn:disabled{opacity:.5;cursor:not-allowed;}
.oh-control-group{display:flex;align-items:center;gap:8px;font:500 15px/1 'Inter',sans-serif;color:#555;}
.oh-control-group input[type=range]{width:100px;accent-color:#1ebba3;}
.oh-control-group select{padding:8px 14px;border-radius:6px;border:1px solid #ddd;font-size:15px;}
.oh-timer{font:700 20px/1 'Inter',sans-serif;color:#1c2b5e;margin-left:auto;}

/* Exercise Content */
.oh-exercise-content{display:flex;flex-direction:column;align-items:center;padding:32px;min-height:200px;background:#F0FAF8;}
.oh-block-display{font:700 40px/1.6 'Inter',sans-serif;color:#1c2b5e;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;width:100%;}
.oh-tachistoscope{font:800 64px/1 'Inter',sans-serif;color:#1ebba3;min-height:80px;display:flex;align-items:center;justify-content:center;}
.oh-tach-input{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:360px;}
.oh-tach-input input{width:100%;padding:12px 16px;border:2px solid #d6efe9;border-radius:10px;font:500 18px/1 'Inter',sans-serif;text-align:center;outline:none;transition:border .2s;}
.oh-tach-input input:focus{border-color:#1ebba3;}
.oh-result-text{font:600 16px/1 'Inter',sans-serif;min-height:24px;}
.oh-result-text.correct{color:#1ebba3;}.oh-result-text.wrong{color:#e43e56;}
.oh-target-word{font:700 24px/1 'Inter',sans-serif;color:#1ebba3;margin-bottom:20px;background:rgba(30,187,163,.08);padding:10px 24px;border-radius:10px;}
.oh-word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:500px;}
.oh-word-cell{background:#fff;border:2px solid #e8e8e8;border-radius:10px;padding:14px 8px;text-align:center;font:600 16px/1 'Inter',sans-serif;color:#1c2b5e;cursor:pointer;transition:all .2s;user-select:none;}
.oh-word-cell:hover{border-color:#1ebba3;background:rgba(30,187,163,.04);}
.oh-word-cell.found{background:#1ebba3;color:#fff;border-color:#1ebba3;transform:scale(.95);}
.oh-word-cell.wrong-click{background:#fde8eb;border-color:#e43e56;animation:shake .3s;}
.oh-reading-text{font:400 20px/2 'Inter',sans-serif;color:#333;text-align:justify;max-width:760px;padding:30px;background:#fff;border-radius:12px;border:1px solid #e8e8e8;}
.oh-reading-result{text-align:center;padding:30px;}
.oh-speed{font:800 64px/1 'Inter',sans-serif;color:#1ebba3;}
.oh-speed-label{font:600 18px/1 'Inter',sans-serif;color:#7C7A8A;margin-top:6px;}
.oh-stat-value{font:700 18px/1 'Inter',sans-serif;color:#1ebba3;}

/* Fade In */
.oh-fade-in{animation:ohFadeIn .5s ease;}
@keyframes ohFadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}

/* Responsive */
@media(max-width:768px){
.oh-breadcrumb{padding:40px 0 28px;}.oh-breadcrumb h1{font-size:24px;}
.oh-section-title h2{font-size:24px;}
.oh-controls{gap:10px;padding:14px 16px;}
.oh-exercise-content{padding:20px 16px;}
.oh-word-grid{grid-template-columns:repeat(3,1fr);}
.oh-exercise-header{padding:20px 18px;}
.oh-canvas-wrapper{padding:16px;}
}